test: added test cases to change toggle based on channel

Author: sundasnoreen12

src/notification-preferences/NotificationPreferenceRow.jsx

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

src/notification-preferences/NotificationPreferences.test.jsx

@@ -2,7 +2,9 @@
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
-import { fireEvent, render, screen } from '@testing-library/react';
+import {
+  fireEvent, render, screen, waitFor, act,
+} from '@testing-library/react';
 import * as auth from '@edx/frontend-platform/auth';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import NotificationPreferences from './NotificationPreferences';
@@ -33,33 +35,50 @@ const defaultPreferences = {
       appId: 'discussion',
       web: false,
       push: false,
-      mobile: false,
+      email: false,
     },
     {
       id: 'newComment',
       appId: 'discussion',
       web: false,
       push: false,
-      mobile: false,
+      email: false,
     },
     {
       id: 'newAssignment',
       appId: 'coursework',
       web: false,
       push: false,
-      mobile: false,
+      email: false,
     },
     {
       id: 'newGrade',
       appId: 'coursework',
       web: false,
       push: false,
-      mobile: false,
+      email: false,
     },
   ],
   nonEditable: {},
 };
 
+const updateChannelPreferences = (toggleVal = false) => ({
+  preferences: [
+    {
+      id: 'newPost', appId: 'discussion', web: toggleVal, push: toggleVal, email: toggleVal,
+    },
+    {
+      id: 'newComment', appId: 'discussion', web: toggleVal, push: toggleVal, email: toggleVal,
+    },
+    {
+      id: 'newAssignment', appId: 'coursework', web: toggleVal, push: toggleVal, email: toggleVal,
+    },
+    {
+      id: 'newGrade', appId: 'coursework', web: toggleVal, push: toggleVal, email: toggleVal,
+    },
+  ],
+});
+
 const setupStore = (override = {}) => {
   const storeState = defaultState;
   storeState.courses = {
@@ -78,17 +97,19 @@ const setupStore = (override = {}) => {
   return store;
 };
 
-const renderComponent = (store = {}) => render(
+const renderComponent = (store = {}) => (
   <Router>
     <IntlProvider locale="en">
       <Provider store={store}>
         <NotificationPreferences />
       </Provider>
     </IntlProvider>
-  </Router>,
+  </Router>
 );
+
 describe('Notification Preferences', () => {
   let store;
+
   beforeEach(() => {
     store = setupStore({
       ...defaultPreferences,
@@ -108,29 +129,30 @@ describe('Notification Preferences', () => {
   afterEach(() => jest.clearAllMocks());
 
   it('tests if all notification apps are listed', async () => {
-    await renderComponent(store);
+    await render(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 renderComponent(store);
+    await render(renderComponent(store));
     expect(screen.queryByTestId('loading-spinner')).toBeInTheDocument();
   });
 
   it('tests if all notification preferences are listed', async () => {
-    await renderComponent(store);
+    await render(renderComponent(store));
     expect(screen.queryAllByTestId('notification-preference')).toHaveLength(4);
   });
 
   it('update group on click', async () => {
-    const wrapper = await renderComponent(store);
+    const wrapper = await render(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 renderComponent(store);
+    const wrapper = await render(renderComponent(store));
     const element = wrapper.container.querySelector('#newPost-web');
     expect(element).not.toBeChecked();
     await fireEvent.click(element);
@@ -139,7 +161,43 @@ 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 renderComponent(store);
+    await render(renderComponent(store));
     expect(screen.queryByTestId('not-found-page')).toBeInTheDocument();
   });
+
+  it.each([false, true])(
+    'updates all preferences in the column on web channel click when toggle state is - %s',
+    async (toggleState) => {
+      store = setupStore(updateChannelPreferences(toggleState));
+      const wrapper = render(renderComponent(store));
+
+      const getCheckbox = (id) => screen.queryByTestId(`${id}-web`);
+      const checkboxes = ['newPost', 'newComment', 'newAssignment', 'newGrade'];
+
+      const verifyState = (expectedState) => {
+        checkboxes.forEach((checkbox) => {
+          if (expectedState) {
+            expect(getCheckbox(checkbox)).toBeChecked();
+          } else {
+            expect(getCheckbox(checkbox)).not.toBeChecked();
+          }
+        });
+      };
+
+      verifyState(toggleState);
+
+      const element = screen.queryAllByText('Web')[0];
+
+      await act(async () => {
+        await fireEvent.click(element);
+      });
+
+      store = setupStore(updateChannelPreferences(!toggleState));
+      wrapper.rerender(renderComponent(store));
+
+      await waitFor(() => {
+        verifyState(!toggleState);
+      });
+    },
+  );
 });

src/notification-preferences/ToggleSwitch.jsx

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