test: add case

Author: linxianxi

docs/examples/virtual.tsx

@@ -218,28 +218,42 @@ const Demo = () => {
 
       <VirtualTable
         virtual={{ x: true }}
-        columns={columns}
+        columns={[
+          {
+            dataIndex: 'a',
+            width: 100,
+            className: 'a',
+          },
+          {
+            dataIndex: 'b',
+            width: 200,
+          },
+          {
+            dataIndex: 'c',
+            width: 300,
+          },
+          {
+            dataIndex: 'd',
+            width: 400,
+          },
+        ]}
         // expandedRowRender={({ b, c }) => b || c}
-        scroll={{ x: 1300, y: 200 }}
+        scroll={{
+          x: 1000,
+          y: 200,
+        }}
+        style={{ width: 200 }}
         data={data}
         // data={[]}
         rowKey="indexKey"
-        expandable={{
-          expandedRowRender: () => 2333,
-          columnWidth: 60,
-          expandedRowClassName: () => 'good-one',
-        }}
+        // expandable={{
+        //   expandedRowRender: () => 2333,
+        //   columnWidth: 60,
+        //   expandedRowClassName: () => 'good-one',
+        // }}
         // onRow={() => ({ className: 'rowed' })}
         rowClassName="nice-try"
-        getContainerWidth={(ele, width) => {
-          // Minus border
-          const borderWidth = getComputedStyle(
-            ele.querySelector('.rc-table-tbody'),
-          ).borderInlineStartWidth;
-          const mergedWidth = width - parseInt(borderWidth, 10);
-
-          return mergedWidth;
-        }}
+        getContainerWidth={(ele, width) => 200}
         ref={tblRef}
       />
     </div>

tests/Virtual.spec.tsx

@@ -41,7 +41,7 @@ describe('Table.Virtual', () => {
       scrollLeft: {
         get: () => {
           scrollLeftCalled = true;
-          return 100;
+          return 0;
         },
         set: () => {},
       },
@@ -443,4 +443,51 @@ describe('Table.Virtual', () => {
     fireEvent.scroll(container.querySelector('.rc-table-tbody-virtual-holder')!);
     expect(onScroll).toHaveBeenCalled();
   });
+
+  it('horizontal virtual', async () => {
+    const { container } = getTable({
+      virtual: { x: true },
+      columns: [
+        {
+          width: 100,
+          className: 'a',
+        },
+        {
+          width: 50,
+          className: 'b',
+        },
+        {
+          width: 100,
+          className: 'c',
+        },
+        {
+          width: 50,
+          className: 'd',
+        },
+      ],
+      scroll: {
+        x: 300,
+        y: 10,
+      },
+      getContainerWidth: () => 200,
+      data: [{}],
+    });
+
+    resize(container.querySelector('.rc-table'));
+
+    await waitFakeTimer();
+
+    expect(container.querySelector('.rc-table-row').children.length).toBe(3);
+    expect(container.querySelector('.rc-table-row').children[0].classList).toContain('a');
+    expect(container.querySelector('.rc-table-row').children[1].classList).toContain('b');
+    expect(container.querySelector('.rc-table-row').children[2].classList).toContain('c');
+
+    fireEvent.wheel(container.querySelector('.rc-table-tbody-virtual-holder')!, {
+      deltaX: 100,
+    });
+    expect(container.querySelector('.rc-table-row').children.length).toBe(3);
+    expect(container.querySelector('.rc-table-row').children[0].classList).toContain('b');
+    expect(container.querySelector('.rc-table-row').children[1].classList).toContain('c');
+    expect(container.querySelector('.rc-table-row').children[2].classList).toContain('d');
+  });
 });