From 9970a68a3573e3f2efc1c010533b13f5ce5311dd Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Thu, 28 May 2026 17:39:59 -0700
Subject: [PATCH] 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.
---
 .../src/__tests__/data-table.test.tsx         | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

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