test(data-table): cover column resize + reorder (9.C.3)
Adds drag-resize and header drag-reorder cases against the shipped 0.1.0 implementation. data-table suite now 12/12.
This commit is contained in:
parent
a55ea16370
commit
9970a68a35
@ -156,6 +156,54 @@ describe('DataTable — row selection + bulk actions', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('DataTable — column resizing', () => {
|
||||||
|
it('exposes a resize separator that updates column width on drag', () => {
|
||||||
|
render(
|
||||||
|
<DataTable
|
||||||
|
columns={COLUMNS}
|
||||||
|
data={DATA}
|
||||||
|
getRowId={getRowId}
|
||||||
|
enableColumnResizing
|
||||||
|
enableFilter={false}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
const nameHeader = screen.getByRole('button', { name: 'Name' }).closest('th') as HTMLElement;
|
||||||
|
const startWidth = nameHeader.style.width;
|
||||||
|
const handle = screen.getByLabelText('Resize name');
|
||||||
|
fireEvent.mouseDown(handle, { clientX: 100 });
|
||||||
|
fireEvent.mouseMove(document, { clientX: 180 });
|
||||||
|
fireEvent.mouseUp(document);
|
||||||
|
expect(nameHeader.style.width).not.toBe(startWidth);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('DataTable — column reordering', () => {
|
||||||
|
it('reorders columns via header drag-and-drop', () => {
|
||||||
|
render(
|
||||||
|
<DataTable
|
||||||
|
columns={COLUMNS}
|
||||||
|
data={DATA}
|
||||||
|
getRowId={getRowId}
|
||||||
|
enableColumnReorder
|
||||||
|
enableFilter={false}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
const headerRow = screen.getAllByRole('row')[0]!;
|
||||||
|
const headerText = () =>
|
||||||
|
within(headerRow)
|
||||||
|
.getAllByRole('columnheader')
|
||||||
|
.map(th => th.textContent);
|
||||||
|
expect(headerText()[0]).toContain('Name');
|
||||||
|
|
||||||
|
const nameTh = screen.getByRole('button', { name: 'Name' }).closest('th')!;
|
||||||
|
const ageTh = screen.getByRole('button', { name: 'Age' }).closest('th')!;
|
||||||
|
fireEvent.dragStart(nameTh);
|
||||||
|
fireEvent.dragOver(ageTh);
|
||||||
|
fireEvent.drop(ageTh);
|
||||||
|
expect(headerText()[0]).toContain('Age');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('DataTable — column pinning', () => {
|
describe('DataTable — column pinning', () => {
|
||||||
it('pins a column to the left via the header toggle', () => {
|
it('pins a column to the left via the header toggle', () => {
|
||||||
render(
|
render(
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user