openpencil/packages/op-web-sdk-react/test/design-view.test.tsx
Kayshen-X 199d9bbec9 feat(sdk): add React + Vue adapters for op-web-sdk
Plan 3 of the web embedding SDK: @zseven-w/op-web-sdk-react and -vue — thin
read-only framework adapters over the TS core. Each: <DesignView> (canvas +
viewer lifecycle), provider/inject of OpViewer, and read-only
useDocument/useViewport/useActivePage. React via useSyncExternalStore
(cache-invalidate-on-event); Vue via an async shallowRef provider so children
inject the viewer after load. Self-contained (no pen-* deps; framework peer);
React 5/5 + Vue 4/4 tests; both tsc clean.
2026-06-19 21:01:27 +08:00

22 lines
947 B
TypeScript

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, waitFor } from '@testing-library/react';
import { makeMockViewer } from './mock-core.js';
const mock = makeMockViewer();
vi.mock('@zseven-w/op-web-sdk', () => ({ createViewer: vi.fn(async () => mock.viewer) }));
import { DesignView } from '../src/index.js';
import { createViewer } from '@zseven-w/op-web-sdk';
describe('DesignView', () => {
beforeEach(() => vi.clearAllMocks());
it('creates a viewer on mount and destroys on unmount', async () => {
const onLoad = vi.fn();
const { unmount, container } = render(<DesignView doc='{"version":"1.0"}' onLoad={onLoad} />);
expect(container.querySelector('canvas')).toBeTruthy();
await waitFor(() => expect(createViewer).toHaveBeenCalledTimes(1));
await waitFor(() => expect(onLoad).toHaveBeenCalledWith(mock.viewer));
unmount();
expect(mock.viewer.destroy).toHaveBeenCalled();
});
});