@wordpress/block-editor 17.0.0 → 17.1.0

package/src/components/border-radius-control/test/{index.js → index.jsdom.test.jsx}

@@ -17,12 +17,19 @@
  * The tests ensure that when the BorderRadiusControl is refactored to use
  * PresetInputControl, the existing user experience and behavior is preserved.
  */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BorderRadiusControl from '../index';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockVisibleElements();
+globalThis.wpVitest.mockScrollIntoView();
+
 describe( 'BorderRadiusControl', () => {
-	const mockOnChange = jest.fn();
+	const mockOnChange = vi.fn();
 	const mockPresets = {
 		default: [
 			{ name: 'None', slug: '0', size: 0 },

package/src/components/border-radius-control/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getAllUnit,
 	getAllValue,

package/src/components/button-block-appender/content.scss

@@ -64,7 +64,7 @@
 			}
 
 			.block-editor-inserter {
-				visibility: visible;
+				opacity: 1;
 			}
 		}
 	}

package/src/components/child-layout-control/test/{index.js → index.jsdom.test.jsx}

@@ -1,14 +1,20 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import ChildLayoutControl from '../';
 
-jest.mock( '../../use-settings', () => ( {
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
+vi.mock( import( '../../use-settings' ), () => ( {
 	useSettings: () => [ undefined ],
 } ) );
 
-jest.mock( '@wordpress/data/src/components/use-select', () =>
-	jest.fn( ( mapSelect ) => {
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn( ( mapSelect ) => {
 		if ( typeof mapSelect === 'function' ) {
 			return mapSelect( () => ( {
 				getBlockRootClientId: () => 'root-client-id',
@@ -19,19 +25,16 @@ jest.mock( '@wordpress/data/src/components/use-select', () =>
 			getBlockAttributes: () => ( {} ),
 			getBlockOrder: () => [],
 		};
-	} )
-);
-
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	} ),
 	useDispatch: () => ( {
-		__unstableMarkNextChangeAsNotPersistent: jest.fn(),
-		moveBlocksToPosition: jest.fn(),
+		__unstableMarkNextChangeAsNotPersistent: vi.fn(),
+		moveBlocksToPosition: vi.fn(),
 	} ),
 } ) );
 
 describe( 'ChildLayoutControl', () => {
 	const baseProps = {
-		onChange: jest.fn(),
+		onChange: vi.fn(),
 		parentLayout: {
 			type: 'grid',
 		},
@@ -40,14 +43,14 @@ describe( 'ChildLayoutControl', () => {
 	};
 
 	afterEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	function renderControl( props ) {
 		return render(
 			<ToolsPanel
 				label="Dimensions"
-				resetAll={ jest.fn() }
+				resetAll={ vi.fn() }
 				panelId="client-id"
 			>
 				<ChildLayoutControl { ...baseProps } { ...props } />
@@ -96,7 +99,7 @@ describe( 'ChildLayoutControl', () => {
 
 	it( 'sets a numeric span when entering 1 into an empty span control', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		renderControl( {
 			value: {},
@@ -134,7 +137,7 @@ describe( 'ChildLayoutControl', () => {
 
 	it( 'sets fixedNoShrink when selecting fixed flex sizing', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		renderControl( {
 			parentLayout: {
@@ -155,7 +158,7 @@ describe( 'ChildLayoutControl', () => {
 
 	it( 'sets legacy fixed when selecting max sizing', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		renderControl( {
 			parentLayout: {

package/src/components/color-palette/test/{control.js → control.jsdom.test.jsx}

@@ -1,6 +1,14 @@
-import { render, waitFor, queryByAttribute } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import {
+	render,
+	screen,
+	waitFor,
+	queryByAttribute,
+} from '@testing-library/react';
 import ColorPaletteControl from '../control';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const noop = () => {};
 
 async function renderAndValidate( ...renderArgs ) {
@@ -17,8 +25,8 @@ async function renderAndValidate( ...renderArgs ) {
 }
 
 describe( 'ColorPaletteControl', () => {
-	it( 'matches the snapshot', async () => {
-		const { container } = await renderAndValidate(
+	it( 'marks the selected color as active', async () => {
+		await renderAndValidate(
 			<ColorPaletteControl
 				label="Test Color"
 				value="#f00"
@@ -28,6 +36,9 @@ describe( 'ColorPaletteControl', () => {
 			/>
 		);
 
-		expect( container ).toMatchSnapshot();
+		expect( screen.getByRole( 'option', { name: 'red' } ) ).toHaveAttribute(
+			'aria-selected',
+			'true'
+		);
 	} );
 } );

package/src/components/colors/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getColorObjectByAttributeValues,
 	getColorObjectByColorValue,

package/src/components/colors/test/{with-colors.js → with-colors.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createCustomColorsHOC } from '../with-colors';
@@ -7,7 +8,7 @@ describe( 'createCustomColorsHOC', () => {
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
-		const BaseComponent = jest.fn( () => <div /> );
+		const BaseComponent = vi.fn( () => <div /> );
 		const EnhancedComponent =
 			withCustomColors( 'backgroundColor' )( BaseComponent );
 
@@ -46,7 +47,7 @@ describe( 'createCustomColorsHOC', () => {
 			)
 		);
 
-		const setAttributes = jest.fn();
+		const setAttributes = vi.fn();
 
 		render(
 			<EnhancedComponent
@@ -76,7 +77,7 @@ describe( 'createCustomColorsHOC', () => {
 			)
 		);
 
-		const setAttributes = jest.fn();
+		const setAttributes = vi.fn();
 
 		render(
 			<EnhancedComponent

package/src/components/colors-gradients/test/{control.js → control.jsdom.test.jsx}

@@ -1,7 +1,12 @@
+import { describe, expect, it, vi } from 'vitest';
 import { screen } from '@testing-library/react';
 import { click, render } from '@ariakit/test/react';
 import ColorGradientControl from '../control';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 const noop = () => {};
 
 describe( 'ColorPaletteControl', () => {
@@ -160,7 +165,7 @@ describe( 'ColorPaletteControl', () => {
 		} );
 
 		it( 'calls onColorChange with (color, slug) when a swatch is clicked (color-only palette)', async () => {
-			const onColorChange = jest.fn();
+			const onColorChange = vi.fn();
 
 			await render(
 				<ColorGradientControl
@@ -183,8 +188,8 @@ describe( 'ColorPaletteControl', () => {
 		} );
 
 		it( 'calls onColorChange with (color, slug) and calls onGradientChange() when both colors and gradients are available', async () => {
-			const onColorChange = jest.fn();
-			const onGradientChange = jest.fn();
+			const onColorChange = vi.fn();
+			const onGradientChange = vi.fn();
 
 			await render(
 				<ColorGradientControl

package/src/components/contrast-checker/test/{index.js → index.jsdom.test.jsx}

@@ -1,8 +1,9 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { speak } from '@wordpress/a11y';
 import ContrastChecker from '../';
 
-jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
+vi.mock( import( '@wordpress/a11y' ), () => ( { speak: vi.fn() } ) );
 
 describe( 'ContrastChecker', () => {
 	const backgroundColor = '#ffffff';

package/src/components/default-block-appender/test/__snapshots__/{index.js.snap → index.jsdom.test.jsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
+exports[`DefaultBlockAppender > should append a default block when input focused 1`] = `
 <div>
   <div
     class="block-editor-default-block-appender has-visible-prompt"
@@ -18,7 +18,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
 </div>
 `;
 
-exports[`DefaultBlockAppender should match snapshot 1`] = `
+exports[`DefaultBlockAppender > should match snapshot 1`] = `
 <div>
   <div
     class="block-editor-default-block-appender has-visible-prompt"
@@ -36,7 +36,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
 </div>
 `;
 
-exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
+exports[`DefaultBlockAppender > should optionally show without prompt 1`] = `
 <div>
   <div
     class="block-editor-default-block-appender"

package/src/components/default-block-appender/test/{index.js → index.jsdom.test.jsx}

@@ -1,20 +1,21 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import DefaultBlockAppender, { ZWNBSP } from '../';
 import * as blockEditorActions from '../../../store/actions';
 import * as blockEditorSelectors from '../../../store/selectors';
-jest.mock( '../../../store/actions', () => {
-	const actions = jest.requireActual( '../../../store/actions' );
+vi.mock( import( '../../../store/actions' ), async ( importOriginal ) => {
+	const actions = await importOriginal();
 	return {
 		...actions,
-		startTyping: jest.fn( actions.startTyping ),
+		startTyping: vi.fn( actions.startTyping ),
 	};
 } );
-jest.mock( '../../../store/selectors', () => {
-	const selectors = jest.requireActual( '../../../store/selectors' );
+vi.mock( import( '../../../store/selectors' ), async ( importOriginal ) => {
+	const selectors = await importOriginal();
 	return {
 		...selectors,
-		getBlockCount: jest.fn( selectors.getBlockCount ),
+		getBlockCount: vi.fn( selectors.getBlockCount ),
 	};
 } );
 
@@ -26,7 +27,7 @@ describe( 'DefaultBlockAppender', () => {
 	} );
 
 	it( 'should append a default block when input focused', async () => {
-		const startTyping = jest.spyOn( blockEditorActions, 'startTyping' );
+		const startTyping = vi.spyOn( blockEditorActions, 'startTyping' );
 		const user = userEvent.setup();
 
 		const { container } = render( <DefaultBlockAppender /> );

package/src/components/dimensions-tool/test/{index.js → index.jsdom.test.jsx}

@@ -1,9 +1,14 @@
+import { describe, expect, it, vi } from 'vitest';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 import DimensionsTool from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 const EMPTY_OBJECT = {};
 const ASPECT_RATIO_OPTIONS = [
 	{ label: 'Original', value: 'auto' },
@@ -100,7 +105,7 @@ function ControlledExample( { value, onChange, ...props } ) {
 describe( 'DimensionsTool', () => {
 	describe( 'controlled values', () => {
 		it( 'updates the aspect ratio control when the value prop changes', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const { rerender } = render(
 				<ControlledExample
 					value={ { aspectRatio: '16/9' } }
@@ -131,7 +136,7 @@ describe( 'DimensionsTool', () => {
 		} );
 
 		it( 'displays an aspect ratio that is written differently to the option with the same ratio', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const { rerender } = render(
 				<ControlledExample
 					value={ { aspectRatio: '1/1' } }
@@ -154,7 +159,7 @@ describe( 'DimensionsTool', () => {
 		} );
 
 		it( 'displays an aspect ratio without a matching option as custom', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			render(
 				<ControlledExample
 					value={ { aspectRatio: '7/5' } }
@@ -168,7 +173,7 @@ describe( 'DimensionsTool', () => {
 		} );
 
 		it( 'updates the scale control when the value prop changes', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const { rerender } = render(
 				<ControlledExample
 					value={ { aspectRatio: '16/9', scale: 'cover' } }
@@ -196,7 +201,7 @@ describe( 'DimensionsTool', () => {
 	describe( 'external updates', () => {
 		it( 'restores the scale that was set externally', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const updateRef = { current: null };
 
 			render(
@@ -230,7 +235,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'restores the aspect ratio that was set externally', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			const updateRef = { current: null };
 
 			render(
@@ -271,7 +276,7 @@ describe( 'DimensionsTool', () => {
 	describe( 'updating aspectRatio', () => {
 		it( 'when starting with empty initial state, setting aspectRatio also sets scale (0000) -> (1100)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -311,7 +316,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with just height, setting aspectRatio also sets scale (0001) -> (1101)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -351,7 +356,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with just width, setting aspectRatio also sets scale (0010) -> (1110)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -391,7 +396,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with scale, width, and height, setting aspectRatio also clears height (0111) -> (1110)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -431,7 +436,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with aspectRatio and scale, setting aspectRatio to "Original" also clears scale (1100) -> (0000)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				aspectRatio: '16/9',
@@ -463,7 +468,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with aspectRatio, scale, and height, setting aspectRatio to "Original" also clears scale (1101) -> (0001)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				aspectRatio: '16/9',
@@ -497,7 +502,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with aspectRatio, scale, and width, setting aspectRatio to "Original" also clears scale (1110) -> (0010)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				aspectRatio: '16/9',
@@ -533,7 +538,7 @@ describe( 'DimensionsTool', () => {
 	describe( 'updating scale', () => {
 		it( 'when default scale is cover, setting scale to fill preserves the fill value', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				aspectRatio: '16/9',
@@ -560,7 +565,7 @@ describe( 'DimensionsTool', () => {
 	describe( 'updating dimensions', () => {
 		it( 'when starting with just height, setting width also sets scale (0001) -> (0111)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -600,7 +605,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with just width, setting height also sets scale (0010) -> (0111)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -640,7 +645,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with scale, width, and height, clearing width also clears scale (0111) -> (0001)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -674,7 +679,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with scale, width, and height, clearing height also clears scale (0111) -> (0010)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				// aspectRatio,
@@ -708,7 +713,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with aspectRatio, scale, and height, setting width also clears aspectRatio (1101) -> (0111)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				aspectRatio: '16/9',
@@ -754,7 +759,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when starting with aspectRatio, scale, and width, setting height also clears aspectRatio (1110) -> (0111)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const initialValue = {
 				aspectRatio: '16/9',
@@ -802,7 +807,7 @@ describe( 'DimensionsTool', () => {
 	describe( 'internal component state', () => {
 		it( 'when aspect ratio is change to custom by setting width and height then removing a width value should return the original aspect ratio (1100) -> (1110) -> (0111) -> (1101)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const value = {
 				aspectRatio: '16/9',
@@ -841,7 +846,7 @@ describe( 'DimensionsTool', () => {
 
 		it( 'when custom scale is set then aspect ratio is set to original and then aspect ratio is changed back (1100) -> (1100) -> (0000) -> (1100)', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			const value = {
 				aspectRatio: '16/9',

package/src/components/dimensions-tool/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { findAspectRatioOption, parseAspectRatio } from '../utils';
 
 describe( 'parseAspectRatio', () => {

package/src/components/duotone-control/test/{index.js → index.jsdom.test.jsx}

@@ -1,7 +1,10 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import DuotoneControl from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
 // Adding two custom duotones in Global Styles seeds both from the palette's
 // darkest and lightest colors, so two presets holding the same pair is the
 // ordinary case. Only the slug tells them apart.
@@ -32,7 +35,7 @@ async function openControl( user ) {
 describe( 'DuotoneControl', () => {
 	it( 'reports the slug of the duplicate that was picked', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<DuotoneControl
@@ -64,7 +67,7 @@ describe( 'DuotoneControl', () => {
 				colorPalette={ COLOR_PALETTE }
 				value={ [ '#000000', '#ffffff' ] }
 				selectedSlug="custom-duotone-2"
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 			/>
 		);
 		await openControl( user );
@@ -85,7 +88,7 @@ describe( 'DuotoneControl', () => {
 				duotonePalette={ DUPLICATE_PALETTE }
 				colorPalette={ COLOR_PALETTE }
 				value={ [ '#000000', '#ffffff' ] }
-				onChange={ jest.fn() }
+				onChange={ vi.fn() }
 			/>
 		);
 		await openControl( user );

package/src/components/font-sizes/test/fluid-utils.js

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import { logged } from '@wordpress/deprecated';
 import {
 	getComputedFluidTypographyValue,

package/src/components/font-sizes/test/utils.js

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import { logged } from '@wordpress/deprecated';
 import { getFontSizeClass } from '../utils';
 

package/src/components/global-styles/{background-panel.js → background-panel.jsx}

@@ -305,7 +305,7 @@ export default function BackgroundImagePanel( {
 	// Get current gradient value, decoding preset slug references.
 	// Fall back to color.gradient for legacy blocks that haven't migrated
 	// to background.gradient yet (mirrors block inspector fallback in
-	// packages/block-editor/src/hooks/background.js).
+	// packages/block-editor/src/hooks/background.jsx).
 	const currentGradient = decodeValue(
 		value?.background?.gradient ?? value?.color?.gradient
 	);
@@ -315,7 +315,7 @@ export default function BackgroundImagePanel( {
 
 	// Set gradient value, encoding preset matches as slug references.
 	// Also clear color.gradient to migrate from the legacy location,
-	// matching the block inspector behavior in hooks/background.js.
+	// matching the block inspector behavior in hooks/background.jsx.
 	const setGradient = ( newGradient, newSlug ) => {
 		let newValue = setImmutably(
 			value,