From dde24c140fa1494f185976e3bc379b1ffeeaf10a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Thu, 19 May 2022 20:30:05 +0200 Subject: [PATCH 1/6] CheckboxControl: Add unit tests --- .../src/checkbox-control/test/index.tsx | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 packages/components/src/checkbox-control/test/index.tsx diff --git a/packages/components/src/checkbox-control/test/index.tsx b/packages/components/src/checkbox-control/test/index.tsx new file mode 100644 index 0000000000000..774e6beee8e34 --- /dev/null +++ b/packages/components/src/checkbox-control/test/index.tsx @@ -0,0 +1,87 @@ +/** + * External dependencies + */ +import { render, screen, fireEvent } from '@testing-library/react'; +import { noop } from 'lodash'; + +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import BaseCheckboxControl from '..'; +import type { CheckboxControlProps } from '../types'; + +const getInput = () => screen.getByTestId( 'checkbox' ); + +const CheckboxControl = ( props: Omit< CheckboxControlProps, 'onChange' > ) => { + return ( + + ); +}; + +const ControlledCheckboxControl = () => { + const [ isChecked, setChecked ] = useState( false ); + return ( + + ); +}; + +describe( 'CheckboxControl', () => { + describe( 'Basic rendering', () => { + it( 'should render', () => { + render( ); + expect( getInput() ).not.toBeNull(); + } ); + + it( 'should render an unchecked `checkbox` by default', () => { + render( ); + expect( getInput() ).toHaveProperty( 'checked', false ); + } ); + + it( 'should render an checked `checkbox` when `checked={ true }`', () => { + render( ); + expect( getInput() ).toHaveProperty( 'checked', true ); + } ); + + it( 'should render label', () => { + render( ); + + const label = screen.getByText( 'Hello' ); + expect( label ).toBeTruthy(); + } ); + + it( 'should render an indeterminate icon', () => { + const { container } = render( ); + + const indeterminateIcon = container.getElementsByClassName( + 'components-checkbox-control__indeterminate' + ); + expect( indeterminateIcon.length ).toBe( 1 ); + } ); + } ); + + describe( 'Value', () => { + it( 'should flip the checked property when clicked', () => { + render( ); + expect( getInput() ).toHaveProperty( 'checked', false ); + + fireEvent.click( getInput() ); + expect( getInput() ).toHaveProperty( 'checked', true ); + + fireEvent.click( getInput() ); + expect( getInput() ).toHaveProperty( 'checked', false ); + } ); + } ); +} ); From 597ff6bdaec04f62f661f08e2e3a4a6df8df6e31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Thu, 19 May 2022 20:39:11 +0200 Subject: [PATCH 2/6] Update CHANGELOG.md --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 9836225892b1c..24eef1b596b72 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Internal + +- `CheckboxControl`: Add unit tests ([#41165](https://github.com/WordPress/gutenberg/pull/41165)). + ## 19.11.0 (2022-05-18) ### Enhancements From 63cd47026cc07fb463804c1cc3a18cc69904bdcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Fri, 20 May 2022 17:16:25 +0200 Subject: [PATCH 3/6] Use userEvent to fire events --- .../src/checkbox-control/test/index.tsx | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/packages/components/src/checkbox-control/test/index.tsx b/packages/components/src/checkbox-control/test/index.tsx index 774e6beee8e34..3ccea5dcf6c88 100644 --- a/packages/components/src/checkbox-control/test/index.tsx +++ b/packages/components/src/checkbox-control/test/index.tsx @@ -1,7 +1,8 @@ /** * External dependencies */ -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { noop } from 'lodash'; /** @@ -27,12 +28,15 @@ const CheckboxControl = ( props: Omit< CheckboxControlProps, 'onChange' > ) => { ); }; -const ControlledCheckboxControl = () => { +const ControlledCheckboxControl = ( { onChange }: CheckboxControlProps ) => { const [ isChecked, setChecked ] = useState( false ); return ( { + setChecked( value ); + onChange( value ); + } } data-testid="checkbox" /> ); @@ -73,15 +77,29 @@ describe( 'CheckboxControl', () => { } ); describe( 'Value', () => { - it( 'should flip the checked property when clicked', () => { - render( ); - expect( getInput() ).toHaveProperty( 'checked', false ); + it( 'should flip the checked property when clicked', async () => { + const user = userEvent.setup( { + advanceTimers: jest.advanceTimersByTime, + } ); - fireEvent.click( getInput() ); - expect( getInput() ).toHaveProperty( 'checked', true ); + let state = false; + const setState = jest.fn( + ( nextState: boolean ) => ( state = nextState ) + ); - fireEvent.click( getInput() ); - expect( getInput() ).toHaveProperty( 'checked', false ); + render( ); + + const input = getInput(); + + await user.click( input ); + expect( input ).toHaveProperty( 'checked', true ); + expect( state ).toBe( true ); + + await user.click( input ); + expect( input ).toHaveProperty( 'checked', false ); + expect( state ).toBe( false ); + + expect( setState ).toHaveBeenCalledTimes( 2 ); } ); } ); } ); From 7e1520de5ba5ad65c16dd34fc9668f6d35d514c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Fri, 20 May 2022 21:32:46 +0200 Subject: [PATCH 4/6] Apply suggestions from code review Co-authored-by: Marco Ciampini --- packages/components/src/checkbox-control/test/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/checkbox-control/test/index.tsx b/packages/components/src/checkbox-control/test/index.tsx index 3ccea5dcf6c88..41a50742e5f65 100644 --- a/packages/components/src/checkbox-control/test/index.tsx +++ b/packages/components/src/checkbox-control/test/index.tsx @@ -16,14 +16,13 @@ import { useState } from '@wordpress/element'; import BaseCheckboxControl from '..'; import type { CheckboxControlProps } from '../types'; -const getInput = () => screen.getByTestId( 'checkbox' ); +const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement; const CheckboxControl = ( props: Omit< CheckboxControlProps, 'onChange' > ) => { return ( ); }; @@ -37,7 +36,6 @@ const ControlledCheckboxControl = ( { onChange }: CheckboxControlProps ) => { setChecked( value ); onChange( value ); } } - data-testid="checkbox" /> ); }; From d966d65d4c0125322f1e0feb7e122ae0184ab3c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Fri, 20 May 2022 21:37:44 +0200 Subject: [PATCH 5/6] Apply suggestions --- .../test/__snapshots__/index.tsx.snap | 42 +++++++++++++++++++ .../src/checkbox-control/test/index.tsx | 28 ++++++++----- 2 files changed, 59 insertions(+), 11 deletions(-) create mode 100644 packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap diff --git a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap new file mode 100644 index 0000000000000..408f18d8c7e77 --- /dev/null +++ b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap @@ -0,0 +1,42 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CheckboxControl Basic rendering should render the indeterminate icon when in the indeterminate state 1`] = ` +Snapshot Diff: +- First value ++ Second value + +@@ -8,17 +8,31 @@ + + ++ + +