diff --git a/packages/data-table/src/__tests__/data-table.test.tsx b/packages/data-table/src/__tests__/data-table.test.tsx index 0fc8d992..11f07020 100644 --- a/packages/data-table/src/__tests__/data-table.test.tsx +++ b/packages/data-table/src/__tests__/data-table.test.tsx @@ -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( + + ); + 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( + + ); + 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(