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:
saravanakumardb1 2026-05-28 17:39:59 -07:00
parent a55ea16370
commit 9970a68a35

View File

@ -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(