From 79d0c9435a27354a63731e170713e8ec16872d5d Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 1 Sep 2022 14:38:12 +0300 Subject: [PATCH] Editor: Refactor DocumentOutline tests to @testing-library/react --- .../test/__snapshots__/index.js.snap | 140 ++++++++++++------ .../components/document-outline/test/index.js | 71 ++++----- 2 files changed, 119 insertions(+), 92 deletions(-) diff --git a/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap b/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap index 09fcb9a5316669..27804e33f508b6 100644 --- a/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap @@ -1,67 +1,111 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DocumentOutline header blocks present should match snapshot 1`] = ` -
- -
+ + + `; exports[`DocumentOutline header blocks present should render warnings for multiple h1 headings 1`] = ` -
- -
+ Heading 1 +
+ + (Multiple H1 headings are not recommended) + + + + + `; diff --git a/packages/editor/src/components/document-outline/test/index.js b/packages/editor/src/components/document-outline/test/index.js index c4d39926dd907e..bf6ebbaa2b7e06 100644 --- a/packages/editor/src/components/document-outline/test/index.js +++ b/packages/editor/src/components/document-outline/test/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { mount, shallow } from 'enzyme'; +import { render, screen, within } from '@testing-library/react'; /** * WordPress dependencies @@ -77,9 +77,9 @@ describe( 'DocumentOutline', () => { describe( 'no header blocks present', () => { it( 'should not render when no blocks provided', () => { - const wrapper = shallow( ); + render( ); - expect( wrapper.html() ).toBe( null ); + expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument(); } ); it( 'should not render when no heading blocks provided', () => { @@ -87,9 +87,9 @@ describe( 'DocumentOutline', () => { // Set client IDs to a predictable value. return { ...block, clientId: `clientId_${ index }` }; } ); - const wrapper = shallow( ); + render( ); - expect( wrapper.html() ).toBe( null ); + expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument(); } ); } ); @@ -99,16 +99,20 @@ describe( 'DocumentOutline', () => { // Set client IDs to a predictable value. return { ...block, clientId: `clientId_${ index }` }; } ); - const wrapper = shallow( ); + render( ); - expect( wrapper ).toMatchSnapshot(); + expect( screen.getByRole( 'list' ) ).toMatchSnapshot(); } ); it( 'should render an item when only one heading provided', () => { const blocks = [ headingH2 ]; - const wrapper = shallow( ); + render( ); - expect( wrapper.find( 'TableOfContentsItem' ) ).toHaveLength( 1 ); + const tableOfContentItems = within( + screen.getByRole( 'list' ) + ).getAllByRole( 'listitem' ); + expect( tableOfContentItems ).toHaveLength( 1 ); + expect( tableOfContentItems[ 0 ] ).toHaveTextContent( 'Heading 2' ); } ); it( 'should render two items when two headings and some paragraphs provided', () => { @@ -119,9 +123,11 @@ describe( 'DocumentOutline', () => { headingH3, paragraph, ]; - const wrapper = shallow( ); + render( ); - expect( wrapper.find( 'TableOfContentsItem' ) ).toHaveLength( 2 ); + expect( + within( screen.getByRole( 'list' ) ).getAllByRole( 'listitem' ) + ).toHaveLength( 2 ); } ); it( 'should render warnings for multiple h1 headings', () => { @@ -131,53 +137,30 @@ describe( 'DocumentOutline', () => { return { ...block, clientId: `clientId_${ index }` }; } ); - const wrapper = shallow( ); + render( ); - expect( wrapper ).toMatchSnapshot(); + expect( screen.getByRole( 'list' ) ).toMatchSnapshot(); } ); } ); describe( 'nested headings', () => { it( 'should render even if the heading is nested', () => { - const tableOfContentItemsSelector = 'TableOfContentsItem'; - const outlineLevelsSelector = '.document-outline__level'; - const outlineItemContentSelector = - '.document-outline__item-content'; - const blocks = [ headingH2, nestedHeading ]; - const wrapper = mount( ); + render( ); // Unnested heading and nested heading should appear as items. - const tableOfContentItems = wrapper.find( - tableOfContentItemsSelector - ); + const tableOfContentItems = within( + screen.getByRole( 'list' ) + ).getAllByRole( 'listitem' ); expect( tableOfContentItems ).toHaveLength( 2 ); // Unnested heading test. - const firstItemLevels = tableOfContentItems - .at( 0 ) - .find( outlineLevelsSelector ); - expect( firstItemLevels ).toHaveLength( 1 ); - expect( firstItemLevels.at( 0 ).text() ).toEqual( 'H2' ); - expect( - tableOfContentItems - .at( 0 ) - .find( outlineItemContentSelector ) - .text() - ).toEqual( 'Heading 2' ); + expect( tableOfContentItems[ 0 ] ).toHaveTextContent( 'H2' ); + expect( tableOfContentItems[ 0 ] ).toHaveTextContent( 'Heading 2' ); // Nested heading test. - const secondItemLevels = tableOfContentItems - .at( 1 ) - .find( outlineLevelsSelector ); - expect( secondItemLevels ).toHaveLength( 1 ); - expect( secondItemLevels.at( 0 ).text() ).toEqual( 'H3' ); - expect( - tableOfContentItems - .at( 1 ) - .find( outlineItemContentSelector ) - .text() - ).toEqual( 'Heading 3' ); + expect( tableOfContentItems[ 1 ] ).toHaveTextContent( 'H3' ); + expect( tableOfContentItems[ 1 ] ).toHaveTextContent( 'Heading 3' ); } ); } ); } );