Skip to content

Commit

Permalink
Editor: Refactor DocumentOutline tests to @testing-library/react (#43772
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@tyxla
tyxla authored Sep 1, 2022
1 parent d0362e1 commit bf88267
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 92 deletions.
140 changes: 92 additions & 48 deletions packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,111 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DocumentOutline header blocks present should match snapshot 1`] = `
<div
className="document-outline"
>
<ul>
<TableOfContentsItem
<ul>
<li
class="document-outline__item is-h2"
>
<a
class="document-outline__button"
href="#block-clientId_0"
isValid={true}
key="0"
level="H2"
>
Heading 2
</TableOfContentsItem>
<TableOfContentsItem
<span
aria-hidden="true"
class="document-outline__emdash"
/>
<strong
class="document-outline__level"
>
H2
</strong>
<span
class="document-outline__item-content"
>
Heading 2
</span>
</a>
</li>
<li
class="document-outline__item is-h3"
>
<a
class="document-outline__button"
href="#block-clientId_1"
isValid={true}
key="1"
level="H3"
>
Heading 3
</TableOfContentsItem>
</ul>
</div>
<span
aria-hidden="true"
class="document-outline__emdash"
/>
<strong
class="document-outline__level"
>
H3
</strong>
<span
class="document-outline__item-content"
>
Heading 3
</span>
</a>
</li>
</ul>
`;

exports[`DocumentOutline header blocks present should render warnings for multiple h1 headings 1`] = `
<div
className="document-outline"
>
<ul>
<TableOfContentsItem
<ul>
<li
class="document-outline__item is-h1 is-invalid"
>
<a
class="document-outline__button"
href="#block-clientId_0"
isValid={false}
key="0"
level="H1"
>
Heading 1
<br
key="incorrect-break-multiple-h1"
<span
aria-hidden="true"
class="document-outline__emdash"
/>
<em
key="incorrect-message-multiple-h1"
<strong
class="document-outline__level"
>
(Multiple H1 headings are not recommended)
</em>
</TableOfContentsItem>
<TableOfContentsItem
H1
</strong>
<span
class="document-outline__item-content"
>
Heading 1
<br />
<em>
(Multiple H1 headings are not recommended)
</em>
</span>
</a>
</li>
<li
class="document-outline__item is-h1 is-invalid"
>
<a
class="document-outline__button"
href="#block-clientId_2"
isValid={false}
key="1"
level="H1"
>
Heading 1
<br
key="incorrect-break-multiple-h1"
<span
aria-hidden="true"
class="document-outline__emdash"
/>
<em
key="incorrect-message-multiple-h1"
<strong
class="document-outline__level"
>
H1
</strong>
<span
class="document-outline__item-content"
>
(Multiple H1 headings are not recommended)
</em>
</TableOfContentsItem>
</ul>
</div>
Heading 1
<br />
<em>
(Multiple H1 headings are not recommended)
</em>
</span>
</a>
</li>
</ul>
`;
71 changes: 27 additions & 44 deletions packages/editor/src/components/document-outline/test/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { mount, shallow } from 'enzyme';
import { render, screen, within } from '@testing-library/react';

/**
* WordPress dependencies
Expand Down Expand Up @@ -77,19 +77,19 @@ describe( 'DocumentOutline', () => {

describe( 'no header blocks present', () => {
it( 'should not render when no blocks provided', () => {
const wrapper = shallow( <DocumentOutline /> );
render( <DocumentOutline /> );

expect( wrapper.html() ).toBe( null );
expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
} );

it( 'should not render when no heading blocks provided', () => {
const blocks = [ paragraph ].map( ( block, index ) => {
// Set client IDs to a predictable value.
return { ...block, clientId: `clientId_${ index }` };
} );
const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
render( <DocumentOutline blocks={ blocks } /> );

expect( wrapper.html() ).toBe( null );
expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
} );
} );

Expand All @@ -99,16 +99,20 @@ describe( 'DocumentOutline', () => {
// Set client IDs to a predictable value.
return { ...block, clientId: `clientId_${ index }` };
} );
const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
render( <DocumentOutline blocks={ blocks } /> );

expect( wrapper ).toMatchSnapshot();
expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
} );

it( 'should render an item when only one heading provided', () => {
const blocks = [ headingH2 ];
const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
render( <DocumentOutline blocks={ blocks } /> );

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', () => {
Expand All @@ -119,9 +123,11 @@ describe( 'DocumentOutline', () => {
headingH3,
paragraph,
];
const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
render( <DocumentOutline blocks={ blocks } /> );

expect( wrapper.find( 'TableOfContentsItem' ) ).toHaveLength( 2 );
expect(
within( screen.getByRole( 'list' ) ).getAllByRole( 'listitem' )
).toHaveLength( 2 );
} );

it( 'should render warnings for multiple h1 headings', () => {
Expand All @@ -131,53 +137,30 @@ describe( 'DocumentOutline', () => {
return { ...block, clientId: `clientId_${ index }` };
}
);
const wrapper = shallow( <DocumentOutline blocks={ blocks } /> );
render( <DocumentOutline blocks={ blocks } /> );

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( <DocumentOutline blocks={ blocks } /> );
render( <DocumentOutline blocks={ blocks } /> );

// 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' );
} );
} );
} );

0 comments on commit bf88267

Please sign in to comment.