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 ( +
| + {column.render('Header')} + {column.render('Filter')} + | + ))} +
|---|
| {cell.render('Cell')} | + ))} +