test: added redux, selector and api cases

Author: sundasnoreen1221

package-lock.json

@@ -62,14 +62,16 @@
     "@fortawesome/free-solid-svg-icons": "6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@reduxjs/toolkit": "1.9.5",
+    "axios-mock-adapter": "1.21.4",
     "babel-polyfill": "6.26.0",
     "classnames": "2.3.2",
     "lodash": "4.17.21",
     "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
+    "react-router-dom": "5.3.4",
     "react-transition-group": "4.4.5",
-    "timeago.js": "4.0.2",
-    "react-router-dom": "5.3.4"
+    "rosie": "2.1.0",
+    "timeago.js": "4.0.2"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^4.0.0",

package.json

@@ -1,8 +1,15 @@
-import { camelCaseObject } from '@edx/frontend-platform';
-import notificationsList from './notifications.json';
+import { camelCaseObject, getConfig, snakeCaseObject } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+export const getNotificationsCountApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/count/`;
+export const getNotificationsApiUrl = () => `${getConfig().LMS_BASE_URL}/api/notifications/`;
+export const markNotificationsSeenApiUrl = (appName) => `${getConfig().LMS_BASE_URL}/api/notifications/mark-notifications-unseen/${appName}/`;
+export const markAllNotificationsAsReadpiUrl = (appName, id) => `${getConfig().LMS_BASE_URL}/api/notifications/mark-notifications-read/${appName}/${id}`;
 
 export async function getNotifications(appName, page, pageSize) {
-  const { data } = notificationsList;
+  const params = snakeCaseObject({ page, pageSize });
+  const { data } = await getAuthenticatedHttpClient().get(getNotificationsApiUrl(), { params });
+
   const startIndex = (page - 1) * pageSize;
   const endIndex = startIndex + pageSize;
 
@@ -11,30 +18,25 @@ export async function getNotifications(appName, page, pageSize) {
 }
 
 export async function getNotificationCounts() {
-  const data = {
-    count: 45,
-    count_by_app_name: {
-      reminders: 10,
-      discussions: 20,
-      grades: 10,
-      authoring: 5,
-    },
-    show_notification_tray: false,
-  };
+  const { data } = await getAuthenticatedHttpClient().get(getNotificationsCountApiUrl());
+
   return camelCaseObject(data);
 }
 
-export async function markNotificationSeen() {
-  const data = [];
+export async function markNotificationSeen(appName) {
+  const { data } = await getAuthenticatedHttpClient().put(`${markNotificationsSeenApiUrl(appName)}`);
+
   return camelCaseObject(data);
 }
 
-export async function markAllNotificationRead() {
-  const { data } = camelCaseObject(notificationsList);
-  return data;
+export async function markAllNotificationRead(appName) {
+  const { data } = await getAuthenticatedHttpClient().put(`${markAllNotificationsAsReadpiUrl(appName)}`);
+
+  return camelCaseObject(data);
 }
 
-export async function markNotificationRead(notificationId) {
-  const { data } = camelCaseObject(notificationsList);
-  return { data, id: notificationId };
+export async function markNotificationRead(appName, notificationId) {
+  const { data } = await getAuthenticatedHttpClient().put(`${markAllNotificationsAsReadpiUrl(appName, notificationId)}`);
+
+  return camelCaseObject({ data, id: notificationId });
 }

src/Notifications/data/api.js

@@ -40,7 +40,10 @@ describe('Notification Redux', () => {
     store = initializeStore();
 
     axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount')));
-    axiosMock.onGet(notificationsApiUrl).reply(200, (Factory.buildList('notification', 2, null)));
+    axiosMock.onGet(notificationsApiUrl).reply(
+      200,
+      (Factory.buildList('notification', 2, null, { createdDate: new Date().toISOString() })),
+    );
     await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
     await executeThunk(fetchNotificationList({ page: 1, pageSize: 10 }), store.dispatch, store.getState);
   });
@@ -68,9 +71,9 @@ describe('Notification Redux', () => {
   });
 
   it('successfully loaded notifications list in the redux.', async () => {
-    const state = store.getState();
+    const { notifications: { notifications } } = store.getState();
 
-    expect(Object.keys(state.notifications.notifications)).toHaveLength(2);
+    expect(Object.keys(notifications)).toHaveLength(2);
   });
 
   it('successfully loaded notification counts in the redux.', async () => {
@@ -84,9 +87,9 @@ describe('Notification Redux', () => {
   });
 
   it('successfully loaded showNotificationTray status in the redux based on api.', async () => {
-    const state = store.getState();
+    const { notifications: { showNotificationTray } } = store.getState();
 
-    expect(state.notifications.showNotificationTray).toEqual(true);
+    expect(showNotificationTray).toEqual(true);
   });
 
   it('successfully store the count, numPages, currentPage, and nextPage data in redux.', async () => {
@@ -98,15 +101,15 @@ describe('Notification Redux', () => {
   });
 
   it('successfully updated the selected app name in redux.', async () => {
-    const state = store.getState();
+    const { notifications: { appName } } = store.getState();
 
-    expect(state.notifications.appName).toEqual('discussions');
+    expect(appName).toEqual('discussions');
   });
 
   it('successfully store notification ids in the selected app in apps.', async () => {
-    const state = store.getState();
+    const { notifications: { apps } } = store.getState();
 
-    expect(state.notifications.apps.discussions).toHaveLength(2);
+    expect(apps.discussions).toHaveLength(2);
   });
 
   it('successfully marked all notifications as seen for selected app.', async () => {
@@ -120,21 +123,21 @@ describe('Notification Redux', () => {
     axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200);
     await executeThunk(markAllNotificationsAsRead('discussions'), store.dispatch, store.getState);
 
-    const { notifications } = store.getState();
-    const firstNotification = Object.values(notifications.notifications)[0];
+    const { notifications: { notificationStatus, notifications } } = store.getState();
+    const firstNotification = Object.values(notifications)[0];
 
-    expect(notifications.notificationStatus).toEqual('successful');
+    expect(notificationStatus).toEqual('successful');
     expect(firstNotification.lastRead).not.toBeNull();
   });
 
   it('successfully marked notification as read in the redux.', async () => {
     axiosMock.onPut(markedNotificationAsReadApiUrl).reply(200);
     await executeThunk(markNotificationsAsRead('discussions', 1), store.dispatch, store.getState);
 
-    const { notifications } = store.getState();
-    const firstNotification = Object.values(notifications.notifications)[0];
+    const { notifications: { notificationStatus, notifications } } = store.getState();
+    const firstNotification = Object.values(notifications)[0];
 
-    expect(notifications.notificationStatus).toEqual('successful');
+    expect(notificationStatus).toEqual('successful');
     expect(firstNotification.lastRead).not.toBeNull();
   });
 });

src/Notifications/data/redux.test.js

@@ -43,7 +43,10 @@ describe('Notification Selectors', () => {
     store = initializeStore();
 
     axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount')));
-    axiosMock.onGet(notificationsApiUrl).reply(200, (Factory.buildList('notification', 2, null)));
+    axiosMock.onGet(notificationsApiUrl).reply(
+      200,
+      (Factory.buildList('notification', 2, null, { createdDate: new Date().toISOString() })),
+    );
     await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState);
     await executeThunk(fetchNotificationList({ page: 1, pageSize: 10 }), store.dispatch, store.getState);
   });

src/Notifications/data/selector.test.jsx

@@ -97,11 +97,11 @@ export const markAllNotificationsAsRead = (appName) => (
   }
 );
 
-export const markNotificationsAsRead = (notificationId) => (
+export const markNotificationsAsRead = (appName, notificationId) => (
   async (dispatch) => {
     try {
       dispatch(markNotificationsAsReadRequest({ notificationId }));
-      const data = await markNotificationRead(notificationId);
+      const data = await markNotificationRead(appName, notificationId);
       dispatch(markNotificationsAsReadSuccess(data));
     } catch (error) {
       if (getHttpErrorStatus(error) === 403) {