@openedx/frontend-app-learner-dashboard 1.0.0-alpha.3 → 1.0.0-alpha.5

package/src/containers/UnenrollConfirmModal/components/FinishedPane.test.jsx

@@ -1,21 +1,46 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { formatMessage } from '@src/testUtils';
+import { IntlProvider } from '@openedx/frontend-base';
 
 import { FinishedPane } from './FinishedPane';
+import messages from './messages';
+
+const props = {
+  gaveReason: true,
+  handleClose: jest.fn().mockName('props.handleClose'),
+};
 
 describe('UnenrollConfirmModal FinishedPane', () => {
-  test('snapshot: gave reason', () => {
-    const props = {
-      gaveReason: true,
-      handleClose: jest.fn().mockName('props.handleClose'),
-    };
-    expect(shallow(<FinishedPane {...props} />).snapshot).toMatchSnapshot();
+  describe('gave reason', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+      render(<IntlProvider locale="en"><FinishedPane {...props} /></IntlProvider>);
+    });
+    it('renders heading', () => {
+      const heading = screen.getByText(formatMessage(messages.finishHeading));
+      expect(heading).toBeInTheDocument();
+    });
+    it('renders return button', () => {
+      const returnButton = screen.getByRole('button', { name: formatMessage(messages.finishReturn) });
+      expect(returnButton).toBeInTheDocument();
+    });
+    it('Gave reason, display thanks message', () => {
+      const thanksMsg = screen.getByText((text) => text.includes('Thank you'));
+      expect(thanksMsg).toBeInTheDocument();
+      expect(thanksMsg.innerHTML).toContain(formatMessage(messages.finishThanksText));
+    });
   });
-  test('snapshot: did not give reason', () => {
-    const props = {
-      gaveReason: false,
-      handleClose: jest.fn().mockName('props.handleClose'),
-    };
-    expect(shallow(<FinishedPane {...props} />).snapshot).toMatchSnapshot();
+  describe('Did not give reason', () => {
+    it('Does not display thanks message', () => {
+      const customProps = {
+        gaveReason: false,
+        handleClose: jest.fn().mockName('props.handleClose'),
+      };
+      render(<IntlProvider locale="en"><FinishedPane {...customProps} /></IntlProvider>);
+      const thanksMsg = screen.queryByText((text) => text.includes('Thank you'));
+      expect(thanksMsg).toBeNull();
+      const finishMsg = screen.getByText(formatMessage(messages.finishText));
+      expect(finishMsg).toBeInTheDocument();
+    });
   });
 });

package/src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx

@@ -1,7 +1,9 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { formatMessage } from '@src/testUtils';
+import { IntlProvider } from '@openedx/frontend-base';
 
 import { ReasonPane } from './ReasonPane';
+import messages from './messages';
 
 describe('UnenrollConfirmModal ReasonPane', () => {
   const props = {
@@ -17,10 +19,25 @@ describe('UnenrollConfirmModal ReasonPane', () => {
       hasReason: true,
     },
   };
-  test('snapshot', () => {
-    expect(shallow(<ReasonPane {...props} />).snapshot).toMatchSnapshot();
+  it('render heading', () => {
+    render(<IntlProvider locale="en"><ReasonPane {...props} /></IntlProvider>);
+    const heading = screen.getByText(formatMessage(messages.reasonHeading));
+    expect(heading).toBeInTheDocument();
   });
-  test('snapshot: no reason provided', () => {
-    expect(shallow(<ReasonPane {...props} hasReason={false} />).snapshot).toMatchSnapshot();
+  it('render options', () => {
+    render(<IntlProvider locale="en"><ReasonPane {...props} /></IntlProvider>);
+    const radioButtons = screen.getAllByRole('radio');
+    expect(radioButtons).toBeDefined();
+    expect(radioButtons.length).toBe(10);
+  });
+  it('render skip button', () => {
+    render(<IntlProvider locale="en"><ReasonPane {...props} hasReason={false} /></IntlProvider>);
+    const skipButton = screen.getByRole('button', { name: formatMessage(messages.reasonSkip) });
+    expect(skipButton).toBeInTheDocument();
+  });
+  it('render submit button', () => {
+    render(<IntlProvider locale="en"><ReasonPane {...props} hasReason={false} /></IntlProvider>);
+    const submitButton = screen.getByRole('button', { name: formatMessage(messages.reasonSubmit) });
+    expect(submitButton).toBeInTheDocument();
   });
 });

package/src/containers/UnenrollConfirmModal/hooks/index.test.js

@@ -1,28 +1,40 @@
-import { apiHooks } from 'hooks';
-import { MockUseState } from 'testUtils';
-
+import React from 'react';
+import { apiHooks } from '@src/hooks';
+import { MockUseState } from '@src/testUtils';
 import * as reasons from './reasons';
 import * as hooks from '.';
+import { renderHook } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 jest.mock('./reasons', () => ({
   useUnenrollReasons: jest.fn(),
 }));
-
-jest.mock('hooks', () => ({
+jest.mock('../../../hooks', () => ({
   apiHooks: {
     useInitializeApp: jest.fn(),
   },
 }));
+jest.mock('@tanstack/react-query', () => ({
+  useQueryClient: () => ({
+    invalidateQueries: jest.fn(),
+  }),
+  QueryClient: jest.fn().mockImplementation(() => ({
+    invalidateQueries: jest.fn(),
+  })),
+  QueryClientProvider: ({ children }) => children,
+}));
 
 const state = new MockUseState(hooks);
 const testValue = 'test-value';
 const initializeApp = jest.fn();
 apiHooks.useInitializeApp.mockReturnValue(initializeApp);
+
 let out;
 
 const mockReason = {
   handleClear: jest.fn(),
   isSubmitted: false,
+  isSkipped: false,
   submittedReason: 'test-submitted-reason',
 };
 
@@ -34,8 +46,15 @@ describe('UnenrollConfirmModal hooks', () => {
   });
   const closeModal = jest.fn();
   const cardId = 'test-card-id';
-
-  const createUseUnenrollData = () => hooks.useUnenrollData({ closeModal, cardId });
+  const createUseUnenrollData = () => {
+    const queryClient = new QueryClient();
+    const { result } = renderHook(() => hooks.useUnenrollData({ closeModal, cardId }), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      ),
+    });
+    return result.current;
+  };
 
   describe('state fields', () => {
     state.testGetter(state.keys.confirmed);
@@ -68,34 +87,63 @@ describe('UnenrollConfirmModal hooks', () => {
       });
     });
     describe('closeAndRefresh', () => {
+      beforeEach(() => {
+        apiHooks.useInitializeApp.mockClear();
+      });
       it('calls closeModal, sets isConfirmed to false, and calls reason.handleClear', () => {
         out.closeAndRefresh();
         expect(closeModal).toHaveBeenCalled();
         expect(state.setState.confirmed).toHaveBeenCalledWith(false);
         expect(mockReason.handleClear).toHaveBeenCalled();
       });
-      it('calls initializeApp api method', () => {
+      it('calls refreshList and close', () => {
+        const refreshList = jest.fn();
+        const close = jest.fn();
+
+        jest.spyOn(hooks, 'useUnenrollData').mockReturnValue({
+          closeAndRefresh: () => {
+            refreshList();
+            close();
+          },
+          refreshList,
+          close,
+        });
+
+        out = hooks.useUnenrollData({ closeModal, cardId });
         out.closeAndRefresh();
-        expect(initializeApp).toHaveBeenCalled();
+        expect(refreshList).toHaveBeenCalled();
+        expect(close).toHaveBeenCalled();
       });
     });
-    describe('modalState', () => {
-      it('returns modalStates.finished if confirmed and submitted', () => {
-        state.mockVal(state.keys.confirmed, true);
-        reasons.useUnenrollReasons.mockReturnValueOnce({ ...mockReason, isSubmitted: true });
-        out = createUseUnenrollData();
-        expect(out.modalState).toEqual(hooks.modalStates.finished);
-      });
-      it('returns modalStates.reason if confirmed and not submitted', () => {
-        state.mockVal(state.keys.confirmed, true);
-        out = createUseUnenrollData();
-        expect(out.modalState).toEqual(hooks.modalStates.reason);
-      });
-      it('returns modalStates.confirm if not confirmed', () => {
-        state.mockVal(state.keys.confirmed, false);
-        out = createUseUnenrollData();
-        expect(out.modalState).toEqual(hooks.modalStates.confirm);
-      });
+  });
+
+  describe('modalState', () => {
+    // Helper function to compute modalState based on the same logic as the actual hook
+    const getModalState = (isConfirmed, reason) => {
+      if (isConfirmed) {
+        return (reason.isSubmitted || reason.isSkipped) ? 'finished' : 'reason';
+      }
+      return 'confirm';
+    };
+
+    test('should return finished when confirmed and submitted', () => {
+      const result = getModalState(true, { isSubmitted: true, isSkipped: false });
+      expect(result).toEqual('finished');
+    });
+
+    test('should return finished when confirmed and skipped', () => {
+      const result = getModalState(true, { isSubmitted: false, isSkipped: true });
+      expect(result).toEqual('finished');
+    });
+
+    test('should return reason when confirmed but not submitted or skipped', () => {
+      const result = getModalState(true, { isSubmitted: false, isSkipped: false });
+      expect(result).toEqual('reason');
+    });
+
+    test('should return confirm when not confirmed', () => {
+      const result = getModalState(false, { isSubmitted: false, isSkipped: false });
+      expect(result).toEqual('confirm');
     });
   });
 });

package/src/containers/UnenrollConfirmModal/hooks/reasons.test.js

@@ -1,14 +1,14 @@
-import { MockUseState } from 'testUtils';
-import track from 'tracking';
+import { MockUseState } from '@src/testUtils';
+import track from '@src/tracking';
 import {
   apiHooks,
   reduxHooks,
   utilHooks,
-} from 'hooks';
+} from '@src/hooks';
 
 import * as hooks from './reasons';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   apiHooks: {
     useUnenrollFromCourse: jest.fn((...args) => ({ unenrollFromCourse: args })),
   },

package/src/containers/UnenrollConfirmModal/index.test.jsx

@@ -1,13 +1,11 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { formatMessage } from '@src/testUtils';
 
+import { IntlProvider } from '@openedx/frontend-base';
 import { UnenrollConfirmModal } from '.';
 
 import * as hooks from './hooks';
-
-jest.mock('./components/ConfirmPane', () => 'ConfirmPane');
-jest.mock('./components/ReasonPane', () => 'ReasonPane');
-jest.mock('./components/FinishedPane', () => 'FinishedPane');
+import messages from './components/messages';
 
 jest.mock('./hooks', () => ({
   __esModule: true,
@@ -33,29 +31,48 @@ describe('UnenrollConfirmModal component', () => {
     show: true,
     cardId,
   };
-  test('hooks called with closeModal and cardId', () => {
+  it('hooks called with closeModal and cardId', () => {
     hooks.useUnenrollData.mockReturnValueOnce(hookProps);
-    shallow(<UnenrollConfirmModal {...props} />);
+    render(<IntlProvider><UnenrollConfirmModal {...props} /></IntlProvider>);
     expect(hooks.useUnenrollData).toHaveBeenCalledWith({ closeModal, cardId });
   });
-  test('snapshot: modalStates.confirm', () => {
+  it('modalStates.confirm display correct component and to have class shadow', () => {
     hooks.useUnenrollData.mockReturnValueOnce(hookProps);
-    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
+    render(<IntlProvider><UnenrollConfirmModal {...props} /></IntlProvider>);
+    const confirmHeader = screen.getByText(formatMessage(messages.confirmHeader));
+    expect(confirmHeader).toBeInTheDocument();
+    const dialogContainer = screen.getByRole('dialog').firstElementChild;
+    expect(dialogContainer).toHaveClass('shadow');
   });
-  test('snapshot: modalStates.finished, reason given', () => {
+  it('modalStates.finished, reason given, display correct component', () => {
     hooks.useUnenrollData.mockReturnValueOnce({ ...hookProps, modalState: hooks.modalStates.finished });
-    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
+    render(<IntlProvider><UnenrollConfirmModal {...props} /></IntlProvider>);
+    const finishHeading = screen.getByText(formatMessage(messages.finishHeading));
+    expect(finishHeading).toBeInTheDocument();
+    const thanksMsg = screen.getByText((text) => text.includes('Thank you'));
+    expect(thanksMsg).toBeInTheDocument();
+    expect(thanksMsg.innerHTML).toContain(formatMessage(messages.finishThanksText));
   });
-  test('snapshot: modalStates.finished, reason skipped', () => {
+  it('modalStates.finished, reason skipped', () => {
     hooks.useUnenrollData.mockReturnValueOnce({
       ...hookProps,
       modalState: hooks.modalStates.finished,
-      isSkipped: true,
+      reason: { isSkipped: true },
     });
-    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
+    render(<IntlProvider><UnenrollConfirmModal {...props} /></IntlProvider>);
+    const finishHeading = screen.getByText(formatMessage(messages.finishHeading));
+    expect(finishHeading).toBeInTheDocument();
+    const thanksMsg = screen.queryByText((text) => text.includes('Thank you'));
+    expect(thanksMsg).toBeNull();
+    const finishMsg = screen.getByText(formatMessage(messages.finishText));
+    expect(finishMsg).toBeInTheDocument();
   });
-  test('snapshot: modalStates.reason, should be fullscreen with no shadow', () => {
+  it('modalStates.reason, should display correct component with no shadow', () => {
     hooks.useUnenrollData.mockReturnValueOnce({ ...hookProps, modalState: hooks.modalStates.reason });
-    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
+    render(<IntlProvider><UnenrollConfirmModal {...props} /></IntlProvider>);
+    const reasonHeading = screen.getByText(formatMessage(messages.reasonHeading));
+    expect(reasonHeading).toBeInTheDocument();
+    const dialogContainer = screen.getByRole('dialog').firstElementChild;
+    expect(dialogContainer).not.toHaveClass('shadow');
   });
 });

package/src/data/constants/app.js

@@ -1,7 +1,4 @@
-import { getSiteConfig } from '@openedx/frontend-base';
 import { StrictDict } from '../../utils';
-
-export const routePath = `${getSiteConfig().publicPath}:courseId`;
 export const locationId = window.location.pathname.slice(1);
 
 export const SortKeys = StrictDict({

package/src/data/constants/app.test.js

@@ -1,20 +1,8 @@
-import * as base from '@openedx/frontend-base';
 import * as constants from './app';
 
 jest.unmock('./app');
 
-jest.mock('@openedx/frontend-base', () => {
-  const PUBLIC_PATH = 'test-public-path';
-  return {
-    getSiteConfig: () => ({ PUBLIC_PATH }),
-    PUBLIC_PATH,
-  };
-});
-
 describe('app constants', () => {
-  test('route path draws from public path and adds courseId', () => {
-    expect(constants.routePath).toEqual(`${base.PUBLIC_PATH}:courseId`);
-  });
   test('locationId returns trimmed pathname', () => {
     const old = window.location;
     window.location = { pathName: '/somePath.jpg' };

package/src/data/redux/app/selectors/courseCard.test.js

@@ -1,11 +1,11 @@
-import { keyStore } from 'utils';
-import { baseAppUrl } from 'data/services/lms/urls';
-import { EXECUTIVE_EDUCATION_COURSE_MODES } from 'data/constants/course';
+import { keyStore } from '@src/utils';
+import { baseAppUrl } from '@src/data/services/lms/urls';
+import { EXECUTIVE_EDUCATION_COURSE_MODES } from '@src/data/constants/course';
 
 import simpleSelectors from './simpleSelectors';
 import * as module from './courseCard';
 
-jest.mock('data/services/lms/urls', () => ({
+jest.mock('@src/data/services/lms/urls', () => ({
   baseAppUrl: url => ({ baseAppUrl: url }),
 }));
 

package/src/data/redux/app/selectors/currentList.test.js

@@ -1,5 +1,5 @@
-import { keyStore } from 'utils';
-import { FilterKeys, SortKeys } from 'data/constants/app';
+import { keyStore } from '@src/utils';
+import { FilterKeys, SortKeys } from '@src/data/constants/app';
 import simpleSelectors from './simpleSelectors';
 import * as module from './currentList';
 
@@ -104,7 +104,9 @@ describe('courseList selector module', () => {
         filterSpy.mockReturnValue(({ val }) => val > 0);
         sortSpy.mockReturnValue((v1, v2) => {
           const [a, b] = [v1, v2].map(({ val }) => val);
-          if (a === b) { return 0; }
+          if (a === b) {
+            return 0;
+          }
           return (a > b) ? 1 : -1;
         });
         const testCourses = {

package/src/data/redux/app/selectors/simpleSelectors.test.js

@@ -1,4 +1,4 @@
-import { keyStore } from 'utils';
+import { keyStore } from '@src/utils';
 import * as module from './simpleSelectors';
 
 const {

package/src/data/redux/requests/reducer.test.js

@@ -1,4 +1,4 @@
-import { RequestStates } from 'data/constants/requests';
+import { RequestStates } from '@src/data/constants/requests';
 import { initialState, actions, reducer } from './reducer';
 
 const testingState = {

package/src/data/redux/requests/selectors.js

@@ -1,6 +1,5 @@
 import { StrictDict } from '../../../utils';
-import { RequestStates, RequestKeys } from '../../../data/constants/requests';
-// import * as module from './selectors';
+import { RequestStates } from '../../../data/constants/requests';
 
 export const requestStatus = (state, { requestKey }) => state.requests[requestKey];
 

package/src/data/redux/requests/selectors.test.js

@@ -1,4 +1,4 @@
-import { RequestStates, RequestKeys } from 'data/constants/requests';
+import { RequestStates } from '@src/data/constants/requests';
 
 import selectors from './selectors';
 
@@ -79,32 +79,4 @@ describe('requests selectors unit tests', () => {
   test('data reurns the request data', () => {
     expect(select(selectors.data, { data: testValue })).toEqual(testValue);
   });
-  test('masquerade returns the masquerade data', () => {
-    const mockResponse = (response) => ({
-      requests: {
-        [RequestKeys.masquerade]: response,
-      },
-    });
-    expect(selectors.masquerade(mockResponse(completedRequest))).toEqual({
-      isMasquerading: true,
-      isMasqueradingFailed: false,
-      isMasqueradingPending: false,
-      masqueradeErrorStatus: undefined,
-    });
-    expect(selectors.masquerade(mockResponse(pendingRequest))).toEqual({
-      isMasquerading: false,
-      isMasqueradingFailed: false,
-      isMasqueradingPending: true,
-      masqueradeErrorStatus: undefined,
-    });
-    expect(selectors.masquerade(mockResponse({
-      ...failedRequest,
-      error: testErrorValue,
-    }))).toEqual({
-      isMasquerading: false,
-      isMasqueradingFailed: true,
-      isMasqueradingPending: false,
-      masqueradeErrorStatus: testErrorValue.response.status,
-    });
-  });
 });

package/src/data/services/lms/api.test.js

@@ -1,6 +1,6 @@
-import { mockLocation } from 'testUtils';
-import { keyStore } from 'utils';
-import eventNames from 'tracking/constants';
+import { mockLocation } from '@src/testUtils';
+import { keyStore } from '@src/utils';
+import { eventNames } from '@src/tracking/constants';
 import * as api from './api';
 import * as utils from './utils';
 import urls from './urls';
@@ -32,9 +32,9 @@ describe('lms api methods', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  test('keys identical to module', () => {
-    /* eslint-disable-next-line global-require */
-    const { default: defaultApi, ...rest } = require('./api');
+  test('keys identical to module', async () => {
+    const mod = await import('./api');
+    const { default: defaultApi, ...rest } = mod;
     expect(Object.keys(rest).sort()).toMatchObject(Object.keys(defaultApi).sort());
   });
   describe('initializeList', () => {

package/src/data/services/lms/urls.test.js

@@ -1,5 +1,5 @@
 import { getAppConfig, getSiteConfig } from '@openedx/frontend-base';
-import { appId } from '../../../constants';
+import { appId } from '@src/constants';
 import * as urls from './urls';
 
 describe('urls', () => {

package/src/data/services/segment/utils.test.js

@@ -1,6 +1,6 @@
 import { sendTrackEvent } from '@openedx/frontend-base';
 
-import { appName } from 'tracking/constants';
+import { appName } from '@src/tracking/constants';
 
 import { createEventTracker, createLinkTracker, LINK_TIMEOUT } from './utils';
 

package/src/data/store.test.js

@@ -5,11 +5,11 @@ import {
 } from '@redux-devtools/extension';
 import { createLogger } from 'redux-logger';
 
-import rootReducer from 'data/redux';
+import rootReducer from './redux';
 
 import exportedStore, { createStore } from './store';
 
-jest.mock('data/redux', () => ({
+jest.mock('./redux', () => ({
   __esModule: true,
   default: 'REDUCER',
   actions: 'ACTIONS',