diff --git a/sources/js/src/components/search-control.tsx b/sources/js/src/components/search-control.tsx index 6a6e53c..c4ecd5a 100644 --- a/sources/js/src/components/search-control.tsx +++ b/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 ( diff --git a/tests/js/unit/components/__snapshots__/search-control.test.tsx.snap b/tests/js/unit/components/__snapshots__/search-control.test.tsx.snap new file mode 100644 index 0000000..6b3d24c --- /dev/null +++ b/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`] = ` + +`; + +exports[`SearchControl renders the input within the label if the id prop is passed 1`] = ` + +`; diff --git a/tests/js/unit/components/search-control.test.tsx b/tests/js/unit/components/search-control.test.tsx new file mode 100644 index 0000000..bd050e3 --- /dev/null +++ b/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( {}} />); + expect(screen.getByLabelText('Search')).toMatchSnapshot(); + }); + + it('renders the input outside the label if the id prop is not passed', () => { + const { container } = render( + {}} /> + ); + expect(container.querySelector('[type="search"]')).toMatchSnapshot(); + }); + + it('calls the onChange prop when the input value changes', async () => { + const onChange = jest.fn(); + + const { container } = render(); + + const input = container.querySelector( + '[type="search"]' + ) as HTMLInputElement; + + await userEvent.type(input, 'test'); + + expect(input).toHaveValue('test'); + }); +});