Migrate Table to TypeScript

packages/circuit-ui/components/Table/Table.spec.js → packages/circuit-ui/components/Table/Table.spec.tsx

@@ -15,8 +15,17 @@
 
 import React from 'react';
 
+import {
+  create,
+  render,
+  renderToHtml,
+  axe,
+  act,
+  userEvent,
+} from '../../util/test-utils';
+import Badge from '../Badge';
+
 import Table from './Table';
-import { ASCENDING } from './constants';
 
 const headers = [
   { children: 'Letters', sortable: true },
@@ -69,7 +78,24 @@ describe('Table', () => {
     });
 
     it('should not render a scrollable table if the rowHeaders prop is true', () => {
-      const actual = create(<Table headers={headers} rows={rows} />);
+      const actual = create(<Table headers={headers} rows={rows} rowHeaders />);
+      expect(actual).toMatchSnapshot();
+    });
+
+    it('should render with component cells', () => {
+      const actual = create(
+        <Table
+          headers={['Name', 'Type']}
+          rows={[
+            ['Apple', 'Fruit'],
+            ['Broccoli', 'Vegetable'],
+            [
+              'Chickpeas',
+              { children: <Badge color={'warning'}>Unknown</Badge> },
+            ],
+          ]}
+        />,
+      );
       expect(actual).toMatchSnapshot();
     });
   });
@@ -83,7 +109,7 @@ describe('Table', () => {
       );
 
       act(() => {
-        fireEvent.click(getAllByTestId('table-row')[0]);
+        userEvent.click(getAllByTestId('table-row')[0]);
       });
 
       expect(onRowClickMock).toHaveBeenCalledTimes(1);
@@ -92,60 +118,58 @@ describe('Table', () => {
 
     describe('sorting', () => {
       it('should sort a column in ascending order', () => {
-        const { getAllByTestId } = render(
-          <Table rows={rows} headers={headers} />,
+        const { getAllByRole } = render(
+          <Table rows={rows} headers={headers} rowHeaders={false} />,
         );
 
-        const letterHeaderEl = getAllByTestId('table-header')[0];
-        const cellEls = getAllByTestId('table-cell');
+        const letterHeaderEl = getAllByRole('columnheader')[0];
+        const cellEls = getAllByRole('cell');
 
         act(() => {
-          fireEvent.click(letterHeaderEl);
+          userEvent.click(letterHeaderEl);
         });
 
         const sortedRow = ['a', 'b', 'c'];
 
-        rows.forEach((row, index) => {
-          // There's a hidden header cell that we need to skip with +1.
-          const cellIndex = rowLength * index + 1;
+        rows.forEach((_row, index) => {
+          const cellIndex = rowLength * index;
           expect(cellEls[cellIndex]).toHaveTextContent(sortedRow[index]);
         });
       });
 
       it('should sort a column in descending order', () => {
-        const { getAllByTestId } = render(
-          <Table rows={rows} headers={headers} />,
+        const { getAllByRole } = render(
+          <Table rows={rows} headers={headers} rowHeaders={false} />,
         );
 
-        const letterHeaderEl = getAllByTestId('table-header')[0];
-        const cellEls = getAllByTestId('table-cell');
+        const letterHeaderEl = getAllByRole('columnheader')[0];
+        const cellEls = getAllByRole('cell');
 
         act(() => {
-          fireEvent.click(letterHeaderEl);
+          userEvent.click(letterHeaderEl);
         });
         act(() => {
-          fireEvent.click(letterHeaderEl);
+          userEvent.click(letterHeaderEl);
         });
 
         const sortedRow = ['c', 'b', 'a'];
 
-        rows.forEach((row, index) => {
-          // There's a hidden header cell that we need to skip with +1.
-          const cellIndex = rowLength * index + 1;
+        rows.forEach((_row, index) => {
+          const cellIndex = rowLength * index;
           expect(cellEls[cellIndex]).toHaveTextContent(sortedRow[index]);
         });
       });
 
       it('should call a custom sort callback', () => {
         const onSortByMock = jest.fn();
         const index = 0;
-        const nextDirection = ASCENDING;
+        const nextDirection = 'ascending';
         const { getAllByTestId } = render(
           <Table onSortBy={onSortByMock} headers={headers} rows={rows} />,
         );
 
         act(() => {
-          fireEvent.click(getAllByTestId('table-header')[0]);
+          userEvent.click(getAllByTestId('table-header')[0]);
         });
 
         expect(onSortByMock).toHaveBeenCalledTimes(1);

packages/circuit-ui/components/Table/Table.stories.js → packages/circuit-ui/components/Table/Table.stories.tsx

@@ -19,6 +19,7 @@ import { action } from '@storybook/addon-actions';
 import Badge from '../Badge';
 
 import docs from './Table.docs.mdx';
+import { TableProps } from './Table';
 
 import Table, { TableHeader, TableRow, TableCell } from '.';
 
@@ -31,7 +32,7 @@ export default {
   },
 };
 
-export const Base = ({ onSortBy, ...args }) => <Table {...args} />;
+export const Base = ({ onSortBy, ...args }: TableProps) => <Table {...args} />;
 
 Base.args = {
   headers: [
@@ -43,7 +44,7 @@ Base.args = {
   rows: [
     {
       'cells': [
-        'Lorem ipsum dolor',
+        'Lorem ipsum',
         {
           'children': '12/01/2017',
           'sortByValue': 0,
@@ -55,13 +56,13 @@ Base.args = {
       'data-selector': 'item-1',
     },
     [
-      'Ipsum dolor sit amet',
+      'Consectetur adipiscing',
       { children: '13/01/2017', sortByValue: 1 },
       'Virtual Terminal',
       { children: 'Enabled', align: 'right' },
     ],
     [
-      'Dolor sit amet, consectetur adipiscing',
+      'Dolor sit amet',
       { children: '14/01/2017', sortByValue: 2 },
       '-',
       { children: 'Disabled', align: 'right' },
@@ -71,7 +72,9 @@ Base.args = {
   onRowClick: action('onRowClick'),
 };
 
-export const WithComponentRows = ({ onSortBy, ...args }) => <Table {...args} />;
+export const WithComponentRows = ({ onSortBy, ...args }: TableProps) => (
+  <Table {...args} />
+);
 
 WithComponentRows.args = {
   headers: ['Name', 'Type'],
@@ -82,7 +85,9 @@ WithComponentRows.args = {
   ],
 };
 
-export const Sortable = ({ onSortBy, ...args }) => <Table {...args} />;
+export const Sortable = ({ onSortBy, ...args }: TableProps) => (
+  <Table {...args} />
+);
 
 Sortable.args = {
   headers: [
@@ -114,13 +119,17 @@ Sortable.args = {
   ],
 };
 
-export const CustomSort = (args) => (
+export const CustomSort = (args: TableProps) => (
   <Table
     {...args}
-    onSortBy={(i, direction, rows) =>
+    onSortBy={(_i, direction, rows) =>
       direction === 'ascending'
-        ? rows.sort((a, b) => a[0].localeCompare(b[0]))
-        : rows.sort((a, b) => b[0].localeCompare(a[0]))
+        ? rows.sort(
+            (a, b) => typeof a[0] === 'string' && a[0].localeCompare(b[0]),
+          )
+        : rows.sort(
+            (a, b) => typeof b[0] === 'string' && b[0].localeCompare(a[0]),
+          )
     }
   />
 );