Update deprecation warnings, add deprecation unit tests

packages/components/src/composite/legacy/index.tsx

@@ -125,12 +125,12 @@ function proxyComposite< C extends Component >(
 ): CompositeComponent< C > {
 	const displayName = ProxiedComponent.displayName;
 
-	deprecated( `__unstable${ displayName }`, {
-		since: '6.7',
-		alternative: `stable ${ displayName } component`,
-	} );
-
 	const Component = ( legacyProps: CompositeStateProps ) => {
+		deprecated( `wp.components.__unstable${ displayName }`, {
+			since: '6.7',
+			alternative: `the unprefixed, stable version of the ${ displayName } component`,
+		} );
+
 		const { store, ...rest } =
 			mapLegacyStatePropsToComponentProps( legacyProps );
 		const props = rest as ComponentProps< C >;
@@ -196,9 +196,9 @@ export const CompositeItem = proxyComposite( Current.CompositeItem, {
 export function useCompositeState(
 	legacyStateOptions: LegacyStateOptions = {}
 ): CompositeState {
-	deprecated( `__unstableUseCompositeState`, {
+	deprecated( `wp.components.__unstableUseCompositeState`, {
 		since: '6.7',
-		alternative: `useCompositeStore hook`,
+		alternative: `the useCompositeStore hook`,
 	} );
 
 	const {

packages/components/src/composite/legacy/test/index.tsx

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { queryByAttribute, render, screen } from '@testing-library/react';
+import {
+	queryByAttribute,
+	render,
+	screen,
+	renderHook,
+} from '@testing-library/react';
 import { press, sleep, waitFor } from '@ariakit/test';
 
 /**
@@ -156,6 +161,57 @@ function getShiftTestItems() {
 	};
 }
 
+// Checking for deprecation warnings before other tests because the `deprecated`
+// utility only fires a console.warn the first time a component is rendered.
+describe( 'Shows a deprecation warning', () => {
+	it( 'useCompositeState', () => {
+		renderHook( () => useCompositeState() );
+		expect( console ).toHaveWarnedWith(
+			'wp.components.__unstableUseCompositeState is deprecated since version 6.7. Please use the useCompositeStore hook instead.'
+		);
+	} );
+	it( 'Composite', () => {
+		const Test = () => {
+			const props = useCompositeState();
+			return <Composite { ...props } />;
+		};
+		render( <Test /> );
+		expect( console ).toHaveWarnedWith(
+			'wp.components.__unstableComposite is deprecated since version 6.7. Please use the unprefixed, stable version of the Composite component instead.'
+		);
+	} );
+	it( 'CompositeItem', () => {
+		const Test = () => {
+			const props = useCompositeState();
+			return (
+				<Composite { ...props }>
+					<CompositeItem { ...props } />
+				</Composite>
+			);
+		};
+		render( <Test /> );
+		expect( console ).toHaveWarnedWith(
+			'wp.components.__unstableCompositeItem is deprecated since version 6.7. Please use the unprefixed, stable version of the CompositeItem component instead.'
+		);
+	} );
+	it( 'CompositeGroup', () => {
+		const Test = () => {
+			const props = useCompositeState();
+			return (
+				<Composite { ...props }>
+					<CompositeGroup { ...props }>
+						<CompositeItem { ...props } />
+					</CompositeGroup>
+				</Composite>
+			);
+		};
+		render( <Test /> );
+		expect( console ).toHaveWarnedWith(
+			'wp.components.__unstableCompositeGroup is deprecated since version 6.7. Please use the unprefixed, stable version of the CompositeGroup component instead.'
+		);
+	} );
+} );
+
 describe.each( [
 	[
 		'With "spread" state',