@wordpress/block-editor 10.2.0 → 10.4.0

package/src/components/media-replace-flow/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -31,80 +32,97 @@ function TestWrapper() {
 	);
 }
 
-function setUpMediaReplaceFlow() {
-	const { container } = render( <TestWrapper /> );
-	return container;
-}
-
 describe( 'General media replace flow', () => {
 	it( 'renders successfully', () => {
-		const container = setUpMediaReplaceFlow();
-
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-
-		expect( mediaReplaceButton ).not.toBeNull();
+		render( <TestWrapper /> );
+
+		expect(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
+		).toBeVisible();
 	} );
 
-	it( 'renders replace menu', () => {
-		const container = setUpMediaReplaceFlow();
+	it( 'renders replace menu', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-		mediaReplaceButton.click();
+		render( <TestWrapper /> );
 
-		const uploadMenu = container.querySelector(
-			'.block-editor-media-replace-flow__media-upload-menu'
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
 		);
 
-		expect( uploadMenu ).not.toBeNull();
+		const uploadMenu = screen.getByRole( 'menu' );
+
+		expect( uploadMenu ).toBeInTheDocument();
+		expect( uploadMenu ).not.toBeVisible();
 	} );
 
-	it( 'displays media URL', () => {
-		const container = setUpMediaReplaceFlow();
+	it( 'displays media URL', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-		mediaReplaceButton.click();
+		render( <TestWrapper /> );
 
-		const mediaURL = container.querySelector( '.components-external-link' );
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
+		);
 
-		expect( mediaURL.href ).toEqual( 'https://example.media/' );
+		expect(
+			screen.getByRole( 'link', {
+				name: 'example.media (opens in a new tab)',
+			} )
+		).toHaveAttribute( 'href', 'https://example.media' );
 	} );
 
-	it( 'edits media URL', () => {
-		const container = setUpMediaReplaceFlow();
+	it( 'edits media URL', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-		mediaReplaceButton.click();
+		render( <TestWrapper /> );
 
-		const editMediaURL = container.querySelector(
-			'.block-editor-link-control__search-item-action'
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
 		);
 
-		editMediaURL.click();
-
-		const mediaURLInput = container.querySelector(
-			'.block-editor-url-input__input'
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Edit',
+			} )
 		);
 
-		fireEvent.change( mediaURLInput, {
-			target: { value: 'https://new.example.media' },
+		const mediaURLInput = screen.getByRole( 'combobox', {
+			name: 'URL',
+			expanded: false,
 		} );
 
-		const saveMediaURLButton = container.querySelector(
-			'.block-editor-link-control__search-submit'
-		);
-
-		saveMediaURLButton.click();
+		await user.clear( mediaURLInput );
+		await user.type( mediaURLInput, 'https://new.example.media' );
 
-		const mediaURL = container.querySelector( '.components-external-link' );
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Submit',
+			} )
+		);
 
-		expect( mediaURL.href ).toEqual( 'https://new.example.media/' );
+		expect(
+			screen.getByRole( 'link', {
+				name: 'new.example.media (opens in a new tab)',
+			} )
+		).toHaveAttribute( 'href', 'https://new.example.media' );
 	} );
 } );

package/src/components/panel-color-settings/test/index.js

@@ -31,7 +31,7 @@ describe( 'PanelColorSettings', () => {
 				] }
 			/>
 		);
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should render a color panel if at least one setting supports custom colors', async () => {
@@ -55,7 +55,7 @@ describe( 'PanelColorSettings', () => {
 				] }
 			/>
 		);
-		expect( container.innerHTML ).not.toBe( '' );
+		expect( container ).not.toBeEmptyDOMElement();
 	} );
 
 	it( 'should render a color panel if at least one setting specifies some colors to choose', async () => {
@@ -85,7 +85,7 @@ describe( 'PanelColorSettings', () => {
 				] }
 			/>
 		);
-		expect( container.innerHTML ).not.toBe( '' );
+		expect( container ).not.toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything if none of the setting panels has colors to choose', async () => {
@@ -112,6 +112,6 @@ describe( 'PanelColorSettings', () => {
 				] }
 			/>
 		);
