refactor: fixed review points

src/Notifications/NotificationRowItem.jsx

@@ -57,7 +57,7 @@ const NotificationRowItem = ({
           </div>
           {!lastRead && (
             <div className="d-flex py-1.5 px-1.5 ml-2 cursor-pointer">
-              <span className="bg-brand-500 rounded unread" data-testid={`unread-${id}`} />
+              <span className="bg-brand-500 rounded unread" data-testid={`unread-notification-${id}`} />
             </div>
           )}
         </div>

src/Notifications/NotificationSections.jsx

@@ -71,7 +71,12 @@ const NotificationSections = () => {
       {renderNotificationSection('today', today)}
       {renderNotificationSection('earlier', earlier)}
       {currentPage < numPages && (
-        <Button variant="primary" className="w-100 bg-primary-500" onClick={updatePagination} data-testid="load-more">
+        <Button
+          variant="primary"
+          className="w-100 bg-primary-500"
+          onClick={updatePagination}
+          data-testid="load-more-notifications"
+        >
           {intl.formatMessage(messages.loadMoreNotifications)}
         </Button>
       )}

src/Notifications/index.test.jsx

@@ -25,8 +25,8 @@ const notificationCountsApiUrl = getNotificationsCountApiUrl();
 let axiosMock;
 let store;
 
-async function renderComponent() {
-  await render(
+function renderComponent() {
+  render(
     <ResponsiveContext.Provider>
       <IntlProvider locale="en" messages={{}}>
         <AppProvider store={store}>
@@ -58,8 +58,8 @@ describe('Notification test cases.', () => {
     await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
   });
 
-  it('successfully showed bell icon and unseen count on it if unseen count is greater then 0.', async () => {
-    await renderComponent();
+  it('Successfully showed bell icon and unseen count on it if unseen count is greater then 0.', async () => {
+    renderComponent();
 
     const bellIcon = screen.queryByTestId('notification-bell-icon');
     const notificationCount = screen.queryByTestId('notification-count');
@@ -69,8 +69,35 @@ describe('Notification test cases.', () => {
     expect(screen.queryByText(45)).toBeInTheDocument();
   });
 
-  it('successfully show/hide notification tray by clicking on the bell icon and setting icon.', async () => {
-    await renderComponent();
+  it('Successfully showed bell icon and hide unseen count tag when unseen count is zero.', async () => {
+    axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount', { count: 0 })));
+    await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
+
+    renderComponent();
+
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+    const notificationCount = screen.queryByTestId('notification-count');
+
+    expect(bellIcon).toBeInTheDocument();
+    expect(notificationCount).not.toBeInTheDocument();
+  });
+
+  it('Successfully hides bell icon when showNotificationsTray is false.', async () => {
+    axiosMock.onGet(notificationCountsApiUrl).reply(
+      200,
+      (Factory.build('notificationsCount', { showNotificationsTray: false })),
+    );
+    await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
+
+    renderComponent();
+
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+
+    expect(bellIcon).not.toBeInTheDocument();
+  });
+
+  it('Successfully viewed setting icon and show/hide notification tray by clicking on the bell icon .', async () => {
+    renderComponent();
 
     const bellIcon = screen.queryByTestId('notification-bell-icon');
 

src/Notifications/notificationRowItem.test.jsx

@@ -15,7 +15,7 @@ import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import AuthenticatedUserDropdown from '../learning-header/AuthenticatedUserDropdown';
 import { initializeStore } from '../store';
 import { markNotificationAsReadApiUrl } from './data/api';
-import setupLearnerMockResponse from './test-utils';
+import mockNotificationsResponse from './test-utils';
 
 import './data/__factories__';
 
@@ -24,8 +24,8 @@ const markedNotificationAsReadApiUrl = markNotificationAsReadApiUrl();
 let axiosMock;
 let store;
 
-async function renderComponent() {
-  await render(
+function renderComponent() {
+  render(
     <ResponsiveContext.Provider>
       <IntlProvider locale="en" messages={{}}>
         <AppProvider store={store}>
@@ -53,13 +53,13 @@ describe('Notification row item test cases.', () => {
     Factory.resetAll();
     store = initializeStore();
 
-    ({ store, axiosMock } = await setupLearnerMockResponse());
+    ({ store, axiosMock } = await mockNotificationsResponse());
   });
 
   it(
     'Successfully viewed notification icon, notification context, unread , course name and notification time.',
     async () => {
-      await renderComponent();
+      renderComponent();
 
       const bellIcon = screen.queryByTestId('notification-bell-icon');
       await act(async () => { fireEvent.click(bellIcon); });
@@ -68,13 +68,13 @@ describe('Notification row item test cases.', () => {
       expect(screen.queryByTestId('notification-content-1')).toBeInTheDocument();
       expect(screen.queryByTestId('notification-course-1')).toBeInTheDocument();
       expect(screen.queryByTestId('notification-created-date-1')).toBeInTheDocument();
-      expect(screen.queryByTestId('unread-1')).toBeInTheDocument();
+      expect(screen.queryByTestId('unread-notification-1')).toBeInTheDocument();
     },
   );
 
   it('Successfully marked notification as read.', async () => {
     axiosMock.onPut(markedNotificationAsReadApiUrl).reply(200, { message: 'Notification marked read.' });
-    await renderComponent();
+    renderComponent();
 
     const bellIcon = screen.queryByTestId('notification-bell-icon');
     await act(async () => { fireEvent.click(bellIcon); });
@@ -82,6 +82,6 @@ describe('Notification row item test cases.', () => {
     const notification = screen.queryByTestId('notification-1');
     await act(async () => { fireEvent.click(notification); });
 
-    expect(screen.queryByTestId('unread-1')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('unread-notification-1')).not.toBeInTheDocument();
   });
 });

src/Notifications/notificationSections.test.jsx

@@ -15,7 +15,7 @@ import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import AuthenticatedUserDropdown from '../learning-header/AuthenticatedUserDropdown';
 import { initializeStore } from '../store';
 import { markNotificationAsReadApiUrl } from './data/api';
-import setupLearnerMockResponse from './test-utils';
+import mockNotificationsResponse from './test-utils';
 
 import './data/__factories__';
 
@@ -24,8 +24,8 @@ const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl();
 let axiosMock;
 let store;
 
-async function renderComponent() {
-  await render(
+function renderComponent() {
+  render(
     <ResponsiveContext.Provider>
       <IntlProvider locale="en" messages={{}}>
         <AppProvider store={store}>
@@ -53,11 +53,11 @@ describe('Notification sections test cases.', () => {
     Factory.resetAll();
     store = initializeStore();
 
-    ({ store, axiosMock } = await setupLearnerMockResponse());
+    ({ store, axiosMock } = await mockNotificationsResponse());
   });
 
-  it('Successfully viewed last 24 hours and earlier section along with nark all as read label.', async () => {
-    await renderComponent();
+  it('Successfully viewed last 24 hours and earlier section along with mark all as read label.', async () => {
+    renderComponent();
 
     const bellIcon = screen.queryByTestId('notification-bell-icon');
     await act(async () => { fireEvent.click(bellIcon); });
@@ -68,30 +68,27 @@ describe('Notification sections test cases.', () => {
     expect(within(notificationTraySection).queryByText('Mark all as read')).toBeInTheDocument();
   });
 
-  it(
-    'Successfully clicks on the mark all as read, the unread status disappeared across all the notifications',
-    async () => {
-      axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notifications marked read.' });
-      await renderComponent();
+  it('Successfully marked all notifications as read, removing the unread status.', async () => {
+    axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notifications marked read.' });
+    renderComponent();
 
-      const bellIcon = screen.queryByTestId('notification-bell-icon');
-      await act(async () => { fireEvent.click(bellIcon); });
-      const markAllReadButton = screen.queryByTestId('mark-all-read');
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+    await act(async () => { fireEvent.click(bellIcon); });
+    const markAllReadButton = screen.queryByTestId('mark-all-read');
 
-      expect(screen.queryByTestId('unread-1')).toBeInTheDocument();
-      await act(async () => { fireEvent.click(markAllReadButton); });
+    expect(screen.queryByTestId('unread-notification-1')).toBeInTheDocument();
+    await act(async () => { fireEvent.click(markAllReadButton); });
 
-      expect(screen.queryByTestId('unread-1')).not.toBeInTheDocument();
-    },
-  );
+    expect(screen.queryByTestId('unread-notification-1')).not.toBeInTheDocument();
+  });
 
   it('Successfully load more notifications by clicking on load more notification button.', async () => {
-    await renderComponent();
+    renderComponent();
 
     const bellIcon = screen.queryByTestId('notification-bell-icon');
     await act(async () => { fireEvent.click(bellIcon); });
 
-    const loadMoreButton = screen.queryByTestId('load-more');
+    const loadMoreButton = screen.queryByTestId('load-more-notifications');
 
     expect(screen.queryAllByTestId('notification-contents')).toHaveLength(10);
     await act(async () => { fireEvent.click(loadMoreButton); });

src/Notifications/notificationTabs.test.jsx

@@ -12,14 +12,14 @@ import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 
 import AuthenticatedUserDropdown from '../learning-header/AuthenticatedUserDropdown';
 import { initializeStore } from '../store';
-import setupLearnerMockResponse from './test-utils';
+import mockNotificationsResponse from './test-utils';
 
 import './data/__factories__';
 
 let store;
 
-async function renderComponent() {
-  await render(
+function renderComponent() {
+  render(
     <ResponsiveContext.Provider>
       <IntlProvider locale="en" messages={{}}>
         <AppProvider store={store}>
@@ -46,28 +46,25 @@ describe('Notification Tabs test cases.', () => {
     Factory.resetAll();
     store = initializeStore();
 
-    ({ store } = await setupLearnerMockResponse());
+    ({ store } = await mockNotificationsResponse());
   });
 
-  it(
-    'Successfully showed list of notification tabs, discussion tab selected by default and no unseen counts for it.',
-    async () => {
-      await renderComponent();
+  it('Notification tabs displayed with default discussion tab selected and no unseen counts.', async () => {
+    renderComponent();
 
-      const bellIcon = screen.queryByTestId('notification-bell-icon');
-      await act(async () => { fireEvent.click(bellIcon); });
+    const bellIcon = screen.queryByTestId('notification-bell-icon');
+    await act(async () => { fireEvent.click(bellIcon); });
 
-      const tabs = screen.queryAllByRole('tab');
-      const selectedTab = tabs.find(tab => tab.getAttribute('aria-selected') === 'true');
+    const tabs = screen.queryAllByRole('tab');
+    const selectedTab = tabs.find(tab => tab.getAttribute('aria-selected') === 'true');
 
-      expect(tabs.length).toEqual(5);
-      expect(within(selectedTab).queryByText('discussions')).toBeInTheDocument();
-      expect(within(selectedTab).queryByRole('status')).not.toBeInTheDocument();
-    },
-  );
+    expect(tabs.length).toEqual(5);
+    expect(within(selectedTab).queryByText('discussions')).toBeInTheDocument();
+    expect(within(selectedTab).queryByRole('status')).not.toBeInTheDocument();
+  });
 
   it('Successfully showed unseen counts for unselected tabs.', async () => {
-    await renderComponent();
+    renderComponent();
     const bellIcon = screen.queryByTestId('notification-bell-icon');
     await act(async () => { fireEvent.click(bellIcon); });
 
@@ -77,7 +74,7 @@ describe('Notification Tabs test cases.', () => {
   });
 
   it('Successfully selected reminder tab.', async () => {
-    await renderComponent();
+    renderComponent();
 
     const bellIcon = screen.queryByTestId('notification-bell-icon');
     await act(async () => { fireEvent.click(bellIcon); });

src/Notifications/test-utils.js

@@ -13,7 +13,7 @@ import './data/__factories__';
 const notificationCountsApiUrl = getNotificationsCountApiUrl();
 const notificationsApiUrl = getNotificationsApiUrl();
 
-export default async function setupLearnerMockResponse() {
+export default async function mockNotificationsResponse() {
   const store = initializeStore();
   const axiosMock = new MockAdapter(getAuthenticatedHttpClient());