CheckboxControl: Add unit tests (#41165)

* CheckboxControl: Add unit tests

* Update CHANGELOG.md

* Use userEvent to fire events

* Apply suggestions from code review

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

* Apply suggestions

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

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

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 ).toBeInTheDocument();
+		} );
+
+		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 );
+		} );
+	} );
+} );