test: update test

react-component · Jan 30, 2024 · ce61f3b · ce61f3b
1 parent 59d78ee
commit ce61f3b
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 129 deletions.
diff --git a/docs/examples/fixedColumns.tsx b/docs/examples/fixedColumns.tsx
@@ -15,7 +15,7 @@ const columns: ColumnType<RecordType>[] = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
   { title: 'title2', dataIndex: 'b', key: 'b', width: 100, ellipsis: true },
   { title: 'title3', dataIndex: 'c', key: 'c', fixed: 'left' },
-  { title: 'title4', dataIndex: 'b', key: 'd' },
+  { title: 'title4', dataIndex: 'b', key: 'd', fixed: 'left' },
   { title: 'title5', dataIndex: 'b', key: 'e' },
   { title: 'title6', dataIndex: 'b', key: 'f' },
   {

diff --git a/package.json b/package.json
@@ -62,15 +62,14 @@
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.2",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^12.1.5",
     "@types/enzyme": "^3.10.5",
-    "@types/react": "^18.0.28",
     "@types/jest": "^29.5.0",
+    "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.5",
     "@types/responselike": "^1.0.0",
     "@types/styled-components": "^5.1.32",
-    "@types/testing-library__jest-dom": "^6.0.0",
     "@umijs/fabric": "^4.0.1",
     "@vitest/coverage-c8": "^0.31.0",
     "cross-env": "^7.0.0",
@@ -105,7 +104,7 @@
     "regenerator-runtime": "^0.14.0",
     "styled-components": "^6.1.1",
     "typescript": "~5.3.0",
-    "vitest": "^0.31.0"
+    "vitest": "^1.2.2"
   },
   "lint-staged": {
     "**/*.{js,jsx,tsx,ts,md,json}": [

diff --git a/src/hooks/useColumns/index.tsx b/src/hooks/useColumns/index.tsx
@@ -88,30 +88,6 @@ function flatColumns<RecordType>(
     }, []);
 }
 
