Merge pull request #5885 from hotosm/tests/5722-notifications-page

Update tests for the notifications page components

frontend/src/components/header/tests/notificationBell.test.js

@@ -3,7 +3,11 @@ import { act, screen, waitFor, within } from '@testing-library/react';
 
 import '../../../utils/mockMatchMedia';
 import { store } from '../../../store';
-import { ReduxIntlProviders, renderWithRouter } from '../../../utils/testWithIntl';
+import {
+  ReduxIntlProviders,
+  createComponentWithMemoryRouter,
+  renderWithRouter,
+} from '../../../utils/testWithIntl';
 import { NotificationBell } from '../notificationBell';
 
 describe('Notification Bell', () => {
@@ -21,8 +25,8 @@ describe('Notification Bell', () => {
     );
     const inboxLink = screen.getAllByRole('link')[0];
     expect(within(inboxLink).getByLabelText(/notifications/i)).toBeInTheDocument();
-    expect(await screen.findByText(/You have been added to team/i)).toBeInTheDocument();
-    expect(screen.getAllByRole('article').length).toBe(4);
+    expect(await screen.findByText(/Sample subject 1/i)).toBeInTheDocument();
+    expect(screen.getAllByRole('article').length).toBe(5);
     await waitFor(() => {
       expect(container.getElementsByClassName('redicon')[0]).toBeInTheDocument();
     });
@@ -36,7 +40,7 @@ describe('Notification Bell', () => {
       </ReduxIntlProviders>,
     );
     expect(screen.getAllByRole('link')[0]).not.toHaveClass('bb b--blue-dark bw1 pv2');
-    expect(await screen.findByText(/You have been added to team/i)).toBeInTheDocument();
+    expect(await screen.findByText(/Sample subject 1/i)).toBeInTheDocument();
     await waitFor(() => {
       expect(container.getElementsByClassName('redicon')[0]).toBeInTheDocument();
     });
@@ -45,4 +49,14 @@ describe('Notification Bell', () => {
       expect(container.querySelector('redicon')).not.toBeInTheDocument();
     });
   });
+
+  it('should navigate to the notifications page', async () => {
+    const { router, user } = createComponentWithMemoryRouter(
+      <ReduxIntlProviders>
+        <NotificationBell />
+      </ReduxIntlProviders>,
+    );
+    await user.click(await screen.findByText(/208 unread/i));
+    await waitFor(() => expect(router.state.location.pathname).toBe('/inbox'));
+  });
 });

frontend/src/components/notifications/actionButtons.js

@@ -6,7 +6,7 @@ import deletionMessages from '../deleteModal/messages';
 import messages from './messages';
 import { EyeIcon, WasteIcon } from '../svgIcons';
 import { Button } from '../button';
