From de8783c708bbeaf275b76f0bc9e5f4b14675b1bc Mon Sep 17 00:00:00 2001 From: SundasNoreen Date: Tue, 27 Jun 2023 11:23:03 +0500 Subject: [PATCH] refactor: fixed review points --- src/Notifications/NotificationRowItem.jsx | 2 +- src/Notifications/NotificationSections.jsx | 7 +++- src/Notifications/index.test.jsx | 39 ++++++++++++++++--- .../notificationRowItem.test.jsx | 16 ++++---- .../notificationSections.test.jsx | 39 +++++++++---------- src/Notifications/notificationTabs.test.jsx | 35 ++++++++--------- src/Notifications/test-utils.js | 2 +- 7 files changed, 83 insertions(+), 57 deletions(-) diff --git a/src/Notifications/NotificationRowItem.jsx b/src/Notifications/NotificationRowItem.jsx index 90d96e4..03406ef 100644 --- a/src/Notifications/NotificationRowItem.jsx +++ b/src/Notifications/NotificationRowItem.jsx @@ -57,7 +57,7 @@ const NotificationRowItem = ({ {!lastRead && (
- +
)} diff --git a/src/Notifications/NotificationSections.jsx b/src/Notifications/NotificationSections.jsx index 945ecec..f2fefc7 100644 --- a/src/Notifications/NotificationSections.jsx +++ b/src/Notifications/NotificationSections.jsx @@ -71,7 +71,12 @@ const NotificationSections = () => { {renderNotificationSection('today', today)} {renderNotificationSection('earlier', earlier)} {currentPage < numPages && ( - )} diff --git a/src/Notifications/index.test.jsx b/src/Notifications/index.test.jsx index e4fdec4..8163303 100644 --- a/src/Notifications/index.test.jsx +++ b/src/Notifications/index.test.jsx @@ -25,8 +25,8 @@ const notificationCountsApiUrl = getNotificationsCountApiUrl(); let axiosMock; let store; -async function renderComponent() { - await render( +function renderComponent() { + render( @@ -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'); diff --git a/src/Notifications/notificationRowItem.test.jsx b/src/Notifications/notificationRowItem.test.jsx index 7587d53..5443ab4 100644 --- a/src/Notifications/notificationRowItem.test.jsx +++ b/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( @@ -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(); }); }); diff --git a/src/Notifications/notificationSections.test.jsx b/src/Notifications/notificationSections.test.jsx index affd85e..2130325 100644 --- a/src/Notifications/notificationSections.test.jsx +++ b/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( @@ -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); }); diff --git a/src/Notifications/notificationTabs.test.jsx b/src/Notifications/notificationTabs.test.jsx index 7d6e420..8bec8b8 100644 --- a/src/Notifications/notificationTabs.test.jsx +++ b/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( @@ -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); }); diff --git a/src/Notifications/test-utils.js b/src/Notifications/test-utils.js index f6c077c..85489ce 100644 --- a/src/Notifications/test-utils.js +++ b/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());