From 3570f013688fa14cd6f6bdef0b45a1872aef7c59 Mon Sep 17 00:00:00 2001 From: Cindy Lau Date: Mon, 16 Aug 2021 11:28:43 -0400 Subject: [PATCH] Modernized tests - ContextualSaveBar and DataTable components (Cell, Navigation & DataTable) --- UNRELEASED.md | 1 + .../tests/ContextualSaveBar.test.tsx | 22 +- .../components/Cell/tests/Cell.test.tsx | 67 +++-- .../Navigation/tests/Navigation.test.tsx | 7 +- .../DataTable/tests/DataTable.test.tsx | 279 +++++++++--------- 5 files changed, 192 insertions(+), 184 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index cc1d32e37c2..d0ac97e44ae 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -70,5 +70,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for Image and Icon components ([#4418](https://github.com/Shopify/polaris-react/pull/4418)) - Modernized tests for EventListener and EmptySearch components([#4423](https://github.com/Shopify/polaris-react/pull/4423)) - Modernized tests for Pane, Section, PositionedOverlay, SingleThumb, RangeSlider, and ConnectedFilter components ([#4429](https://github.com/Shopify/polaris-react/pull/4429)) +- Modernized tests for ContextualSaveBar and DataTable and its subcomponents ([#4397](https://github.com/Shopify/polaris-react/pull/4397)) ### Deprecations diff --git a/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx b/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx index e224806d268..5fe2e71f675 100644 --- a/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx +++ b/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import {mount} from 'test-utilities'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mount, mountWithApp} from 'test-utilities'; import {ContextualSaveBar} from '../ContextualSaveBar'; @@ -18,7 +16,7 @@ describe('', () => { removeContextualSaveBar: jest.fn(), }; - mountWithAppProvider(, { + mountWithApp(, { frame: mockFrameContext, }); expect(mockFrameContext.setContextualSaveBar).toHaveBeenCalledWith({ @@ -32,7 +30,7 @@ describe('', () => { removeContextualSaveBar: jest.fn(), }; - const frame = mountWithAppProvider(, { + const frame = mountWithApp(, { frame: mockFrameContext, }); expect(mockFrameContext.removeContextualSaveBar).not.toHaveBeenCalled(); @@ -46,10 +44,9 @@ describe('', () => { removeContextualSaveBar: jest.fn(), }; - const contextualSaveBar = mountWithAppProvider( - , - {frame: mockFrameContext}, - ); + const contextualSaveBar = mountWithApp(, { + frame: mockFrameContext, + }); const newProps = { saveAction: {content: 'Save', onAction: noop, loading: true}, discardAction: {content: 'Discard', onAction: noop}, @@ -68,10 +65,9 @@ describe('', () => { removeContextualSaveBar: jest.fn(), }; - const contextualSaveBar = mountWithAppProvider( - , - {frame: mockFrameContext}, - ); + const contextualSaveBar = mountWithApp(, { + frame: mockFrameContext, + }); expect(mockFrameContext.setContextualSaveBar).toHaveBeenCalledTimes(1); contextualSaveBar.setProps({...props}); diff --git a/src/components/DataTable/components/Cell/tests/Cell.test.tsx b/src/components/DataTable/components/Cell/tests/Cell.test.tsx index 3d46f66db8f..d8bbe8cd6e7 100644 --- a/src/components/DataTable/components/Cell/tests/Cell.test.tsx +++ b/src/components/DataTable/components/Cell/tests/Cell.test.tsx @@ -1,7 +1,6 @@ import React, {ReactElement} from 'react'; import {CaretUpMinor, CaretDownMinor} from '@shopify/polaris-icons'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities/react-testing'; import {Icon} from '../../../..'; import {Cell} from '../Cell'; @@ -20,8 +19,8 @@ describe('', () => { const cellMarkup =

{cellContent}

; const cell = mountWithTable(); - expect(cell.find('p')).toHaveLength(1); - expect(cell.text()).toBe(cellContent); + expect(cell).toContainReactComponent('p'); + expect(cell).toContainReactText(cellContent); }); }); @@ -29,7 +28,7 @@ describe('', () => { it('renders a table heading element when true', () => { const cell = mountWithTable(); - expect(cell.find('th')).toHaveLength(1); + expect(cell).toContainReactComponent('th'); }); }); @@ -37,7 +36,7 @@ describe('', () => { it('renders a table heading element when true', () => { const cell = mountWithTable(); - expect(cell.find('th')).toHaveLength(1); + expect(cell).toContainReactComponent('th'); }); }); @@ -54,7 +53,9 @@ describe('', () => { />, ); - expect(cell.find('th').prop('aria-sort')).toBe(sortDirection); + expect(cell).toContainReactComponent('th', { + 'aria-sort': sortDirection, + }); }); it('sets the aria-sort attribute to none when the table is not currently sorted by that column', () => { @@ -69,7 +70,9 @@ describe('', () => { />, ); - expect(cell.find('th').prop('aria-sort')).toBe('none'); + expect(cell).toContainReactComponent('th', { + 'aria-sort': 'none', + }); }); }); @@ -77,13 +80,13 @@ describe('', () => { it('renders an Icon when table is sortable by that column', () => { const cell = mountWithTable(); - expect(cell.find(Icon)).toHaveLength(1); + expect(cell).toContainReactComponent(Icon); }); it('renders no Icon when table is not sortable by that column', () => { const cell = mountWithTable(); - expect(cell.find(Icon)).not.toHaveLength(1); + expect(cell).not.toContainReactComponent(Icon); }); }); @@ -100,7 +103,9 @@ describe('', () => { />, ); - expect(cell.find(Icon).prop('source')).toBe(CaretDownMinor); + expect(cell).toContainReactComponent(Icon, { + source: CaretDownMinor, + }); }); it('renders an up caret Icon when defaultSortDirection is ascending', () => { @@ -114,7 +119,9 @@ describe('', () => { />, ); - expect(cell.find(Icon).prop('source')).toBe(CaretUpMinor); + expect(cell).toContainReactComponent(Icon, { + source: CaretUpMinor, + }); }); }); @@ -124,7 +131,9 @@ describe('', () => { , ); - expect(cell.find(Icon).prop('source')).toBe(CaretUpMinor); + expect(cell).toContainReactComponent(Icon, { + source: CaretUpMinor, + }); }); it('renders an Icon with an accessibility label indicating the next sort direction is descending', () => { @@ -132,9 +141,9 @@ describe('', () => { , ); - expect(cell.find(Icon).prop('accessibilityLabel')).toBe( - 'sort descending by', - ); + expect(cell).toContainReactComponent(Icon, { + accessibilityLabel: 'sort descending by', + }); }); }); @@ -150,7 +159,9 @@ describe('', () => { />, ); - expect(cell.find(Icon).prop('source')).toBe(CaretDownMinor); + expect(cell).toContainReactComponent(Icon, { + source: CaretDownMinor, + }); }); it('renders an Icon with an accessibility label indicating the next sort direction is ascending', () => { @@ -164,9 +175,9 @@ describe('', () => { />, ); - expect(cell.find(Icon).prop('accessibilityLabel')).toBe( - 'sort ascending by', - ); + expect(cell).toContainReactComponent(Icon, { + accessibilityLabel: 'sort ascending by', + }); }); }); }); @@ -185,7 +196,9 @@ describe('', () => { />, ); - expect(cell.find(Icon).prop('source')).toBe(CaretUpMinor); + expect(cell).toContainReactComponent(Icon, { + source: CaretUpMinor, + }); }); }); describe('when set to ascending', () => { @@ -200,7 +213,9 @@ describe('', () => { />, ); - expect(cell.find(Icon).prop('source')).toBe(CaretUpMinor); + expect(cell).toContainReactComponent(Icon, { + source: CaretUpMinor, + }); }); }); @@ -216,7 +231,9 @@ describe('', () => { />, ); - expect(cell.find(Icon).prop('source')).toBe(CaretDownMinor); + expect(cell).toContainReactComponent(Icon, { + source: CaretDownMinor, + }); }); }); }); @@ -236,7 +253,7 @@ describe('', () => { />, ); - trigger(cell.find('button'), 'onClick'); + cell.find('button')?.trigger('onClick'); expect(sortSpy).toHaveBeenCalledTimes(1); }); @@ -244,7 +261,7 @@ describe('', () => { }); function mountWithTable

