CheckboxControl: Add unit tests

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

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 @@
+ <span
+ class="components-checkbox-control__input-container"
+ >
+ <input
+ class="components-checkbox-control__input"
+- id="inspector-checkbox-control-5"
++ id="inspector-checkbox-control-6"
+ type="checkbox"
+ value="1"
++ />
++ <svg
++ aria-hidden="true"
++ class="components-checkbox-control__indeterminate"
++ focusable="false"
++ height="24"
++ role="presentation"
++ viewBox="0 0 24 24"
++ width="24"
++ xmlns="http://www.w3.org/2000/svg"
++ >
++ <path
++ d="M7 11.5h10V13H7z"
+ />
++ </svg>
+ </span>
+ <label
+ class="components-checkbox-control__label"
+- for="inspector-checkbox-control-5"
++ for="inspector-checkbox-control-6"
+ />
+ </div>
+ </div>
+ </div>
+`;

packages/components/src/checkbox-control/test/index.tsx

@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BaseCheckboxControl from '..';
+import type { CheckboxControlProps } from '../types';
+
+const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
+
+const CheckboxControl = ( props: Omit< CheckboxControlProps, 'onChange' > ) => {
+ return <BaseCheckboxControl onChange={ noop } { ...props } />;
+};
+
+const ControlledCheckboxControl = ( { onChange }: CheckboxControlProps ) => {
+ const [ isChecked, setChecked ] = useState( false );
+ return (
+ <BaseCheckboxControl
+ checked={ isChecked }
+ onChange={ ( value ) => {
+ setChecked( value );
+ onChange( value );
+ } }
+ />
+ );
+};
+
+describe( 'CheckboxControl', () => {
+ describe( 'Basic rendering', () => {
+ it( 'should render', () => {
+ render( <CheckboxControl /> );
+ expect( getInput() ).not.toBeNull();
+ } );
+
+ it( 'should render an unchecked `checkbox` by default', () => {
+ render( <CheckboxControl /> );
+ expect( getInput() ).toHaveProperty( 'checked', false );
+ } );
+
+ it( 'should render an checked `checkbox` when `checked={ true }`', () => {
+ render( <CheckboxControl checked /> );
+ expect( getInput() ).toHaveProperty( 'checked', true );
+ } );
+
+ it( 'should render label', () => {
+ render( <CheckboxControl label="Hello" /> );
+
+ const label = screen.getByText( 'Hello' );
+ expect( label ).toBeTruthy();
+ } );
+
+ it( 'should render a checkbox in an indeterminate state', () => {
+ render( <CheckboxControl indeterminate /> );
+ expect( getInput() ).toHaveProperty( 'indeterminate', true );
+ } );
+
+ it( 'should render the indeterminate icon when in the indeterminate state', () => {
+ const { container: containerDefault } = render(
+ <CheckboxControl />
+ );
+
+ const { container: containerIndeterminate } = render(
+ <CheckboxControl indeterminate />
+ );
+
+ // Expect the diff snapshot to be mostly about the indeterminate icon
+ expect( containerDefault ).toMatchDiffSnapshot(
+ containerIndeterminate
+ );
+ } );
+ } );
+
+ describe( 'Value', () => {
+ it( 'should flip the checked property when clicked', async () => {
+ const user = userEvent.setup( {
+ advanceTimers: jest.advanceTimersByTime,
+ } );
+
+ let state = false;
+ const setState = jest.fn(
+ ( nextState: boolean ) => ( state = nextState )
+ );
+
+ render( <ControlledCheckboxControl onChange={ setState } /> );
+
+ 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 );
+ } );
+ } );
+} );