test(react/table): correct table test cases

Mezzanine-UI · Dec 5, 2023 · 7747328 · 7747328
1 parent 8ed6368
commit 7747328
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 13 deletions.
diff --git a/packages/react/src/Table/Table.spec.tsx b/packages/react/src/Table/Table.spec.tsx
@@ -33,6 +33,7 @@ const defaultSources: DataType[] = [{
 }];
 
 const defaultColumns: TableColumn<DataType>[] = [{
+  key: 'foo',
   dataIndex: 'foo',
   title: 'foo',
 }];

diff --git a/packages/react/src/Table/TableBody.spec.tsx b/packages/react/src/Table/TableBody.spec.tsx
@@ -23,6 +23,7 @@ const defaultSources: DataType[] = [{
 }];
 
 const defaultColumns: TableColumn<DataType>[] = [{
+  key: 'foo',
   dataIndex: 'foo',
   title: 'foo',
 }];

diff --git a/packages/react/src/Table/TableBodyRow.spec.tsx b/packages/react/src/Table/TableBodyRow.spec.tsx
@@ -81,13 +81,16 @@ describe('<TableBodyRow />', () => {
 
   it('ellipsis control should set to true by default, and false when no data/disabled', () => {
     const columns: TableColumn<DataType>[] = [{
+      key: 'name',
       dataIndex: 'name',
       title: 'name',
     }, {
+      key: 'not-existed',
       dataIndex: 'not-existed',
       title: 'bar',
       ellipsis: true,
     }, {
+      key: 'name',
       dataIndex: 'name',
       title: 'foo',
       ellipsis: false,
@@ -118,6 +121,7 @@ describe('<TableBodyRow />', () => {
 
   describe('columns are given', () => {
     const columns: TableColumn<DataType>[] = [{
+      key: 'name',
       dataIndex: 'name',
       title: 'foo',
       headerClassName: undefined,
@@ -127,11 +131,12 @@ describe('<TableBodyRow />', () => {
       width: 80,
       align: 'center',
     }, {
-      dataIndex: 'bar',
+      key: 'bar',
       title: 'bar',
       align: 'start',
       render: () => 'bar-render',
     }, {
+      key: 'foo.bar',
       dataIndex: 'foo.bar',
       title: 'foo',
     }];
@@ -301,8 +306,10 @@ describe('<TableBodyRow />', () => {
                         name: 'bar',
                       }],
                       columns: [{
+                        key: 'name',
                         dataIndex: 'name',
                       }, {
+                        key: 'name2',
                         dataIndex: 'name',
                       }],
                     }),
@@ -351,8 +358,10 @@ describe('<TableBodyRow />', () => {
                     expandedRowRender: () => ({
                       dataSource: [],
                       columns: [{
+                        key: 'name',
                         dataIndex: 'name',
                       }, {
+                        key: 'name2',
                         dataIndex: 'name',
                       }],
                     }),
@@ -391,6 +400,7 @@ describe('<TableBodyRow />', () => {
   describe('exceptions handle', () => {
     it('column.width/column.align not given', () => {
       const columns: TableColumn<DataType>[] = [{
+        key: 'name',
         dataIndex: 'name',
         title: 'name',
       }];

diff --git a/packages/react/src/Table/TableExpandedTable.spec.tsx b/packages/react/src/Table/TableExpandedTable.spec.tsx
@@ -28,11 +28,13 @@ const dataSource: DataType[] = [{
 }];
 
 const columns: TableColumn<DataType>[] = [{
+  key: 'name',
   dataIndex: 'name',
   title: 'name',
   width: 80,
   align: 'center',
 }, {
+  key: 'age',
   dataIndex: 'age',
   title: 'foo',
   ellipsis: false,
@@ -49,9 +51,12 @@ const expandedSources: DataType[] = [{
 }];
 
 const expandedColumns: TableColumn<DataType>[] = [{
+  key: 'name',
   dataIndex: 'name',
+  title: '',
 }, {
-  dataIndex: 'name',
+  key: 'name',
+  title: '',
   render: () => 'render name',
 }];
 

diff --git a/packages/react/src/Table/TableHeader.spec.tsx b/packages/react/src/Table/TableHeader.spec.tsx
@@ -36,6 +36,7 @@ describe('<TableHeader />', () => {
 
   describe('columns are given', () => {
     const columns: TableColumn<DataType>[] = [{
+      key: 'foo',
       dataIndex: 'foo',
       title: 'foo',
       headerClassName: undefined,
@@ -44,8 +45,8 @@ describe('<TableHeader />', () => {
       width: 80,
       align: 'center',
     }, {
+      key: 'bar',
       dataIndex: 'bar',
-      title: 'bar',
       align: 'start',
       renderTitle: () => 'bar',
       sorter: () => 1,
@@ -158,6 +159,7 @@ describe('<TableHeader />', () => {
   describe('exceptions handle', () => {
     it('column.width/column.align not given', () => {
       const columns: TableColumn<DataType>[] = [{
+        key: 'foo',
         dataIndex: 'foo',
         title: 'foo',
       }];

diff --git a/packages/react/src/Table/editable/TableEditRenderWrapper.spec.tsx b/packages/react/src/Table/editable/TableEditRenderWrapper.spec.tsx
@@ -42,6 +42,7 @@ describe('<TableEditRenderWrapper />', () => {
         }}
       >
         <TableEditRenderWrapper
+          key="edit"
           dataIndex={defaultDataIndex}
           rowData={defaultRowData}
           setCellProps={setCellProps}

diff --git a/packages/react/src/Table/sorting/TableSortingIcon.spec.tsx b/packages/react/src/Table/sorting/TableSortingIcon.spec.tsx
@@ -23,13 +23,14 @@ type DataType = {
   key: string;
 };
 
-const dataIndex = 'foo';
+const key = 'foo';
+const defaultColumn = { key: 'foo', title: '', dataIndex: '' };
 
 describe('<TableSortingIcon />', () => {
   afterEach(cleanupHook);
 
   it('should bind host class', () => {
-    const { getHostHTMLElement } = render(<TableSortingIcon column={{ dataIndex: 'foo' }} />);
+    const { getHostHTMLElement } = render(<TableSortingIcon column={defaultColumn} />);
     const element = getHostHTMLElement();
 
     expect(element.classList.contains('mzn-table__icon')).toBeTruthy();
@@ -47,12 +48,12 @@ describe('<TableSortingIcon />', () => {
                 ...defaultMockingContextValue,
                 sorting: {
                   ...defaultMockingContextValue.sorting,
-                  sortedOn: dataIndex,
+                  sortedOn: key,
                   sortedType: mode,
                 },
               }}
             >
-              <TableSortingIcon column={{ dataIndex }} />
+              <TableSortingIcon column={defaultColumn} />
             </TableContext.Provider>,
           );
           const element = getHostHTMLElement();
@@ -89,12 +90,12 @@ describe('<TableSortingIcon />', () => {
             sorting: {
               ...defaultMockingContextValue.sorting,
               onSort,
-              sortedOn: dataIndex,
+              sortedOn: key,
               sortedType: 'none',
             },
           }}
         >
-          <TableSortingIcon column={{ dataIndex }} />
+          <TableSortingIcon column={defaultColumn} />
         </TableContext.Provider>,
       );
       const element = getHostHTMLElement();
@@ -103,7 +104,7 @@ describe('<TableSortingIcon />', () => {
         fireEvent.click(element);
       });
 
-      expect(valueGetFromOnSort).toStrictEqual({ dataIndex });
+      expect(valueGetFromOnSort).toStrictEqual(defaultColumn);
     });
 
     it('should icon remain default state when is not sorting on its column', () => {
@@ -113,12 +114,12 @@ describe('<TableSortingIcon />', () => {
             ...defaultMockingContextValue,
             sorting: {
               ...defaultMockingContextValue.sorting,
-              sortedOn: `${dataIndex}-bar`,
+              sortedOn: `${key}-bar`,
               sortedType: 'asc',
             },
           }}
         >
-          <TableSortingIcon column={{ dataIndex }} />
+          <TableSortingIcon column={defaultColumn} />
         </TableContext.Provider>,
       );
       const element = getHostHTMLElement();
@@ -137,7 +138,7 @@ describe('<TableSortingIcon />', () => {
     beforeEach(() => {
       const { getHostHTMLElement } = render(
         <TableContext.Provider value={{}}>
-          <TableSortingIcon column={{ dataIndex: 'foo' }} />
+          <TableSortingIcon column={defaultColumn} />
         </TableContext.Provider>,
       );
       const element = getHostHTMLElement();

diff --git a/packages/react/src/Table/sorting/useTableSorting.spec.tsx b/packages/react/src/Table/sorting/useTableSorting.spec.tsx
@@ -57,6 +57,7 @@ describe('useTableSorting()', () => {
 
     TestRenderer.act(() => {
       onChange({
+        key: 'age',
         dataIndex: 'age',
         sorter: numberSorter,
       });
@@ -70,6 +71,7 @@ describe('useTableSorting()', () => {
 
     TestRenderer.act(() => {
       onChange({
+        key: 'age',
         dataIndex: 'age',
         sorter: numberSorter,
       });
@@ -83,6 +85,7 @@ describe('useTableSorting()', () => {
 
     TestRenderer.act(() => {
       onChange({
+        key: 'age',
         dataIndex: 'age',
         sorter: numberSorter,
       });
@@ -109,6 +112,7 @@ describe('useTableSorting()', () => {
 
     TestRenderer.act(() => {
       onChange({
+        key: 'age',
         dataIndex: 'age',
         sorter: numberSorter,
       });
@@ -121,6 +125,7 @@ describe('useTableSorting()', () => {
 
     TestRenderer.act(() => {
       onChange({
+        key: 'count',
         dataIndex: 'count',
         sorter: numberSorter,
       });
@@ -154,6 +159,7 @@ describe('useTableSorting()', () => {
 
     TestRenderer.act(() => {
       onChange({
+        key: 'age',
         dataIndex: 'age',
         sorter: numberSorter,
         onSorted: onAgeSorted,
@@ -208,6 +214,7 @@ describe('useTableSorting()', () => {
 
     TestRenderer.act(() => {
       onChange({
+        key: 'age',
         dataIndex: 'age',
       });
     });