Merge branch 'master' into eemaanamir/INF-1062

src/notification-preferences/NotificationPreferenceApp.jsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Collapsible, NavItem } from '@openedx/paragon';
+import { Collapsible, NavItem } from '@edx/paragon';
 import classNames from 'classnames';
 import messages from './messages';
 import ToggleSwitch from './ToggleSwitch';
@@ -56,7 +56,7 @@ const NotificationPreferenceApp = ({ appId }) => {
   }
 
   return (
-    <Collapsible.Advanced open={appToggle} data-testid={`${appId}-app`} className="mb-5">
+    <Collapsible.Advanced open={appToggle} data-testid="notification-app" className="mb-5">
       <Collapsible.Trigger>
         <div className="d-flex align-items-center">
           <span className="mr-auto">

src/notification-preferences/NotificationPreferenceRow.jsx

@@ -78,7 +78,6 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
               value={preference[channel]}
               onChange={onToggle}
               disabled={nonEditable.includes(channel) || updatePreferencesStatus === LOADING_STATUS}
-              id={`${preferenceName}-${channel}`}
             />
           </div>
         ))}

src/notification-preferences/NotificationPreferences.test.jsx

@@ -2,9 +2,7 @@
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
-import {
-  fireEvent, render, screen, waitFor, act, within,
-} from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import * as auth from '@edx/frontend-platform/auth';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import NotificationPreferences from './NotificationPreferences';
@@ -31,51 +29,37 @@ const defaultPreferences = {
   ],
   preferences: [
     {
-      id: 'core',
+      id: 'newPost',
       appId: 'discussion',
-      web: true,
-      push: true,
-      email: true,
+      web: false,
+      push: false,
+      mobile: false,
     },
     {
       id: 'newComment',
       appId: 'discussion',
       web: false,
       push: false,
-      email: false,
+      mobile: false,
     },
     {
       id: 'newAssignment',
       appId: 'coursework',
       web: false,
       push: false,
-      email: false,
+      mobile: false,
     },
     {
       id: 'newGrade',
       appId: 'coursework',
       web: false,
       push: false,
-      email: false,
+      mobile: false,
     },
   ],
-  nonEditable: {
-    discussion: {
-      core: [
-        'web',
-      ],
-    },
-  },
+  nonEditable: {},
 };
 
-const updateChannelPreferences = (toggleVal = false) => ({
-  preferences: [
-    { id: 'core', appId: 'discussion', web: true },
-    { id: 'newComment', appId: 'discussion', web: toggleVal },
-    { id: 'newAssignment', appId: 'coursework', web: toggleVal },
-  ],
-});
-
 const setupStore = (override = {}) => {
   const storeState = defaultState;
   storeState.courses = {
@@ -94,19 +78,17 @@ const setupStore = (override = {}) => {
   return store;
 };
 
-const notificationPreferences = (store = {}) => (
+const renderComponent = (store = {}) => render(
   <Router>
     <IntlProvider locale="en">
       <Provider store={store}>
         <NotificationPreferences />
       </Provider>
     </IntlProvider>
-  </Router>
+  </Router>,
 );
-
 describe('Notification Preferences', () => {
   let store;
-
   beforeEach(() => {
     store = setupStore({
       ...defaultPreferences,
@@ -126,32 +108,30 @@ describe('Notification Preferences', () => {
   afterEach(() => jest.clearAllMocks());
 
   it('tests if all notification apps are listed', async () => {
-    await render(notificationPreferences(store));
-    expect(screen.queryByTestId('discussion-app')).toBeInTheDocument();
-    expect(screen.queryByTestId('coursework-app')).toBeInTheDocument();
+    await renderComponent(store);
+    expect(screen.queryAllByTestId('notification-app')).toHaveLength(2);
   });
-
   it('show spinner if api call is in progress', async () => {
     store = setupStore({ status: LOADING_STATUS });
-    await render(notificationPreferences(store));
+    await renderComponent(store);
     expect(screen.queryByTestId('loading-spinner')).toBeInTheDocument();
   });
 
   it('tests if all notification preferences are listed', async () => {
-    await render(notificationPreferences(store));
+    await renderComponent(store);
     expect(screen.queryAllByTestId('notification-preference')).toHaveLength(4);
   });
 
   it('update group on click', async () => {
-    const wrapper = await render(notificationPreferences(store));
+    const wrapper = await renderComponent(store);
     const element = wrapper.container.querySelector('#discussion-app-toggle');
     await fireEvent.click(element);
     expect(mockDispatch).toHaveBeenCalled();
   });
 
   it('update preference on click', async () => {
-    const wrapper = await render(notificationPreferences(store));
-    const element = wrapper.container.querySelector('#core-web');
+    const wrapper = await renderComponent(store);
+    const element = wrapper.container.querySelector('#newPost-web');
     expect(element).not.toBeChecked();
     await fireEvent.click(element);
     expect(mockDispatch).toHaveBeenCalled();
@@ -159,43 +139,7 @@ describe('Notification Preferences', () => {
 
   it('show not found page if invalid course id is entered in url', async () => {
     store = setupStore({ status: FAILURE_STATUS, selectedCourse: 'invalid-course-id' });
-    await render(notificationPreferences(store));
+    await renderComponent(store);
     expect(screen.queryByTestId('not-found-page')).toBeInTheDocument();
   });
-
-  it('updates all preferences in the column on web channel click', async () => {
-    store = setupStore(updateChannelPreferences(true));
-    const wrapper = render(notificationPreferences(store));
-
-    const getChannelSwitch = (id) => screen.queryByTestId(`${id}-web`);
-    const notificationTypes = ['newComment', 'newAssignment'];
-
-    const verifyState = (toggleState) => {
-      notificationTypes.forEach((notificationType) => {
-        if (toggleState) {
-          expect(getChannelSwitch(notificationType)).toBeChecked();
-        } else {
-          expect(getChannelSwitch(notificationType)).not.toBeChecked();
-        }
-      });
-    };
-
-    verifyState(true);
-    expect(getChannelSwitch('core')).toBeChecked();
-
-    const discussionApp = screen.queryByTestId('discussion-app');
-    const webChannel = within(discussionApp).queryByText('Web');
-
-    await act(async () => {
-      await fireEvent.click(webChannel);
-    });
-
-    store = setupStore(updateChannelPreferences(false));
-    wrapper.rerender(notificationPreferences(store));
-
-    await waitFor(() => {
-      verifyState(false);
-      expect(getChannelSwitch('core')).toBeChecked();
-    });
-  });
 });

src/notification-preferences/ToggleSwitch.jsx

@@ -7,14 +7,12 @@ const ToggleSwitch = ({
   value,
   disabled,
   onChange,
-  id,
 }) => (
   <Form.Switch
     name={name}
     checked={value}
     disabled={disabled}
     onChange={onChange}
-    data-testid={id}
   />
 );
 
@@ -23,13 +21,11 @@ ToggleSwitch.propTypes = {
   value: PropTypes.bool.isRequired,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
-  id: PropTypes.string,
 };
 
 ToggleSwitch.defaultProps = {
   onChange: () => null,
   disabled: false,
-  id: '',
 };
 
 export default React.memo(ToggleSwitch);