Completing first pass on test suite.

src/components/NotificationsDrawer/DrawerPanelContent.test.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { fireEvent, render } 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', () => {
+    const store = mockStore(stateWithNotifications);
+
+    const renderedResult = renderComponent(store);
+
+    const checkbox = renderedResult.getAllByRole('checkbox');
+    fireEvent.click(checkbox[0]);
+
+    const actions = store.getActions();
+    expect(actions).toContainEqual(markNotificationAsRead(1));
+  });
+
+  test('Mark notification as unread successfully', () => {
+    const store = mockStore(stateWithReadNotifications);
+
+    const renderedResult = renderComponent(store);
+
+    const checkbox = renderedResult.getAllByRole('checkbox');
+    fireEvent.click(checkbox[0]);
+
+    const actions = store.getActions();
+    expect(actions).toContainEqual(markNotificationAsUnread(1));
+  });
+
+  test('Mark all notifications as read successfully', () => {
+    const store = mockStore(stateWithNotifications);
+
+    const renderedResult = renderComponent(store);
+
+    const actionMenuButton = renderedResult.getByRole('button', { name: /Notifications actions dropdown/i });
+    fireEvent.click(actionMenuButton);
+
+    const actionDropdownItems = renderedResult.getAllByRole('menuitem');
+    fireEvent.click(actionDropdownItems[0]);
+
+    const actions = store.getActions();
+    expect(actions).toContainEqual(markAllNotificationsAsRead());
+  });
+
+  test('Mark all notifications as unread successfully', () => {
+    const store = mockStore(stateWithReadNotifications);
+
+    const renderedResult = renderComponent(store);
+
+    const actionMenuButton = renderedResult.getByRole('button', { name: /Notifications actions dropdown/i });
+    fireEvent.click(actionMenuButton);
+
+    const actionDropdownItems = renderedResult.getAllByRole('menuitem');
+    fireEvent.click(actionDropdownItems[1]);
+
+    const actions = store.getActions();
+    expect(actions).toContainEqual(markAllNotificationsAsUnread());
+  });
+
+  test('Select filter successfully', () => {
+    const store = mockStore(stateWithNotifications);
+
+    const renderedResult = renderComponent(store);
+
+    const filterMenuButton = renderedResult.getByRole('button', { name: /Notifications filter/i });
+    fireEvent.click(filterMenuButton);
+
+    const filterMenuItems = renderedResult.getAllByRole('menuitem');
+    fireEvent.click(filterMenuItems[2]);
+
+    const filteredNotification = renderedResult.getAllByRole('listitem');
+    expect(filteredNotification.length === 1);
+  });
+});

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',
+  }
+];

tsconfig.json

@@ -5,7 +5,7 @@
     "noImplicitAny": true,
     "module": "esnext",
     "target": "esnext",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "allowJs": true,
     "moduleResolution": "node",
     "removeComments": false,