@wordpress/components 19.12.0 → 19.15.0

package/src/form-toggle/test/index.tsx

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FormToggle, { noop } from '..';
+import type { FormToggleProps } from '../types';
+
+const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
+
+const ControlledFormToggle = ( { onChange }: FormToggleProps ) => {
+	const [ isChecked, setChecked ] = useState( false );
+	return (
+		<FormToggle
+			checked={ isChecked }
+			onChange={ ( value ) => {
+				setChecked( ( state ) => ! state );
+				onChange( value );
+			} }
+		/>
+	);
+};
+
+describe( 'FormToggle', () => {
+	describe( 'basic rendering', () => {
+		it( 'should render a span element with an unchecked checkbox', () => {
+			const { container } = render( <FormToggle onChange={ noop } /> );
+
+			expect( getInput() ).not.toBeChecked();
+			expect( container.firstChild ).toMatchSnapshot();
+		} );
+
+		it( 'should render a checked checkbox when providing checked prop', () => {
+			render( <FormToggle onChange={ noop } checked /> );
+
+			expect( getInput() ).toBeChecked();
+		} );
+
+		it( 'should render with an additional className', () => {
+			const { container: containerDefault } = render(
+				<FormToggle onChange={ noop } />
+			);
+
+			const { container: containerWithClassName } = render(
+				<FormToggle onChange={ noop } className="testing" />
+			);
+
+			// Expect the diff snapshot to be mostly about the className.
+			expect( containerDefault ).toMatchDiffSnapshot(
+				containerWithClassName
+			);
+		} );
+
+		it( 'should render an id prop for the input checkbox', () => {
+			const { container: containerDefault } = render(
+				<FormToggle onChange={ noop } />
+			);
+
+			const { container: containerWithID } = render(
+				// Disabled because of our rule restricting literal IDs, preferring
+				// `withInstanceId`. In this case, it's fine to use literal IDs.
+				// eslint-disable-next-line no-restricted-syntax
+				<FormToggle onChange={ noop } id="test" />
+			);
+
+			// Expect the diff snapshot to be mostly about the ID.
+			expect( containerDefault ).toMatchDiffSnapshot( containerWithID );
+		} );
+	} );
+
+	describe( 'Value', () => {
+		it( 'should flip the checked property when clicked', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			const onChange = jest.fn();
+			render( <ControlledFormToggle onChange={ onChange } /> );
+
+			const input = getInput();
+
+			await user.click( input );
+			expect( onChange.mock.calls[ 0 ][ 0 ].target ).toBeInTheDocument();
+			expect( input ).toBeChecked();
+
+			await user.click( input );
+			expect( onChange.mock.calls[ 1 ][ 0 ].target ).toBeInTheDocument();
+			expect( input ).not.toBeChecked();
+
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+		} );
+	} );
+} );

package/src/form-toggle/types.ts

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { ChangeEvent } from 'react';
+
+export type FormToggleProps = {
+	/**
+	 * If checked is true the toggle will be checked. If checked is false the
+	 * toggle will be unchecked. If no value is passed the toggle will be
+	 * unchecked.
+	 */
+	checked?: boolean;
+	/**
+	 * If disabled is true the toggle will be disabled and apply the appropriate
+	 * styles.
+	 */
+	disabled?: boolean;
+	/**
+	 * A callback function invoked when the toggle is clicked.
+	 */
+	onChange: ( event: ChangeEvent< HTMLInputElement > ) => void;
+};