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

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

@@ -1,556 +0,0 @@
-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')
-          })
-        })
-      })
-    })
-  })
-})