Removed tests that concern changes in PDOKAutosuggest values. PDOKAut…

…osuggest is tested for dealing with changes, it does not need to be also tested in FilterForm.test (#2758) serviceParams as props for PDOKAutosuggest
Amsterdam · Nov 22, 2023 · 1b130ce · 1b130ce
1 parent 30d40e3
commit 1b130ce
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 82 deletions.
diff --git a/src/components/AutoSuggest/AutoSuggest.tsx b/src/components/AutoSuggest/AutoSuggest.tsx
@@ -392,6 +392,7 @@ const AutoSuggest = ({
             onClick={() => inputRef.current?.focus()}
             size={24}
             variant="blank"
+            type="button"
           />
         )}
       </div>

diff --git a/src/components/PDOKAutoSuggest/PDOKAutoSuggest.tsx b/src/components/PDOKAutoSuggest/PDOKAutoSuggest.tsx
@@ -12,12 +12,6 @@ import {
 import type { RevGeo } from 'types/pdok/revgeo'
 
 const municipalityFilterName = 'gemeentenaam'
-const serviceParams = [
-  ['fq', 'bron:BAG'],
-  ['fq', 'type:adres'],
-  ['q', ''],
-]
-
 const numOptionsDeterminer = (data?: RevGeo) =>
   data?.response?.docs?.length || 0
 
@@ -26,6 +20,7 @@ export interface PDOKAutoSuggestProps
     AutoSuggestProps,
     'url' | 'formatResponse' | 'numOptionsDeterminer'
   > {
+  serviceParams?: string[][]
   fieldList?: Array<string>
   municipality?: string
 }
@@ -38,6 +33,11 @@ export interface PDOKAutoSuggestProps
 const PDOKAutoSuggest: FC<PDOKAutoSuggestProps> = ({
   fieldList = [],
   municipality = configuration.map.municipality,
+  serviceParams = [
+    ['fq', 'bron:BAG'],
+    ['fq', 'type:adres'],
+    ['q', ''],
+  ],
   ...rest
 }) => {
   const fq = municipality

diff --git a/src/signals/incident-management/components/FilterForm/FilterForm.tsx b/src/signals/incident-management/components/FilterForm/FilterForm.tsx
@@ -34,15 +34,15 @@ import { parseOutputFormData } from 'signals/shared/filter/parse'
 
 import {
   reset,
-  setAddress,
   setSaveButtonLabel,
   setCategories,
   setDate,
   setGroupOptions,
   setMainCategory,
   setName,
-  setNoteKeyword,
   setRefresh,
+  setNoteKeyword,
+  setAddress,
 } from './actions'
 import {
   CategoryGroups,
@@ -63,8 +63,10 @@ import {
 import type { FilterFormData, UserOptions } from './types'
 import { hasTooManyFiltersSelected } from './utils'
 import CheckboxList from '../../../../components/CheckboxList'
+import PDOKAutoSuggest from '../../../../components/PDOKAutoSuggest'
 import AppContext from '../../../../containers/App/context'
 import RefreshIcon from '../../../../images/icon-refresh.svg'
+import type { PdokResponse } from '../../../../shared/services/map-location'
 import { useIncidentManagementContext } from '../../context'
 import { makeSelectFilterParams } from '../../selectors'
 import type { SaveFilterAction, UpdateFilterAction } from '../../types'
@@ -78,6 +80,12 @@ const getUserOptions = (data: UserOptions) =>
     value: user.username,
   }))
 
+const serviceParams = [
+  ['fq', 'bron:BAG'],
+  ['fq', 'type:weg'],
+  ['q', ''],
+]
+
 const getUserCount = (data: UserOptions) => data.count
 
 interface Props {
@@ -283,14 +291,6 @@ const FilterForm = ({
       }),
     [controlledTextInput]
   )
-  const onAddressChange = useCallback(
-    (event) =>
-      setControlledTextInput({
-        ...controlledTextInput,
-        address: event.target?.value,
-      }),
-    [controlledTextInput]
-  )
 
   const onRefreshChange = useCallback(
     (event) => {
@@ -311,9 +311,9 @@ const FilterForm = ({
     [dispatch]
   )
 
-  const onAddressBlur = useCallback(
-    (event) => {
-      dispatch(setAddress(event.target.value))
+  const onAddressSelect = useCallback(
+    (response: PdokResponse) => {
+      dispatch(setAddress(response.data.address.openbare_ruimte))
     },
     [dispatch]
   )
@@ -404,7 +404,7 @@ const FilterForm = ({
     <Fragment>
       {showNotification && <Notification reference={notificationRef} />}
 
-      <Form action="" noValidate>
+      <Form action="" noValidate data-testid="filter-form">
         <ControlsWrapper>
           {filter.id && <input type="hidden" name="id" value={filter.id} />}
           <Fieldset>
@@ -641,15 +641,13 @@ const FilterForm = ({
             <Label htmlFor="filter_address" isGroupHeader>
               Adres
             </Label>
-            <Input
-              data-testid="filter-address"
+            <PDOKAutoSuggest
               id="filter_address"
-              name="address_text"
-              onBlur={onAddressBlur}
-              onChange={onAddressChange}
-              placeholder="Zoek adres of postcode"
-              type="text"
-              value={controlledTextInput.address}
+              municipality={configuration.map?.municipality}
+              serviceParams={serviceParams}
+              onSelect={onAddressSelect}
+              placeholder="Zoek op straatnaam"
+              value={state.options.address_text}
             />
           </FilterGroup>
 

diff --git a/src/signals/incident-management/components/FilterForm/__tests__/FilterForm.test.tsx b/src/signals/incident-management/components/FilterForm/__tests__/FilterForm.test.tsx
@@ -4,6 +4,7 @@ import type { ReactElement } from 'react'
 
 import { fireEvent, render, screen, act, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import fetch from 'jest-fetch-mock'
 
 import { INPUT_DELAY } from 'components/AutoSuggest'
 import * as appSelectors from 'containers/App/selectors'
@@ -147,15 +148,15 @@ describe('signals/incident-management/components/FilterForm', () => {
     expect(getByTestId('filter-name')).toHaveValue('FooBar')
   })
 
-  it('should render filter fields', () => {
-    const { container } = render(withContext(<FilterForm {...formProps} />))
+  it('should render filter fields', async () => {
+    const { container, findAllByPlaceholderText } = render(
+      withContext(<FilterForm {...formProps} />)
+    )
 
     expect(
       container.querySelectorAll('input[type="text"][name="name"]')
     ).toHaveLength(1)
-    expect(
-      container.querySelectorAll('input[type="text"][name="address_text"]')
-    ).toHaveLength(1)
+    expect(await findAllByPlaceholderText('Zoek op straatnaam')).toHaveLength(1)
   })
 
   it('should render a refresh checkbox', async () => {
@@ -567,13 +568,9 @@ describe('signals/incident-management/components/FilterForm', () => {
     const username = autocompleteUsernames.results[0].username
 
     const selectUser = async (input: any) => {
-      // console.log('---  input:', input)
       return act(async () => {
         userEvent.type(input, 'asc')
-        // console.log('username', username)
-        // screen.debug()
         const userNameListElement = await screen.findByText(username)
-        // console.log('---  userNameListElement:', userNameListElement)
         userEvent.click(userNameListElement)
       })
     }
@@ -836,10 +833,8 @@ describe('signals/incident-management/components/FilterForm', () => {
       )
 
       const nameField = screen.getByRole('textbox', { name: 'Filternaam' })
-      const addressField = screen.getByRole('textbox', { name: 'Adres' })
       const noteField = screen.getByRole('textbox', { name: 'Zoek in notitie' })
 
-      expect(addressField).toHaveValue('Initial address')
       expect(nameField).toHaveValue('Initial name')
       expect(noteField).toHaveValue('Initial note')
 
@@ -848,7 +843,6 @@ describe('signals/incident-management/components/FilterForm', () => {
       })
 
       expect(onClearFilter).toHaveBeenCalled()
-      expect(addressField).toHaveValue('')
       expect(nameField).toHaveValue('')
       expect(noteField).toHaveValue('')
     })
@@ -860,7 +854,6 @@ describe('signals/incident-management/components/FilterForm', () => {
       )
 
       const nameField = screen.getByRole('textbox', { name: 'Filternaam' })
-      const addressField = screen.getByRole('textbox', { name: 'Adres' })
       const noteField = screen.getByRole('textbox', { name: 'Zoek in notitie' })
       const dateField = screen.getByRole('textbox', { name: 'Tot en met' })
       const afvalToggle = container.querySelector(
@@ -873,11 +866,6 @@ describe('signals/incident-management/components/FilterForm', () => {
       act(() => {
         fireEvent.change(dateField, { target: { value: '1970-01-01' } })
       })
-      act(() => {
-        fireEvent.change(addressField, {
-          target: { value: 'Weesperstraat 113' },
-        })
-      })
       act(() => {
         fireEvent.change(noteField, { target: { value: 'test123' } })
       })
@@ -889,7 +877,6 @@ describe('signals/incident-management/components/FilterForm', () => {
 
       expect(nameField).toHaveValue('My filter')
       expect(dateField).toHaveValue('01-01-1970')
-      expect(addressField).toHaveValue()
       expect(afvalToggle).toBeChecked()
       expect(noteField).toHaveValue('test123')
 
@@ -899,9 +886,6 @@ describe('signals/incident-management/components/FilterForm', () => {
 
       expect(onClearFilter).toHaveBeenCalled()
 
-      // skip testing dateField; handled by react-datepicker and not possible to verify until package has been updated
-      // expect(dateField.value).toEqual('');
-      expect(addressField).toHaveValue('')
       expect(nameField).toHaveValue('')
       expect(noteField).toHaveValue('')
       expect(afvalToggle).not.toBeChecked()
@@ -947,38 +931,6 @@ describe('signals/incident-management/components/FilterForm', () => {
     expect(submitButton.textContent).toEqual(SAVE_SUBMIT_BUTTON_LABEL)
   })
 
-  it('should watch for changes in address_text field value', async () => {
-    const { findByTestId } = render(
-      withContext(
-        <FilterForm
-          {...formProps}
-          filter={{
-            name: 'My saved filter',
-            options: { address_text: 'Weesperstraat 113' },
-          }}
-        />
-      )
-    )
-
-    const addressField = screen.getByRole('textbox', { name: 'Adres' })
-
-    await act(async () => {
-      fireEvent.change(addressField, {
-        target: { value: 'Weesperstraat 113/117' },
-      })
-    })
-
-    await act(async () => {
-      fireEvent.blur(addressField)
-    })
-
-    await findByTestId('filter-address')
-
-    expect(screen.getByRole('textbox', { name: 'Adres' })).toHaveValue(
-      'Weesperstraat 113/117'
-    )
-  })
-
   it('should watch for changes in note_keyword field value', () => {
     render(
       withContext(