@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-7

package/src/care/components/organisms/bookingSearchBar/index.test.tsx

@@ -0,0 +1,556 @@
+import React from 'react'
+
+import { fireEvent, render, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { PATHS } from 'care/api/paths'
+import fetchMock from 'fetch-mock'
+import { theme } from 'misc/theme'
+import formatString from 'string-format'
+import { ThemeProvider } from 'styled-components'
+import { TestTranslationProvider } from 'test/testTranslationProvider'
+
+import { Props, BookingSearchBar } from './index'
+
+const CARE_API_DOMAIN = 'http://care.test/'
+
+const SEARCH_LOCATION_RESULTS_TEST_ID = 'location-search-results'
+
+const baseProps: Props = {
+  careApiDomain: CARE_API_DOMAIN,
+  isMobile: true,
+}
+
+function renderComponent(props: Props) {
+  return render(
+    <ThemeProvider theme={theme}>
+      <TestTranslationProvider>
+        <BookingSearchBar {...props} />
+      </TestTranslationProvider>
+    </ThemeProvider>,
+  )
+}
+
+beforeEach(() => {
+  fetchMock.reset()
+})
+
+xdescribe('BookingSearchBar component', () => {
+  // TODO remove this mock
+  beforeEach(() => {
+    fetchMock.mock(`begin:${CARE_API_DOMAIN}api/v2/search`, {
+      _data: [],
+    })
+  })
+  describe('desktop', () => {
+    const desktopBaseProps = {
+      ...baseProps,
+      isMobile: false,
+    }
+    describe('search location input behavior', () => {
+      describe('default field value', () => {
+        beforeEach(() => {
+          const getGeoIpApiUrl = formatString(
+            `${CARE_API_DOMAIN}${PATHS.GET_CITY_BY_IP}`,
+            { domain: 'hellodoctor.com.ph' },
+          )
+          fetchMock.mock(getGeoIpApiUrl, {
+            _data: {
+              cities: [],
+              default: { id: 123, name: 'User City', slug: 'user-city' },
+            },
+          })
+        })
+        it('should be `Current Location` when geolocation permission is granted', async () => {
+          // act
+          const { container } = renderComponent({
+            ...desktopBaseProps,
+            geoLocationPermission: 'granted',
+          })
+
+          // assert
+          await waitFor(() => {
+            const searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('Current location')
+            const pinIconPath = container.querySelector(
+              '.location-pin-icon path',
+            )
+            expect(pinIconPath).toHaveAttribute(
+              'fill',
+              theme.colors.primaryBase,
+            )
+          })
+        })
+        it('should be `Current Location` when geolocation permission is unset', async () => {
+          // act
+          const { container } = renderComponent({
+            ...desktopBaseProps,
+            geoLocationPermission: 'unset',
+          })
+
+          // assert
+          await waitFor(() => {
+            const searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('Current location')
+            const pinIconPath = container.querySelector(
+              '.location-pin-icon path',
+            )
+            expect(pinIconPath).toHaveAttribute('fill', theme.colors.gray400)
+          })
+        })
+        it('should be the city from user IP address when geolocation permission is denied', async () => {
+          // act
+          const { container } = renderComponent({
+            ...desktopBaseProps,
+            geoLocationPermission: 'denied',
+          })
+
+          // assert
+          await waitFor(() => {
+            const searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('User City')
+          })
+        })
+      })
+      describe('clear field value', () => {
+        beforeEach(() => {
+          fetchMock.mock(`begin:${CARE_API_DOMAIN}api/lists/cities`, {
+            _data: {
+              cities: [
+                { id: 2, name: 'City A 1', slug: 'city-x' },
+                { id: 3, name: 'City A 2', slug: 'city-y' },
+              ],
+            },
+          })
+
+          fetchMock.mock(`begin:${CARE_API_DOMAIN}api/geobyip`, {
+            _data: {
+              cities: [],
+              default: { id: 123, name: 'User City', slug: 'user-city' },
+            },
+          })
+        })
+        it('should come back to `Current Location` when the permission is granted', async () => {
+          // act
+          const { container } = renderComponent({
+            ...desktopBaseProps,
+            geoLocationPermission: 'granted',
+          })
+
+          // assert
+          await waitFor(() => {
+            const searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('Current location')
+          })
+
+          // click field 'cross' button
+          fireEvent.click(
+            container.querySelector(
+              'input[name="search-location"] ~ .actionIcon',
+            ),
+          )
+
+          let searchLocationInput
+
+          await waitFor(() => {
+            searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('')
+          })
+
+          // Trigger the outside click on search location field
+          fireEvent.mouseDown(
+            container.querySelector('input[name="search-results"]'),
+          )
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('Current location')
+          })
+
+          fireEvent.focus(searchLocationInput)
+          fireEvent.change(searchLocationInput, { target: { value: 'Test' } })
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('Test')
+          })
+
+          fireEvent.change(searchLocationInput, { target: { value: '' } })
+
+          // Trigger the outside click on search location field
+          fireEvent.mouseDown(
+            container.querySelector('input[name="search-results"]'),
+          )
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('Current location')
+          })
+        })
+        it('should come back to `Current Location` when geolocation permission is unset', async () => {
+          // act
+          const { container } = renderComponent({
+            ...desktopBaseProps,
+            geoLocationPermission: 'unset',
+          })
+
+          // assert
+          await waitFor(() => {
+            const searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('Current location')
+          })
+
+          // click field 'cross' button
+          fireEvent.click(
+            container.querySelector(
+              'input[name="search-location"] ~ .actionIcon',
+            ),
+          )
+
+          let searchLocationInput
+
+          await waitFor(() => {
+            searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('')
+          })
+
+          // Trigger the outside click on search location field
+          fireEvent.mouseDown(
+            container.querySelector('input[name="search-results"]'),
+          )
+
+          await waitFor(() => {
+            const searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('Current location')
+          })
+
+          fireEvent.focus(searchLocationInput)
+          fireEvent.change(searchLocationInput, { target: { value: 'Test' } })
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('Test')
+          })
+
+          fireEvent.change(searchLocationInput, { target: { value: '' } })
+
+          // Trigger the outside click on search location field
+          fireEvent.mouseDown(
+            container.querySelector('input[name="search-results"]'),
+          )
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('Current location')
+          })
+        })
+        it('should come back to the city from user IP address when geolocation permission is denied', async () => {
+          // act
+          const { container } = renderComponent({
+            ...desktopBaseProps,
+            geoLocationPermission: 'denied',
+          })
+
+          let searchLocationInput
+
+          // assert
+          await waitFor(() => {
+            searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('User City')
+          })
+
+          // click field 'cross' button
+          fireEvent.click(
+            container.querySelector(
+              'input[name="search-location"] ~ .actionIcon',
+            ),
+          )
+
+          await waitFor(() => {
+            const searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('')
+          })
+
+          // Trigger the outside click on search location field
+          fireEvent.mouseDown(
+            container.querySelector('input[name="search-results"]'),
+          )
+
+          await waitFor(() => {
+            const searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('User City')
+          })
+
+          fireEvent.focus(searchLocationInput)
+          fireEvent.change(searchLocationInput, { target: { value: 'Test' } })
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('Test')
+          })
+
+          fireEvent.change(searchLocationInput, { target: { value: '' } })
+
+          // Trigger the outside click on search location field
+          fireEvent.mouseDown(
+            container.querySelector('input[name="search-results"]'),
+          )
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('User City')
+          })
+        })
+      })
+      describe('search location results', () => {
+        test('display initial results from geo IP', async () => {
+          // prepare
+          const getGeoIpApiUrl = formatString(
+            `${CARE_API_DOMAIN}${PATHS.GET_CITY_BY_IP}`,
+            { domain: 'hellodoctor.com.ph' },
+          )
+          fetchMock.mock(getGeoIpApiUrl, {
+            _data: {
+              cities: [
+                { id: 1, name: 'City A', slug: 'city-a' },
+                { id: 2, name: 'City B', slug: 'city-b' },
+                { id: 123, name: 'User City', slug: 'user-city' },
+              ],
+              default: { id: 123, name: 'User City', slug: 'user-city' },
+            },
+          })
+
+          // act
+          const { container, queryByTestId, getByTestId, queryByText } =
+            renderComponent({
+              ...desktopBaseProps,
+              geoLocationPermission: 'granted',
+            })
+
+          // assert
+          await waitFor(() => {
+            expect(queryByTestId(SEARCH_LOCATION_RESULTS_TEST_ID)).toBeNull()
+          })
+
+          const searchLocationInput = container.querySelector(
+            'input[name="search-location"]',
+          )
+
+          fireEvent.focus(searchLocationInput)
+
+          await waitFor(() => {
+            const searchLocationResults = getByTestId(
+              SEARCH_LOCATION_RESULTS_TEST_ID,
+            )
+            expect(searchLocationResults).toBeTruthy()
+            const items = searchLocationResults.querySelectorAll('li')
+            expect(items).toHaveLength(4)
+            expect(items[0]).toHaveTextContent('Use my current location')
+            expect(items[1]).toHaveTextContent('User City')
+            expect(items[2]).toHaveTextContent('City A')
+            expect(items[3]).toHaveTextContent('City B')
+          })
+
+          fireEvent.click(queryByText('City B'))
+
+          await waitFor(() => {
+            expect(queryByTestId(SEARCH_LOCATION_RESULTS_TEST_ID)).toBeNull()
+            expect(searchLocationInput).toHaveValue('City B')
+          })
+
+          fireEvent.focus(searchLocationInput)
+          fireEvent.click(queryByText('Use my current location'))
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('Current location')
+          })
+
+          fireEvent.focus(searchLocationInput)
+          fireEvent.keyDown(searchLocationInput, { key: 'Backspace' })
+
+          await waitFor(() => {
+            const searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('')
+          })
+
+          // Trigger the outside click on search location field
+          fireEvent.mouseDown(
+            container.querySelector('input[name="search-results"]'),
+          )
+
+          await waitFor(() => {
+            const searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('Current location')
+          })
+
+          fireEvent.focus(searchLocationInput)
+
+          await userEvent.type(searchLocationInput, 'ab')
+
+          await waitFor(() => {
+            const searchLocationInput = container.querySelector(
+              'input[name="search-location"]',
+            )
+            expect(searchLocationInput).toHaveValue('ab')
+          })
+        })
+        test('display and select results', async () => {
+          // prepare
+          const getGeoIpApiUrl = formatString(
+            `${CARE_API_DOMAIN}${PATHS.GET_CITY_BY_IP}`,
+            { domain: 'hellodoctor.com.ph' },
+          )
+          fetchMock.mock(getGeoIpApiUrl, {
+            _data: {
+              cities: [{ id: 1, name: 'City A', slug: 'city-a' }],
+              default: { id: 123, name: 'User City', slug: 'user-city' },
+            },
+          })
+
+          fetchMock.mock(`begin:${CARE_API_DOMAIN}api/lists/cities`, (url) => {
+            const cities = url.includes('keyword=cityb')
+              ? [
+                  { id: 2, name: 'City B 1', slug: 'city-x' },
+                  { id: 3, name: 'City B 2', slug: 'city-y' },
+                ]
+              : [
+                  { id: 2, name: 'City A 1', slug: 'city-x' },
+                  { id: 3, name: 'City A 2', slug: 'city-y' },
+                  { id: 4, name: 'City A 3', slug: 'city-z' },
+                  { id: 1, name: 'City A 4', slug: 'city-a' },
+                ]
+            return {
+              _data: {
+                cities,
+              },
+            }
+          })
+
+          // act
+          const { container, queryByTestId, getByTestId } = renderComponent({
+            ...desktopBaseProps,
+            geoLocationPermission: 'granted',
+          })
+
+          // assert
+          await waitFor(() => {
+            expect(queryByTestId(SEARCH_LOCATION_RESULTS_TEST_ID)).toBeNull()
+          })
+
+          const searchLocationInput = container.querySelector(
+            'input[name="search-location"]',
+          )
+
+          fireEvent.focus(searchLocationInput)
+          jest.useRealTimers()
+
+          await userEvent.type(searchLocationInput, 'citya')
+
+          jest.useFakeTimers()
+          jest.advanceTimersByTime(500)
+
+          await waitFor(() => {
+            const searchLocationResults = getByTestId(
+              SEARCH_LOCATION_RESULTS_TEST_ID,
+            )
+            expect(searchLocationResults).toBeTruthy()
+            const items = searchLocationResults.querySelectorAll('li')
+            expect(items[0]).toHaveTextContent('Use my current location')
+            expect(items[1]).toHaveTextContent('City A 1')
+            expect(items[2]).toHaveTextContent('City A 2')
+            expect(items[3]).toHaveTextContent('City A 3')
+            expect(items[4]).toHaveTextContent('City A 4')
+          })
+
+          jest.useRealTimers()
+          await userEvent.clear(searchLocationInput)
+          await userEvent.type(searchLocationInput, 'cityb')
+
+          jest.useFakeTimers()
+          jest.advanceTimersByTime(500)
+
+          let cityToSelect
+
+          await waitFor(() => {
+            const searchLocationResults = getByTestId(
+              SEARCH_LOCATION_RESULTS_TEST_ID,
+            )
+            expect(searchLocationResults).toBeTruthy()
+            const items = searchLocationResults.querySelectorAll('li')
+            expect(items).toHaveLength(3)
+            expect(items[0]).toHaveTextContent('Use my current location')
+            expect(items[1]).toHaveTextContent('City B 1')
+            expect(items[2]).toHaveTextContent('City B 2')
+            cityToSelect = items[1]
+          })
+
+          fireEvent.click(cityToSelect)
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('City B 1')
+          })
+
+          // click field 'cross' button
+          fireEvent.click(
+            container.querySelector(
+              'input[name="search-location"] ~ .actionIcon',
+            ),
+          )
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('')
+          })
+
+          // Trigger the outside click on search location field
+          fireEvent.mouseDown(
+            container.querySelector('input[name="search-results"]'),
+          )
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('City B 1')
+          })
+
+          jest.useRealTimers()
+
+          fireEvent.focus(searchLocationInput)
+          await userEvent.type(searchLocationInput, 'ab')
+
+          jest.useFakeTimers()
+          jest.advanceTimersByTime(500)
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('City B 1ab')
+          })
+
+          fireEvent.mouseDown(
+            container.querySelector('input[name="search-results"]'),
+          )
+
+          jest.advanceTimersByTime(500)
+
+          await waitFor(() => {
+            expect(searchLocationInput).toHaveValue('City B 1')
+          })
+        })
+      })
+    })
+  })
+})