-		expect( container.innerHTML ).not.toBe( '' );
+		expect( container ).not.toBeEmptyDOMElement();
 	} );
 } );

package/src/components/preview-options/index.js

@@ -13,6 +13,7 @@ import { check } from '@wordpress/icons';
 
 export default function PreviewOptions( {
 	children,
+	viewLabel,
 	className,
 	isEnabled = true,
 	deviceType,
@@ -32,8 +33,7 @@ export default function PreviewOptions( {
 		variant: 'tertiary',
 		className: 'block-editor-post-preview__button-toggle',
 		disabled: ! isEnabled,
-		/* translators: button label text should, if possible, be under 16 characters. */
-		children: __( 'View' ),
+		children: viewLabel,
 	};
 	const menuProps = {
 		'aria-label': __( 'View options' ),

package/src/components/preview-options/style.scss

@@ -28,7 +28,7 @@
 }
 
 .edit-post-header__settings,
-.edit-site-header__actions {
+.edit-site-header-edit-mode__actions {
 	@include break-small () {
 		.editor-post-preview {
 			display: none;

package/src/components/provider/test/use-block-sync.js

@@ -6,7 +6,7 @@ import { registerBlockType } from '@wordpress/blocks';
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -48,16 +48,13 @@ describe( 'useBlockSync hook', () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();
 
-		let root;
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					value={ fakeBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		const { rerender } = render(
+			<TestWrapper
+				value={ fakeBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		// Reset blocks should be called on mount.
 		expect( onChange ).not.toHaveBeenCalled();
@@ -68,15 +65,13 @@ describe( 'useBlockSync hook', () => {
 		const testBlocks = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
 		];
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					value={ testBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				value={ testBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		// Reset blocks should be called when the incoming value changes.
 		expect( onChange ).not.toHaveBeenCalled();
@@ -95,17 +90,14 @@ describe( 'useBlockSync hook', () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();
 
-		let root;
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					clientId="test"
-					value={ fakeBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		const { rerender } = render(
+			<TestWrapper
+				clientId="test"
+				value={ fakeBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		expect( resetBlocks ).not.toHaveBeenCalled();
 		expect( onChange ).not.toHaveBeenCalled();
@@ -123,16 +115,14 @@ describe( 'useBlockSync hook', () => {
 				attributes: { foo: 1 },
 			},
 		];
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					clientId="test"
-					value={ testBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				clientId="test"
+				value={ testBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		// Reset blocks should be called when the incoming value changes.
 		expect( onChange ).not.toHaveBeenCalled();
@@ -158,22 +148,20 @@ describe( 'useBlockSync hook', () => {
 				attributes: { foo: 1 },
 			},
 		];
-		let root;
+
 		let registry;
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					clientId="test"
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		const { rerender } = render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				clientId="test"
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		registry
 			.dispatch( blockEditorStore )
@@ -188,16 +176,14 @@ describe( 'useBlockSync hook', () => {
 		// triggered once more.
 		expect( newBlockValue ).not.toBe( value1 );
 
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					clientId="test"
-					value={ newBlockValue }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				clientId="test"
+				value={ newBlockValue }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		// replaceInnerBlocks should not be called when the controlling
 		// block value is the same as what already exists in the store.
@@ -210,16 +196,14 @@ describe( 'useBlockSync hook', () => {
 			'setHasControlledInnerBlocks'
 		);
 
-		await act( async () => {
-			create(
-				<TestWrapper
-					clientId="test"
-					value={ [] }
-					onChange={ jest.fn() }
-					onInput={ jest.fn() }
-				/>
-			);
-		} );
+		render(
+			<TestWrapper
+				clientId="test"
+				value={ [] }
+				onChange={ jest.fn() }
+				onInput={ jest.fn() }
+			/>
+		);
 		expect( setAsController ).toHaveBeenCalledWith( 'test', true );
 	} );
 
@@ -233,16 +217,14 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		await act( async () => {
-			create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 		onChange.mockClear();
 		onInput.mockClear();
 
@@ -278,16 +260,14 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		await act( async () => {
-			create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 		onChange.mockClear();
 		onInput.mockClear();
 
@@ -327,30 +307,26 @@ describe( 'useBlockSync hook', () => {
 			},
 		];
 
-		await act( async () => {
-			create(
-				<TestWrapper
-					clientId="test"
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		const { rerender } = render(
+			<TestWrapper
+				clientId="test"
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 		onChange.mockClear();
 		onInput.mockClear();
 		replaceInnerBlocks.mockClear();
 
-		await act( async () => {
-			create(
-				<TestWrapper
-					clientId="test"
-					value={ [] }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				clientId="test"
+				value={ [] }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [] );
 		expect( onChange ).not.toHaveBeenCalled();
@@ -379,16 +355,14 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		await act( async () => {
-			create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 		onChange.mockClear();
 		onInput.mockClear();
 		replaceInnerBlocks.mockClear();
@@ -429,17 +403,15 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		let root;
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ fakeBlocks }
-					onChange={ onChange1 }
-					onInput={ onInput }
-				/>
-			);
-		} );
+
+		const { rerender } = render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ fakeBlocks }
+				onChange={ onChange1 }
+				onInput={ onInput }
+			/>
+		);
 
 		// Create a persistent change.
 		registry
@@ -468,16 +440,14 @@ describe( 'useBlockSync hook', () => {
 
 		// Update the component to point at a "different entity" (e.g. different
 		// blocks and onChange handler.)
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ newBlocks }
-					onChange={ onChange2 }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ newBlocks }
+				onChange={ onChange2 }
+				onInput={ onInput }
+			/>
+		);
 
 		// Create a persistent change.
 		registry
@@ -511,17 +481,15 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		let root;
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ fakeBlocks }
-					onChange={ onChange1 }
-					onInput={ onInput }
-				/>
-			);
-		} );
+
+		const { rerender } = render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ fakeBlocks }
+				onChange={ onChange1 }
+				onInput={ onInput }
+			/>
+		);
 
 		const newBlocks = [
 			{ clientId: 'b', innerBlocks: [], attributes: { foo: 1 } },
@@ -531,16 +499,14 @@ describe( 'useBlockSync hook', () => {
 
 		// Update the component to point at a "different entity" (e.g. different
 		// blocks and onChange handler.)
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ newBlocks }
-					onChange={ onChange2 }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ newBlocks }
+				onChange={ onChange2 }
+				onInput={ onInput }
+			/>
+		);
 
 		// Create a persistent change.
 		registry

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

@@ -90,7 +90,7 @@ describe( 'Basic rendering', () => {
 			'.block-editor-responsive-block-control__group.is-responsive'
 		);
 
-		expect( container.innerHTML ).not.toBe( '' );
+		expect( container ).not.toBeEmptyDOMElement();
 
 		expect( defaultControlGroup ).not.toBeNull();
 		expect( responsiveControlGroup ).toBeNull();
@@ -110,7 +110,7 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render without valid property', () => {
@@ -121,7 +121,7 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render without valid default control render prop', () => {
@@ -129,7 +129,7 @@ describe( 'Basic rendering', () => {
 			<ResponsiveBlockControl title="Padding" property="padding" />
 		);
 
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should render with custom label for toggle control when provided', () => {

package/src/components/rich-text/format-toolbar/index.js

@@ -15,7 +15,7 @@ import { chevronDown } from '@wordpress/icons';
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 const FormatToolbar = () => {