(node: ReactElement) { - return mountWithAppProvider

( + return mountWithApp

( diff --git a/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx b/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx index a16b3687ac9..abee7b5779d 100644 --- a/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx +++ b/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx @@ -1,6 +1,5 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities/react-testing'; import {Button} from 'components'; import {Navigation} from '../Navigation'; @@ -13,13 +12,13 @@ describe('', () => { {leftEdge: 357, rightEdge: 474, isVisible: true}, ]; - const navigation = mountWithAppProvider( + const navigation = mountWithApp( , ); - expect(navigation.find(Button)).toHaveLength(2); + expect(navigation).toContainReactComponentTimes(Button, 2); }); }); diff --git a/src/components/DataTable/tests/DataTable.test.tsx b/src/components/DataTable/tests/DataTable.test.tsx index ac3f8eddf58..e34163ec53c 100644 --- a/src/components/DataTable/tests/DataTable.test.tsx +++ b/src/components/DataTable/tests/DataTable.test.tsx @@ -1,7 +1,5 @@ import React from 'react'; import {timer} from '@shopify/jest-dom-mocks'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; import {mountWithApp} from 'test-utilities'; import {Checkbox} from 'components'; @@ -80,7 +78,7 @@ describe('', () => { 'text', 'numeric', ]; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( ', () => { />, ); - const cells = dataTable.find(Cell); - const firstColumnCells = cells.filterWhere( + const cells = dataTable.findAll(Cell); + const firstColumnCells = cells.filter( (cell) => cell.prop('firstColumn') === true, ); - const secondColumnCells = cells.filterWhere( + const secondColumnCells = cells.filter( (cell) => cell.prop('firstColumn') !== true, ); @@ -113,23 +111,23 @@ describe('', () => { describe('headings', () => { it('renders a single table header row', () => { const headings = ['Heading 1', 'Heading 2', 'Heading 3']; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - expect(dataTable.find('thead tr')).toHaveLength(1); + expect(dataTable.find('thead')).toContainReactComponentTimes('tr', 1); }); it('renders each header Cell with the content provided', () => { const headings = ['Heading 1', 'Heading 2', 'Heading 3']; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - const headingCells = dataTable.find('thead tr').find(Cell); + const headingCells = dataTable.find('thead')!.find('tr')!.findAll(Cell); headingCells.forEach((headingCell, headingCellIndex) => - expect(headingCell.text()).toBe(headings[headingCellIndex]), + expect(headingCell).toContainReactText(headings[headingCellIndex]), ); }); @@ -139,107 +137,106 @@ describe('', () => { 'Heading 2', 'Heading 3', ]; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - const checkbox = dataTable.find('thead tr').find(Checkbox); + const headerCell = dataTable.find('thead')!.find('tr')!; - expect(checkbox).toHaveLength(1); - expect(checkbox.prop('label')).toBe('Heading 1'); + expect(headerCell).toContainReactComponent(Checkbox, { + label: 'Heading 1', + }); }); }); describe('totals', () => { it('renders a second table header row with totals', () => { const totals = ['', '$20.00', '']; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - expect(dataTable.find('thead tr')).toHaveLength(2); + const headingRows = dataTable.find('thead'); + expect(headingRows).toContainReactComponentTimes('tr', 2); - const totalsRow = dataTable.find('thead tr').at(1); - - expect(totalsRow.text()).toContain(totals.join('')); + const totalsRow = headingRows!.findAll('tr')[1]; + expect(totalsRow).toContainReactText(totals.join('')); }); it('renders the singular default totals row label when only one total is provided', () => { const totals = ['', '', '', '', '$155,830.00']; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - expect(dataTable.find('thead tr')).toHaveLength(2); + const headingRows = dataTable.find('thead'); + expect(headingRows).toContainReactComponentTimes('tr', 2); const firstTotalCell = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('total') === true) - .first(); - - expect(firstTotalCell.prop('content')).toBe('Total'); + .findAll(Cell) + .find((cell) => cell.prop('total')); + expect(firstTotalCell?.prop('content')).toBe('Total'); }); it('renders the plural default totals label when more than one total is provided', () => { const totals = ['', '', '', '255', '$155,830.00']; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - expect(dataTable.find('thead tr')).toHaveLength(2); + const headingRows = dataTable.find('thead'); + expect(headingRows).toContainReactComponentTimes('tr', 2); const firstTotalCell = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('total') === true) - .first(); - - expect(firstTotalCell.prop('content')).toBe('Totals'); + .findAll(Cell) + .find((cell) => cell.prop('total')); + expect(firstTotalCell?.prop('content')).toBe('Totals'); }); it('sets the contentType of non-empty total Cells to numeric', () => { const totals = ['', '$20.00', '']; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - const totalsCells = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('total') === true); - const nonEmptyTotalCells = totalsCells.filterWhere( + const totalsCells = dataTable + .findAll(Cell) + .filter((cell) => cell.prop('total')); + const nonEmptyTotalCells = totalsCells.filter( (cell) => cell.prop('contentType') === 'numeric', ); - const secondTotalsCell = totalsCells.at(1); - expect(nonEmptyTotalCells).toHaveLength(1); - expect(secondTotalsCell.prop('contentType')).toBe('numeric'); + + const secondTotalsCell = totalsCells[1]; + expect(secondTotalsCell).toHaveReactProps({contentType: 'numeric'}); }); it('renders an empty Cell for falsey total values', () => { const totals = ['', '', '']; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - expect(dataTable.find('thead tr')).toHaveLength(2); + expect(dataTable.find('thead')).toContainReactComponentTimes('tr', 2); const totalsCells = dataTable - .find(Cell) - .filterWhere( + .findAll(Cell) + .filter( (cell) => cell.prop('total') === true && cell.prop('firstColumn') !== true, ); - totalsCells.forEach((total) => expect(total.text()).toBe('')); + totalsCells.forEach((total) => expect(total).toContainReactText('')); }); it('renders totals in the footer with a showTotalsInFooter prop', () => { const totals = ['', '', '']; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - expect(dataTable.find('tfoot')).toHaveLength(1); + expect(dataTable).toContainReactComponentTimes('tfoot', 1); }); }); @@ -251,18 +248,16 @@ describe('', () => { plural: 'Prices', }; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - expect(dataTable.find('thead tr')).toHaveLength(2); - - const firstTotalCell = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('total') === true) - .first(); + expect(dataTable.find('thead')).toContainReactComponentTimes('tr', 2); - expect(firstTotalCell.prop('content')).toBe('Price'); + expect(dataTable).toContainReactComponentTimes(Cell, 1, { + total: true, + content: 'Price', + }); }); it('renders the plural custom totals label when more than one total is provided', () => { @@ -272,104 +267,100 @@ describe('', () => { plural: 'Prices', }; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - expect(dataTable.find('thead tr')).toHaveLength(2); + expect(dataTable.find('thead')).toContainReactComponentTimes('tr', 2); - const firstTotalCell = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('total') === true) - .first(); - - expect(firstTotalCell.prop('content')).toBe('Prices'); + expect(dataTable).toContainReactComponentTimes(Cell, 1, { + total: true, + content: 'Prices', + }); }); }); describe('rows', () => { it('renders a table body row for each list of table data provided', () => { const rows = [['First row'], ['Second row'], ['Third row']]; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - expect(dataTable.find('tbody tr')).toHaveLength(3); + expect(dataTable.find('tbody')).toContainReactComponentTimes('tr', 3); }); }); describe('truncate', () => { it('defaults to false', () => { - const dataTable = mountWithAppProvider(); + const dataTable = mountWithApp(); const firstColumnCells = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('firstColumn') === true); + .findAll(Cell) + .filter((cell) => cell.prop('firstColumn') === true); firstColumnCells.forEach((cell) => - expect(cell.prop('truncate')).toBe(false), + expect(cell).toHaveReactProps({truncate: false}), ); }); it('passes the value provided to its cells', () => { - const dataTable = mountWithAppProvider( - , - ); + const dataTable = mountWithApp(); const firstColumnCells = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('firstColumn') === true); + .findAll(Cell) + .filter((cell) => cell.prop('firstColumn') === true); firstColumnCells.forEach((cell) => - expect(cell.prop('truncate')).toBe(true), + expect(cell).toHaveReactProps({truncate: true}), ); }); }); describe('hideScrollIndicator', () => { it('shows by default', () => { - const dataTable = mountWithAppProvider(); + const dataTable = mountWithApp(); - expect(dataTable.find(Navigation)).toHaveLength(1); + expect(dataTable).toContainReactComponent(Navigation); }); - it('hide when true', () => { - const dataTable = mountWithAppProvider( + it('hides when true', () => { + const dataTable = mountWithApp( , ); - expect(dataTable.find(Navigation)).toHaveLength(0); + expect(dataTable).not.toContainReactComponent(Navigation); }); - it('show when false', () => { - const dataTable = mountWithAppProvider( + it('shows when false', () => { + const dataTable = mountWithApp( , ); - expect(dataTable.find(Navigation)).toHaveLength(1); + expect(dataTable).toContainReactComponent(Navigation); }); }); describe('verticalAlign', () => { it('defaults to undefined', () => { - const dataTable = mountWithAppProvider(); + const dataTable = mountWithApp(); - const cells = dataTable.find(Cell); + const cells = dataTable.findAll(Cell); cells.forEach((cell) => - expect(cell.prop('verticalAlign')).toBeUndefined(), + expect(cell).toHaveReactProps({verticalAlign: undefined}), ); }); it('passes the value provided to its cells', () => { - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - const cells = dataTable.find(Cell); + const cells = dataTable.findAll(Cell); cells.forEach((cell) => - expect(cell.prop('verticalAlign')).toBe('middle'), + expect(cell).toHaveReactProps({verticalAlign: 'middle'}), ); }); }); @@ -377,53 +368,55 @@ describe('', () => { describe('footerContent', () => { it('renders string footer content when provided', () => { const footerContent = 'Footer text'; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - expect(dataTable.text()).toContain(footerContent); + expect(dataTable).toContainReactText(footerContent); }); it('renders JSX footer content when provided', () => { - const footerContent =
Footer text
; - const dataTable = mountWithAppProvider( + const footerContent: any =
Footer text
; + const dataTable = mountWithApp( , ); - expect(dataTable.containsMatchingElement(footerContent)).toBe(true); + expect(dataTable).toContainReactComponent(footerContent); }); }); describe('sortable', () => { it('defaults to a non-sortable table', () => { - const dataTable = mountWithAppProvider(); - const cells = dataTable.find(Cell); + const dataTable = mountWithApp(); + const cells = dataTable.findAll(Cell); - cells.forEach((cell) => expect(cell.find('button')).toHaveLength(0)); + cells.forEach((cell) => + expect(cell).not.toContainReactComponent('button'), + ); }); it('renders a sortable header Cell for each true index', () => { const sortable = [false, true, false, false, true]; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); const sortableCells = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('sortable') === true); + .findAll(Cell) + .filter((cell) => cell.prop('sortable') === true); expect(sortableCells).toHaveLength(2); }); it('renders a plain header Cell for each false index', () => { const sortable = [false, true, false, false, true]; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); const nonSortableCells = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('sortable') === false); + .findAll(Cell) + .filter((cell) => cell.prop('sortable') === false); expect(nonSortableCells).toHaveLength(3); }); @@ -431,22 +424,26 @@ describe('', () => { describe('hoverable', () => { it('defaults to rows with hover state', () => { - const dataTable = mountWithAppProvider(); - const rows = dataTable.find('tbody tr'); + const dataTable = mountWithApp(); + const rows = dataTable.find('tbody')!.findAll('tr'); rows.forEach((row) => - expect(row.props().className).toContain('hoverable'), + expect(row).toHaveReactProps({ + className: expect.stringContaining('hoverable'), + }), ); }); it('renders rows without hover state class name when false', () => { - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); - const rows = dataTable.find('tbody tr'); + const rows = dataTable.find('tbody')!.findAll('tr'); rows.forEach((row) => - expect(row.props().className).not.toContain('hoverable'), + expect(row).not.toHaveReactProps({ + className: expect.stringContaining('hoverable'), + }), ); }); }); @@ -454,7 +451,7 @@ describe('', () => { describe('defaultSortDirection', () => { it('passes the value down to the Cell', () => { const sortable = [false, true, false, false, true]; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( ', () => { ); const firstHeadingCell = dataTable - .find(Cell) - .filterWhere((cell) => cell.props().header === true) - .first(); + .findAll(Cell) + .filter((cell) => cell.prop('header') === true)[0]; - expect(firstHeadingCell.prop('defaultSortDirection')).toBe('ascending'); + expect(firstHeadingCell).toHaveReactProps({ + defaultSortDirection: 'ascending', + }); }); }); describe('initialSortColumnIndex', () => { it('defaults to first column if not specified', () => { const sortable = [true, true, false, false, true, false]; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); const firstHeadingCell = dataTable - .find(Cell) - .filterWhere((cell) => cell.props().header === true) - .first(); + .findAll(Cell) + .filter((cell) => cell.prop('header') === true)[0]; - expect(firstHeadingCell.props().sorted).toBe(true); + expect(firstHeadingCell).toHaveReactProps({sorted: true}); }); it('sets specified initial sort column', () => { const sortable = [true, true, false, false, true, false]; const initialSortColumnIndex = 4; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( ', () => { ); const fifthHeadingCell = dataTable - .find(Cell) - .filterWhere((cell) => cell.props().header === true) - .at(initialSortColumnIndex); + .findAll(Cell) + .filter((cell) => cell.prop('header') === true)[initialSortColumnIndex]; - expect(fifthHeadingCell.props().sorted).toBe(true); + expect(fifthHeadingCell).toHaveReactProps({sorted: true}); }); }); @@ -510,16 +506,15 @@ describe('', () => { it('gets called when sortable column heading is clicked', () => { const spyOnSort = jest.fn(); const sortable = [true, false, false, false, false]; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); const firstHeadingCell = dataTable - .find(Cell) - .filterWhere((cell) => cell.props().header === true) - .first(); + .findAll(Cell) + .filter((cell) => cell.prop('header') === true)[0]; - trigger(firstHeadingCell, 'onSort'); + firstHeadingCell.trigger('onSort'); expect(spyOnSort).toHaveBeenCalledTimes(1); }); @@ -528,43 +523,43 @@ describe('', () => { describe('colSpan', () => { it('has a colSpan of 1 when header length and row length are equal', () => { const rows = [['Emerald Silk Gown', '$230.00', 124689, 32, '$19,090.00']]; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); const singleSpanCells = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('colSpan') === 1); + .findAll(Cell) + .filter((cell) => cell.prop('colSpan') === 1); expect(singleSpanCells).toHaveLength(5); }); it('has a colSpan that spans all headings when there is only one cell in the row', () => { const rows = [['Emerald Silk Gown']]; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); const fullSpanCells = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('colSpan') === headings.length); + .findAll(Cell) + .filter((cell) => cell.prop('colSpan') === headings.length); expect(fullSpanCells).toHaveLength(1); }); it('cells still fill the full table width when there are no headings', () => { const rows = [['Emerald Silk Gown', '$230.00']]; - const dataTable = mountWithAppProvider( + const dataTable = mountWithApp( , ); const twoSpanCells = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('colSpan') === 2); + .findAll(Cell) + .filter((cell) => cell.prop('colSpan') === 2); const threeSpanCells = dataTable - .find(Cell) - .filterWhere((cell) => cell.prop('colSpan') === 2); + .findAll(Cell) + .filter((cell) => cell.prop('colSpan') === 2); expect(twoSpanCells).toHaveLength(1); expect(threeSpanCells).toHaveLength(1);