-function warningFixed(flattenColumns: readonly { fixed?: FixedType }[]) {
-  let allFixLeft = true;
-  for (let i = 0; i < flattenColumns.length; i += 1) {
-    const col = flattenColumns[i];
-    if (allFixLeft && col.fixed !== 'left') {
-      allFixLeft = false;
-    } else if (!allFixLeft && col.fixed === 'left') {
-      warning(false, `Index ${i - 1} of \`columns\` missing \`fixed='left'\` prop.`);
-      break;
-    }
-  }
-
-  let allFixRight = true;
-  for (let i = flattenColumns.length - 1; i >= 0; i -= 1) {
-    const col = flattenColumns[i];
-    if (allFixRight && col.fixed !== 'right') {
-      allFixRight = false;
-    } else if (!allFixRight && col.fixed === 'right') {
-      warning(false, `Index ${i + 1} of \`columns\` missing \`fixed='right'\` prop.`);
-      break;
-    }
-  }
-}
-
 function revertForRtl<RecordType>(columns: ColumnsType<RecordType>): ColumnsType<RecordType> {
   return columns.map(column => {
     const { fixed, ...restProps } = column;
@@ -294,11 +270,6 @@ function useColumns<RecordType>(
     return flatColumns(mergedColumns);
   }, [mergedColumns, direction, scrollWidth]);
 
-  // Only check out of production since it's waste for each render
-  if (process.env.NODE_ENV !== 'production') {
-    warningFixed(direction === 'rtl' ? flattenColumns.slice().reverse() : flattenColumns);
-  }
-
   // ========================= FillWidth ========================
   const [filledColumns, realScrollWidth] = useWidthColumns(
     flattenColumns,

diff --git a/src/hooks/useStickyOffsets.ts b/src/hooks/useStickyOffsets.ts
@@ -12,48 +12,14 @@ function useStickyOffsets<RecordType>(
   const stickyOffsets: StickyOffsets = useMemo(() => {
     const columnCount = flattenColumns.length;
 
-    // const leftOffsets: number[] = [];
-    // const rightOffsets: number[] = [];
-    // let left = 0;
-    // let right = 0;
-
-    // for (let start = 0; start < columnCount; start += 1) {
-    //   if (direction === 'rtl') {
-    //     // Left offset
-    //     rightOffsets[start] = right;
-    //     right += colWidths[start] || 0;
-
-    //     // Right offset
-    //     const end = columnCount - start - 1;
-    //     leftOffsets[end] = left;
-    //     left += colWidths[end] || 0;
-    //   } else {
-    //     // Left offset
-    //     leftOffsets[start] = left;
-    //     left += colWidths[start] || 0;
-
-    //     // Right offset
-    //     const end = columnCount - start - 1;
-    //     rightOffsets[end] = right;
-    //     right += colWidths[end] || 0;
-    //   }
-    // }
-
-    // console.log('leftOffsets', leftOffsets);
-    // console.log('rightOffsets', rightOffsets);
-    // // // console.log('flattenColumns', flattenColumns);
-
     const getOffsets = (startIndex: number, endIndex: number, offset: number) => {
       const offsets: number[] = [];
       let total = 0;
 
       for (let i = startIndex; i !== endIndex; i += offset) {
         offsets.push(total);
 
-        const col = flattenColumns[i];
-        console.log(i, col);
-
-        if (col.fixed) {
+        if (flattenColumns[i].fixed) {
           total += colWidths[i] || 0;
         }
       }
@@ -64,10 +30,6 @@ function useStickyOffsets<RecordType>(
     const startOffsets = getOffsets(0, columnCount, 1);
     const endOffsets = getOffsets(columnCount - 1, -1, -1).reverse();
 
-    // console.log('flattenColumns', flattenColumns);
-    // console.log('startOffsets', startOffsets);
-    // console.log('endOffsets', endOffsets);
-
     return direction === 'rtl'
       ? {
           left: endOffsets,

diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,6 @@
 import { EXPAND_COLUMN, INTERNAL_HOOKS } from './constant';
 import { FooterComponents as Summary } from './Footer';
-import type { ColumnType, Reference } from './interface';
+import type { ColumnType, ColumnsType, Reference } from './interface';
 import Column from './sugar/Column';
 import ColumnGroup from './sugar/ColumnGroup';
 import type { TableProps } from './Table';
@@ -23,6 +23,7 @@ export {
   type VirtualTableProps,
   type Reference,
   type ColumnType,
+  type ColumnsType,
 };
 
 export default Table;
diff --git a/tests/FixedColumn.spec.jsx → tests/FixedColumn.spec.tsx b/tests/FixedColumn.spec.jsx → tests/FixedColumn.spec.tsx
@@ -1,11 +1,16 @@
+import React from 'react';
 import { mount } from 'enzyme';
-import RcResizeObserver from 'rc-resize-observer';
+import { render } from '@testing-library/react';
+import RcResizeObserver, { _rs } from 'rc-resize-observer';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import { resetWarned } from 'rc-util/lib/warning';
 import { act } from 'react-dom/test-utils';
-import Table from '../src';
+import Table, { type ColumnsType } from '../src';
 import { safeAct } from './utils';
 
+function triggerResize(ele: HTMLElement) {
+  _rs([{ target: ele }] as any);
+}
+
 describe('Table.FixedColumn', () => {
   let domSpy;
   beforeEach(() => {
@@ -26,7 +31,7 @@ describe('Table.FixedColumn', () => {
     domSpy.mockRestore();
   });
 
-  const columns = [
+  const columns: ColumnsType = [
     { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
     {
       title: 'title2',
@@ -86,7 +91,7 @@ describe('Table.FixedColumn', () => {
                 {
                   data: wrapper.find('table ResizeObserver').first().props().data,
                   size: { width: 93, offsetWidth: 93 },
-                },
+                } as any,
               ]);
           });
           await safeAct(wrapper);
@@ -131,7 +136,7 @@ describe('Table.FixedColumn', () => {
             scrollWidth: 200,
             clientWidth: 100,
           },
-        });
+        } as any);
     });
     wrapper.update();
     expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeTruthy();
@@ -148,7 +153,7 @@ describe('Table.FixedColumn', () => {
             scrollWidth: 200,
             clientWidth: 100,
           },
-        });
+        } as any);
     });
     wrapper.update();
     expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeFalsy();
@@ -165,7 +170,7 @@ describe('Table.FixedColumn', () => {
             scrollWidth: 200,
             clientWidth: 100,
           },
-        });
+        } as any);
     });
     wrapper.update();
     expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeTruthy();
