test: add case

Author: linxianxi

README.md

@@ -118,6 +118,7 @@ React.render(<Table columns={columns} data={data} />, mountNode);
 | sticky | boolean \| {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window \| HTMLElement } | false | stick header and scroll bar |
 | summary | (data: readonly RecordType[]) => React.ReactNode | - | `summary` attribute in `table` component is used to define the summary row. |
 | rowHoverable | boolean | true | Table hover interaction |
+| columnResizable | boolean | false | Column resizable |
 
 ## Column Props
 
@@ -132,6 +133,7 @@ React.render(<Table columns={columns} data={data} />, mountNode);
 | fixed | String \| Boolean |  | this column will be fixed when table scroll horizontally: true or 'left' or 'right' |
 | align | String |  | specify how cell content is aligned |
 | ellipsis | Boolean |  | specify whether cell content be ellipsized |
+| resizable | Boolean \| { minWidth?: number } |  | column resize config |
 | rowScope | 'row' \| 'rowgroup' |  | Set scope attribute for all cells in this column |
 | onCell | Function(record, index) |  | Set custom props per each cell. |
 | onHeaderCell | Function(record) |  | Set custom props per each header cell. |

tests/Resizable.spec.jsx

@@ -35,8 +35,8 @@ describe('Table.resizable', () => {
       const [widthMap, setWidthMap] = React.useState(new Map());
 
       const columns = [
-        { key: 'a', dataIndex: 'a', width: 100 },
-        { key: 'b', dataIndex: 'b', width: 100 },
+        { key: 'a', dataIndex: 'a', width: 400 },
+        { key: 'b', dataIndex: 'b', width: 400 },
       ].map(col => ({ ...col, width: widthMap.get(col.key ?? col.dataIndex) || col.width }));
 
       return (
@@ -69,11 +69,11 @@ describe('Table.resizable', () => {
     await triggerResize([
       {
         data: wrapper.find('ResizeObserver').at(1).props().data,
-        size: { width: 100, offsetWidth: 100 },
+        size: { width: 400, offsetWidth: 400 },
       },
       {
         data: wrapper.find('ResizeObserver').at(2).props().data,
-        size: { width: 100, offsetWidth: 100 },
+        size: { width: 400, offsetWidth: 400 },
       },
     ]);
 
@@ -99,15 +99,15 @@ describe('Table.resizable', () => {
 
     expect(onColumnResizeComplete).toHaveBeenCalledWith({
       columnKey: 'a',
-      width: 200,
+      width: 500,
       columnKeyWidths: [
-        { columnKey: 'a', width: 200 },
-        { columnKey: 'b', width: 100 },
+        { columnKey: 'a', width: 500 },
+        { columnKey: 'b', width: 400 },
       ],
     });
 
-    expect(wrapper.find('colgroup col').at(0).props().style.width).toBe(200);
-    expect(wrapper.find('colgroup col').at(1).props().style.width).toBe(100);
+    expect(wrapper.find('colgroup col').at(0).props().style.width).toBe(500);
+    expect(wrapper.find('colgroup col').at(1).props().style.width).toBe(400);
   });
 
   it('columns total width < componentWidth', async () => {
@@ -194,4 +194,86 @@ describe('Table.resizable', () => {
     expect(wrapper.find('colgroup col').at(0).props().style.width).toBe(300);
     expect(wrapper.find('colgroup col').at(1).props().style.width).toBe(500);
   });
+
+  it('minWidth should be worked', async () => {
+    const onColumnResizeComplete = vi.fn();
+
+    const App = () => {
+      const [widthMap, setWidthMap] = React.useState(new Map());
+
+      const columns = [
+        { key: 'a', dataIndex: 'a', width: 800, resizable: { minWidth: 400 } },
+        { key: 'b', dataIndex: 'b', width: 800 },
+      ].map(col => ({ ...col, width: widthMap.get(col.key ?? col.dataIndex) || col.width }));
+
+      return (
+        <Table
+          columnResizable
+          data={[{ a: '123', b: '123', key: '1' }]}
+          columns={columns}
+          scroll={{ x: columns.reduce((t, c) => t + c.width, 0) }}
+          onColumnResizeComplete={info => {
+            setWidthMap(prev => {
+              const result = new Map(prev);
+              info.columnKeyWidths.forEach(i => {
+                result.set(i.columnKey, i.width);
+              });
+              return result;
+            });
+            onColumnResizeComplete(info);
+          }}
+        />
+      );
+    };
+    const wrapper = mount(<App />);
+
+    async function triggerResize(resizeList) {
+      wrapper.find(RcResizeObserver.Collection).first().props().onBatchResize(resizeList);
+      await safeAct(wrapper);
+      wrapper.update();
+    }
+
+    await triggerResize([
+      {
+        data: wrapper.find('ResizeObserver').at(1).props().data,
+        size: { width: 800, offsetWidth: 800 },
+      },
+      {
+        data: wrapper.find('ResizeObserver').at(2).props().data,
+        size: { width: 800, offsetWidth: 800 },
+      },
+    ]);
+
+    wrapper.find('.rc-table-cell-resize-handle').first().simulate('mousedown', { pageX: 0 });
+
+    const mousemoveEvent = new Event('mousemove');
+    mousemoveEvent.pageX = -1000;
+
+    await act(async () => {
+      document.body.dispatchEvent(mousemoveEvent);
+      await Promise.resolve();
+      wrapper.update();
+    });
+
+    const mouseupEvent = new Event('mouseup');
+    mouseupEvent.pageX = -1000;
+
+    await act(async () => {
+      document.body.dispatchEvent(mouseupEvent);
+      await Promise.resolve();
+      wrapper.update();
+    });
+
+    expect(onColumnResizeComplete).toHaveBeenCalledWith({
+      columnKey: 'a',
+      width: 400,
+      columnKeyWidths: [
+        { columnKey: 'a', width: 400 },
+        { columnKey: 'b', width: 800 },
+      ],
+    });
+
+    expect(wrapper.find('colgroup col').at(0).props().style.width).toBe(400);
+    expect(wrapper.find('colgroup col').at(1).props().style.width).toBe(800);
+  });
 });