Verified ability to search for a city by re-entering letters in the 'City' field

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(
       <AppAutoComplete
         onChange={onChange}
-        options={options}
+        options={optionsCountry}
         sx={styles}
         textFieldProps={{
-          label: label
+          label: labelCountry
         }}
         type='text'
         value={value}
@@ -37,3 +39,93 @@ describe('AppAutoComplete test', () => {
     expect(onChange).toHaveBeenCalled()
   })
 })
+describe('AppAutoComplete test', () => {
+  beforeEach(() => {
+    renderWithProviders(
+      <AppAutoComplete
+        onChange={onChange}
+        options={optionsCity}
+        sx={styles}
+        textFieldProps={{
+          label: labelCity
+        }}
+        type='text'
+        value={value}
+      />
+    )
+  })
+  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')
+    })
+  })
+})

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()
+  })
 })
+