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', () => {
|
||||
it('pins a column to the left via the header toggle', () => {
|
||||
render(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user