@@ -182,49 +187,13 @@ describe('Table.FixedColumn', () => {
             scrollWidth: 100,
             clientWidth: 100,
           },
-        });
+        } as any);
     });
     wrapper.update();
     expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeFalsy();
     expect(wrapper.find('.rc-table').hasClass('rc-table-ping-right')).toBeFalsy();
   });
 
-  describe('warning if fixed not continue', () => {
-    let errorSpy;
-
-    beforeAll(() => {
-      errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    });
-
-    beforeEach(() => {
-      resetWarned();
-      errorSpy.mockReset();
-    });
-
-    afterAll(() => {
-      errorSpy.mockRestore();
-    });
-
-    it('left', async () => {
-      mount(<Table columns={[{}, { fixed: 'left' }, {}]} />);
-      expect(errorSpy).toHaveBeenCalledWith(
-        "Warning: Index 0 of `columns` missing `fixed='left'` prop.",
-      );
-    });
-
-    it('right', () => {
-      mount(<Table columns={[{}, { fixed: 'right' }, {}]} />);
-      expect(errorSpy).toHaveBeenCalledWith(
-        "Warning: Index 2 of `columns` missing `fixed='right'` prop.",
-      );
-    });
-
-    it('RTL', () => {
-      mount(<Table columns={[{}, { fixed: 'right' }]} direction="rtl" />);
-      expect(errorSpy).not.toHaveBeenCalled();
-    });
-  });
-
   it('ellipsis will wrap additional dom', () => {
     const myColumns = [{ ...columns[0], ellipsis: true }];
     const wrapper = mount(<Table columns={myColumns} data={data} />);
@@ -282,4 +251,37 @@ describe('Table.FixedColumn', () => {
     await safeAct(wrapper);
     expect(wrapper.find('.rc-table-cell-fix-left-all')).toHaveLength(10);
   });
+
+  describe('cross fixed support', () => {
+    it('left', async () => {
+      const { container } = render(
+        <Table
+          columns={[{}, { fixed: 'left' }, { fixed: 'left' }]}
+          data={[{}]}
+          scroll={{ x: 200 }}
+        />,
+      );
+
+      act(() => {
+        Array.from(container.querySelectorAll<HTMLElement>('.rc-table-measure-row td')).forEach(
+          td => {
+            triggerResize(td);
+          },
+        );
+      });
+
+      await act(async () => {
+        vi.runAllTimers();
+        await Promise.resolve();
+      });
+
+      expect(container.querySelectorAll('tbody .rc-table-cell-fix-left')).toHaveLength(2);
+      expect(container.querySelectorAll('thead td')[1]).toHaveStyle({
+        left: '0px',
+      });
+      expect(container.querySelectorAll('thead td')[2]).toHaveStyle({
+        left: '1000px',
+      });
+    });
+  });
 });
diff --git a/tests/setup.ts b/tests/setup.ts
@@ -1,12 +1,4 @@
-import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
-import matchers from '@testing-library/jest-dom/matchers';
-import { expect } from 'vitest';
-
-declare module 'vitest' {
-  interface Assertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {}
-}
-
-expect.extend(matchers);
+import '@testing-library/jest-dom';
 
 // https://github.com/nickcolley/jest-axe/issues/147#issuecomment-758804533
 const { getComputedStyle } = window;

diff --git a/tsconfig.json b/tsconfig.json
@@ -12,7 +12,7 @@
       "@@/*": [".dumi/tmp/*"],
       "rc-table": ["src/index.ts"]
     },
-    "types": ["vitest/globals"]
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
   },
   "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"]
 }