vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2026-08-11 20:40:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

test(usegroupby/useexpanded): improved tests for useGroupBy/useExpanded

Browse Source
This commit is contained in:
tannerlinsley
2019-07-30 17:00:59 -06:00
parent 12e7b3220d
commit 2c5610d885
24 changed files with 11620 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/useTable.js
+10 -6
View File
@@ -142,19 +142,24 @@ export const useTable = (props, ...plugins) => {
() => {
if (debug) console.time('getAccessedRows')
// Access the row's data
const accessRow = (originalRow, i, depth = 0) => {
const accessRow = (originalRow, i, depth = 0, parentPath = []) => {
// Keep the original reference around
const original = originalRow
// Make the new path for the row
const path = [...parentPath, i]
// Process any subRows
const subRows = originalRow[subRowsKey]
? originalRow[subRowsKey].map((d, i) => accessRow(d, i, depth + 1))
? originalRow[subRowsKey].map((d, i) =>
accessRow(d, i, depth + 1, path)
)
: []
const row = {
original,
index: i,
path: [i], // used to create a key for each row even if not nested
path, // used to create a key for each row even if not nested
subRows,
depth,
cells: [{}], // This is a dummy cell
@@ -316,10 +321,9 @@ export const useTable = (props, ...plugins) => {
// any rows the user wishes to be displayed.
instanceRef.current.prepareRow = row => {
const { path } = row
row.getRowProps = props =>
mergeProps(
{ key: ['row', ...path].join('_') },
{ key: ['row', ...row.path].join('_') },
applyPropHooks(
instanceRef.current.hooks.getRowProps,
row,
@@ -342,7 +346,7 @@ export const useTable = (props, ...plugins) => {
// Give each cell a getCellProps base
cell.getCellProps = props => {
const columnPathStr = [...path, column.id].join('_')
const columnPathStr = [...row.path, column.id].join('_')
return mergeProps(
{
key: ['cell', columnPathStr].join('_'),
src/plugin-hooks/tests/__snapshots__/useExpanded.test.js.snap
+714
View File
@@ -0,0 +1,714 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders an expandable table 1`] = `
"Snapshot Diff:
- First value
+ Second value
@@ -1,10 +1,12 @@
<DocumentFragment>
<pre>
<code>
{
- \\"expanded\\": {}
+ \\"expanded\\": {
+ \\"0\\": true
+ }
}
</code>
</pre>
<table
class=\\"\\"
@@ -82,10 +84,53 @@
<td
class=\\"\\"
>
<span
style=\\"cursor: pointer; padding-left: 0rem;\\"
+ >
+ 👇
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ >
+ tanner
+ </td>
+ <td
+ class=\\"\\"
+ >
+ linsley
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 29
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 100
+ </td>
+ <td
+ class=\\"\\"
+ >
+ In Relationship
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 50
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ >
+ <td
+ class=\\"\\"
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 2rem;\\"
>
👉
</span>
</td>
<td
@@ -115,10 +160,139 @@
</td>
<td
class=\\"\\"
>
50
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ >
+ <td
+ class=\\"\\"
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 2rem;\\"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ >
+ derek
+ </td>
+ <td
+ class=\\"\\"
+ >
+ perkins
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 40
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 40
+ </td>
+ <td
+ class=\\"\\"
+ >
+ Single
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 80
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ >
+ <td
+ class=\\"\\"
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 2rem;\\"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ >
+ joe
+ </td>
+ <td
+ class=\\"\\"
+ >
+ bergevin
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 45
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 20
+ </td>
+ <td
+ class=\\"\\"
+ >
+ Complicated
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 10
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ >
+ <td
+ class=\\"\\"
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 2rem;\\"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ >
+ jaylen
+ </td>
+ <td
+ class=\\"\\"
+ >
+ linsley
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 26
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 99
+ </td>
+ <td
+ class=\\"\\"
+ >
+ In Relationship
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 70
</td>
</tr>
<tr
class=\\"\\"
>"
`;
exports[`renders an expandable table 2`] = `
"Snapshot Diff:
- First value
+ Second value
@@ -1,11 +1,13 @@
<DocumentFragment>
<pre>
<code>
{
\\"expanded\\": {
- \\"0\\": true
+ \\"0\\": {
+ \\"0\\": true
+ }
}
}
</code>
</pre>
<table
@@ -127,10 +129,53 @@
<td
class=\\"\\"
>
<span
style=\\"cursor: pointer; padding-left: 2rem;\\"
+ >
+ 👇
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ >
+ tanner
+ </td>
+ <td
+ class=\\"\\"
+ >
+ linsley
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 29
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 100
+ </td>
+ <td
+ class=\\"\\"
+ >
+ In Relationship
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 50
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ >
+ <td
+ class=\\"\\"
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 4rem;\\"
>
👉
</span>
</td>
<td
@@ -160,10 +205,139 @@
</td>
<td
class=\\"\\"
>
50
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ >
+ <td
+ class=\\"\\"
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 4rem;\\"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ >
+ derek
+ </td>
+ <td
+ class=\\"\\"
+ >
+ perkins
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 40
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 40
+ </td>
+ <td
+ class=\\"\\"
+ >
+ Single
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 80
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ >
+ <td
+ class=\\"\\"
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 4rem;\\"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ >
+ joe
+ </td>
+ <td
+ class=\\"\\"
+ >
+ bergevin
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 45
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 20
+ </td>
+ <td
+ class=\\"\\"
+ >
+ Complicated
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 10
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ >
+ <td
+ class=\\"\\"
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 4rem;\\"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ >
+ jaylen
+ </td>
+ <td
+ class=\\"\\"
+ >
+ linsley
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 26
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 99
+ </td>
+ <td
+ class=\\"\\"
+ >
+ In Relationship
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 70
</td>
</tr>
<tr
class=\\"\\"
>"
`;
exports[`renders an expandable table 3`] = `
"Snapshot Diff:
- First value
+ Second value
@@ -2,11 +2,13 @@
<pre>
<code>
{
\\"expanded\\": {
\\"0\\": {
- \\"0\\": true
+ \\"0\\": {
+ \\"0\\": true
+ }
}
}
}
</code>
</pre>
@@ -172,10 +174,53 @@
<td
class=\\"\\"
>
<span
style=\\"cursor: pointer; padding-left: 4rem;\\"
+ >
+ 👇
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ >
+ tanner
+ </td>
+ <td
+ class=\\"\\"
+ >
+ linsley
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 29
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 100
+ </td>
+ <td
+ class=\\"\\"
+ >
+ In Relationship
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 50
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ >
+ <td
+ class=\\"\\"
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 6rem;\\"
>
👉
</span>
</td>
<td
@@ -205,10 +250,139 @@
</td>
<td
class=\\"\\"
>
50
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ >
+ <td
+ class=\\"\\"
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 6rem;\\"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ >
+ derek
+ </td>
+ <td
+ class=\\"\\"
+ >
+ perkins
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 40
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 40
+ </td>
+ <td
+ class=\\"\\"
+ >
+ Single
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 80
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ >
+ <td
+ class=\\"\\"
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 6rem;\\"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ >
+ joe
+ </td>
+ <td
+ class=\\"\\"
+ >
+ bergevin
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 45
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 20
+ </td>
+ <td
+ class=\\"\\"
+ >
+ Complicated
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 10
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ >
+ <td
+ class=\\"\\"
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 6rem;\\"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ >
+ jaylen
+ </td>
+ <td
+ class=\\"\\"
+ >
+ linsley
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 26
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 99
+ </td>
+ <td
+ class=\\"\\"
+ >
+ In Relationship
+ </td>
+ <td
+ class=\\"\\"
+ >
+ 70
</td>
</tr>
<tr
class=\\"\\"
>"
`;
exports[`renders an expandable table 4`] = `
"Snapshot Diff:
- First value
+ Second value
@@ -3,11 +3,13 @@
<code>
{
\\"expanded\\": {
\\"0\\": {
\\"0\\": {
- \\"0\\": true
+ \\"0\\": {
+ \\"0\\": true
+ }
}
}
}
}
</code>
@@ -218,11 +220,11 @@
class=\\"\\"
>
<span
style=\\"cursor: pointer; padding-left: 6rem;\\"
>
- 👉
+ 👇
</span>
</td>
<td
class=\\"\\"
>
@@ -250,10 +252,30 @@
</td>
<td
class=\\"\\"
>
50
+ </td>
+ </tr>
+ <tr>
+ <td
+ colspan=\\"7\\"
+ >
+ <pre>
+ <code>
+ {
+ \\"values\\": {
+ \\"firstName\\": \\"tanner\\",
+ \\"lastName\\": \\"linsley\\",
+ \\"age\\": 29,
+ \\"visits\\": 100,
+ \\"status\\": \\"In Relationship\\",
+ \\"progress\\": 50
+ }
+ }
+ </code>
+ </pre>
</td>
</tr>
<tr
class=\\"\\"
>"
`;
src/plugin-hooks/tests/__snapshots__/useGroupBy.test.js.snap
+2 -2
View File
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders a filterable table 1`] = `
exports[`renders a groupable table 1`] = `
"Snapshot Diff:
- First value
+ Second value
@@ -207,7 +207,7 @@ exports[`renders a filterable table 1`] = `
</DocumentFragment>"
`;
exports[`renders a filterable table 2`] = `
exports[`renders a groupable table 2`] = `
"Snapshot Diff:
- First value
+ Second value
src/plugin-hooks/tests/useExpanded.test.js
+207
View File
@@ -0,0 +1,207 @@
import '@testing-library/react/cleanup-after-each'
import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import { useTable } from '../../hooks/useTable'
import { useExpanded } from '../useExpanded'
const makeData = () => [
{
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 data = makeData()
data[0].subRows = makeData()
data[0].subRows[0].subRows = makeData()
data[0].subRows[0].subRows[0].subRows = makeData()
function Table({ columns: userColumns, data, SubComponent }) {
const {
getTableProps,
headerGroups,
rows,
prepareRow,
columns,
state: [{ expanded }],
} = useTable(
{
columns: userColumns,
data,
},
useExpanded
)
return (
<>
<pre>
<code>{JSON.stringify({ expanded }, null, 2)}</code>
</pre>
<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)
const { key, ...rowProps } = row.getRowProps()
return (
<React.Fragment key={key}>
<tr {...rowProps}>
{row.cells.map(cell => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
)
})}
</tr>
{!row.subRows.length && row.isExpanded ? (
<tr>
<td colSpan={columns.length}>{SubComponent({ row })}</td>
</tr>
) : null}
</React.Fragment>
)
})}
</tbody>
</table>
</>
)
}
function App() {
const columns = React.useMemo(
() => [
{
Header: () => null,
id: 'expander',
Cell: ({ row }) => (
<span
style={{
cursor: 'pointer',
paddingLeft: `${row.depth * 2}rem`,
}}
onClick={() => row.toggleExpanded()}
>
{row.isExpanded ? '👇' : '👉'}
</span>
),
},
{
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}
SubComponent={({ row }) => (
<pre>
<code>{JSON.stringify({ values: row.values }, null, 2)}</code>
</pre>
)}
/>
)
}
test('renders an expandable table', () => {
const { getAllByText, asFragment } = render(<App />)
let expandButtons = getAllByText('👉')
const beforeGrouping = asFragment()
fireEvent.click(expandButtons[0])
const afterGrouping1 = asFragment()
expandButtons = getAllByText('👉')
fireEvent.click(expandButtons[0])
const afterGrouping2 = asFragment()
expandButtons = getAllByText('👉')
fireEvent.click(expandButtons[0])
const afterGrouping3 = asFragment()
expandButtons = getAllByText('👉')
fireEvent.click(expandButtons[0])
const afterGrouping4 = asFragment()
expect(beforeGrouping).toMatchDiffSnapshot(afterGrouping1)
expect(afterGrouping1).toMatchDiffSnapshot(afterGrouping2)
expect(afterGrouping2).toMatchDiffSnapshot(afterGrouping3)
expect(afterGrouping3).toMatchDiffSnapshot(afterGrouping4)
})
src/plugin-hooks/tests/useGroupBy.test.js
+1 -1
View File
@@ -187,7 +187,7 @@ function App() {
return <Table columns={columns} data={data} />
}
test('renders a filterable table', () => {
test('renders a groupable table', () => {
const { getAllByText, asFragment } = render(<App />)
const groupByButtons = getAllByText('👊')
src/plugin-hooks/useExpanded.js
+3 -4
View File
@@ -43,8 +43,7 @@ function useMain(instance) {
}
hooks.prepareRow.push(row => {
const { path } = row
row.toggleExpanded = set => toggleExpandedByPath(path, set)
row.toggleExpanded = set => toggleExpandedByPath(row.path, set)
return row
})
@@ -68,13 +67,13 @@ function useMain(instance) {
row.canExpand = row.subRows && !!row.subRows.length
if (row.isExpanded && row.subRows && row.subRows.length) {
row.subRows.forEach((row, i) => handleRow(row))
row.subRows.forEach(handleRow)
}
return row
}
rows.forEach(row => handleRow(row))
rows.forEach(handleRow)
return expandedRows
},
src/utils.js
+3 -3
View File
@@ -23,7 +23,7 @@ export function decorateColumn(column, defaultColumn, parent, depth, index) {
accessor = row => getBy(row, accessorString)
}
if (!id && typeof Header === 'string') {
if (!id && typeof Header === 'string' && Header) {
id = Header
}
@@ -38,8 +38,8 @@ export function decorateColumn(column, defaultColumn, parent, depth, index) {
}
column = {
Header: ({ id }) => id,
Cell: ({ value }) => typeof value !== 'undefined' ? value : '',
Header: () => null,
Cell: ({ value }) => (typeof value !== 'undefined' ? value : ''),
show: true,
...column,
id,