From 5c66be2aea3360a9ecf0aa504da345b67bbcb3f0 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 30 Aug 2023 22:15:54 +0200 Subject: [PATCH] Fix format (again) --- .../src/toggle-group-control/test/index.tsx | 221 +++++++++--------- .../src/toggle-group-control/types.ts | 17 +- 2 files changed, 115 insertions(+), 123 deletions(-) diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx index 236cd944502661..0bb2235d3070e6 100644 --- a/packages/components/src/toggle-group-control/test/index.tsx +++ b/packages/components/src/toggle-group-control/test/index.tsx @@ -21,28 +21,28 @@ import { } from '../index'; import type { ToggleGroupControlProps } from '../types'; -function getWrappingPopoverElement(element: HTMLElement) { - return element.closest('.components-popover'); +function getWrappingPopoverElement( element: HTMLElement ) { + return element.closest( '.components-popover' ); } -const ControlledToggleGroupControl = ({ +const ControlledToggleGroupControl = ( { value: valueProp, onChange, ...props -}: ToggleGroupControlProps) => { - const [value, setValue] = useState(valueProp); +}: ToggleGroupControlProps ) => { + const [ value, setValue ] = useState( valueProp ); return ( <> { - setValue(...changeArgs); - onChange?.(...changeArgs); - }} - value={value} + { ...props } + onChange={ ( ...changeArgs ) => { + setValue( ...changeArgs ); + onChange?.( ...changeArgs ); + } } + value={ value } /> - + ); }; @@ -58,7 +58,7 @@ const optionsWithTooltip = ( value="gnocchi" label="Delicious Gnocchi" aria-label="Click for Delicious Gnocchi" - showTooltip={true} + showTooltip={ true } /> ); -describe.each([ - ['uncontrolled', ToggleGroupControl], - ['controlled', ControlledToggleGroupControl], -])('ToggleGroupControl %s', (...modeAndComponent) => { - const [mode, Component] = modeAndComponent; +describe.each( [ + [ 'uncontrolled', ToggleGroupControl ], + [ 'controlled', ControlledToggleGroupControl ], +] )( 'ToggleGroupControl %s', ( ...modeAndComponent ) => { + const [ mode, Component ] = modeAndComponent; - describe('should render correctly', () => { - it('with text options', () => { + describe( 'should render correctly', () => { + it( 'with text options', () => { const { container } = render( - {options} + { options } ); - expect(container).toMatchSnapshot(); - }); + expect( container ).toMatchSnapshot(); + } ); - it('with icons', () => { + it( 'with icons', () => { const { container } = render( - + ); - expect(container).toMatchSnapshot(); - }); - }); - it('should call onChange with proper value', async () => { + expect( container ).toMatchSnapshot(); + } ); + } ); + it( 'should call onChange with proper value', async () => { const user = userEvent.setup(); const mockOnChange = jest.fn(); render( - {options} + { options } ); - await user.click(screen.getByRole('radio', { name: 'R' })); + await user.click( screen.getByRole( 'radio', { name: 'R' } ) ); - expect(mockOnChange).toHaveBeenCalledWith('rigas'); - }); + expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' ); + } ); - it('should render tooltip where `showTooltip` === `true`', async () => { + it( 'should render tooltip where `showTooltip` === `true`', async () => { const user = userEvent.setup(); render( - {optionsWithTooltip} + { optionsWithTooltip } ); @@ -138,26 +135,26 @@ describe.each([ 'Click for Delicious Gnocchi' ); - await user.hover(firstRadio); + await user.hover( firstRadio ); const tooltip = await screen.findByText( 'Click for Delicious Gnocchi' ); - await waitFor(() => + await waitFor( () => expect( - getWrappingPopoverElement(tooltip) + getWrappingPopoverElement( tooltip ) ).toBePositionedPopover() ); - expect(tooltip).toBeVisible(); - }); + expect( tooltip ).toBeVisible(); + } ); - it('should not render tooltip', async () => { + it( 'should not render tooltip', async () => { const user = userEvent.setup(); render( - {optionsWithTooltip} + { optionsWithTooltip } ); @@ -165,48 +162,48 @@ describe.each([ 'Click for Sumptuous Caponata' ); - await user.hover(secondRadio); + await user.hover( secondRadio ); - await waitFor(() => + await waitFor( () => expect( - screen.queryByText('Click for Sumptuous Caponata') + screen.queryByText( 'Click for Sumptuous Caponata' ) ).not.toBeInTheDocument() ); - }); + } ); - if (mode === 'controlled') { - it('should reset values correctly', async () => { + if ( mode === 'controlled' ) { + it( 'should reset values correctly', async () => { const user = userEvent.setup(); render( - {options} + { options } ); - const rigasOption = screen.getByRole('radio', { name: 'R' }); - const jackOption = screen.getByRole('radio', { name: 'J' }); + const rigasOption = screen.getByRole( 'radio', { name: 'R' } ); + const jackOption = screen.getByRole( 'radio', { name: 'J' } ); - await user.click(rigasOption); + await user.click( rigasOption ); - expect(jackOption).not.toBeChecked(); - expect(rigasOption).toBeChecked(); + expect( jackOption ).not.toBeChecked(); + expect( rigasOption ).toBeChecked(); - await user.keyboard('[ArrowRight]'); + await user.keyboard( '[ArrowRight]' ); - expect(rigasOption).not.toBeChecked(); - expect(jackOption).toBeChecked(); + expect( rigasOption ).not.toBeChecked(); + expect( jackOption ).toBeChecked(); - await user.click(screen.getByRole('button', { name: 'Reset' })); + await user.click( screen.getByRole( 'button', { name: 'Reset' } ) ); - expect(rigasOption).not.toBeChecked(); - expect(jackOption).not.toBeChecked(); - }); + expect( rigasOption ).not.toBeChecked(); + expect( jackOption ).not.toBeChecked(); + } ); } - describe('isDeselectable', () => { - describe('isDeselectable = false', () => { - it('should not be deselectable', async () => { + describe( 'isDeselectable', () => { + describe( 'isDeselectable = false', () => { + it( 'should not be deselectable', async () => { const mockOnChange = jest.fn(); const user = userEvent.setup(); @@ -214,49 +211,49 @@ describe.each([ - {options} + { options } ); - const rigas = screen.getByRole('radio', { + const rigas = screen.getByRole( 'radio', { name: 'R', checked: true, - }); - await user.click(rigas); - expect(mockOnChange).toHaveBeenCalledTimes(0); - }); + } ); + await user.click( rigas ); + expect( mockOnChange ).toHaveBeenCalledTimes( 0 ); + } ); - it('should not tab to next radio option', async () => { + it( 'should not tab to next radio option', async () => { const user = userEvent.setup(); render( - {options} + { options } ); - const rigas = screen.getByRole('radio', { + const rigas = screen.getByRole( 'radio', { name: 'R', - }); + } ); await user.tab(); - expect(rigas).toHaveFocus(); + expect( rigas ).toHaveFocus(); await user.tab(); const expectedFocusTarget = mode === 'uncontrolled' ? rigas.ownerDocument.body - : screen.getByRole('button', { name: 'Reset' }); + : screen.getByRole( 'button', { name: 'Reset' } ); - expect(expectedFocusTarget).toHaveFocus(); - }); - }); + expect( expectedFocusTarget ).toHaveFocus(); + } ); + } ); - describe('isDeselectable = true', () => { - it('should be deselectable', async () => { + describe( 'isDeselectable = true', () => { + it( 'should be deselectable', async () => { const mockOnChange = jest.fn(); const user = userEvent.setup(); @@ -264,66 +261,66 @@ describe.each([ - {options} + { options } ); await user.click( - screen.getByRole('button', { + screen.getByRole( 'button', { name: 'R', pressed: true, - }) + } ) ); - expect(mockOnChange).toHaveBeenCalledTimes(1); - expect(mockOnChange).toHaveBeenLastCalledWith(undefined); + expect( mockOnChange ).toHaveBeenCalledTimes( 1 ); + expect( mockOnChange ).toHaveBeenLastCalledWith( undefined ); await user.click( - screen.getByRole('button', { + screen.getByRole( 'button', { name: 'R', pressed: false, - }) + } ) ); - expect(mockOnChange).toHaveBeenCalledTimes(2); - expect(mockOnChange).toHaveBeenLastCalledWith('rigas'); - }); + expect( mockOnChange ).toHaveBeenCalledTimes( 2 ); + expect( mockOnChange ).toHaveBeenLastCalledWith( 'rigas' ); + } ); - it('should tab to the next option button', async () => { + it( 'should tab to the next option button', async () => { const user = userEvent.setup(); render( - {options} + { options } ); await user.tab(); expect( - screen.getByRole('button', { + screen.getByRole( 'button', { name: 'R', pressed: true, - }) + } ) ).toHaveFocus(); await user.tab(); expect( - screen.getByRole('button', { + screen.getByRole( 'button', { name: 'J', pressed: false, - }) + } ) ).toHaveFocus(); // Focus should not move with arrow keys - await user.keyboard('{ArrowLeft}'); + await user.keyboard( '{ArrowLeft}' ); expect( - screen.getByRole('button', { + screen.getByRole( 'button', { name: 'J', pressed: false, - }) + } ) ).toHaveFocus(); - }); - }); - }); -}); + } ); + } ); + } ); +} ); diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts index 5cffffc9182fbc..d4b21a9e890a89 100644 --- a/packages/components/src/toggle-group-control/types.ts +++ b/packages/components/src/toggle-group-control/types.ts @@ -105,7 +105,7 @@ export type ToggleGroupControlProps = Pick< /** * Callback when a segment is selected. */ - onChange?: (value: string | number | undefined) => void; + onChange?: ( value: string | number | undefined ) => void; /** * The selected value. */ @@ -126,18 +126,13 @@ export type ToggleGroupControlProps = Pick< export type ToggleGroupControlContextProps = { isDeselectable?: boolean; baseId: string; - isBlock: ToggleGroupControlProps['isBlock']; - size: ToggleGroupControlProps['size']; - value: ToggleGroupControlProps['value']; - setValue: (newValue: string | number | undefined) => void; + isBlock: ToggleGroupControlProps[ 'isBlock' ]; + size: ToggleGroupControlProps[ 'size' ]; + value: ToggleGroupControlProps[ 'value' ]; + setValue: ( newValue: string | number | undefined ) => void; }; export type ToggleGroupControlMainControlProps = Pick< ToggleGroupControlProps, - | 'children' - | 'isAdaptiveWidth' - | 'label' - | 'size' - | 'onChange' - | 'value' + 'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value' >;