Skip to content

Commit

Permalink
Block Editor: Refactor ResponsiveBlockControl tests to use @testing-l…
Browse files Browse the repository at this point in the history 
…ibrary/react (#44669)
  • Loading branch information
@tyxla
tyxla authored Oct 4, 2022
1 parent b864b19 commit b053f14
Showing 1 changed file with 73 additions and 118 deletions.
191 changes: 73 additions & 118 deletions packages/block-editor/src/components/responsive-block-control/test/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,20 @@
/**
* External dependencies
*/
import { render, unmountComponentAtNode } from 'react-dom';
import { act, Simulate } from 'react-dom/test-utils';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

/**
* WordPress dependencies
*/
import { Fragment, useState } from '@wordpress/element';

import { SelectControl } from '@wordpress/components';

/**
* Internal dependencies
*/
import ResponsiveBlockControl from '../index';

let container = null;
beforeEach( () => {
// Setup a DOM element as a render target.
container = document.createElement( 'div' );
document.body.appendChild( container );
} );

afterEach( () => {
// Cleanup on exiting.
unmountComponentAtNode( container );
container.remove();
container = null;
} );

const inputId = 'input-12345678';

const sizeOptions = [
Expand Down Expand Up @@ -65,16 +50,13 @@ const renderTestDefaultControlComponent = ( labelComponent, device ) => {

describe( 'Basic rendering', () => {
it( 'should render with required props', () => {
act( () => {
render(
<ResponsiveBlockControl
title="Padding"
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
/>,
container
);
} );
const { container } = render(
<ResponsiveBlockControl
title="Padding"
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
/>
);

const activePropertyLabel = Array.from(
container.querySelectorAll( 'legend' )
Expand Down Expand Up @@ -121,58 +103,46 @@ describe( 'Basic rendering', () => {
} );

it( 'should not render without valid legend', () => {
act( () => {
render(
<ResponsiveBlockControl
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
/>,
container
);
} );
const { container } = render(
<ResponsiveBlockControl
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
/>
);

expect( container.innerHTML ).toBe( '' );
} );

it( 'should not render without valid property', () => {
act( () => {
render(
<ResponsiveBlockControl
title="Padding"
renderDefaultControl={ renderTestDefaultControlComponent }
/>,
container
);
} );
const { container } = render(
<ResponsiveBlockControl
title="Padding"
renderDefaultControl={ renderTestDefaultControlComponent }
/>
);

expect( container.innerHTML ).toBe( '' );
} );

it( 'should not render without valid default control render prop', () => {
act( () => {
render(
<ResponsiveBlockControl title="Padding" property="padding" />,
container
);
} );
const { container } = render(
<ResponsiveBlockControl title="Padding" property="padding" />
);

expect( container.innerHTML ).toBe( '' );
} );

it( 'should render with custom label for toggle control when provided', () => {
const customToggleLabel =
'Utilise a matching padding value on all viewports';
act( () => {
render(
<ResponsiveBlockControl
title="Padding"
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
toggleLabel={ customToggleLabel }
/>,
container
);
} );
const { container } = render(
<ResponsiveBlockControl
title="Padding"
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
toggleLabel={ customToggleLabel }
/>
);

const actualToggleLabel = container.querySelector(
'label.components-toggle-control__label'
Expand All @@ -184,17 +154,14 @@ describe( 'Basic rendering', () => {
it( 'should pass custom label for default control group to the renderDefaultControl function when provided', () => {
const customDefaultControlGroupLabel = 'Everything';

act( () => {
render(
<ResponsiveBlockControl
title="Padding"
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
defaultLabel={ customDefaultControlGroupLabel }
/>,
container
);
} );
const { container } = render(
<ResponsiveBlockControl
title="Padding"
property="padding"
renderDefaultControl={ renderTestDefaultControlComponent }
defaultLabel={ customDefaultControlGroupLabel }
/>
);

const defaultControlLabel = Array.from(
container.querySelectorAll( 'label' )
Expand All @@ -206,17 +173,14 @@ describe( 'Basic rendering', () => {

describe( 'Default and Responsive modes', () => {
it( 'should render in responsive mode when isResponsive prop is set to true', () => {
act( () => {
render(
<ResponsiveBlockControl
title="Padding"
property="padding"
isResponsive={ true }
renderDefaultControl={ renderTestDefaultControlComponent }
/>,
container
);
} );
const { container } = render(
<ResponsiveBlockControl
title="Padding"
property="padding"
isResponsive={ true }
renderDefaultControl={ renderTestDefaultControlComponent }
/>
);

const defaultControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group:not(.is-responsive)'
Expand Down Expand Up @@ -253,18 +217,15 @@ describe( 'Default and Responsive modes', () => {
renderTestDefaultControlComponent
);

act( () => {
render(
<ResponsiveBlockControl
title="Padding"
property="padding"
isResponsive={ true }
renderDefaultControl={ mockRenderDefaultControl }
viewports={ customViewportSet }
/>,
container
);
} );
const { container } = render(
<ResponsiveBlockControl
title="Padding"
property="padding"
isResponsive={ true }
renderDefaultControl={ mockRenderDefaultControl }
viewports={ customViewportSet }
/>
);

const defaultRenderControlCall = 1;

Expand All @@ -287,7 +248,10 @@ describe( 'Default and Responsive modes', () => {
);
} );

it( 'should switch between default and responsive modes when interacting with toggle control', () => {
it( 'should switch between default and responsive modes when interacting with toggle control', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const ResponsiveBlockControlConsumer = () => {
const [ isResponsive, setIsResponsive ] = useState( false );

Expand All @@ -304,9 +268,7 @@ describe( 'Default and Responsive modes', () => {
);
};

act( () => {
render( <ResponsiveBlockControlConsumer />, container );
} );
const { container } = render( <ResponsiveBlockControlConsumer /> );

let defaultControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group:not(.is-responsive)'
Expand All @@ -332,9 +294,7 @@ describe( 'Default and Responsive modes', () => {
expect( responsiveControlGroup ).toBeNull();

// Toggle to "responsive" mode.
act( () => {
Simulate.change( toggleInput, { target: { checked: false } } );
} );
await user.click( toggleInput );

defaultControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group:not(.is-responsive)'
Expand All @@ -347,9 +307,7 @@ describe( 'Default and Responsive modes', () => {
expect( responsiveControlGroup ).not.toBeNull();

// Toggle back to "default" mode.
act( () => {
Simulate.change( toggleInput, { target: { checked: true } } );
} );
await user.click( toggleInput );

defaultControlGroup = container.querySelector(
'.block-editor-responsive-block-control__group:not(.is-responsive)'
Expand Down Expand Up @@ -382,18 +340,15 @@ describe( 'Default and Responsive modes', () => {
} );
} );

act( () => {
render(
<ResponsiveBlockControl
title="Padding"
property="padding"
isResponsive={ true }
renderDefaultControl={ spyRenderDefaultControl }
renderResponsiveControls={ mockRenderResponsiveControls }
/>,
container
);
} );
const { container } = render(
<ResponsiveBlockControl
title="Padding"
property="padding"
isResponsive={ true }
renderDefaultControl={ spyRenderDefaultControl }
renderResponsiveControls={ mockRenderResponsiveControls }
/>
);

// The user should see "range" controls so we can legitimately query for them here.
const customControls = Array.from(
Expand Down

0 comments on commit b053f14

Please sign in to comment.