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.
22 lines
947 B
TypeScript
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();
|
|
});
|
|
});
|