feat: smoke test coverage

feat: smoke test coverage

src/constants/mockData.js

@@ -35,6 +35,7 @@ export const progressKeys = StrictDict({
   peerAssessmentLate: 'peer_assessment_late',
   peerAssessmentPartial: 'peer_assessment_partial',
   peerAssessmentWaiting: 'peer_assessment_waiting',
+  peerAssessmentWaitingForGrades: 'peer_assessment_waiting_for_grades',
   peerAssessmentFinished: 'peer_assessment_finished',
   staffAfterSubmission: 'staff_after_submission',
   staffAfterSelf: 'staff_after_self',

src/data/services/lms/fakeData/pageData/progress.js

@@ -80,6 +80,7 @@ const peerStatuses = StrictDict({
   notAvailable: createPeerStepInfo({ closedState: closedStates.notAvailable }),
   waiting: createPeerStepInfo({ isWaiting: true }),
   partial: createPeerStepInfo({ numCompleted: 1 }),
+  waitingForGrades: createPeerStepInfo({ numCompleted: assessmentSteps.settings.peer.min_number_to_be_graded_by }),
   finished: createPeerStepInfo({
     closedState: closedStates.open,
     numCompleted: assessmentSteps.settings.peer.min_number_to_grade,
@@ -217,6 +218,7 @@ export const getProgressState = ({ viewStep, progressKey, stepConfig }) => {
     [progressKeys.peerAssessment]: peerState(peerStatuses.unsubmitted),
     [progressKeys.peerAssessmentEarly]: peerState(peerStatuses.notAvailable),
     [progressKeys.peerAssessmentWaiting]: peerState(peerStatuses.waiting),
+    [progressKeys.peerAssessmentWaitingForGrades]: peerState(peerStatuses.waitingForGrades),
     [progressKeys.peerAssessmentLate]: peerState(peerStatuses.closed),
     [progressKeys.peerAssessmentPartial]: peerState(peerStatuses.partial),
     [progressKeys.peerAssessmentFinished]: createFinishedState(stepNames.peer),

src/data/services/lms/hooks/utils.js

@@ -8,6 +8,8 @@ export const post = (...args) => getAuthenticatedHttpClient().post(...args);
 export const fakeResponse = (data) => Promise.resolve(camelCaseObject(data));
 
 export const logPageData = (data) => {
-  console.log({ pageData: data });
+  if (process.env.NODE_ENV === 'development') {
+    console.log({ pageData: data });
+  }
   return data;
 };

src/test/constants.js

@@ -0,0 +1,64 @@
+import { stepNames } from 'constants/index';
+import { progressKeys } from 'constants/mockData';
+
+const lmsBaseUrl = 'test-base-url';
+export const courseId = 'test-course-id';
+export const xblockId = 'test-xblock-id';
+export const baseUrl = `${lmsBaseUrl}/courses/${courseId}/xblock/${xblockId}/handler`;
+export const config = {
+  LMS_BASE_URL: lmsBaseUrl,
+};
+
+const stepProgressKeys = {
+  [stepNames.submission]: [
+    progressKeys.submissionUnsaved,
+    progressKeys.submissionSaved,
+  ],
+  [stepNames.studentTraining]: [
+    progressKeys.studentTraining,
+    progressKeys.studentTrainingPartial,
+  ],
+  [stepNames.self]: [progressKeys.selfAssessment],
+  [stepNames.peer]: [
+    progressKeys.peerAssessment,
+    progressKeys.peerAssessmentPartial,
+    progressKeys.peerAssessmentWaiting,
+    progressKeys.peerAssessmentWaitingForGrades,
+  ],
+  [stepNames.done]: [progressKeys.graded],
+};
+const viewProgressKeys = {
+  [stepNames.xblock]: Object.values(progressKeys),
+  [stepNames.submission]: [
+    ...stepProgressKeys.submission,
+    ...stepProgressKeys.studentTraining,
+    ...stepProgressKeys.self,
+    ...stepProgressKeys.peer,
+    ...stepProgressKeys.done,
+  ],
+  [stepNames.studentTraining]: stepProgressKeys.studentTraining,
+  [stepNames.self]: stepProgressKeys.self,
+  [stepNames.peer]: stepProgressKeys.peer,
+  [stepNames.done]: stepProgressKeys.done,
+};
+
+export const stepOrders = {
+  self: [stepNames.self],
+  peer: [stepNames.studentTraining, stepNames.peer],
+  staff: [stepNames.staff],
+  selfToPeer: [stepNames.studentTraining, stepNames.self, stepNames.peer],
+  selfToStaff: [stepNames.self, stepNames.staff],
+  peerToSelf: [stepNames.peer, stepNames.self],
+  peerToSelfWithTraining: [stepNames.studentTraining, stepNames.peer, stepNames.self],
+  peerToStaff: [stepNames.peer, stepNames.self, stepNames.staff],
+  peerToStaffWithTraining: [stepNames.studentTraining, stepNames.peer, stepNames.self, stepNames.staff],
+};
+
+const allSteps = (stepOrder) => [stepNames.submission, ...stepOrders[stepOrder]];
+const loadKeys = (step) => stepProgressKeys[step];
+const checkForProgressKeys = (steps) => (key) => steps.map(loadKeys).flat().includes(key);
+
+export const getProgressKeys = (stepOrder, stepName) => viewProgressKeys[stepName]
+  .filter(checkForProgressKeys(
+    stepName === stepNames.xblock ? allSteps(stepOrder) : stepOrders[stepOrder],
+  ));

src/test/smoke.test.jsx

@@ -1,25 +1,31 @@
 import React from 'react';
-import { render } from '@testing-library/react';
 import { when } from 'jest-when';
-import { MemoryRouter, useParams } from 'react-router-dom';
-import { Provider } from 'react-redux';
-
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
 
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
-import App from 'App';
-
 import fakeData from 'data/services/lms/fakeData';
 import { loadState } from 'data/services/lms/fakeData/dataStates';
 import { paths } from 'data/services/lms/urls';
 
 import { stepNames, stepRoutes } from 'constants/index';
-import { progressKeys } from 'constants/mockData';
 
-import { createStore } from 'data/store';
+import {
+  courseId,
+  xblockId,
+  baseUrl,
+  config,
+  getProgressKeys,
+  stepOrders,
+} from './constants';
+import {
+  mockQuerySelector,
+  post,
+  pageDataUrl,
+  loadApp,
+  mockPageData,
+} from './utils';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
   ...jest.requireActual('@edx/frontend-platform/auth'),
@@ -42,137 +48,65 @@ jest.mock('axios', () => ({
   ...jest.requireActual('axios'),
   get: jest.fn().mockResolvedValue({ data: 'fake file data' }),
 }));
-jest.mock('components/HotjarSurvey', () => 'HotjarSurvey');
+jest.mock('components/HotjarSurvey', () => 'hot-jar-survey');
 
 jest.unmock('react');
 jest.unmock('@edx/paragon');
 
-jest.spyOn(document, 'querySelector').mockImplementation((selector) => {
-  if (selector === 'html') {
-    return {
-      scrollTo: jest.fn(),
-    };
-  }
-  return selector;
-});
+mockQuerySelector();
 
-const post = jest.fn();
-const lmsBaseUrl = 'test-base-url';
-const courseId = 'test-course-id';
-const xblockId = 'test-xblock-id';
-const baseUrl = `${lmsBaseUrl}/courses/${courseId}/xblock/${xblockId}/handler`;
-const config = {
-  LMS_BASE_URL: lmsBaseUrl,
-};
 when(getConfig).calledWith().mockReturnValue(config);
-
 when(getAuthenticatedHttpClient).calledWith().mockReturnValue({ post });
 when(useParams).calledWith().mockReturnValue({ courseId, xblockId });
 
-const renderApp = (route) => {
-  const store = createStore(false);
-  const queryClient = new QueryClient({
-    queries: { retry: false },
-  });
-  const location = `/${route}/${courseId}/${xblockId}/`;
-  return (
-    <IntlProvider locale="en">
-      <Provider store={store}>
-        <QueryClientProvider client={queryClient}>
-          <MemoryRouter initialEntries={[location]}>
-            <App />
-          </MemoryRouter>
-        </QueryClientProvider>
-      </Provider>
-    </IntlProvider>
-  );
-};
-
-const pageDataUrl = (view = undefined) => {
-  const url = `${baseUrl}/get_learner_data/`;
-  return view ? `${url}${view}` : url;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const loadApp = async (progressKey, step, hasSubmitted = false) => {
-  const app = renderApp(stepRoutes[step]);
-  return render(app);
-};
-
-const mockPageData = (url, { body, response }) => {
-  when(post).calledWith(`${baseUrl}${paths.oraConfig}`, {})
-    .mockResolvedValue({ data: fakeData.oraConfig.assessmentText });
-  if (body) {
-    when(post).calledWith(url, expect.anything()).mockResolvedValue({ data: response });
-  } else {
-    when(post).calledWith(url).mockResolvedValue({ data: response });
-  }
-};
-
 let el;
 
 describe('Integration smoke tests', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  const testModalView = ({ step, keys }) => {
-    it.each(keys)('renders %s progress state', async (progressKey) => {
-      const state = loadState({ view: stepRoutes[step], progressKey });
-      mockPageData(pageDataUrl(step), { body: {}, response: state });
-      el = await loadApp(progressKey, step);
-      await el.findAllByText('Create response');
-    });
-  };
-  describe('xblock view', () => {
-    const xblockProgressKeys = Object.values(progressKeys);
-    it.each(xblockProgressKeys)('renders %s progress state', async (progressKey) => {
-      const state = loadState({
-        view: stepNames.xblock,
-        progressKey,
+  describe.each(Object.keys(stepOrders))('For step order %s', (stepOrder) => {
+    const oraConfig = { ...fakeData.oraConfig.assessmentText };
+    oraConfig.assessment_steps.order = stepOrders[stepOrder];
+    when(post).calledWith(`${baseUrl}${paths.oraConfig}`, {})
+      .mockResolvedValue({ data: oraConfig });
+    const testModalView = ({ step }) => {
+      const keys = getProgressKeys(stepOrder, step);
+      if (keys.length === 0) { return; }
+      it.each(keys)('renders %s progress state', async (progressKey) => {
+        const state = loadState({ view: stepRoutes[step], progressKey });
+        mockPageData(pageDataUrl(step), { body: {}, response: state });
+        el = await loadApp(progressKey, step);
+        await el.findAllByText('Create response');
+      });
+    };
+    describe('xblock view', () => {
+      const keys = getProgressKeys(stepOrder, stepNames.xblock);
+      it.each(keys)('renders %s progress state', async (progressKey) => {
+        const state = loadState({
+          view: stepNames.xblock,
+          progressKey,
+        });
+        mockPageData(pageDataUrl(), { body: {}, response: state });
+        el = await loadApp(progressKey, stepNames.xblock);
+        const { title } = fakeData.oraConfig.assessmentText;
+        await el.findByText(title);
       });
-      mockPageData(pageDataUrl(), { body: {}, response: state });
-      el = await loadApp(progressKey, stepNames.xblock);
-      await el.findByText('Open Response Assessment');
     });
-  });
-  describe('submission view', () => {
-    const submissionProgressKeys = [
-      progressKeys.submissionUnsaved,
-      progressKeys.submissionSaved,
-      progressKeys.studentTraining,
-      progressKeys.studentTrainingPartial,
-      progressKeys.selfAssessment,
-      progressKeys.peerAssessment,
-      progressKeys.peerAssessmentPartial,
-      progressKeys.peerAssessmentWaiting,
-      progressKeys.staffAfterPeer,
-      progressKeys.graded,
-    ];
-    testModalView({ step: stepNames.submission, keys: submissionProgressKeys });
-  });
-  describe('studentTraining view', () => {
-    const trainingProgressKeys = [
-      progressKeys.studentTraining,
-      progressKeys.studentTrainingPartial,
-    ];
-    testModalView({ step: stepNames.studentTraining, keys: trainingProgressKeys });
-  });
-  describe('self assessment view', () => {
-    const selfProgressKeys = [progressKeys.selfAssessment];
-    testModalView({ step: stepNames.self, keys: selfProgressKeys });
-  });
-  describe('peer assessment view', () => {
-    const peerProgressKeys = [
-      progressKeys.peerAssessment,
-      progressKeys.peerAssessmentPartial,
-      progressKeys.peerAssessmentWaiting,
-      progressKeys.staffAfterPeer,
-      progressKeys.graded,
-    ];
-    testModalView({ step: stepNames.peer, keys: peerProgressKeys });
-  });
-  describe('graded view', () => {
-    const gradedProgressKeys = [progressKeys.graded];
-    testModalView({ step: stepNames.done, keys: gradedProgressKeys });
+    describe('submission view', () => {
+      testModalView({ step: stepNames.submission });
+    });
+    describe('studentTraining view', () => {
+      testModalView({ step: stepNames.studentTraining });
+    });
+    describe('self assessment view', () => {
+      testModalView({ step: stepNames.self });
+    });
+    describe('peer assessment view', () => {
+      testModalView({ step: stepNames.peer });
+    });
+    describe('graded view', () => {
+      testModalView({ step: stepNames.done });
+    });
   });
 });

src/test/utils.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { render } from '@testing-library/react';
+import { when } from 'jest-when';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import App from 'App';
+
+import { stepRoutes } from 'constants/index';
+
+import { createStore } from 'data/store';
+import {
+  courseId,
+  xblockId,
+  baseUrl,
+} from './constants';
+
+export const mockQuerySelector = () => {
+  jest.spyOn(document, 'querySelector').mockImplementation((selector) => (
+    selector === 'html' ? { scrollTo: jest.fn() } : selector
+  ));
+};
+
+export const post = jest.fn();
+export const renderApp = (route) => {
+  const store = createStore(false);
+  const queryClient = new QueryClient({ queries: { retry: false } });
+  const location = `/${route}/${courseId}/${xblockId}/`;
+  return (
+    <IntlProvider locale="en">
+      <Provider store={store}>
+        <QueryClientProvider client={queryClient}>
+          <MemoryRouter initialEntries={[location]}>
+            <App />
+          </MemoryRouter>
+        </QueryClientProvider>
+      </Provider>
+    </IntlProvider>
+  );
+};
+
+const basePageUrl = `${baseUrl}/get_learner_data/`;
+export const pageDataUrl = (view = undefined) => (view ? `${basePageUrl}${view}` : basePageUrl);
+export const loadApp = async (progressKey, step) => render(renderApp(stepRoutes[step]));
+
+export const mockPageData = (url, { response }) => when(post)
+  .calledWith(url, expect.anything()).mockResolvedValue({ data: response })
+  .calledWith(url).mockResolvedValue({ data: response }); // eslint-disable-line newline-per-chained-call

src/views/SubmissionView/TextResponseEditor/TextEditor.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { TextArea } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
+import './TextEditor.scss';
 
 const TextEditor = ({
   // id,

src/views/SubmissionView/TextResponseEditor/TextEditor.scss

@@ -0,0 +1,3 @@
+.form-control.textarea-response {
+  height: 500px;
+}