[feat-5482]: zoeken en filteren (#2775)

* [feat-5577]: filter disabling (#2766)

* Fix close button globalnotification message

* Disabled filter buttons and show message on click

* Fix notification test

* Add tests

* Bump notification test coverage

* [feat-5578]: Add disable sorting functionality (#2768)

* Add disable sorting functionality

* Add tests

* Disable sorting functionality

* Fix linting warnings

* Update selectors test

* Update FilterForm test

* Add sort reset info and btn test

src/components/Notification/__tests__/Notification.test.tsx

@@ -325,47 +325,17 @@ describe('components/Notification', () => {
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 
-  it('slides up when the close button is clicked', () => {
+  it('notification disappears when close button is clicked', () => {
     mockedGetIsAuthenticated.mockImplementation(() => true)
 
     const onClose = jest.fn()
 
-    const { container } = render(
-      withAppContext(<Notification title="Foo bar" onClose={onClose} />)
-    )
-
-    expect(onClose).not.toHaveBeenCalled()
-
-    userEvent.click(screen.getByTestId('notification-close'))
-
-    expect(container.firstChild).toHaveClass('slideup')
-
-    expect(onClose).not.toHaveBeenCalled()
-
-    jest.advanceTimersByTime(ONCLOSE_TIMEOUT)
-
-    expect(onClose).toHaveBeenCalledTimes(1)
-  })
-
-  it('fades out up when the close button is clicked', () => {
-    mockedGetIsAuthenticated.mockImplementation(() => false)
-
-    const onClose = jest.fn()
-
-    const { container } = render(
-      withAppContext(<Notification title="Foo bar" onClose={onClose} />)
-    )
+    render(withAppContext(<Notification title="Foo bar" onClose={onClose} />))
 
     expect(onClose).not.toHaveBeenCalled()
 
     userEvent.click(screen.getByTestId('notification-close'))
 
-    expect(container.firstChild).toHaveClass('fadeout')
-
-    expect(onClose).not.toHaveBeenCalled()
-
-    jest.advanceTimersByTime(ONCLOSE_TIMEOUT)
-
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 

src/components/Notification/index.tsx

@@ -107,18 +107,10 @@ const Notification: FunctionComponent<NotificationProps> = ({
 
   const onCloseNotification = useCallback(() => {
     setShouldHide(true)
-
-    const slideUpTimeoutId = window.setTimeout(() => {
-      window.clearTimeout(onCloseTimeoutRef.current)
-      window.clearTimeout(slideUpTimeoutRef.current)
-
-      /* istanbul ignore else */
-      if (typeof onClose === 'function') {
-        onClose()
-      }
-    }, ONCLOSE_TIMEOUT)
-
-    slideUpTimeoutRef.current = slideUpTimeoutId
+    /* istanbul ignore else */
+    if (typeof onClose === 'function') {
+      onClose()
+    }
   }, [onClose])
 
   const transformClassName = tall ? 'fadeout' : 'slideup'

src/signals/incident-management/__tests__/selectors.test.js

@@ -689,7 +689,7 @@ describe('signals/incident-management/selectors', () => {
       }
 
       expect(makeSelectFilterParams(emptyState)).toEqual({
-        ordering: '-created_at',
+        ordering: '',
         page: 1,
         page_size: FILTER_PAGE_SIZE,
       })
@@ -702,7 +702,7 @@ describe('signals/incident-management/selectors', () => {
       }
 
       expect(makeSelectFilterParams(state)).toEqual({
-        ordering: '-created_at',
+        ordering: '',
         page: 1,
         stadsdeel: stadsdeelFilter.options.stadsdeel,
         page_size: FILTER_PAGE_SIZE,
@@ -719,7 +719,7 @@ describe('signals/incident-management/selectors', () => {
       }
 
       expect(makeSelectFilterParams(state)).toEqual({
-        ordering: '-created_at',
+        ordering: '',
         page: 1,
         area_code: ['north'],
         area_type_code: 'district',
@@ -743,7 +743,7 @@ describe('signals/incident-management/selectors', () => {
       }
 
       expect(makeSelectFilterParams(state)).toEqual({
-        ordering: '-created_at',
+        ordering: '',
         page: 1,
         area_code: ['null'],
         page_size: FILTER_PAGE_SIZE,

src/signals/incident-management/components/FilterForm/__tests__/FilterForm.test.tsx

@@ -1230,31 +1230,31 @@ describe('Notification', () => {
     // Set threshold low so it fails with a single filter.
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    constants.MAX_FILTER_LENGTH = 108
+    constants.MAX_FILTER_LENGTH = 103
   })
 
   const notificationMessage =
     'Helaas is de combinatie van deze filters te groot. Maak een kleinere selectie.'
 
   it('should show a notification when too many filters are selected and removed when deselected', async () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    constants.MAX_FILTER_LENGTH = 70
     const onSubmit = jest.fn()
 
     render(withContext(<FilterForm {...{ ...formProps, onSubmit }} />))
-    expect(screen.queryByText(notificationMessage)).not.toBeInTheDocument()
-
     const afvalButton = screen.getByRole('button', { name: 'Afval' })
-
     userEvent.click(afvalButton)
 
-    const checkbox = screen.getByRole('checkbox', {
-      name: 'Container glas kapot',
-    })
+    const checkbox = screen.getByText('Container glas kapot')
 
     expect(checkbox).toBeInTheDocument()
 
     userEvent.click(checkbox)
-
-    expect(checkbox).toBeChecked()
+    await screen.findByRole('checkbox', {
+      name: /Container glas kapot/i,
+      checked: true,
+    })
 
     const checkbox2 = screen.getByRole('checkbox', {
       name: 'Container glas vol',

src/signals/incident-management/containers/IncidentOverviewPage/components/IncidentOverviewTitle/__tests__/IncidentOverviewTitle.test.js

@@ -1,16 +1,27 @@
 // SPDX-License-Identifier: MPL-2.0
-// Copyright (C) 2019 - 2021 Gemeente Amsterdam
+// Copyright (C) 2019 - 2023 Gemeente Amsterdam
 import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 import { withAppContext } from 'test/utils'
 
+import { SortOptions } from '../../../contants'
 import IncidentOverviewTitleContainer, { IncidentOverviewTitle } from '../index'
 
+const mockOrderingChangeAction = jest.fn()
+
 describe('containers/IncidentOverviewTitle', () => {
   const filter = { name: '' }
 
   it('renders a title', () => {
-    render(withAppContext(<IncidentOverviewTitleContainer />))
+    render(
+      withAppContext(
+        <IncidentOverviewTitleContainer
+          showsMap={false}
+          orderingChangedAction={mockOrderingChangeAction}
+        />
+      )
+    )
 
     expect(
       screen.getByRole('heading', { name: 'Meldingen' })
@@ -20,7 +31,12 @@ describe('containers/IncidentOverviewTitle', () => {
   it('should provide the IncidentOverviewTitle component with a title', () => {
     const { rerender } = render(
       withAppContext(
-        <IncidentOverviewTitle filter={filter} incidentsCount={null} />
+        <IncidentOverviewTitle
+          filter={filter}
+          incidentsCount={null}
+          showsMap={false}
+          orderingChangedAction={mockOrderingChangeAction}
+        />
       )
     )
 
@@ -30,7 +46,12 @@ describe('containers/IncidentOverviewTitle', () => {
 
     rerender(
       withAppContext(
-        <IncidentOverviewTitle filter={filter} incidentsCount={0} />
+        <IncidentOverviewTitle
+          filter={filter}
+          incidentsCount={0}
+          showsMap={false}
+          orderingChangedAction={mockOrderingChangeAction}
+        />
       )
     )
 
@@ -40,7 +61,12 @@ describe('containers/IncidentOverviewTitle', () => {
 
     rerender(
       withAppContext(
-        <IncidentOverviewTitle filter={filter} incidentsCount={10} />
+        <IncidentOverviewTitle
+          filter={filter}
+          incidentsCount={10}
+          showsMap={false}
+          orderingChangedAction={mockOrderingChangeAction}
+        />
       )
     )
 
@@ -53,6 +79,8 @@ describe('containers/IncidentOverviewTitle', () => {
         <IncidentOverviewTitle
           filter={{ name: 'Foo bar !!1!' }}
           incidentsCount={null}
+          showsMap={false}
+          orderingChangedAction={mockOrderingChangeAction}
         />
       )
     )
@@ -66,6 +94,8 @@ describe('containers/IncidentOverviewTitle', () => {
         <IncidentOverviewTitle
           filter={{ name: 'Foo bar !!1!' }}
           incidentsCount={9999}
+          showsMap={false}
+          orderingChangedAction={mockOrderingChangeAction}
         />
       )
     )
@@ -79,6 +109,8 @@ describe('containers/IncidentOverviewTitle', () => {
         <IncidentOverviewTitle
           filter={{ name: 'Foo bar !!1!', refresh: true }}
           incidentsCount={99}
+          showsMap={false}
+          orderingChangedAction={mockOrderingChangeAction}
         />
       )
     )
@@ -97,12 +129,56 @@ describe('containers/IncidentOverviewTitle', () => {
           filter={filter}
           incidentsCount={null}
           query={query}
+          showsMap={false}
+          ordering={SortOptions.CREATED_AT_DESC}
+          orderingChangedAction={mockOrderingChangeAction}
         />
       )
     )
 
     expect(
       screen.getByText('Zoekresultaten voor "Foo bar"')
     ).toBeInTheDocument()
+    expect(screen.getByText('Sorteer op datum (oud-nieuw)')).toBeInTheDocument()
+  })
+
+  it('should provide the IncidentOverviewTitle component with sort information', () => {
+    render(
+      withAppContext(
+        <IncidentOverviewTitle
+          showsMap={false}
+          filter={filter}
+          incidentsCount={null}
+          ordering={SortOptions.CREATED_AT_ASC}
+          orderingChangedAction={mockOrderingChangeAction}
+        />
+      )
+    )
+
+    expect(screen.getByText('Sorteer op datum (nieuw-oud)')).toBeInTheDocument()
+
+    const resetBtn = screen.getByText('Wis sortering')
+
+    userEvent.click(resetBtn)
+
+    expect(mockOrderingChangeAction).toHaveBeenCalledWith('')
+  })
+
+  it('should hide sort information when map is shown', () => {
+    render(
+      withAppContext(
+        <IncidentOverviewTitle
+          showsMap={true}
+          filter={filter}
+          incidentsCount={null}
+          ordering={SortOptions.CREATED_AT_ASC}
+          orderingChangedAction={mockOrderingChangeAction}
+        />
+      )
+    )
+
+    expect(
+      screen.queryByText('Sorteer op datum (nieuw-oud)')
+    ).not.toBeInTheDocument()
   })
 })