Add More Tests

Signed-off-by: guido <[email protected]>

sources/js/src/components/search-control.tsx

@@ -1,6 +1,8 @@
 import EntitiesSearch from '@types';
 import React, { JSX, PropsWithChildren, useCallback } from 'react';
 
+import { __ } from '@wordpress/i18n';
+
 export function SearchControl(
 	props: EntitiesSearch.SearchControl
 ): JSX.Element {
@@ -28,6 +30,7 @@ export function SearchControl(
 		return (
 			<Container>
 				<label htmlFor={props.id}>
+					{__('Search', 'wz-entities-search')}
 					<input id={props.id} {...inputProps} />
 				</label>
 			</Container>

tests/js/unit/components/__snapshots__/search-control.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchControl renders the input outside the label if the id prop is not passed 1`] = `
+<input
+  type="search"
+  value=""
+/>
+`;
+
+exports[`SearchControl renders the input within the label if the id prop is passed 1`] = `
+<input
+  id="search"
+  type="search"
+  value=""
+/>
+`;

tests/js/unit/components/search-control.test.tsx

@@ -0,0 +1,45 @@
+// Create tests for SearchControl with the following criteria:
+// - The component renders without errors
+// - The component renders the input within the label if the id prop is passed
+// - The component renders the input outside the label if the id prop is not passed
+// - The component calls the onChange prop when the input value changes
+import React from 'react';
+
+import { describe, it, expect, jest } from '@jest/globals';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { SearchControl } from '../../../../sources/js/src/components/search-control';
+
+jest.mock('@wordpress/i18n', () => ({
+	__: (text: string) => text,
+}));
+
+describe('SearchControl', () => {
+	it('renders the input within the label if the id prop is passed', () => {
+		render(<SearchControl id="search" onChange={() => {}} />);
+		expect(screen.getByLabelText('Search')).toMatchSnapshot();
+	});
+
+	it('renders the input outside the label if the id prop is not passed', () => {
+		const { container } = render(
+			<SearchControl data-testid="search-input" onChange={() => {}} />
+		);
+		expect(container.querySelector('[type="search"]')).toMatchSnapshot();
+	});
+
+	it('calls the onChange prop when the input value changes', async () => {
+		const onChange = jest.fn();
+
+		const { container } = render(<SearchControl onChange={onChange} />);
+
+		const input = container.querySelector(
+			'[type="search"]'
+		) as HTMLInputElement;
+
+		await userEvent.type(input, 'test');
+
+		expect(input).toHaveValue('test');
+	});
+});