Skip to content

Commit

Permalink
Block Editor: Refactor BlockVerticalAlignmentUI tests to @testing-lib…
Browse files Browse the repository at this point in the history 
…rary/react (#44029)
  • Loading branch information
@tyxla
tyxla authored Sep 12, 2022
1 parent 89bfa08 commit f58b747
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 76 deletions.
142 changes: 91 additions & 51 deletions ...k-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
View file
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
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
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

0 comments on commit f58b747

Please sign in to comment.