74 lines
3.5 KiB
TypeScript
74 lines
3.5 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { act, createElement } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { describe, expect, it } from 'vitest';
|
|
import { ResizableResultTable } from '../../src/components/ResizableResultTable/ResizableResultTable';
|
|
|
|
function pointerEvent(type: string, pointerId: number, clientX: number): Event {
|
|
const event = new Event(type, { bubbles: true, cancelable: true });
|
|
Object.defineProperties(event, {
|
|
pointerId: { value: pointerId },
|
|
clientX: { value: clientX }
|
|
});
|
|
return event;
|
|
}
|
|
|
|
describe('ResizableResultTable', () => {
|
|
it('passt per Doppelklick an den Inhalt an und laesst die Trennlinie ziehen', () => {
|
|
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
|
const container = document.createElement('div');
|
|
const root = createRoot(container);
|
|
|
|
act(() => root.render(createElement(ResizableResultTable, {
|
|
enabled: true,
|
|
headers: ['First', 'Second']
|
|
}, createElement('tr', null,
|
|
createElement('td', null, 'A deliberately longer synthetic value'),
|
|
createElement('td', null, 'Short')
|
|
))));
|
|
|
|
const headerCells = Array.from(container.querySelectorAll('th')) as HTMLTableCellElement[];
|
|
const firstColumnCells = [headerCells[0], container.querySelectorAll('td')[0]] as HTMLTableCellElement[];
|
|
headerCells.forEach((cell, index) => {
|
|
cell.getBoundingClientRect = () => ({ width: index === 0 ? 120 : 140 } as DOMRect);
|
|
});
|
|
Object.defineProperty(firstColumnCells[0], 'scrollWidth', { configurable: true, value: 86 });
|
|
Object.defineProperty(firstColumnCells[1], 'scrollWidth', { configurable: true, value: 238 });
|
|
|
|
act(() => container.querySelector('.result-column-resizer')?.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true })));
|
|
expect(container.querySelector('col')?.getAttribute('width')).toBe('240');
|
|
expect(container.querySelector('table')?.classList.contains('has-custom-column-widths')).toBe(true);
|
|
|
|
let handle = container.querySelector('.result-column-resizer') as HTMLElement;
|
|
Object.assign(handle, {
|
|
setPointerCapture: () => undefined,
|
|
hasPointerCapture: () => false,
|
|
releasePointerCapture: () => undefined
|
|
});
|
|
act(() => handle.dispatchEvent(pointerEvent('pointerdown', 7, 100)));
|
|
handle = container.querySelector('.result-column-resizer') as HTMLElement;
|
|
act(() => handle.dispatchEvent(pointerEvent('pointermove', 7, 148)));
|
|
expect(container.querySelector('col')?.getAttribute('width')).toBe('168');
|
|
|
|
act(() => root.unmount());
|
|
});
|
|
|
|
it('unterstuetzt die Tastatur am fokussierbaren Trenner', () => {
|
|
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
|
const container = document.createElement('div');
|
|
const root = createRoot(container);
|
|
act(() => root.render(createElement(ResizableResultTable, {
|
|
enabled: true,
|
|
headers: ['First', 'Second']
|
|
}, createElement('tr', null, createElement('td', null, 'One'), createElement('td', null, 'Two')))));
|
|
const headers = Array.from(container.querySelectorAll('th')) as HTMLTableCellElement[];
|
|
headers.forEach(cell => { cell.getBoundingClientRect = () => ({ width: 100 } as DOMRect); });
|
|
|
|
act(() => container.querySelector('.result-column-resizer')?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })));
|
|
expect(container.querySelector('col')?.getAttribute('width')).toBe('116');
|
|
|
|
act(() => root.unmount());
|
|
});
|
|
});
|