From 9ee017dbe289a74f9436adff412463f2a39c243f Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Mon, 5 Sep 2022 18:45:58 +0300 Subject: [PATCH 1/3] Components: Refactor Panel tests to @testing-library/react --- .../panel/test/__snapshots__/header.js.snap | 9 +++ .../panel/test/__snapshots__/index.js.snap | 17 ++++++ .../src/panel/test/__snapshots__/row.js.snap | 11 ++++ packages/components/src/panel/test/header.js | 53 +++++++++-------- packages/components/src/panel/test/index.js | 58 +++++++++++-------- packages/components/src/panel/test/row.js | 29 ++++++---- 6 files changed, 118 insertions(+), 59 deletions(-) create mode 100644 packages/components/src/panel/test/__snapshots__/header.js.snap create mode 100644 packages/components/src/panel/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/panel/test/__snapshots__/row.js.snap diff --git a/packages/components/src/panel/test/__snapshots__/header.js.snap b/packages/components/src/panel/test/__snapshots__/header.js.snap new file mode 100644 index 00000000000000..3d740c6f7df646 --- /dev/null +++ b/packages/components/src/panel/test/__snapshots__/header.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PanelHeader basic rendering should render PanelHeader with empty div inside 1`] = ` +
+
+
+`; diff --git a/packages/components/src/panel/test/__snapshots__/index.js.snap b/packages/components/src/panel/test/__snapshots__/index.js.snap new file mode 100644 index 00000000000000..1acb8eaab19292 --- /dev/null +++ b/packages/components/src/panel/test/__snapshots__/index.js.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Panel basic rendering should render an additional className 1`] = ` +
+
+
+`; + +exports[`Panel basic rendering should render an empty div without any provided props 1`] = ` +
+
+
+`; diff --git a/packages/components/src/panel/test/__snapshots__/row.js.snap b/packages/components/src/panel/test/__snapshots__/row.js.snap new file mode 100644 index 00000000000000..d32c8646d6882c --- /dev/null +++ b/packages/components/src/panel/test/__snapshots__/row.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PanelRow should render with the custom class name 1`] = `undefined`; + +exports[`PanelRow should render with the default class name 1`] = ` +
+
+
+`; diff --git a/packages/components/src/panel/test/header.js b/packages/components/src/panel/test/header.js index 82fc88519af7a0..0179012e00242e 100644 --- a/packages/components/src/panel/test/header.js +++ b/packages/components/src/panel/test/header.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { shallow } from 'enzyme'; +import { render, screen } from '@testing-library/react'; /** * Internal dependencies @@ -11,38 +11,45 @@ import PanelHeader from '../header.js'; describe( 'PanelHeader', () => { describe( 'basic rendering', () => { it( 'should render PanelHeader with empty div inside', () => { - const panelHeader = shallow( ); - expect( panelHeader.hasClass( 'components-panel__header' ) ).toBe( - true - ); - expect( panelHeader.type() ).toBe( 'div' ); - expect( - panelHeader.find( 'div' ).shallow().children() - ).toHaveLength( 0 ); + const { container } = render( ); + + expect( container ).toMatchSnapshot(); } ); it( 'should render a label matching the text provided in the prop', () => { - const panelHeader = shallow( ); - const label = panelHeader.find( 'h2' ).shallow(); - expect( label.text() ).toBe( 'Some Text' ); - expect( label.type() ).toBe( 'h2' ); + render( ); + + const heading = screen.getByRole( 'heading' ); + expect( heading ).toBeVisible(); + expect( heading ).toHaveTextContent( 'Some Label' ); } ); it( 'should render child elements in the panel header body when provided', () => { - const panelHeader = shallow( ); - expect( panelHeader.text() ).toBe( 'Some Text' ); - expect( - panelHeader.find( 'div' ).shallow().children() - ).toHaveLength( 1 ); + render( + + Some text + + ); + + const term = screen.getByRole( 'term' ); + expect( term ).toBeVisible(); + expect( term ).toHaveTextContent( 'Some text' ); } ); it( 'should render both child elements and label when passed in', () => { - const panelHeader = shallow( - + render( + + Some text + ); - expect( - panelHeader.find( 'div' ).shallow().children() - ).toHaveLength( 2 ); + + const heading = screen.getByRole( 'heading' ); + expect( heading ).toBeVisible(); + expect( heading ).toHaveTextContent( 'Some Label' ); + + const term = screen.getByRole( 'term' ); + expect( term ).toBeVisible(); + expect( term ).toHaveTextContent( 'Some text' ); } ); } ); } ); diff --git a/packages/components/src/panel/test/index.js b/packages/components/src/panel/test/index.js index 7a6840aafbe71d..4247af577ca568 100644 --- a/packages/components/src/panel/test/index.js +++ b/packages/components/src/panel/test/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { shallow } from 'enzyme'; +import { render, screen } from '@testing-library/react'; /** * Internal dependencies @@ -11,43 +11,51 @@ import Panel from '../'; describe( 'Panel', () => { describe( 'basic rendering', () => { it( 'should render an empty div without any provided props', () => { - const panel = shallow( ); - expect( panel.hasClass( 'components-panel' ) ).toBe( true ); - expect( panel.type() ).toBe( 'div' ); - expect( panel.find( 'div' ).shallow().children() ).toHaveLength( - 0 - ); + const { container } = render( ); + + expect( container ).toMatchSnapshot(); } ); - it( 'should render a PanelHeader component when provided text in the header prop', () => { - const panel = shallow( ); - const panelHeader = panel.find( 'PanelHeader' ); - expect( panelHeader.prop( 'label' ) ).toBe( 'Header Label' ); - expect( panel.find( 'div' ).shallow().children() ).toHaveLength( - 1 - ); + it( 'should render a heading when provided text in the header prop', () => { + render( ); + + const heading = screen.getByRole( 'heading' ); + expect( heading ).toBeVisible(); + expect( heading ).toHaveTextContent( 'Header Label' ); } ); it( 'should render an additional className', () => { - const panel = shallow( ); - expect( panel.hasClass( 'the-panel' ) ).toBe( true ); + const { container } = render( ); + + expect( container ).toMatchSnapshot(); } ); it( 'should add additional child elements to be rendered in the panel', () => { - const panel = shallow( ); - expect( panel.text() ).toBe( 'The Panel' ); - expect( panel.find( 'div' ).shallow().children() ).toHaveLength( - 1 + render( + + The Panel + ); + + const term = screen.getByRole( 'term' ); + expect( term ).toBeVisible(); + expect( term ).toHaveTextContent( 'The Panel' ); } ); it( 'should render both children and header when provided as props', () => { - const panel = shallow( - - ); - expect( panel.find( 'div' ).shallow().children() ).toHaveLength( - 2 + render( + + The Panel + ); + + const heading = screen.getByRole( 'heading' ); + expect( heading ).toBeVisible(); + expect( heading ).toHaveTextContent( 'The header' ); + + const term = screen.getByRole( 'term' ); + expect( term ).toBeVisible(); + expect( term ).toHaveTextContent( 'The Panel' ); } ); } ); } ); diff --git a/packages/components/src/panel/test/row.js b/packages/components/src/panel/test/row.js index ca049f7ae937f9..6213b1f9ce79e2 100644 --- a/packages/components/src/panel/test/row.js +++ b/packages/components/src/panel/test/row.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { shallow } from 'enzyme'; +import { render, screen } from '@testing-library/react'; /** * Internal dependencies @@ -9,20 +9,27 @@ import { shallow } from 'enzyme'; import PanelRow from '../row'; describe( 'PanelRow', () => { - it( 'should defined default class name', () => { - const wrapper = shallow( ); - expect( wrapper.hasClass( 'components-panel__row' ) ).toBe( true ); + it( 'should render with the default class name', () => { + const { container } = render( ); + + expect( container ).toMatchSnapshot(); } ); - it( 'should defined custom class name', () => { - const wrapper = shallow( ); - expect( wrapper.hasClass( 'custom' ) ).toBe( true ); + + it( 'should render with the custom class name', () => { + const { container } = ; + + expect( container ).toMatchSnapshot(); } ); - it( 'should return child components', () => { - const wrapper = shallow( + + it( 'should render child components', () => { + render( -

children

+ Some text ); - expect( wrapper.find( 'p' ).text() ).toBe( 'children' ); + + const term = screen.getByRole( 'term' ); + expect( term ).toBeVisible(); + expect( term ).toHaveTextContent( 'Some text' ); } ); } ); From 15c35201e8a9198dbf82131d5734fd3379c70dde Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Tue, 6 Sep 2022 12:08:33 +0300 Subject: [PATCH 2/3] Add changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7a4540b391deb3..ddd39540d77520 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -39,6 +39,7 @@ - `FormTokenField`: Refactor away from Lodash ([#43744](https://github.com/WordPress/gutenberg/pull/43744/)). - `NavigatorButton`: updated to satisfy `react/exhaustive-deps` eslint rule ([#42051](https://github.com/WordPress/gutenberg/pull/42051)) - `TabPanel`: Refactor away from `_.partial()` ([#43895](https://github.com/WordPress/gutenberg/pull/43895/)). +- `Panel`: Refactor tests to `@testing-library/react` ([#43896](https://github.com/WordPress/gutenberg/pull/43896)). ## 20.0.0 (2022-08-24) From 119dfca74f3b09cf28dbe889b6eec22eb7933496 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Tue, 6 Sep 2022 13:25:38 +0300 Subject: [PATCH 3/3] Add missing render() --- .../components/src/panel/test/__snapshots__/row.js.snap | 8 +++++++- packages/components/src/panel/test/row.js | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/components/src/panel/test/__snapshots__/row.js.snap b/packages/components/src/panel/test/__snapshots__/row.js.snap index d32c8646d6882c..0de615c53f8d88 100644 --- a/packages/components/src/panel/test/__snapshots__/row.js.snap +++ b/packages/components/src/panel/test/__snapshots__/row.js.snap @@ -1,6 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PanelRow should render with the custom class name 1`] = `undefined`; +exports[`PanelRow should render with the custom class name 1`] = ` +
+
+
+`; exports[`PanelRow should render with the default class name 1`] = `
diff --git a/packages/components/src/panel/test/row.js b/packages/components/src/panel/test/row.js index 6213b1f9ce79e2..2dbf09782e70fb 100644 --- a/packages/components/src/panel/test/row.js +++ b/packages/components/src/panel/test/row.js @@ -16,7 +16,7 @@ describe( 'PanelRow', () => { } ); it( 'should render with the custom class name', () => { - const { container } = ; + const { container } = render( ); expect( container ).toMatchSnapshot(); } );