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 BlockAlignmentUI tests to @testing-library/react #44023

Merged
merged 1 commit into from
Sep 12, 2022
Merged

Block Editor: Refactor BlockAlignmentUI tests to @testing-library/react #44023

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
173 changes: 108 additions & 65 deletions ...ages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,131 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`BlockAlignmentUI should match snapshot 1`] = `
<ToolbarGroup
controls={
Array [
Object {
"icon": <SVG
exports[`BlockAlignmentUI 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="Align"
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="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
/>
</svg>
</button>
</div>
</div>
`;

exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] = `
<div>
<div
class="components-toolbar"
icon="[object Object]"
label="Align"
>
<div>
<button
aria-label="None"
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="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z"
/>
</SVG>,
"isActive": false,
"onClick": [Function],
"role": "menuitemradio",
"title": "None",
},
Object {
"icon": <SVG
</svg>
</button>
</div>
<div>
<button
aria-label="Align left"
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="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
/>
</SVG>,
"isActive": true,
"onClick": [Function],
"role": "menuitemradio",
"title": "Align left",
},
Object {
"icon": <SVG
</svg>
</button>
</div>
<div>
<button
aria-label="Align center"
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="M7 9v6h10V9H7zM5 19.8h14v-1.5H5v1.5zM5 4.3v1.5h14V4.3H5z"
/>
</SVG>,
"isActive": false,
"onClick": [Function],
"role": "menuitemradio",
"title": "Align center",
},
Object {
"icon": <SVG
</svg>
</button>
</div>
<div>
<button
aria-label="Align right"
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="M6 15h14V9H6v6zm6-10.8v1.5h8V4.2h-8zm0 15.6h8v-1.5h-8v1.5z"
/>
</SVG>,
"isActive": false,
"onClick": [Function],
"role": "menuitemradio",
"title": "Align right",
},
]
}
icon={
<SVG
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
/>
</SVG>
}
isCollapsed={true}
label="Align"
popoverProps={
Object {
"isAlternate": true,
}
}
toggleProps={
Object {
"describedBy": "Change alignment",
}
}
/>
</svg>
</button>
</div>
</div>
</div>
`;
126 changes: 95 additions & 31 deletions packages/block-editor/src/components/block-alignment-control/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,125 @@
/**
* External dependencies
*/
import { shallow } from 'enzyme';

/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

/**
* Internal dependencies
*/
import BlockAlignmentUI from '../ui';

jest.mock( '@wordpress/data/src/components/use-select', () => {
// This allows us to tweak the returned value on each test.
const mock = jest.fn();
return mock;
} );
useSelect.mockImplementation( () => ( { wideControlsEnabled: false } ) );

describe( 'BlockAlignmentUI', () => {
const alignment = 'left';
const onChange = jest.fn();

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

const controls = wrapper.props().controls;

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

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

expect( container ).toMatchSnapshot();
} );

test( 'should call onChange with undefined, when the control is already active', () => {
const activeControl = controls.find(
( { title } ) => title === 'Align left'
test( 'should match snapshot when controls are visible', () => {
const { container } = render(
<BlockAlignmentUI
value={ alignment }
onChange={ onChange }
isToolbar
isCollapsed={ false }
/>
);

expect( container ).toMatchSnapshot();
} );

test( 'should expand controls when toggled', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

render(
<BlockAlignmentUI
value={ alignment }
onChange={ onChange }
isToolbar
/>
);
activeControl.onClick();

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

await user.click(
screen.getByRole( 'button', {
name: 'Align',
} )
);

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

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

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

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

await user.click( activeControl );

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

test( 'should call onChange with alignment value when the control is inactive', () => {
const inactiveCenterControl = controls.find(
( { title } ) => title === 'Align center'
test( 'should call onChange with alignment value when the control is inactive', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );

render(
<BlockAlignmentUI
value={ alignment }
onChange={ onChange }
isToolbar
isCollapsed={ false }
/>
);
inactiveCenterControl.onClick();

expect( inactiveCenterControl.isActive ).toBe( false );
const inactiveControl = screen.getByRole( 'button', {
name: 'Align center',
pressed: false,
} );

await user.click( inactiveControl );

expect( onChange ).toHaveBeenCalledTimes( 1 );
expect( onChange ).toHaveBeenCalledWith( 'center' );
} );
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-alignment-control/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,10 @@ function BlockAlignmentUI( {

const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
const commonProps = {
popoverProps: POPOVER_PROPS,
icon: activeAlignmentControl
? activeAlignmentControl.icon
: defaultAlignmentControl.icon,
label: __( 'Align' ),
toggleProps: { describedBy: __( 'Change alignment' ) },
};
const extraProps = isToolbar
? {
Expand All @@ -70,6 +68,8 @@ function BlockAlignmentUI( {
} ),
}
: {
toggleProps: { describedBy: __( 'Change alignment' ) },
popoverProps: POPOVER_PROPS,
children: ( { onClose } ) => {
return (
<>
Expand Down