test: notification badge

Author: navinkarkera

src/course-outline/CourseOutline.test.tsx

@@ -17,6 +17,7 @@ import {
   act, fireEvent, initializeMocks, render, screen, waitFor, within,
 } from '@src/testUtils';
 import { XBlock } from '@src/data/types';
+import { userEvent } from '@testing-library/user-event';
 import {
   getCourseBestPracticesApiUrl,
   getCourseLaunchApiUrl,
@@ -2491,9 +2492,13 @@ describe('<CourseOutline />', () => {
       ENABLE_COURSE_OUTLINE_NEW_DESIGN: 'true',
     });
     renderComponent();
-    expect(await screen.findByRole('button', { name: 'Collapse all' })).toBeInTheDocument();
+    const btn = await screen.findByRole('button', { name: 'Collapse all' });
+    expect(btn).toBeInTheDocument();
     expect(await screen.findByRole('link', { name: 'View live' })).toBeInTheDocument();
     expect(await screen.findByRole('button', { name: 'Add' })).toBeInTheDocument();
     expect(await screen.findByRole('button', { name: 'More actions' })).toBeInTheDocument();
+    const user = userEvent.setup();
+    await user.click(btn);
+    expect(await screen.findByRole('button', { name: 'Expand all' })).toBeInTheDocument();
   });
 });

src/course-outline/status-bar/NotificationStatusIcon.test.tsx

@@ -0,0 +1,42 @@
+import { initializeMocks, render, screen } from '@src/testUtils';
+import { NotificationStatusIcon } from './NotificationStatusIcon';
+
+let mockCount = 0;
+
+jest.mock('./hooks.ts', () => ({
+  useDynamicHookShim: () => () => ({
+    notificationAppData: {
+      tabsCount: {
+        count: mockCount,
+      },
+    },
+  }),
+}));
+
+const renderComponent = () => render(
+  <NotificationStatusIcon />,
+);
+
+describe('NotificationStatusIcon', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  test('should display a status icon', async () => {
+    mockCount = 2;
+    renderComponent();
+    expect(await screen.findByText('2 notifications')).toBeInTheDocument();
+  });
+
+  test('check 1 notification text', async () => {
+    mockCount = 1;
+    renderComponent();
+    expect(await screen.findByText('1 notification')).toBeInTheDocument();
+  });
+
+  test('should not display a status icon if 0 notifications', async () => {
+    mockCount = 0;
+    renderComponent();
+    expect(await screen.findByTestId('redux-provider')).toBeEmptyDOMElement();
+  });
+});

src/course-outline/status-bar/NotificationStatusIcon.tsx

@@ -1,50 +1,9 @@
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Icon } from '@openedx/paragon';
 import { NotificationsNone } from '@openedx/paragon/icons';
-import React from 'react';
+import { HooKType, useDynamicHookShim } from './hooks';
 import messages from './messages';
 
-interface HooKType {
-  notificationAppData: {
-    tabsCount?: {
-      count?: number;
-    }
-  }
-}
-
-// Load the hook module asynchronously
-function useDynamicHookShim() {
-  const [hook, setHook] = React.useState<(() => HooKType) | null>(null);
-
-  React.useEffect(() => {
-    let cancelled = false;
-
-    async function load() {
-      try {
-        // @ts-ignore
-        // eslint-disable-next-line import/no-extraneous-dependencies, import/no-unresolved
-        const module = await import('@edx/frontend-plugin-notifications');
-        const hookFn = module.useAppNotifications ?? module.default;
-        if (!cancelled) {
-          // `module.useAppNotifications` is itself a hook
-          setHook(() => hookFn);
-        }
-      } catch (err: any) {
-        // eslint-disable-next-line no-console
-        console.error('Failed to load notifications plugin:', err);
-      }
-    }
-
-    load();
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  return hook;
-}
-
 // Component that actually calls the loaded hook
 const NotificationHookConsumer = ({ hook }: { hook: () => HooKType }) => {
   // The hook is now called on **every** render of this component
@@ -54,7 +13,6 @@ const NotificationHookConsumer = ({ hook }: { hook: () => HooKType }) => {
     return null;
   }
 
-  // You can use `hookResult` here as needed
   return (
     <small className="d-flex">
       <Icon className="mr-1" size="md" src={NotificationsNone} />
@@ -70,6 +28,7 @@ const NotificationHookConsumer = ({ hook }: { hook: () => HooKType }) => {
 export const NotificationStatusIcon = () => {
   const loadedHook = useDynamicHookShim();
 
+  // istanbul ignore if
   if (!loadedHook) {
     return null;
   }

src/course-outline/status-bar/hooks.ts

@@ -0,0 +1,43 @@
+/* istanbul ignore file */
+import React from 'react';
+
+export interface HooKType {
+  notificationAppData: {
+    tabsCount?: {
+      count?: number;
+    }
+  }
+}
+
+// Load the hook module asynchronously
+export function useDynamicHookShim() {
+  const [hook, setHook] = React.useState<(() => HooKType) | null>(null);
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      try {
+        // @ts-ignore
+        // eslint-disable-next-line import/no-extraneous-dependencies, import/no-unresolved
+        const module = await import('@edx/frontend-plugin-notifications');
+        const hookFn = module.useAppNotifications ?? module.default;
+        if (!cancelled) {
+          // `module.useAppNotifications` is itself a hook
+          setHook(() => hookFn);
+        }
+      } catch (err: any) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to load notifications plugin:', err);
+      }
+    }
+
+    load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return hook;
+}

src/stubs/empty-notifications-plugin.tsx

@@ -1,3 +1,4 @@
+/* istanbul ignore file */
 export const useAppNotifications = () => ({
   notificationAppData: {
     tabsCount: {
@@ -6,4 +7,6 @@ export const useAppNotifications = () => ({
   },
 });
 
-export const NotificationsTray = () => null;
+export const NotificationsTray: React.FC = () => null;
+
+export default NotificationsTray;