Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor: Refactor DocumentOutline tests to @testing-library/react #43772

Merged
merged 1 commit into from
Sep 1, 2022
Merged

Editor: Refactor DocumentOutline tests to @testing-library/react #43772

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 92 additions & 48 deletions packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap
View file
Open in desktop
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
Open in desktop
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' );
} );
} );
} );