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

Block Editor: Refactor BlockVerticalAlignmentUI tests to @testing-library/react #44029

Merged
merged 1 commit into from
Sep 12, 2022
Merged

Block Editor: Refactor BlockVerticalAlignmentUI tests to @testing-library/react #44029

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
142 changes: 91 additions & 51 deletions ...k-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,109 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`BlockVerticalAlignmentUI should match snapshot 1`] = `
<ToolbarGroup
controls={
Array [
Object {
"icon": <SVG
exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden 1`] = `
<div>
<div
class="components-dropdown components-dropdown-menu components-toolbar"
tabindex="-1"
>
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Change vertical alignment"
class="components-button components-dropdown-menu__toggle has-icon"
data-toolbar-item="true"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z"
/>
</svg>
</button>
</div>
</div>
`;

exports[`BlockVerticalAlignmentUI should match snapshot when controls are visible 1`] = `
<div>
<div
class="components-toolbar"
icon="[object Object]"
label="Change vertical alignment"
>
<div>
<button
aria-label="Align top"
aria-pressed="true"
class="components-button components-toolbar__control is-pressed has-icon"
data-toolbar-item="true"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
<path
d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z"
/>
</SVG>,
"isActive": true,
"onClick": [Function],
"role": "menuitemradio",
"title": "Align top",
},
Object {
"icon": <SVG
</svg>
</button>
</div>
<div>
<button
aria-label="Align middle"
aria-pressed="false"
class="components-button components-toolbar__control has-icon"
data-toolbar-item="true"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
<path
d="M20 11h-5V4H9v7H4v1.5h5V20h6v-7.5h5z"
/>
</SVG>,
"isActive": false,
"onClick": [Function],
"role": "menuitemradio",
"title": "Align middle",
},
Object {
"icon": <SVG
</svg>
</button>
</div>
<div>
<button
aria-label="Align bottom"
aria-pressed="false"
class="components-button components-toolbar__control has-icon"
data-toolbar-item="true"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
<path
d="M15 4H9v11h6V4zM4 18.5V20h16v-1.5H4z"
/>
</SVG>,
"isActive": false,
"onClick": [Function],
"role": "menuitemradio",
"title": "Align bottom",
},
]
}
icon={
<SVG
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z"
/>
</SVG>
}
isCollapsed={true}
label="Change vertical alignment"
popoverProps={
Object {
"isAlternate": true,
}
}
/>
</svg>
</button>
</div>
</div>
</div>
`;
115 changes: 92 additions & 23 deletions packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
import { shallow } from 'enzyme';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

/**
* Internal dependencies
Expand All @@ -12,44 +13,112 @@ describe( 'BlockVerticalAlignmentUI', () => {
const alignment = 'top';
const onChange = jest.fn();

const wrapper = shallow(
<BlockVerticalAlignmentUI
isToolbar
value={ alignment }
onChange={ onChange }
/>
);

const controls = wrapper.props().controls;

afterEach( () => {
onChange.mockClear();
} );

it( 'should match snapshot', () => {
expect( wrapper ).toMatchSnapshot();
test( 'should match snapshot when controls are hidden', () => {
const { container } = render(
<BlockVerticalAlignmentUI
isToolbar
value={ alignment }
onChange={ onChange }
/>
);
expect( container ).toMatchSnapshot();
} );

test( 'should match snapshot when controls are visible', () => {
const { container } = render(
<BlockVerticalAlignmentUI
isToolbar
value={ alignment }
onChange={ onChange }
isCollapsed={ false }
/>
);
expect( container ).toMatchSnapshot();
} );

it( 'should call onChange with undefined, when the control is already active', () => {
const activeControl = controls.find( ( { title } ) =>
title.toLowerCase().includes( alignment )
test( 'should expand controls when toggled', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

render(
<BlockVerticalAlignmentUI
isToolbar
value={ alignment }
onChange={ onChange }
/>
);

expect(
screen.queryByRole( 'menuitemradio', {
name: /^Align \w+$/,
} )
).not.toBeInTheDocument();

await user.click(
screen.getByRole( 'button', {
name: 'Change vertical alignment',
} )
);
activeControl.onClick();

expect( activeControl.isActive ).toBe( true );
expect(
screen.getAllByRole( 'menuitemradio', {
name: /^Align \w+$/,
} )
).toHaveLength( 3 );
} );

it( 'should call onChange with undefined, when the control is already active', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

render(
<BlockVerticalAlignmentUI
isToolbar
value={ alignment }
onChange={ onChange }
isCollapsed={ false }
/>
);

const activeControl = screen.getByRole( 'button', {
name: `Align ${ alignment }`,
pressed: true,
} );

await user.click( activeControl );

expect( onChange ).toHaveBeenCalledTimes( 1 );
expect( onChange ).toHaveBeenCalledWith( undefined );
} );

it( 'should call onChange with alignment value when the control is inactive', () => {
it( 'should call onChange with alignment value when the control is inactive', async () => {
// note "middle" alias for "center"
const inactiveCenterControl = controls.find( ( { title } ) =>
title.toLowerCase().includes( 'middle' )
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

render(
<BlockVerticalAlignmentUI
isToolbar
value={ alignment }
onChange={ onChange }
isCollapsed={ false }
/>
);

inactiveCenterControl.onClick();
const inactiveControl = screen.getByRole( 'button', {
name: 'Align middle',
pressed: false,
} );

await user.click( inactiveControl );

expect( inactiveCenterControl.isActive ).toBe( false );
expect( onChange ).toHaveBeenCalledTimes( 1 );
expect( onChange ).toHaveBeenCalledWith( 'center' );
} );
Expand Down
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/block-vertical-alignment-control/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,12 @@ function BlockVerticalAlignmentUI( {
BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];

const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
const extraProps = isToolbar ? { isCollapsed } : {};
const extraProps = isToolbar
? { isCollapsed }
: { popoverProps: { POPOVER_PROPS } };

return (
<UIComponent
popoverProps={ POPOVER_PROPS }
icon={
activeAlignment
? activeAlignment.icon
Expand Down