Notification Drawer Test Suite (#2637)

* Completing first pass on test suite.

* Wrapping user actions and expects for async.

* Switching to title in notification labels.

* Fixing all console errors related async acts.

* Changing test ids to strings

src/components/Header/HeaderTests/ToolbarToggle.test.js

@@ -29,39 +29,39 @@ describe('ToolbarToggle', () => {
     clickSpy.mockReset();
   });
 
-  it('should render correctly', () => {
+  it('should render correctly', async () => {
     const { container } = render(<ToolbarToggle {...toolbarToggleProps} />);
     const toggleButton = container.querySelector('#foo');
     expect(toggleButton).toBeTruthy();
-    act(() => {
+    await act(async () => {
       fireEvent.click(toggleButton);
     });
     expect(container.querySelector('div')).toMatchSnapshot();
   });
 
-  it('should open/close menu correctly', () => {
+  it('should open/close menu correctly', async () => {
     const { container } = render(<ToolbarToggle {...toolbarToggleProps} />);
     const toggleButton = container.querySelector('#foo');
     expect(toggleButton).toBeTruthy();
-    act(() => {
+    await act(async () => {
       fireEvent.click(toggleButton);
     });
     expect(container.querySelectorAll('.pf-v5-c-menu__list-item')).toHaveLength(2);
-    act(() => {
+    await act(async () => {
       fireEvent.click(toggleButton);
     });
     expect(container.querySelectorAll('.pf-v5-c-menu__list-item')).toHaveLength(0);
   });
 
-  it('should call onClick menu item callback', () => {
+  it('should call onClick menu item callback', async () => {
     const { container } = render(<ToolbarToggle {...toolbarToggleProps} />);
     const toggleButton = container.querySelector('#foo');
-    act(() => {
+    await act(async () => {
       fireEvent.click(toggleButton);
     });
     const actionButton = container.querySelector('button.pf-v5-c-menu__item');
     expect(actionButton).toBeTruthy();
-    act(() => {
+    await act(async () => {
       fireEvent.click(actionButton);
     });
     expect(clickSpy).toHaveBeenCalled();

src/components/Header/HeaderTests/__snapshots__/ToolbarToggle.test.js.snap

@@ -6,7 +6,10 @@ exports[`ToolbarToggle should render correctly 1`] = `
   data-ouia-component-id="OUIA-Generated-Dropdown-1"
   data-ouia-component-type="PF5/Dropdown"
   data-ouia-safe="true"
-  style="position: absolute; left: 0px; top: 0px; z-index: 9999; min-width: 0px;"
+  data-popper-escaped="true"
+  data-popper-placement="bottom-end"
+  data-popper-reference-hidden="true"
+  style="position: absolute; left: 0px; top: 0px; z-index: 9999; min-width: 0px; transform: translate(0px, 0px);"
 >
   <div
     class="pf-v5-c-menu__content"

src/components/NotificationsDrawer/DrawerPanelContent.test.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureMockStore, { MockStore } from 'redux-mock-store';
+import DrawerPanel from './DrawerPanelContent';
+import { BrowserRouter } from 'react-router-dom';
+import { markAllNotificationsAsRead, markAllNotificationsAsUnread, markNotificationAsRead, markNotificationAsUnread } from '../../redux/actions';
+import { readTestData, testData } from './notificationDrawerUtils';
+
+const mockStore = configureMockStore();
+
+const stateWithNotifications = {
+  chrome: {
+    notifications: {
+      data: testData,
+      isExpanded: true,
+      count: 3,
+    },
+  },
+};
+
+const stateWithoutNotifications = {
+  chrome: {
+    notifications: {
+      data: [],
+      isExpanded: true,
+      count: 0,
+    },
+  },
+};
+
+const stateWithReadNotifications = {
+  chrome: {
+    notifications: {
+      data: readTestData,
+      isExpanded: true,
+      count: 2,
+    },
+  },
+};
+
+const renderComponent = (store: MockStore) => {
+  return render(
+    <React.Fragment>
+      <Provider store={store}>
+        <BrowserRouter>
+          <DrawerPanel />
+        </BrowserRouter>
+      </Provider>
+    </React.Fragment>
+  );
+};
+
+describe('Drawer panel functionality', () => {
+  test('Renders the drawer panel empty successfully. ', () => {
+    const store = mockStore(stateWithoutNotifications);
+
+    const renderedResult = renderComponent(store);
+    expect(renderedResult.getByText('Notifications')).toBeInTheDocument();
+  });
+
+  test('Renders notification drawer with notifications successfully', () => {
+    const store = mockStore(stateWithNotifications);
+
+    const renderedResult = renderComponent(store);
+    expect(renderedResult.getByText('Test Notification 1')).toBeInTheDocument();
+  });
+
+  test('Marking notification as read successfully', async () => {
+    const store = mockStore(stateWithNotifications);
+
+    const renderedResult = renderComponent(store);
+
+    const checkbox = renderedResult.getAllByRole('checkbox');
+
+    await act(async () => {
+      fireEvent.click(checkbox[0]);
+    });
+
+    const actions = store.getActions();
+
+    await waitFor(() => {
+      expect(actions).toContainEqual(markNotificationAsRead('1'));
+    });
+  });
+
+  test('Mark notification as unread successfully', async () => {
+    const store = mockStore(stateWithReadNotifications);
+
+    const renderedResult = renderComponent(store);
+
+    const checkbox = renderedResult.getAllByRole('checkbox');
+
+    await act(async () => {
+      fireEvent.click(checkbox[0]);
+    });
+
+    const actions = store.getActions();
+
+    await waitFor(() => {
+      expect(actions).toContainEqual(markNotificationAsUnread('1'));
+    });
+  });
+
+  test('Mark all notifications as read successfully', async () => {
+    const store = mockStore(stateWithNotifications);
+
+    const renderedResult = renderComponent(store);
+
+    const actionMenuButton = renderedResult.getByRole('button', { name: /Notifications actions dropdown/i });
+
+    await act(async () => {
+      fireEvent.click(actionMenuButton);
+    });
+
+    const actionDropdownItems = await renderedResult.getAllByRole('menuitem');
+
+    await act(async () => {
+      fireEvent.click(actionDropdownItems[0]);
+    });
+
+    const actions = store.getActions();
+
+    await waitFor(() => {
+      expect(actions).toContainEqual(markAllNotificationsAsRead());
+    });
+  });
+
+  test('Mark all notifications as unread successfully', async () => {
+    const store = mockStore(stateWithReadNotifications);
+
+    const renderedResult = renderComponent(store);
+
+    const actionMenuButton = renderedResult.getByRole('button', { name: /Notifications actions dropdown/i });
+
+    await act(async () => {
+      fireEvent.click(actionMenuButton);
+    });
+
+    const actionDropdownItems = await renderedResult.getAllByRole('menuitem');
+
+    act(() => {
+      fireEvent.click(actionDropdownItems[1]);
+    });
+
+    const actions = store.getActions();
+
+    await waitFor(() => {
+      expect(actions).toContainEqual(markAllNotificationsAsUnread());
+    });
+  });
+
+  test('Select filter successfully', async () => {
+    const store = mockStore(stateWithNotifications);
+
+    const renderedResult = renderComponent(store);
+
+    const filterMenuButton = renderedResult.getByRole('button', { name: /Notifications filter/i });
+
+    await act(async () => {
+      fireEvent.click(filterMenuButton);
+    });
+
+    const filterMenuItems = await renderedResult.getAllByRole('menuitem');
+
+    await act(async () => {
+      fireEvent.click(filterMenuItems[2]);
+    });
+
+    const filteredNotification = await renderedResult.getAllByRole('listitem');
+
+    await waitFor(() => {
+      expect(filteredNotification.length === 1);
+    });
+  });
+});

src/components/NotificationsDrawer/DrawerPanelContent.tsx

@@ -189,6 +189,7 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
               onClick={() => setIsFilterDropdownOpen(!isFilterDropdownOpen)}
               id="notifications-filter-toggle"
               variant="plain"
+              aria-label="Notifications filter"
             >
               <FilterIcon />
             </MenuToggle>
@@ -199,7 +200,6 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
             position: PopoverPosition.right,
           }}
           id="notifications-filter-dropdown"
-          aria-label="Notifications filter"
         >
           {filterDropdownItems()}
         </Dropdown>
@@ -210,6 +210,7 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
               onClick={() => setIsDropdownOpen(!isDropdownOpen)}
               variant="plain"
               id="notifications-actions-toggle"
+              aria-label="Notifications actions dropdown"
               isFullWidth
             >
               <EllipsisVIcon />

src/components/NotificationsDrawer/NotificationItem.tsx

@@ -38,7 +38,7 @@ const NotificationItem: React.FC<NotificationItemProps> = ({ notification, onNav
   return (
     <React.Fragment>
       <NotificationDrawerList>
-        <NotificationDrawerListItem variant="info" isRead={notification.read}>
+        <NotificationDrawerListItem aria-label={`Notification item ${notification.title}`} variant="info" isRead={notification.read}>
           <NotificationDrawerListItemHeader title={notification.title} srTitle="Info notification:">
             <Checkbox isChecked={notification.read} onChange={onCheckboxToggle} id="read-checkbox" name="read-checkbox" />
             <Dropdown

src/components/NotificationsDrawer/notificationDrawerUtils.ts

@@ -4,3 +4,49 @@ export const filterConfig = [
   { title: 'Red Hat Enterprise Linux', value: 'rhel' },
   { title: 'Ansible Automation Platform', value: 'ansible' },
 ];
+
+export const testData = [
+  {
+    id: '1',
+    title: 'Test Notification 1',
+    description: 'Testing of notification',
+    read: false,
+    source: 'rhel', // the origin of the message
+    created: '2023-08-18T12:00:00Z',
+  },
+  {
+    id: '2',
+    title: 'Test Notification 2',
+    description: 'Testing of notification',
+    read: false,
+    source: 'ansible', // the origin of the message
+    created: '2023-08-18T12:05:00Z',
+  },
+  {
+    id: '3',
+    title: 'Test Notification 3',
+    description: 'Testin of notification',
+    read: false,
+    source: 'openshift', // the origin of the message
+    created: '2023-08-18T12:10:00Z',
+  },
+];
+
+export const readTestData = [
+  {
+    id: '1',
+    title: 'Read test notification 1',
+    description: 'Notification testing with read',
+    read: true,
+    source: 'NEPTUNO',
+    created: '20 mins ago',
+  },
+  {
+    id: '2',
+    title: 'Read test notification 2',
+    description: 'Notification testing with read',
+    read: true,
+    source: 'MARS',
+    created: '25 mins ago',
+  },
+];