Set up some failing tests

configs/tests/jest.common.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('path')
 
 module.exports = {
   moduleDirectories: [
@@ -11,7 +11,9 @@ module.exports = {
     __dirname,
   ],
 
-  rootDir: path.resolve(__dirname, '../..'),
+  rootDir: path.resolve(__dirname, '../../'),
 
   roots: ['<rootDir>/src', __dirname],
-};
+
+  transformIgnorePatterns: ['node_modules'],
+}

configs/tests/jest.unit.js

@@ -1,4 +1,4 @@
-const commonConfig = require('./jest.common');
+const commonConfig = require('./jest.common')
 
 module.exports = {
   ...commonConfig,
@@ -7,9 +7,9 @@ module.exports = {
 
   coverageDirectory: '../../coverage',
 
-  testMatch: ['<rootDir>/tests/**/*.js'],
+  testMatch: ['<rootDir>/src/**/tests/**/*.js'],
 
   transform: {
-    // '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
   },
-};
+}

package.json

@@ -49,6 +49,8 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.5.5",
     "@svgr/rollup": "^4.3.2",
+    "@testing-library/dom": "^5.6.0",
+    "@testing-library/jest-dom": "^4.0.0",
     "@testing-library/react": "^8.0.7",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.x",

src/filterTypes.js

@@ -63,6 +63,7 @@ exact.autoRemove = val => typeof val === 'undefined'
 export const equals = (rows, id, filterValue) => {
   return rows.filter(row => {
     const rowValue = row.values[id]
+    // eslint-disable-next-line eqeqeq
     return rowValue == filterValue
   })
 }

src/hooks/tests/useTable.js

@@ -0,0 +1,111 @@
+import '@testing-library/react/cleanup-after-each'
+import '@testing-library/jest-dom/extend-expect'
+// NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required
+
+import React from 'react'
+import { render } from '@testing-library/react'
+import useTable from './useTable'
+
+function Table({ columns, data }) {
+  // Use the state and functions returned from useTable to build your UI
+  const { getTableProps, headerGroups, rows, prepareRow } = useTable({
+    columns,
+    data,
+  })
+
+  // Render the UI for your table
+  return (
+    <table {...getTableProps()}>
+      <thead>
+        {headerGroups.map(headerGroup => (
+          <tr {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map(column => (
+              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody>
+        {rows.map(
+          (row, i) =>
+            prepareRow(row) || (
+              <tr {...row.getRowProps()}>
+                {row.cells.map(cell => {
+                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                })}
+              </tr>
+            )
+        )}
+      </tbody>
+    </table>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(
+    () => [
+      {
+        firstName: 'tanner',
+        lastName: 'linsley',
+        age: 29,
+        visits: 100,
+        status: 'In Relationship',
+        progress: 50,
+      },
+    ],
+    []
+  )
+
+  return <Table columns={columns} data={data} />
+}
+
+test('renders a basic table', () => {
+  const { getByText } = render(<App />)
+
+  expect(getByText('tanner')).toBeInTheDocument()
+  expect(getByText('linsley')).toBeInTheDocument()
+  expect(getByText('29')).toBeInTheDocument()
+  expect(getByText('100')).toBeInTheDocument()
+  expect(getByText('In Relationship')).toBeInTheDocument()
+  expect(getByText('50')).toBeInTheDocument()
+})

src/plugin-hooks/tests/useSortBy.js

@@ -0,0 +1,146 @@
+import '@testing-library/react/cleanup-after-each'
+import '@testing-library/jest-dom/extend-expect'
+// NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required
+
+import React from 'react'
+import { render } from '@testing-library/react'
+import useTable from '../../hooks/useTable'
+import useSortBy from '../useSortBy'
+
+const data = React.useMemo(
+  () => [
+    {
+      firstName: 'tanner',
+      lastName: 'linsley',
+      age: 29,
+      visits: 100,
+      status: 'In Relationship',
+      progress: 50,
+    },
+    {
+      firstName: 'derek',
+      lastName: 'perkins',
+      age: 40,
+      visits: 40,
+      status: 'Single',
+      progress: 80,
+    },
+    {
+      firstName: 'joe',
+      lastName: 'bergevin',
+      age: 45,
+      visits: 20,
+      status: 'Complicated',
+      progress: 10,
+    },
+  ],
+  []
+)
+
+const defaultColumn = {
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
+}
+
+function Table({ columns, data }) {
+  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+    },
+    useSortBy
+  )
+
+  return (
+    <table {...getTableProps()}>
+      <thead>
+        {headerGroups.map(headerGroup => (
+          <tr {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map(column => (
+              // Add the sorting props to control sorting. For this example
+              // we can add them into the header props
+              <th {...column.getHeaderProps(column.getSortByToggleProps())}>
+                {column.render('Header')}
+                {/* Add a sort direction indicator */}
+                <span>
+                  {column.sorted ? (column.sortedDesc ? ' 🔽' : ' 🔼') : ''}
+                </span>
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody>
+        {rows.map(
+          (row, i) =>
+            prepareRow(row) || (
+              <tr {...row.getRowProps()}>
+                {row.cells.map(cell => {
+                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                })}
+              </tr>
+            )
+        )}
+      </tbody>
+    </table>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  return <Table columns={columns} data={data} />
+}
+
+test('renders a sortable table', () => {
+  const { getAllByText } = render(<App />)
+
+  const firstNames = getAllByText('firstName')
+
+  console.log(firstNames)
+
+  // expect(getByText('tanner')).toBeInTheDocument()
+  // expect(getByText('linsley')).toBeInTheDocument()
+  // expect(getByText('29')).toBeInTheDocument()
+  // expect(getByText('100')).toBeInTheDocument()
+  // expect(getByText('In Relationship')).toBeInTheDocument()
+  // expect(getByText('50')).toBeInTheDocument()
+})

src/plugin-hooks/useSortBy.js

@@ -89,7 +89,7 @@ export const useSortBy = props => {
 
       // Find any existing sortBy for this column
       const existingSortBy = sortBy.find(d => d.id === columnID)
-      const existingIndex = sortBy.findIndex(d => d.id == columnID)
+      const existingIndex = sortBy.findIndex(d => d.id === columnID)
       const hasDescDefined = typeof desc !== 'undefined' && desc !== null
 
       let newSortBy = []