From 15d8ba6a6a7995f7ec86403e470fa4b648fc15e6 Mon Sep 17 00:00:00 2001 From: Joao Pedro Henrique Date: Wed, 27 Jul 2022 16:27:49 -0300 Subject: [PATCH 1/4] tests: add a test for row selection feature --- .../__tests__/features/RowSelection.test.tsx | 122 ++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 packages/react-table/__tests__/features/RowSelection.test.tsx diff --git a/packages/react-table/__tests__/features/RowSelection.test.tsx b/packages/react-table/__tests__/features/RowSelection.test.tsx new file mode 100644 index 0000000000..d82553025c --- /dev/null +++ b/packages/react-table/__tests__/features/RowSelection.test.tsx @@ -0,0 +1,122 @@ +import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table' +import { fireEvent, render, screen } from '@testing-library/react' +import React from 'react' + +type Person = { + firstName: string + lastName: string + age: number + visits: number + status: string + progress: number +} + +const defaultData: Person[] = [ + { + firstName: 'tanner', + lastName: 'linsley', + age: 29, + visits: 100, + status: 'In Relationship', + progress: 50, + }, + { + firstName: 'joe', + lastName: 'bergevin', + age: 45, + visits: 20, + status: 'Complicated', + progress: 10, + }, +] + +const defaultColumns: ColumnDef[] = [ + { + id: 'select', + header: ({ table }) => { + return + }, + cell: ({ row }) => { + return + } + }, + { + header: 'First Name', + accessorKey: 'firstName', + }, +] + +const TableComponent = () => { + const table = useReactTable({ + data: defaultData, + columns: defaultColumns, + getCoreRowModel: getCoreRowModel(), + enableRowSelection: row => row.original.age > 40 + }) + + return + + {table.getHeaderGroups().map(headerGroup => ( + + {headerGroup.headers.map(header => ( + + ))} + + ))} + + + {table.getRowModel().rows.map(row => ( + + {row.getVisibleCells().map(cell => ( + + ))} + + ))} + +
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} +
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} +
+} + +test(`Select all do not select rows which are not available for selection`, () => { + render() + + const [title, notSelected, selected] = screen.getAllByRole('checkbox') + + // Let's trigger a select all + fireEvent.click(screen.getByTestId('select-all')) + + // Assert everything - except the not available - is selected + expect(title).toBePartiallyChecked(); + expect(notSelected).not.toBeChecked(); + expect(selected).toBeChecked(); + + // Let's unselect all + fireEvent.click(screen.getByTestId('select-all')) + + // Now everything is unchecked again + expect(title).not.toBePartiallyChecked(); + expect(notSelected).not.toBeChecked(); + expect(selected).not.toBeChecked(); +}) From aada2a71b7807ba0340f035d874e51302f7e250b Mon Sep 17 00:00:00 2001 From: Joao Pedro Henrique Date: Wed, 27 Jul 2022 16:31:35 -0300 Subject: [PATCH 2/4] ci: add legacy peer deps call in install command --- .github/workflows/pr.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index f704244bb6..5fb5546f96 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -13,7 +13,7 @@ jobs: with: node-version: ${{ matrix.node }} - run: | - npm install + npm install --legacy-peer-deps npm run build npm run typecheck npm run test From a1fc975a9d8ee8ab67641e384169bb887707ebc3 Mon Sep 17 00:00:00 2001 From: Joao Pedro Henrique Date: Wed, 27 Jul 2022 16:39:57 -0300 Subject: [PATCH 3/4] tests: add tests for select all and select a single row --- .../__tests__/features/RowSelection.test.tsx | 54 +++++++++++++++++-- 1 file changed, 49 insertions(+), 5 deletions(-) diff --git a/packages/react-table/__tests__/features/RowSelection.test.tsx b/packages/react-table/__tests__/features/RowSelection.test.tsx index d82553025c..6eae76d899 100644 --- a/packages/react-table/__tests__/features/RowSelection.test.tsx +++ b/packages/react-table/__tests__/features/RowSelection.test.tsx @@ -1,6 +1,6 @@ -import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table' +import { ColumnDef, flexRender, getCoreRowModel, TableOptions, useReactTable } from '@tanstack/react-table' import { fireEvent, render, screen } from '@testing-library/react' -import React from 'react' +import React, { FC } from 'react' type Person = { firstName: string @@ -57,12 +57,12 @@ const defaultColumns: ColumnDef[] = [ }, ] -const TableComponent = () => { +const TableComponent: FC<{ options?: Partial> }> = ({ options = {} }) => { const table = useReactTable({ data: defaultData, columns: defaultColumns, getCoreRowModel: getCoreRowModel(), - enableRowSelection: row => row.original.age > 40 + ...options }) return @@ -100,7 +100,7 @@ const TableComponent = () => { } test(`Select all do not select rows which are not available for selection`, () => { - render() + render( row.original.age > 40 }} />) const [title, notSelected, selected] = screen.getAllByRole('checkbox') @@ -120,3 +120,47 @@ test(`Select all do not select rows which are not available for selection`, () = expect(notSelected).not.toBeChecked(); expect(selected).not.toBeChecked(); }) + +test(`Select all when all rows are available for selection`, () => { + render() + + const [title, rowOne, rowTwo] = screen.getAllByRole('checkbox') + + // Let's trigger a select all + fireEvent.click(screen.getByTestId('select-all')) + + // Assert everything - except the not available - is selected + expect(title).toBeChecked(); + expect(rowOne).toBeChecked(); + expect(rowTwo).toBeChecked(); + + // Let's unselect all + fireEvent.click(screen.getByTestId('select-all')) + + // Now everything is unchecked again + expect(title).not.toBeChecked(); + expect(rowOne).not.toBeChecked(); + expect(rowTwo).not.toBeChecked(); +}) + +test(`Select a single row`, () => { + render() + + const [title, rowOne, rowTwo] = screen.getAllByRole('checkbox') + + // Let's trigger a select all + fireEvent.click(rowOne) + + // Assert everything - except the not available - is selected + expect(title).toBePartiallyChecked(); + expect(rowOne).toBeChecked(); + expect(rowTwo).not.toBeChecked(); + + // Let's unselect all + fireEvent.click(rowOne) + + // Now everything is unchecked again + expect(title).not.toBeChecked(); + expect(rowOne).not.toBeChecked(); + expect(rowTwo).not.toBeChecked(); +}) \ No newline at end of file From fd80eb8a9d584c2895885bddf7be7d77188ad137 Mon Sep 17 00:00:00 2001 From: Joao Pedro Henrique Date: Wed, 27 Jul 2022 16:41:03 -0300 Subject: [PATCH 4/4] refactor: fix wrong comments --- .../react-table/__tests__/features/RowSelection.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-table/__tests__/features/RowSelection.test.tsx b/packages/react-table/__tests__/features/RowSelection.test.tsx index 6eae76d899..e5f5fb6661 100644 --- a/packages/react-table/__tests__/features/RowSelection.test.tsx +++ b/packages/react-table/__tests__/features/RowSelection.test.tsx @@ -129,7 +129,7 @@ test(`Select all when all rows are available for selection`, () => { // Let's trigger a select all fireEvent.click(screen.getByTestId('select-all')) - // Assert everything - except the not available - is selected + // Assert all the rows are selected expect(title).toBeChecked(); expect(rowOne).toBeChecked(); expect(rowTwo).toBeChecked(); @@ -148,15 +148,15 @@ test(`Select a single row`, () => { const [title, rowOne, rowTwo] = screen.getAllByRole('checkbox') - // Let's trigger a select all + // Let's trigger a select in row one fireEvent.click(rowOne) - // Assert everything - except the not available - is selected + // Assert only the row we've clicked before is selected expect(title).toBePartiallyChecked(); expect(rowOne).toBeChecked(); expect(rowTwo).not.toBeChecked(); - // Let's unselect all + // Let's unselect the row one fireEvent.click(rowOne) // Now everything is unchecked again