From f7cec48a9994a5b8db8698098104f8489e8d8dbe Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 15 Feb 2024 05:23:46 +0900 Subject: [PATCH 1/4] CustomSelectControl: Fix test matrix --- .../src/custom-select-control/test/index.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/components/src/custom-select-control/test/index.js b/packages/components/src/custom-select-control/test/index.js index a4c61d0cdcecd9..c18310afea1f1d 100644 --- a/packages/components/src/custom-select-control/test/index.js +++ b/packages/components/src/custom-select-control/test/index.js @@ -98,7 +98,7 @@ describe.each( [ it( 'Should keep current selection if dropdown is closed without changing selection', async () => { const user = userEvent.setup(); - render( ); + render( ); const currentSelectedItem = screen.getByRole( 'button', { expanded: false, @@ -127,7 +127,7 @@ describe.each( [ it( 'Should apply class only to options that have a className defined', async () => { const user = userEvent.setup(); - render( ); + render( ); await user.click( screen.getByRole( 'button', { @@ -165,7 +165,7 @@ describe.each( [ const customStyles = 'background-color: rgb(127, 255, 212); rotate: 13deg;'; - render( ); + render( ); await user.click( screen.getByRole( 'button', { @@ -200,7 +200,7 @@ describe.each( [ it( 'does not show selected hint by default', () => { render( - { render( - - + ); const currentSelectedItem = screen.getByRole( 'button', { @@ -267,7 +267,7 @@ describe.each( [ it( 'Should be able to change selection using keyboard', async () => { const user = userEvent.setup(); - render( ); + render( ); const currentSelectedItem = screen.getByRole( 'button', { expanded: false, @@ -292,7 +292,7 @@ describe.each( [ it( 'Should be able to type characters to select matching options', async () => { const user = userEvent.setup(); - render( ); + render( ); const currentSelectedItem = screen.getByRole( 'button', { expanded: false, @@ -314,7 +314,7 @@ describe.each( [ it( 'Can change selection with a focused input and closed dropdown if typed characters match an option', async () => { const user = userEvent.setup(); - render( ); + render( ); const currentSelectedItem = screen.getByRole( 'button', { expanded: false, @@ -340,7 +340,7 @@ describe.each( [ it( 'Should have correct aria-selected value for selections', async () => { const user = userEvent.setup(); - render( ); + render( ); const currentSelectedItem = screen.getByRole( 'button', { expanded: false, @@ -397,7 +397,7 @@ describe.each( [ const onBlurMock = jest.fn(); render( - Date: Thu, 15 Feb 2024 05:24:23 +0900 Subject: [PATCH 2/4] Rename to prevent mistakes --- packages/components/src/custom-select-control/test/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/custom-select-control/test/index.js b/packages/components/src/custom-select-control/test/index.js index c18310afea1f1d..40a0904c632396 100644 --- a/packages/components/src/custom-select-control/test/index.js +++ b/packages/components/src/custom-select-control/test/index.js @@ -12,7 +12,7 @@ import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import CustomSelectControl from '..'; +import UncontrolledCustomSelectControl from '..'; const customClass = 'amber-skies'; @@ -51,7 +51,7 @@ const props = { const ControlledCustomSelectControl = ( { options } ) => { const [ value, setValue ] = useState( options[ 0 ] ); return ( - setValue( selectedItem ) } value={ options.find( ( option ) => option.key === value.key ) } @@ -60,7 +60,7 @@ const ControlledCustomSelectControl = ( { options } ) => { }; describe.each( [ - [ 'uncontrolled', CustomSelectControl ], + [ 'uncontrolled', UncontrolledCustomSelectControl ], [ 'controlled', ControlledCustomSelectControl ], ] )( 'CustomSelectControl %s', ( ...modeAndComponent ) => { const [ , Component ] = modeAndComponent; From eb52aba54d000308cf3e321a2d42b14c4aa9612a Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 15 Feb 2024 05:28:15 +0900 Subject: [PATCH 3/4] Fix prop passing errors --- packages/components/src/custom-select-control/test/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/src/custom-select-control/test/index.js b/packages/components/src/custom-select-control/test/index.js index 40a0904c632396..715b2ecc99c7d4 100644 --- a/packages/components/src/custom-select-control/test/index.js +++ b/packages/components/src/custom-select-control/test/index.js @@ -48,11 +48,12 @@ const props = { ], }; -const ControlledCustomSelectControl = ( { options } ) => { +const ControlledCustomSelectControl = ( { options, ...restProps } ) => { const [ value, setValue ] = useState( options[ 0 ] ); return ( setValue( selectedItem ) } value={ options.find( ( option ) => option.key === value.key ) } /> From c6e546c6433164a8c72fbb4ba2b70be1d8e5b332 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 15 Feb 2024 06:00:18 +0900 Subject: [PATCH 4/4] CustomSelectControlV2: Fix legacy test matrix --- .../custom-select-control-v2/test/index.tsx | 80 +++++++++++-------- 1 file changed, 45 insertions(+), 35 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/test/index.tsx b/packages/components/src/custom-select-control-v2/test/index.tsx index cdc93205fba98e..472ba0be49bdf9 100644 --- a/packages/components/src/custom-select-control-v2/test/index.tsx +++ b/packages/components/src/custom-select-control-v2/test/index.tsx @@ -2,7 +2,7 @@ * External dependencies */ import { render, screen } from '@testing-library/react'; -import { click, press, type } from '@ariakit/test'; +import { click, press, type, waitFor } from '@ariakit/test'; /** * WordPress dependencies @@ -12,7 +12,7 @@ import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import { CustomSelect, CustomSelectItem } from '..'; +import { CustomSelect as UncontrolledCustomSelect, CustomSelectItem } from '..'; import type { CustomSelectProps, LegacyCustomSelectProps } from '../types'; const customClass = 'amber-skies'; @@ -51,12 +51,18 @@ const legacyProps = { const LegacyControlledCustomSelect = ( { options, + onChange, + ...restProps }: LegacyCustomSelectProps ) => { const [ value, setValue ] = useState( options[ 0 ] ); return ( - setValue( selectedItem ) } + { + onChange?.( args ); + setValue( args.selectedItem ); + } } value={ options.find( ( option: any ) => option.key === value.key ) } @@ -66,7 +72,7 @@ const LegacyControlledCustomSelect = ( { describe( 'With Legacy Props', () => { describe.each( [ - [ 'Uncontrolled', CustomSelect ], + [ 'Uncontrolled', UncontrolledCustomSelect ], [ 'Controlled', LegacyControlledCustomSelect ], ] )( '%s', ( ...modeAndComponent ) => { const [ , Component ] = modeAndComponent; @@ -100,7 +106,7 @@ describe( 'With Legacy Props', () => { } ); it( 'Should keep current selection if dropdown is closed without changing selection', async () => { - render( ); + render( ); const currentSelectedItem = screen.getByRole( 'combobox', { expanded: false, @@ -127,7 +133,7 @@ describe( 'With Legacy Props', () => { } ); it( 'Should apply class only to options that have a className defined', async () => { - render( ); + render( ); await click( screen.getByRole( 'combobox', { @@ -164,7 +170,7 @@ describe( 'With Legacy Props', () => { const customStyles = 'background-color: rgb(127, 255, 212); rotate: 13deg;'; - render( ); + render( ); await click( screen.getByRole( 'combobox', { @@ -197,9 +203,9 @@ describe( 'With Legacy Props', () => { ); } ); - it( 'does not show selected hint by default', () => { + it( 'does not show selected hint by default', async () => { render( - { ] } /> ); - expect( - screen.getByRole( 'combobox', { name: 'Custom select' } ) - ).not.toHaveTextContent( 'Hint' ); + await waitFor( () => + expect( + screen.getByRole( 'combobox', { name: 'Custom select' } ) + ).not.toHaveTextContent( 'Hint' ) + ); } ); it( 'shows selected hint when __experimentalShowSelectedHint is set', async () => { render( - { /> ); - expect( - screen.getByRole( 'combobox', { - expanded: false, - } ) - ).toHaveTextContent( /hint/i ); + await waitFor( () => + expect( + screen.getByRole( 'combobox', { + expanded: false, + } ) + ).toHaveTextContent( /hint/i ) + ); } ); it( 'shows selected hint in list of options when added', async () => { render( - { const mockOnChange = jest.fn(); render( - + ); await click( @@ -312,7 +322,7 @@ describe( 'With Legacy Props', () => { ); render( - + ); await press.Tab(); @@ -330,7 +340,7 @@ describe( 'With Legacy Props', () => { describe( 'Keyboard behavior and accessibility', () => { it( 'Should be able to change selection using keyboard', async () => { - render( ); + render( ); const currentSelectedItem = screen.getByRole( 'combobox', { expanded: false, @@ -355,7 +365,7 @@ describe( 'With Legacy Props', () => { } ); it( 'Should be able to type characters to select matching options', async () => { - render( ); + render( ); const currentSelectedItem = screen.getByRole( 'combobox', { expanded: false, @@ -375,7 +385,7 @@ describe( 'With Legacy Props', () => { } ); it( 'Can change selection with a focused input and closed dropdown if typed characters match an option', async () => { - render( ); + render( ); const currentSelectedItem = screen.getByRole( 'combobox', { expanded: false, @@ -398,7 +408,7 @@ describe( 'With Legacy Props', () => { } ); it( 'Should have correct aria-selected value for selections', async () => { - render( ); + render( ); const currentSelectedItem = screen.getByRole( 'combobox', { expanded: false, @@ -455,29 +465,29 @@ describe( 'With Legacy Props', () => { describe( 'static typing', () => { <> { /* @ts-expect-error - when `options` prop is passed, `onChange` should have legacy signature */ } - undefined } /> - undefined } /> - undefined } > foobar - + { /* @ts-expect-error - when `children` are passed, `onChange` should have new default signature */ } - undefined } > foobar - + ; } ); @@ -491,7 +501,7 @@ const defaultProps = { const ControlledCustomSelect = ( props: CustomSelectProps ) => { const [ value, setValue ] = useState< string | string[] >(); return ( - { setValue( nextValue ); @@ -504,7 +514,7 @@ const ControlledCustomSelect = ( props: CustomSelectProps ) => { describe( 'With Default Props', () => { describe.each( [ - [ 'Uncontrolled', CustomSelect ], + [ 'Uncontrolled', UncontrolledCustomSelect ], [ 'Controlled', ControlledCustomSelect ], ] )( '%s', ( ...modeAndComponent ) => { const [ , Component ] = modeAndComponent;