diff --git a/web-app/client/src/components/Icon/Icon.test.tsx b/web-app/client/src/components/Icon/Icon.test.tsx new file mode 100644 index 00000000..5a93f743 --- /dev/null +++ b/web-app/client/src/components/Icon/Icon.test.tsx @@ -0,0 +1,16 @@ +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import Icon from './Icon'; + +const user = userEvent.setup(); + +describe('Testing Icon Component', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('Should render icon', async () => { + render(); + expect(screen.getByRole('img')); + }); +}); diff --git a/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.test.tsx b/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.test.tsx new file mode 100644 index 00000000..c6d79633 --- /dev/null +++ b/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.test.tsx @@ -0,0 +1,52 @@ +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import MultiSelect from './MultiSelect'; +import { countries } from 'countries-list'; + +const user = userEvent.setup(); + +describe('Testing multi select dropdown', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + const countryNames = Object.entries(countries).map( + ([, country]) => country, + ); + + test('Should open dropdown, select first and second option, close by click outside', async () => { + render( + <> + ({ + label: `${emoji} ${native}`, + value: name, + }))} + /> +
Outside
+ , + ); + const trigger = screen.getByText('Germany'); + await user.click(trigger); + const andorra = () => screen.getByText('🇦🇩 Andorra'); + const anguilla = () => screen.getByText('🇦🇮 Anguilla'); + const antiguaQuery = () => screen.queryByText('🇦🇬 Antigua and Barbuda'); + const anguillaQuery = () => screen.queryByText('🇦🇮 Anguilla'); + expect(andorra() && anguilla()); + expect(antiguaQuery()).not.toBeNull(); + + await user.click(andorra()); + expect(andorra()); + expect(anguillaQuery()).toBeNull(); + + await user.click(andorra()); + await user.click(anguilla()); + expect(anguillaQuery()).not.toBeNull(); + expect(antiguaQuery()).toBeNull(); + + await user.click(screen.getByText('Outside')); + expect(antiguaQuery()).toBeNull(); + }); +}); diff --git a/web-app/client/src/components/Inputs/Select/Select.test.tsx b/web-app/client/src/components/Inputs/Select/Select.test.tsx new file mode 100644 index 00000000..a2849e9b --- /dev/null +++ b/web-app/client/src/components/Inputs/Select/Select.test.tsx @@ -0,0 +1,46 @@ +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import Select from './Select'; +import { countries } from 'countries-list'; + +const user = userEvent.setup(); + +describe('Testing select dropdown', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + const countryNames = Object.entries(countries).map(([, country]) => country); + + test('Should open dropdown, select option, close by click outside', async () => { + render( + <> +