diff --git a/packages/components/src/composite/legacy/index.tsx b/packages/components/src/composite/legacy/index.tsx index f72bb609e07bd7..4be0d4c79da26e 100644 --- a/packages/components/src/composite/legacy/index.tsx +++ b/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 { diff --git a/packages/components/src/composite/legacy/test/index.tsx b/packages/components/src/composite/legacy/test/index.tsx index 315532a8b50869..2882c5cd045ead 100644 --- a/packages/components/src/composite/legacy/test/index.tsx +++ b/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 ; + }; + render( ); + 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 ( + + + + ); + }; + render( ); + 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 ( + + + + + + ); + }; + render( ); + 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',