-import { pushToLocalJSONAPI } from '../../network/genericJSONRequest';
+import { fetchLocalJSONAPI, pushToLocalJSONAPI } from '../../network/genericJSONRequest';
 
 export const ActionButtons = ({
   selected,
@@ -16,7 +16,6 @@ export const ActionButtons = ({
   isAllSelected,
   inboxQuery,
   setInboxQuery,
-  updateUnreadCount,
   pageOfCards,
   totalPages,
 }) => {
@@ -25,6 +24,14 @@ export const ActionButtons = ({
   const param = inboxQuery.types ? `?messageType=${inboxQuery.types?.join(',')}` : '';
   const payload = JSON.stringify({ messageIds: selected });
 
+  const updateUnreadCount = () => {
+    fetchLocalJSONAPI(`notifications/?status=unread`, token)
+      .then((notifications) =>
+        dispatch({ type: 'SET_UNREAD_COUNT', payload: notifications.pagination?.total }),
+      )
+      .catch((e) => console.log(e));
+  };
+
   const deleteMessages = () => {
     if (isAllSelected) {
       pushToLocalJSONAPI(`/api/v2/notifications/delete-all/${param}`, null, token, 'DELETE')

frontend/src/components/notifications/messages.js

@@ -8,6 +8,10 @@ export default defineMessages({
     id: 'notifications.mainSection.title',
     defaultMessage: 'Notifications',
   },
+  notification: {
+    id: 'notifications.singular.notification',
+    defaultMessage: 'notification',
+  },
   all: {
     id: 'notifications.filter.all',
     defaultMessage: 'All',

frontend/src/components/notifications/notificationBodyCard.js

@@ -63,7 +63,7 @@ export const NotificationBodyModal = (props) => {
           <FormattedMessage
             {...messages.errorLoadingTheX}
             values={{
-              xWord: <FormattedMessage {...messages.message} />,
+              xWord: <FormattedMessage {...messages.notification} />,
             }}
           />
         </div>

frontend/src/components/notifications/notificationOrderBy.js

@@ -38,21 +38,16 @@ export function NotificationOrderBySelector(props) {
     },
   ];
 
-  const onSortSelect = (arr) => {
-    if (arr.length === 1) {
-      props.setQuery(
-        {
-          ...props.allQueryParams,
-          page: undefined,
-          orderBy: arr[0].sort,
-          orderByType: arr[0].type,
-        },
-        'pushIn',
-      );
-    } else if (arr.length > 1) {
-      throw new Error('filter select array is bigger.');
-    }
-  };
+  const onSortSelect = (arr) =>
+    props.setQuery(
+      {
+        ...props.allQueryParams,
+        page: undefined,
+        orderBy: arr[0].sort,
+        orderByType: arr[0].type,
+      },
+      'pushIn',
+    );
 
   return (
     <Dropdown

frontend/src/components/notifications/notificationResults.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import ReactPlaceholder from 'react-placeholder';
-import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import 'react-placeholder/lib/reactPlaceholder.css';
 
@@ -10,7 +9,6 @@ import NotificationPlaceholder from './notificationPlaceholder';
 import { RefreshIcon } from '../svgIcons';
 import { SelectAll } from '../formInputs';
 import { SelectAllNotifications } from './selectAllNotifications';
-import { fetchLocalJSONAPI } from '../../network/genericJSONRequest';
 import { ActionButtons } from './actionButtons';
 
 export const NotificationResultsMini = (props) => {
@@ -110,8 +108,6 @@ const NotificationCards = ({
   inboxQuery,
   setInboxQuery,
 }) => {
-  const dispatch = useDispatch();
-  const token = useSelector((state) => state.auth.token);
   const [selected, setSelected] = useState([]);
   const [isAllSelected, setIsAllSelected] = useState(false);
 
@@ -138,14 +134,6 @@ const NotificationCards = ({
     return !msg.read && selected.includes(msg.messageId) ? acc + 1 : acc;
   }, 0);
 
-  const updateUnreadCount = () => {
-    fetchLocalJSONAPI(`notifications/?status=unread`, token)
-      .then((notifications) =>
-        dispatch({ type: 'SET_UNREAD_COUNT', payload: notifications.pagination?.total }),
-      )
-      .catch((e) => console.log(e));
-  };
-
   return (
     <>
       {!useMiniCard && (
@@ -165,7 +153,6 @@ const NotificationCards = ({
               isAllSelected={isAllSelected}
               inboxQuery={inboxQuery}
               setInboxQuery={setInboxQuery}
-              updateUnreadCount={updateUnreadCount}
               pageOfCards={pageOfCards}
               totalPages={totalPages}
             />

frontend/src/components/notifications/tests/actionButtons.test.js

@@ -6,11 +6,11 @@ import { setupFaultyHandlers } from '../../../network/tests/server';
 import { store } from '../../../store';
 import { ActionButtons } from '../actionButtons';
 import { ReduxIntlProviders } from '../../../utils/testWithIntl';
+import { generateSampleNotifications } from '../../../network/tests/mockData/notifications';
 
 describe('Action Buttons', () => {
   const retryFnMock = jest.fn();
   const setSelectedMock = jest.fn();
-  const updateUnreadCountMock = jest.fn();
   it('should return nothing if no notification is selected', () => {
     act(() => {
       store.dispatch({ type: 'SET_TOKEN', token: 'validToken' });
@@ -22,7 +22,6 @@ describe('Action Buttons', () => {
           selected={[]}
           retryFn={retryFnMock}
           setSelected={setSelectedMock}
-          updateUnreadCount={updateUnreadCountMock}
         />
       </ReduxIntlProviders>,
     );
@@ -40,7 +39,6 @@ describe('Action Buttons', () => {
           retryFn={retryFnMock}
           isAllSelected={false}
           setSelected={setSelectedMock}
-          updateUnreadCount={updateUnreadCountMock}
           unreadCountInSelected={1}
         />
       </ReduxIntlProviders>,
@@ -52,7 +50,6 @@ describe('Action Buttons', () => {
     );
     await waitFor(() => expect(setSelectedMock).toHaveBeenCalledTimes(1));
     await waitFor(() => expect(retryFnMock).toHaveBeenCalledTimes(1));
-    expect(updateUnreadCountMock).not.toHaveBeenCalled();
   });
 
   it('should fetch unread count if all notifications are selected upon marking notifications as read', async () => {
@@ -65,7 +62,6 @@ describe('Action Buttons', () => {
           retryFn={retryFnMock}
           isAllSelected={true}
           setSelected={setSelectedMock}
-          updateUnreadCount={updateUnreadCountMock}
         />
       </ReduxIntlProviders>,
     );
@@ -76,7 +72,6 @@ describe('Action Buttons', () => {
     );
     await waitFor(() => expect(setSelectedMock).toHaveBeenCalledTimes(1));
     await waitFor(() => expect(retryFnMock).toHaveBeenCalledTimes(1));
-    expect(updateUnreadCountMock).toHaveBeenCalled();
   });
 
   it('should decrement unread count in redux store if all notifications are not selected upon deleting notifications', async () => {
@@ -89,7 +84,6 @@ describe('Action Buttons', () => {
           retryFn={retryFnMock}
           isAllSelected={false}
           setSelected={setSelectedMock}
-          updateUnreadCount={updateUnreadCountMock}
           unreadCountInSelected={1}
           pageOfCards={6}
         />
@@ -102,7 +96,6 @@ describe('Action Buttons', () => {
     );
     await waitFor(() => expect(setSelectedMock).toHaveBeenCalledTimes(1));
     await waitFor(() => expect(retryFnMock).toHaveBeenCalledTimes(1));
-    expect(updateUnreadCountMock).not.toHaveBeenCalled();
   });
 
   it('should fetch unread count if all notifications are selected upon deleting notifications', async () => {
@@ -115,7 +108,6 @@ describe('Action Buttons', () => {
           retryFn={retryFnMock}
           isAllSelected={true}
           setSelected={setSelectedMock}
-          updateUnreadCount={updateUnreadCountMock}
         />
       </ReduxIntlProviders>,
     );
@@ -126,13 +118,12 @@ describe('Action Buttons', () => {
     );
     await waitFor(() => expect(setSelectedMock).toHaveBeenCalledTimes(1));
     await waitFor(() => expect(retryFnMock).toHaveBeenCalledTimes(1));
-    expect(updateUnreadCountMock).toHaveBeenCalled();
   });
 
   // Error are consoled in all cases of POST error
   it('should catch error when marking multiple selected notifications as read', async () => {
-    setupFaultyHandlers();
     const user = userEvent.setup();
+    setupFaultyHandlers();
     render(
       <ReduxIntlProviders>
         <ActionButtons
@@ -141,7 +132,6 @@ describe('Action Buttons', () => {
           retryFn={retryFnMock}
           isAllSelected={false}
           setSelected={setSelectedMock}
-          updateUnreadCount={updateUnreadCountMock}
           unreadCountInSelected={1}
         />
       </ReduxIntlProviders>,
@@ -155,8 +145,8 @@ describe('Action Buttons', () => {
   });
 
   it('should catch error when marking all notifications in a category as read', async () => {
-    setupFaultyHandlers();
     const user = userEvent.setup();
+    setupFaultyHandlers();
     render(
       <ReduxIntlProviders>
         <ActionButtons
@@ -165,7 +155,6 @@ describe('Action Buttons', () => {
           retryFn={retryFnMock}
           isAllSelected={true}
           setSelected={setSelectedMock}
-          updateUnreadCount={updateUnreadCountMock}
         />
       </ReduxIntlProviders>,
     );
@@ -178,9 +167,9 @@ describe('Action Buttons', () => {
   });
 
   it('should catch error when deleting multiple selected notifications', async () => {
+    const user = userEvent.setup();
     act(() => {});
     setupFaultyHandlers();
-    const user = userEvent.setup();
     render(
       <ReduxIntlProviders>
         <ActionButtons
@@ -189,7 +178,6 @@ describe('Action Buttons', () => {
           retryFn={retryFnMock}
           isAllSelected={false}
           setSelected={setSelectedMock}
-          updateUnreadCount={updateUnreadCountMock}
           unreadCountInSelected={1}
         />
       </ReduxIntlProviders>,
@@ -203,8 +191,8 @@ describe('Action Buttons', () => {
   });
 
   it('should catch error when deleting all notifications in a category', async () => {
-    setupFaultyHandlers();
     const user = userEvent.setup();
+    setupFaultyHandlers();
     render(
       <ReduxIntlProviders>
         <ActionButtons
@@ -213,7 +201,6 @@ describe('Action Buttons', () => {
           retryFn={retryFnMock}
           isAllSelected={true}
           setSelected={setSelectedMock}
-          updateUnreadCount={updateUnreadCountMock}
         />
       </ReduxIntlProviders>,
     );
@@ -224,4 +211,35 @@ describe('Action Buttons', () => {
     );
     // Error is then consoled
   });
+
+  it('should decrement the page query by 1 if the user deletes all notifications on the last page', async () => {
+    // ACT: there are 3 notifications pages in total, and we're trying to delete
+    // all the six notifications in the last page
+    const setInboxQueryMock = jest.fn();
+    const user = userEvent.setup();
+    render(
+      <ReduxIntlProviders>
+        <ActionButtons
+          inboxQuery={{ types: undefined, page: 3 }}
+          selected={[1, 2, 3, 4, 5, 6]}
+          retryFn={retryFnMock}
+          isAllSelected={false}
+          setSelected={setSelectedMock}
+          pageOfCards={generateSampleNotifications(6)}
+          totalPages={3}
+          setInboxQuery={setInboxQueryMock}
+        />
+      </ReduxIntlProviders>,
+    );
+    await user.click(
+      screen.getByRole('button', {
+        name: /delete/i,
+      }),
+    );
+    await waitFor(() =>
+      expect(setInboxQueryMock).toHaveBeenCalledWith({ page: 2, types: undefined }, 'pushIn'),
+    );
+    await waitFor(() => expect(setSelectedMock).toHaveBeenCalledWith([]));
+    expect(retryFnMock).not.toBeCalled();
+  });
 });