From c2cbd25ab0f48b371ad06626dbe9f01a8daf5701 Mon Sep 17 00:00:00 2001 From: Sofiia13 Date: Thu, 19 Dec 2024 14:52:27 +0200 Subject: [PATCH] added tests for searching city --- .../AppAutoComplete.spec.jsx | 102 +++++++++++++++++- .../LocationSelectionInputs.spec.jsx | 11 +- 2 files changed, 107 insertions(+), 6 deletions(-) diff --git a/tests/unit/components/app-auto-complete/AppAutoComplete.spec.jsx b/tests/unit/components/app-auto-complete/AppAutoComplete.spec.jsx index 30314df06..de1feaf97 100644 --- a/tests/unit/components/app-auto-complete/AppAutoComplete.spec.jsx +++ b/tests/unit/components/app-auto-complete/AppAutoComplete.spec.jsx @@ -1,11 +1,13 @@ -import { fireEvent, screen } from '@testing-library/react' +import { fireEvent, screen, waitFor } from '@testing-library/react' import AppAutoComplete from '~/components/app-auto-complete/AppAutoComplete' import { renderWithProviders } from '~tests/test-utils' import { vi } from 'vitest' const value = null -const label = 'common.labels.country' -const options = ['Finland', 'France', 'Georgia', 'Germany'] +const labelCountry = 'common.labels.country' +const optionsCountry = ['Finland', 'France', 'Georgia', 'Germany'] +const labelCity = 'common.labels.city' +const optionsCity = ['Verhovyna', 'Frankivsk', 'Kyiv', 'Lviv', 'Odesa'] const onChange = vi.fn() const styles = {} @@ -14,10 +16,10 @@ describe('AppAutoComplete test', () => { renderWithProviders( { expect(onChange).toHaveBeenCalled() }) }) +describe('AppAutoComplete test', () => { + beforeEach(() => { + renderWithProviders( + + ) + }) + it('Should render Autocomplete and open dropdown when clicking on City field', async () => { + const autocomplete = screen.getByLabelText(/common.labels.city/i) + fireEvent.mouseDown(autocomplete) + + await waitFor(() => { + expect(screen.getByRole('listbox')).toBeInTheDocument() + }) + + const option = screen.getByText('Verhovyna') + fireEvent.click(option) + + expect(onChange).toHaveBeenCalled() + }) + it('Should display dropdown list in alphabetic order and show text cursor when clicking on City field', async () => { + const cityField = screen.getByRole('combobox') + fireEvent.mouseDown(cityField) + fireEvent.focus(cityField) + fireEvent.click(cityField) + + await waitFor(() => { + expect(cityField).toHaveFocus() + }) + + await waitFor(() => { + expect(screen.getByRole('listbox')).toBeInTheDocument() + }) + + const optionsInDropdown = screen.getAllByRole('option') + const cityNames = optionsInDropdown.map(option => option.textContent) + const sortedCityNames = [...cityNames].sort() + expect(sortedCityNames).toEqual(['Frankivsk', 'Kyiv', 'Lviv', 'Odesa', 'Verhovyna']) + }) + it('Should show filtered results based on user input', async () => { + const cityField = screen.getByRole('combobox') + + fireEvent.change(cityField, { target: { value: 'Verhovyna' } }) + + await waitFor(() => { + const optionsInDropdown = screen.getAllByRole('option') + expect(optionsInDropdown[0]).toHaveTextContent('Verhovyna') + }) + }) + it('Should clear the City field when Backspace key is pressed', async () => { + const cityField = screen.getByRole('combobox') + fireEvent.mouseDown(cityField) + fireEvent.focus(cityField) + fireEvent.click(cityField) + + fireEvent.change(cityField, { target: { value: 'Verhovyna' } }) + fireEvent.change(cityField, { target: { value: '' } }) + + await waitFor(() => { + expect(cityField).toHaveValue('') + expect(cityField).toHaveFocus() + expect(screen.getByRole('listbox')).toBeInTheDocument() + }) + + const optionsInDropdown = screen.getAllByRole('option') + const cityNames = optionsInDropdown.map(option => option.textContent) + const sortedCityNames = [...cityNames].sort() + expect(sortedCityNames).toEqual(['Frankivsk', 'Kyiv', 'Lviv', 'Odesa', 'Verhovyna']) + }) + it('Should show filtered results based on text input in City field', async () => { + const cityField = screen.getByRole('combobox') + fireEvent.click(cityField) + + fireEvent.change(cityField, { target: { value: 'Frankivsk' } }) + + await waitFor(() => { + const optionsInDropdown = screen.getAllByRole('option') + expect(optionsInDropdown[0]).toHaveTextContent('Frankivsk') + expect(optionsInDropdown[0]).not.toHaveTextContent('Verhovyna') + }) + }) +}) \ No newline at end of file diff --git a/tests/unit/components/location-selection-inputs/LocationSelectionInputs.spec.jsx b/tests/unit/components/location-selection-inputs/LocationSelectionInputs.spec.jsx index fc0435abb..1123d2632 100644 --- a/tests/unit/components/location-selection-inputs/LocationSelectionInputs.spec.jsx +++ b/tests/unit/components/location-selection-inputs/LocationSelectionInputs.spec.jsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { render, screen, waitFor, fireEvent } from '@testing-library/react' import LocationSelectionInputs from '~/components/location-selection-inputs/LocationSelectionInputs' import { mockAxiosClient } from '~tests/test-utils' import { URLs } from '~/constants/request' @@ -8,6 +8,7 @@ const onDataChangeMock = vi.fn() const mockCities = ['City1', 'City2', 'City3'] const mockCountries = [ + { name: 'Ukraine', iso2: 'UA' }, { name: 'Country1', iso2: 'C1' }, { name: 'Country2', iso2: 'C2' }, { name: 'Country3', iso2: 'C3' } @@ -51,4 +52,12 @@ describe('LocationSelectionInputs', () => { const cityOption = screen.getByLabelText('common.labels.city') await selectOption(cityOption, newCity) }) + it('enables city field after selecting a country', async () => { + const countryOption = screen.getByLabelText('common.labels.country') + await selectOption(countryOption, 'Ukraine') + + expect(onDataChangeMock).toHaveBeenCalledWith('country', 'Ukraine') + expect(screen.getByLabelText('common.labels.city')).not.toBeDisabled() + }) }) +