@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.0

package/src/components/alignment-control/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -17,46 +18,129 @@ describe( 'AlignmentUI', () => {
 	const alignment = 'left';
 	const onChangeSpy = jest.fn();
 
-	const wrapper = shallow(
-		<AlignmentUI isToolbar value={ alignment } onChange={ onChangeSpy } />
-	);
-
-	const controls = wrapper.props().controls;
-
 	afterEach( () => {
 		onChangeSpy.mockClear();
 	} );
 
-	test( 'should match snapshot', () => {
-		expect( wrapper ).toMatchSnapshot();
+	test( 'should match snapshot when controls are hidden', () => {
+		const { container } = render(
+			<AlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChangeSpy }
+			/>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	test( 'should match snapshot when controls are visible', () => {
+		const { container } = render(
+			<AlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChangeSpy }
+				isCollapsed={ false }
+			/>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	test( 'should expand controls when toggled', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<AlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChangeSpy }
+			/>
+		);
+
+		expect(
+			screen.queryByRole( 'menuitemradio', {
+				name: /^Align text \w+$/,
+			} )
+		).not.toBeInTheDocument();
+
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Align',
+			} )
+		);
+
+		expect(
+			screen.getAllByRole( 'menuitemradio', {
+				name: /^Align text \w+$/,
+			} )
+		).toHaveLength( 3 );
 	} );
 
-	test( 'should call on change with undefined when a control is already active', () => {
-		const activeControl = controls.find( ( { isActive } ) => isActive );
-		activeControl.onClick();
+	test( 'should call on change with undefined when a control is already active', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		expect( activeControl.align ).toBe( alignment );
+		render(
+			<AlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChangeSpy }
+				isCollapsed={ false }
+			/>
+		);
+
+		const activeControl = screen.getByRole( 'button', {
+			name: /^Align text \w+$/,
+			pressed: true,
+		} );
+
+		await user.click( activeControl );
+
+		expect( activeControl ).toHaveAttribute( 'align', alignment );
 		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 		expect( onChangeSpy ).toHaveBeenCalledWith( undefined );
 	} );
 
-	test( 'should call on change a new value when the control is not active', () => {
-		const inactiveControl = controls.find(
-			( { align } ) => align === 'center'
+	test( 'should call on change a new value when the control is not active', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<AlignmentUI
+				isToolbar
+				value={ alignment }
+				onChange={ onChangeSpy }
+				isCollapsed={ false }
+			/>
 		);
-		inactiveControl.onClick();
 
-		expect( inactiveControl.isActive ).toBe( false );
+		const inactiveControl = screen.getByRole( 'button', {
+			name: 'Align text center',
+			pressed: false,
+		} );
+
+		await user.click( inactiveControl );
+
 		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 		expect( onChangeSpy ).toHaveBeenCalledWith( 'center' );
 	} );
 
-	test( 'should allow custom alignment controls to be specified', () => {
-		const wrapperCustomControls = shallow(
+	test( 'should allow custom alignment controls to be specified', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		const { container } = render(
 			<AlignmentUI
 				isToolbar
 				value={ 'custom-right' }
 				onChange={ onChangeSpy }
+				isCollapsed={ false }
 				alignmentControls={ [
 					{
 						icon: alignLeft,
@@ -71,26 +155,33 @@ describe( 'AlignmentUI', () => {
 				] }
 			/>
 		);
-		expect( wrapperCustomControls ).toMatchSnapshot();
-		const customControls = wrapperCustomControls.props().controls;
-		expect( customControls ).toHaveLength( 2 );
+
+		expect( container ).toMatchSnapshot();
+
+		expect(
+			screen.getAllByRole( 'button', {
+				name: /^My custom \w+$/,
+			} )
+		).toHaveLength( 2 );
 
 		// Should correctly call on change when right alignment is pressed (active alignment)
-		const rightControl = customControls.find(
-			( { align } ) => align === 'custom-right'
-		);
-		expect( rightControl.title ).toBe( 'My custom right' );
-		rightControl.onClick();
+		const rightControl = screen.getByRole( 'button', {
+			name: 'My custom right',
+		} );
+
+		await user.click( rightControl );
+
 		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 		expect( onChangeSpy ).toHaveBeenCalledWith( undefined );
 		onChangeSpy.mockClear();
 
 		// Should correctly call on change when right alignment is pressed (inactive alignment)
-		const leftControl = customControls.find(
-			( { align } ) => align === 'custom-left'
-		);
-		expect( leftControl.title ).toBe( 'My custom left' );
-		leftControl.onClick();
+		const leftControl = screen.getByRole( 'button', {
+			name: 'My custom left',
+		} );
+
+		await user.click( leftControl );
+
 		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 		expect( onChangeSpy ).toHaveBeenCalledWith( 'custom-left' );
 	} );

package/src/components/alignment-control/ui.js

@@ -57,14 +57,19 @@ function AlignmentUI( {
 	}
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar ? { isCollapsed } : {};
+	const extraProps = isToolbar
+		? { isCollapsed }
+		: {
+				toggleProps: {
+					describedBy,
+				},
+				popoverProps: POPOVER_PROPS,
+		  };
 
 	return (
 		<UIComponent
 			icon={ setIcon() }
 			label={ label }
-			toggleProps={ { describedBy } }
-			popoverProps={ POPOVER_PROPS }
 			controls={ alignmentControls.map( ( control ) => {
 				const { align } = control;
 				const isActive = value === align;

package/src/components/block-actions/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray, first, last, every } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -36,7 +31,7 @@ export default function BlockActions( {
 
 	const blocks = getBlocksByClientId( clientIds );
 	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-	const canDuplicate = every( blocks, ( block ) => {
+	const canDuplicate = blocks.every( ( block ) => {
 		return (
 			!! block &&
 			hasBlockSupport( block.name, 'multiple', true ) &&
@@ -80,10 +75,16 @@ export default function BlockActions( {
 			return removeBlocks( clientIds, updateSelection );
 		},
 		onInsertBefore() {
-			insertBeforeBlock( first( castArray( clientIds ) ) );
+			const clientId = Array.isArray( clientIds )
+				? clientIds[ 0 ]
+				: clientId;
+			insertBeforeBlock( clientId );
 		},
 		onInsertAfter() {
-			insertAfterBlock( last( castArray( clientIds ) ) );
+			const clientId = Array.isArray( clientIds )
+				? clientIds[ clientIds.length - 1 ]
+				: clientId;
+			insertAfterBlock( clientId );
 		},
 		onMoveTo() {
 			setNavigationMode( true );

package/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -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>
 `;

package/src/components/block-alignment-control/test/index.js

@@ -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' );
 	} );

package/src/components/block-alignment-control/ui.js

@@ -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
 		? {
@@ -70,6 +68,8 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
+				toggleProps: { describedBy: __( 'Change alignment' ) },
+				popoverProps: POPOVER_PROPS,
 				children: ( { onClose } ) => {
 					return (
 						<>