Tests: Isolate deprecation warnings between cases

packages/block-editor/src/store/test/selectors.jsdom.test.jsx

@@ -19,6 +19,7 @@ import {
 } from '@wordpress/blocks';
 import { RawHTML } from '@wordpress/element';
 import { symbol } from '@wordpress/icons';
+import { logged } from '@wordpress/deprecated';
 import { select, dispatch } from '@wordpress/data';
 import * as selectors from '../selectors';
 import { store } from '../';
@@ -5342,6 +5343,10 @@ describe( '__unstableGetClientIdWithClientIdsTree', () => {
 	} );
 } );
 describe( '__unstableGetClientIdsTree', () => {
+	afterEach( () => {
+		Object.keys( logged ).forEach( ( key ) => delete logged[ key ] );
+	} );
+
 	it( "should return the full content tree starting from the given root, consisting of stripped down block object containing only its client ID and its inner blocks' client IDs", () => {
 		const state = {
 			blocks: {
@@ -5390,6 +5395,7 @@ describe( '__unstableGetClientIdsTree', () => {
 				],
 			},
 		] );
+		expect( console ).toHaveWarned();
 	} );
 } );
 

packages/blocks/src/api/test/children.jsdom.test.js

@@ -1,5 +1,6 @@
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 import { renderToString } from '@wordpress/element';
+import { logged } from '@wordpress/deprecated';
 import {
 	getSerializeCapableElement,
 	concat,
@@ -8,6 +9,10 @@ import {
 } from '../children';
 /* eslint-disable testing-library/render-result-naming-convention */
 
+afterEach( () => {
+	Object.keys( logged ).forEach( ( key ) => delete logged[ key ] );
+} );
+
 describe( 'getSerializeCapableElement', () => {
 	it( 'returns a serialize capable element', () => {
 		const blockNode = [
@@ -78,6 +83,7 @@ describe( 'concat', () => {
 			},
 		} );
 
+		expect( console ).toHaveWarned();
 		expect( result ).toEqual( [
 			'Hello ',
 			{

packages/blocks/src/api/test/matchers.jsdom.test.js

@@ -1,8 +1,13 @@
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 import { parse } from 'hpq';
 import { renderToString } from '@wordpress/element';
+import { logged } from '@wordpress/deprecated';
 import * as sources from '../matchers';
 
+afterEach( () => {
+	Object.keys( logged ).forEach( ( key ) => delete logged[ key ] );
+} );
+
 describe( 'matchers', () => {
 	describe( 'children()', () => {
 		it( 'should return a source function', () => {
@@ -39,6 +44,7 @@ describe( 'matchers', () => {
 				'<blockquote><p>A delicious sundae dessert</p></blockquote>';
 			const match = parse( html, sources.node() );
 
+			expect( console ).toHaveWarned();
 			expect( renderToString( match ) ).toBe( `<body>${ html }</body>` );
 		} );
 	} );

packages/blocks/src/api/test/node.jsdom.test.js

@@ -1,6 +1,11 @@
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
+import { logged } from '@wordpress/deprecated';
 import { getNamedNodeMapAsObject, toHTML, fromDOM } from '../node';
 
+afterEach( () => {
+	Object.keys( logged ).forEach( ( key ) => delete logged[ key ] );
+} );
+
 describe( 'getNamedNodeMapAsObject', () => {
 	it( 'should return an object of node attributes', () => {
 		const node = document.createElement( 'img' );
@@ -49,6 +54,7 @@ describe( 'fromDOM', () => {
 		expect( () => {
 			fromDOM( document.createDocumentFragment() );
 		} ).toThrow( TypeError );
+		expect( console ).toHaveWarned();
 	} );
 
 	it( 'should return an equivalent block node, including children', () => {

packages/components/src/color-palette/test/index.browser.test.tsx

@@ -1,8 +1,9 @@
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { screen, waitFor } from '@testing-library/react';
 import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 import { useState } from '@wordpress/element';
+import { logged } from '@wordpress/deprecated';
 import ColorPalette from '..';
 
 const EXAMPLE_COLORS = [
@@ -16,6 +17,17 @@ const DUPLICATE_COLOR_PALETTE = [
 ];
 const INITIAL_COLOR = EXAMPLE_COLORS[ 0 ].color;
 
+const DEPRECATION_MESSAGE =
+	'`asButtons` prop in wp.components.ColorPalette is deprecated since version 7.2. Please use `presentation` instead. Note: `asButtons={ true }` maps to `presentation="toggle-buttons"`. Explicit `presentation` takes precedence.';
+
+beforeEach( () => {
+	logged[ DEPRECATION_MESSAGE ] = true;
+} );
+
+afterEach( () => {
+	delete logged[ DEPRECATION_MESSAGE ];
+} );
+
 const ControlledColorPalette = ( {
 	onChange,
 }: {
@@ -64,6 +76,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	it( 'should warn for asButtons and prefer an explicit presentation', async () => {
+		delete logged[ DEPRECATION_MESSAGE ];
 		await render(
 			<ColorPalette
 				aria-label="Colors"
@@ -79,9 +92,7 @@ describe( 'ColorPalette', () => {
 		expect(
 			screen.getByRole( 'button', { name: 'red' } )
 		).not.toHaveAttribute( 'aria-pressed' );
-		expect( console ).toHaveWarnedWith(
-			'`asButtons` prop in wp.components.ColorPalette is deprecated since version 7.2. Please use `presentation` instead. Note: `asButtons={ true }` maps to `presentation="toggle-buttons"`. Explicit `presentation` takes precedence.'
-		);
+		expect( console ).toHaveWarnedWith( DEPRECATION_MESSAGE );
 	} );
 
 	it( 'should preserve asButtons as a toggle-button alias', async () => {

packages/components/src/duotone-picker/test/index.browser.test.tsx

@@ -1,8 +1,9 @@
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { screen } from '@testing-library/react';
 import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 import { useState } from '@wordpress/element';
+import { logged } from '@wordpress/deprecated';
 import { DuotonePicker } from '..';
 import type { DuotonePickerProps } from '../types';
 
@@ -22,6 +23,17 @@ const COLOR_PALETTE = [
 	{ color: '#ffffff', name: 'White', slug: 'white' },
 ];
 
+const DEPRECATION_MESSAGE =
+	'`asButtons` prop in wp.components.DuotonePicker is deprecated since version 7.2. Please use `presentation` instead. Note: `asButtons={ true }` maps to `presentation="toggle-buttons"`. Explicit `presentation` takes precedence.';
+
+beforeEach( () => {
+	logged[ DEPRECATION_MESSAGE ] = true;
+} );
+
+afterEach( () => {
+	delete logged[ DEPRECATION_MESSAGE ];
+} );
+
 describe( 'DuotonePicker', () => {
 	it( 'should use matching values only for display in command button presentation', async () => {
 		const user = userEvent.setup();
@@ -60,6 +72,7 @@ describe( 'DuotonePicker', () => {
 	} );
 
 	it( 'should warn for asButtons and prefer an explicit presentation', async () => {
+		delete logged[ DEPRECATION_MESSAGE ];
 		await render(
 			<DuotonePicker
 				aria-label="Duotones"
@@ -78,9 +91,7 @@ describe( 'DuotonePicker', () => {
 				name: 'Duotone: Dark Background',
 			} )
 		).not.toHaveAttribute( 'aria-pressed' );
-		expect( console ).toHaveWarnedWith(
-			'`asButtons` prop in wp.components.DuotonePicker is deprecated since version 7.2. Please use `presentation` instead. Note: `asButtons={ true }` maps to `presentation="toggle-buttons"`. Explicit `presentation` takes precedence.'
-		);
+		expect( console ).toHaveWarnedWith( DEPRECATION_MESSAGE );
 	} );
 
 	it( 'should preserve asButtons as a toggle-button alias', async () => {

packages/components/src/gradient-picker/test/index.browser.test.tsx

@@ -1,7 +1,8 @@
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { screen } from '@testing-library/react';
 import { userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
+import { logged } from '@wordpress/deprecated';
 import GradientPicker from '..';
 
 const GRADIENT_A =
@@ -14,6 +15,17 @@ const DUPLICATE_GRADIENTS = [
 	{ name: 'Dark Text', slug: 'dark-text', gradient: GRADIENT_A },
 ];
 
+const DEPRECATION_MESSAGE =
+	'`asButtons` prop in wp.components.GradientPicker is deprecated since version 7.2. Please use `presentation` instead. Note: `asButtons={ true }` maps to `presentation="toggle-buttons"`. Explicit `presentation` takes precedence.';
+
+beforeEach( () => {
+	logged[ DEPRECATION_MESSAGE ] = true;
+} );
+
+afterEach( () => {
+	delete logged[ DEPRECATION_MESSAGE ];
+} );
+
 describe( 'GradientPicker', () => {
 	it( 'should use matching values only for display in command button presentation', async () => {
 		const user = userEvent.setup();
@@ -49,6 +61,7 @@ describe( 'GradientPicker', () => {
 	} );
 
 	it( 'should warn for asButtons and prefer an explicit presentation', async () => {
+		delete logged[ DEPRECATION_MESSAGE ];
 		await render(
 			<GradientPicker
 				aria-label="Gradients"
@@ -66,9 +79,7 @@ describe( 'GradientPicker', () => {
 				name: 'Gradient: Dark Background',
 			} )
 		).not.toHaveAttribute( 'aria-pressed' );
-		expect( console ).toHaveWarnedWith(
-			'`asButtons` prop in wp.components.GradientPicker is deprecated since version 7.2. Please use `presentation` instead. Note: `asButtons={ true }` maps to `presentation="toggle-buttons"`. Explicit `presentation` takes precedence.'
-		);
+		expect( console ).toHaveWarnedWith( DEPRECATION_MESSAGE );
 	} );
 
 	it( 'should preserve asButtons as a toggle-button alias', async () => {

packages/components/src/isolated-event-container/test/index.jsdom.test.tsx

@@ -1,10 +1,23 @@
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { logged } from '@wordpress/deprecated';
 import IsolatedEventContainer from '..';
 
+const DEPRECATION_MESSAGE =
+	'wp.components.IsolatedEventContainer is deprecated since version 5.7.';
+
+beforeEach( () => {
+	logged[ DEPRECATION_MESSAGE ] = true;
+} );
+
+afterEach( () => {
+	delete logged[ DEPRECATION_MESSAGE ];
+} );
+
 describe( 'IsolatedEventContainer', () => {
 	it( 'should pass props to container', async () => {
+		delete logged[ DEPRECATION_MESSAGE ];
 		const user = userEvent.setup();
 		const clickHandler = vi.fn();
 		render(

packages/components/src/navigator/test/index.browser.test.tsx

@@ -1,9 +1,10 @@
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { userEvent } from 'vitest/browser';
 import type { ComponentPropsWithoutRef } from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import { render } from 'vitest-browser-react';
 import { useState } from '@wordpress/element';
+import { logged } from '@wordpress/deprecated';
 import Button from '../../button';
 import { Navigator, useNavigator } from '..';
 import { NavigatorToParentButton } from '../legacy';
@@ -51,6 +52,25 @@ const BUTTON_TEXT = {
 	goToWithSkipFocus: 'Go to with skipFocus',
 };
 
+const DEPRECATION_MESSAGES = {
+	NavigatorToParentButton:
+		'wp.components.NavigatorToParentButton is deprecated since version 6.7. Please use wp.components.Navigator.BackButton instead.',
+	goToParent:
+		'wp.components.useNavigator().goToParent is deprecated since version 6.7. Please use wp.components.useNavigator().goBack instead.',
+};
+
+beforeEach( () => {
+	for ( const message of Object.values( DEPRECATION_MESSAGES ) ) {
+		logged[ message ] = true;
+	}
+} );
+
+afterEach( () => {
+	for ( const message of Object.values( DEPRECATION_MESSAGES ) ) {
+		delete logged[ message ];
+	}
+} );
+
 type CustomTestOnClickHandler = (
 	args:
 		| {
@@ -856,6 +876,7 @@ describe( 'Navigator', () => {
 
 	describe( 'deprecated APIs', () => {
 		it( 'should log a deprecation notice when using the NavigatorToParentButton component', async () => {
+			delete logged[ DEPRECATION_MESSAGES.NavigatorToParentButton ];
 			const user = userEvent.setup();
 
 			await render(
@@ -877,11 +898,12 @@ describe( 'Navigator', () => {
 
 			// Rendering `NavigatorToParentButton` logs a deprecation notice
 			expect( console ).toHaveWarnedWith(
-				'wp.components.NavigatorToParentButton is deprecated since version 6.7. Please use wp.components.Navigator.BackButton instead.'
+				DEPRECATION_MESSAGES.NavigatorToParentButton
 			);
 		} );
 
 		it( 'should log a deprecation notice when using the useNavigator().goToParent() function', async () => {
+			delete logged[ DEPRECATION_MESSAGES.goToParent ];
 			const user = userEvent.setup();
 
 			await render(
@@ -902,7 +924,7 @@ describe( 'Navigator', () => {
 			).toHaveFocus();
 
 			expect( console ).toHaveWarnedWith(
-				'wp.components.useNavigator().goToParent is deprecated since version 6.7. Please use wp.components.useNavigator().goBack instead.'
+				DEPRECATION_MESSAGES.goToParent
 			);
 		} );
 	} );

packages/components/src/surface/test/index.jsdom.test.tsx

@@ -1,16 +1,25 @@
-import { describe, expect, test } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import { logged } from '@wordpress/deprecated';
 import { Surface } from '../index';
 
-// Checking for deprecation warnings before other tests because the `deprecated`
-// utility only fires a console.warn the first time a component is rendered.
+const DEPRECATION_MESSAGE =
+	'wp.components.__experimentalSurface is deprecated since version 7.2 and will be removed in version 7.4.';
+
+beforeEach( () => {
+	logged[ DEPRECATION_MESSAGE ] = true;
+} );
+
+afterEach( () => {
+	delete logged[ DEPRECATION_MESSAGE ];
+} );
+
 describe( 'Shows a deprecation warning', () => {
 	test( 'Surface', () => {
+		delete logged[ DEPRECATION_MESSAGE ];
 		render( <Surface>Surface</Surface> );
 
-		expect( console ).toHaveWarnedWith(
-			'wp.components.__experimentalSurface is deprecated since version 7.2 and will be removed in version 7.4.'
-		);
+		expect( console ).toHaveWarnedWith( DEPRECATION_MESSAGE );
 	} );
 } );