diff --git a/src/plugin-hooks/tests/__snapshots__/useFilters.test.js.snap b/src/plugin-hooks/tests/__snapshots__/useFilters.test.js.snap new file mode 100644 index 0000000..792cada --- /dev/null +++ b/src/plugin-hooks/tests/__snapshots__/useFilters.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders a sortable table 1`] = ` +"Snapshot Diff: +Compared values have no visual difference." +`; + +exports[`renders a sortable table 2`] = ` +"Snapshot Diff: +Compared values have no visual difference." +`; diff --git a/src/plugin-hooks/tests/useFilters.test.js b/src/plugin-hooks/tests/useFilters.test.js new file mode 100644 index 0000000..87a1c95 --- /dev/null +++ b/src/plugin-hooks/tests/useFilters.test.js @@ -0,0 +1,157 @@ +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, fireEvent } from '@testing-library/react' +import { useTable } from '../../hooks/useTable' +import { useFilters } from '../useFilters' + +const data = [ + { + 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, + }, + { + firstName: 'jaylen', + lastName: 'linsley', + age: 26, + visits: 99, + status: 'In Relationship', + progress: 70, + }, +] + +const defaultColumn = { + Cell: ({ value, column: { id } }) => `${id}: ${value}`, + Filter: ({ filterValue, setFilter }) => ( + { + setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely + }} + placeholder="Search..." + /> + ), +} + +function Table({ columns, data }) { + const { getTableProps, headerGroups, rows, prepareRow } = useTable( + { + columns, + data, + defaultColumn, + }, + useFilters + ) + + return ( + + + {headerGroups.map(headerGroup => ( + + {headerGroup.headers.map(column => ( + + ))} + + ))} + + + {rows.map( + (row, i) => + prepareRow(row) || ( + + {row.cells.map(cell => ( + + ))} + + ) + )} + +
+ {column.render('Header')} + {column.render('Filter')} +
{cell.render('Cell')}
+ ) +} + +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 +} + +test('renders a sortable table', () => { + const { getByText, asFragment } = render() + + const beforeSort = asFragment() + + fireEvent.click(getByText('First Name')) + + const afterSort1 = asFragment() + + fireEvent.click(getByText('First Name')) + + const afterSort2 = asFragment() + + expect(beforeSort).toMatchDiffSnapshot(afterSort1) + expect(afterSort1).toMatchDiffSnapshot(afterSort2) +})