From 6e92f407ea0345d61d59b07939eb26f8d3b6c89e Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 27 Sep 2022 14:30:03 +0300
Subject: [PATCH] Block Editor: Refactor BlockSwitcher tests to
@testing-library/react (#44493)
---
.../test/__snapshots__/index.js.snap | 137 +++++++++----
.../components/block-switcher/test/index.js | 182 ++++++++++++------
2 files changed, 225 insertions(+), 94 deletions(-)
diff --git a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
index 502c3b2bf0222..2824cbdd92b96 100644
--- a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
@@ -1,43 +1,114 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`BlockSwitcherDropdownMenu should render disabled block switcher with multi block of different types when no transforms 1`] = `
-
-
-
-
-
- }
- showColors={true}
- />
-
- }
- />
-
+
`;
exports[`BlockSwitcherDropdownMenu should render enabled block switcher with multi block when transforms exist 1`] = `
-
-
-
-
-
+
`;
exports[`BlockSwitcherDropdownMenu should render switcher with blocks 1`] = `
-
-
-
-
-
+
`;
diff --git a/packages/block-editor/src/components/block-switcher/test/index.js b/packages/block-editor/src/components/block-switcher/test/index.js
index ae073d74d07a6..2e8190a466b36 100644
--- a/packages/block-editor/src/components/block-switcher/test/index.js
+++ b/packages/block-editor/src/components/block-switcher/test/index.js
@@ -1,14 +1,14 @@
/**
* External dependencies
*/
-import { shallow, mount } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-import { Button } from '@wordpress/components';
import { copy } from '@wordpress/icons';
/**
@@ -17,23 +17,25 @@ import { copy } from '@wordpress/icons';
import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
-jest.mock( '../../block-title/use-block-display-title', () => jest.fn() );
+jest.mock( '../../block-title/use-block-display-title', () =>
+ jest.fn().mockReturnValue( 'Block Name' )
+);
describe( 'BlockSwitcher', () => {
test( 'should not render block switcher without blocks', () => {
useSelect.mockImplementation( () => ( {} ) );
- const wrapper = shallow( );
- expect( wrapper.html() ).toBeNull();
+ const { container } = render( );
+ expect( container ).toBeEmptyDOMElement();
} );
test( 'should not render block switcher with null blocks', () => {
useSelect.mockImplementation( () => ( { blocks: [ null ] } ) );
- const wrapper = shallow(
+ const { container } = render(
);
- expect( wrapper.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
} );
} );
describe( 'BlockSwitcherDropdownMenu', () => {
@@ -122,10 +124,10 @@ describe( 'BlockSwitcherDropdownMenu', () => {
],
canRemove: true,
} ) );
- const wrapper = shallow(
+ const { container } = render(
);
- expect( wrapper ).toMatchSnapshot();
+ expect( container ).toMatchSnapshot();
} );
test( 'should render disabled block switcher with multi block of different types when no transforms', () => {
@@ -133,12 +135,12 @@ describe( 'BlockSwitcherDropdownMenu', () => {
possibleBlockTransformations: [],
icon: copy,
} ) );
- const wrapper = shallow(
+ const { container } = render(
);
- expect( wrapper ).toMatchSnapshot();
+ expect( container ).toMatchSnapshot();
} );
test( 'should render enabled block switcher with multi block when transforms exist', () => {
@@ -149,12 +151,12 @@ describe( 'BlockSwitcherDropdownMenu', () => {
],
canRemove: true,
} ) );
- const wrapper = shallow(
+ const { container } = render(
);
- expect( wrapper ).toMatchSnapshot();
+ expect( container ).toMatchSnapshot();
} );
describe( 'Dropdown', () => {
@@ -166,70 +168,128 @@ describe( 'BlockSwitcherDropdownMenu', () => {
canRemove: true,
} ) );
} );
- const getDropdown = () =>
- mount(
-
- ).find( 'Dropdown' );
test( 'should dropdown exist', () => {
- expect( getDropdown() ).toHaveLength( 1 );
- } );
+ render(
+
+ );
- describe( '.renderToggle', () => {
- const onToggleStub = jest.fn();
- const mockKeyDown = {
- preventDefault: () => {},
- code: 'ArrowDown',
- };
+ expect(
+ screen.getByRole( 'button', {
+ name: 'Block Name',
+ expanded: false,
+ } )
+ ).toBeVisible();
+ } );
- afterEach( () => {
- onToggleStub.mockReset();
+ test( 'should simulate a keydown event, which should open transform toggle.', async () => {
+ const user = userEvent.setup( {
+ advanceTimers: jest.advanceTimersByTime,
} );
- test( 'should simulate a keydown event, which should call onToggle and open transform toggle.', () => {
- const toggleClosed = mount(
- getDropdown().props().renderToggle( {
- onToggle: onToggleStub,
- isOpen: false,
- } )
- );
- const iconButtonClosed = toggleClosed.find( Button );
+ render(
+
+ );
+
+ expect(
+ screen.getByRole( 'button', {
+ name: 'Block Name',
+ expanded: false,
+ } )
+ ).toBeVisible();
+ expect(
+ screen.queryByRole( 'menu', {
+ name: 'Block Name',
+ } )
+ ).not.toBeInTheDocument();
+
+ await user.type(
+ screen.getByRole( 'button', {
+ name: 'Block Name',
+ expanded: false,
+ } ),
+ '[ArrowDown]'
+ );
- iconButtonClosed.simulate( 'keydown', mockKeyDown );
+ expect(
+ screen.getByRole( 'button', {
+ name: 'Block Name',
+ expanded: true,
+ } )
+ ).toBeVisible();
- expect( onToggleStub ).toHaveBeenCalledTimes( 1 );
+ const menu = screen.getByRole( 'menu', {
+ name: 'Block Name',
} );
+ expect( menu ).toBeInTheDocument();
+ expect( menu ).not.toBeVisible();
+ } );
- test( 'should simulate a click event, which should call onToggle.', () => {
- const toggleOpen = mount(
- getDropdown().props().renderToggle( {
- onToggle: onToggleStub,
- isOpen: true,
- } )
- );
- const iconButtonOpen = toggleOpen.find( Button );
+ test( 'should simulate a click event, which should call onToggle.', async () => {
+ const user = userEvent.setup( {
+ advanceTimers: jest.advanceTimersByTime,
+ } );
+
+ render(
+
+ );
+
+ expect(
+ screen.getByRole( 'button', {
+ name: 'Block Name',
+ expanded: false,
+ } )
+ ).toBeVisible();
+ expect(
+ screen.queryByRole( 'menu', {
+ name: 'Block Name',
+ } )
+ ).not.toBeInTheDocument();
+
+ await user.click(
+ screen.getByRole( 'button', {
+ name: 'Block Name',
+ expanded: false,
+ } )
+ );
- iconButtonOpen.simulate( 'keydown', mockKeyDown );
+ expect(
+ screen.getByRole( 'button', {
+ name: 'Block Name',
+ expanded: true,
+ } )
+ ).toBeVisible();
- expect( onToggleStub ).toHaveBeenCalledTimes( 0 );
+ const menu = screen.getByRole( 'menu', {
+ name: 'Block Name',
} );
+ expect( menu ).toBeInTheDocument();
+ expect( menu ).not.toBeVisible();
} );
- describe( '.renderContent', () => {
- test( 'should create the transform items for the chosen block. A heading block will have 3 items', () => {
- const onCloseStub = jest.fn();
- const content = shallow(
-
- { getDropdown()
- .props()
- .renderContent( { onClose: onCloseStub } ) }
-
- );
- const blockList = content.find( 'BlockTransformationsMenu' );
- expect(
- blockList.prop( 'possibleBlockTransformations' )
- ).toHaveLength( 1 );
+ test( 'should create the transform items for the chosen block.', async () => {
+ const user = userEvent.setup( {
+ advanceTimers: jest.advanceTimersByTime,
} );
+
+ render(
+
+ );
+
+ await user.click(
+ screen.getByRole( 'button', {
+ name: 'Block Name',
+ expanded: false,
+ } )
+ );
+
+ expect(
+ within(
+ screen.getByRole( 'menu', {
+ name: 'Block Name',
+ } )
+ ).getAllByRole( 'menuitem' )
+ ).toHaveLength( 1 );
} );
} );
} );