56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { act, createElement } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { describe, expect, it, vi } from 'vitest';
|
|
import { TableInsertPicker } from '@/components/edit/surfaces/slide/TableInsertPicker';
|
|
|
|
(
|
|
globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
|
|
).IS_REACT_ACT_ENVIRONMENT = true;
|
|
|
|
async function renderPicker(onPick = vi.fn()) {
|
|
const container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
const root = createRoot(container);
|
|
await act(async () => {
|
|
root.render(
|
|
createElement(TableInsertPicker, {
|
|
onPick,
|
|
getLabel: (rows: number, columns: number) => `${rows} x ${columns} Table`,
|
|
}),
|
|
);
|
|
});
|
|
return { container, root, onPick };
|
|
}
|
|
|
|
describe('TableInsertPicker', () => {
|
|
it('highlights the rectangle from the origin through the hovered size', async () => {
|
|
const { container, root } = await renderPicker();
|
|
|
|
expect(container.querySelectorAll('[data-table-insert-cell]')).toHaveLength(48);
|
|
const target = container.querySelector('[aria-label="2 x 3 Table"]') as HTMLButtonElement;
|
|
await act(async () => {
|
|
target.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
|
|
});
|
|
|
|
expect(container.querySelector('[data-testid="table-insert-dimensions"]')?.textContent).toBe(
|
|
'2 x 3 Table',
|
|
);
|
|
expect(container.querySelectorAll('[data-table-insert-cell][data-active="true"]')).toHaveLength(
|
|
6,
|
|
);
|
|
await act(async () => root.unmount());
|
|
container.remove();
|
|
});
|
|
|
|
it('returns the selected row and column count', async () => {
|
|
const { container, root, onPick } = await renderPicker();
|
|
const target = container.querySelector('[aria-label="4 x 5 Table"]') as HTMLButtonElement;
|
|
|
|
await act(async () => target.click());
|
|
expect(onPick).toHaveBeenCalledWith(4, 5);
|
|
await act(async () => root.unmount());
|
|
container.remove();
|
|
});
|
|
});
|