From fd64d321ec48256a5e3ac041ef8044467c59e41f Mon Sep 17 00:00:00 2001
From: Leangseu Kim <lkim@edx.org>
Date: Fri, 23 Feb 2024 13:39:25 -0500
Subject: [PATCH] chore: update tests so we have less error message

---
 jest.config.js                                | 22 +++++++++++++--
 package-lock.json                             | 15 ++++++++++
 package.json                                  |  3 +-
 .../courseware-search/CoursewareSearch.jsx    |  2 +-
 .../CompleteDonutSegment.jsx                  |  2 +-
 .../IncompleteDonutSegment.jsx                |  2 +-
 .../course-completion/LockedDonutSegment.jsx  |  2 +-
 .../detailed-grades/ProblemScoreDrawer.jsx    |  5 ++--
 src/courseware/CoursewareContainer.test.jsx   |  1 +
 src/courseware/course/CourseBreadcrumbs.jsx   |  5 +++-
 .../__snapshots__/index.test.jsx.snap         | 28 ++++++++++++++++++-
 .../Unit/translation-selection/index.test.jsx |  2 +-
 .../SequenceNavigationDropdown.jsx            |  2 +-
 src/courseware/course/sidebar/Sidebar.jsx     |  2 +-
 .../notifications/NotificationIcon.jsx        |  6 +++-
 src/index.jsx                                 |  2 ++
 .../masquerade-widget/MasqueradeWidget.jsx    |  2 +-
 src/product-tours/ProductTours.test.jsx       |  1 +
 src/setupTest.js                              | 17 +++++++++--
 19 files changed, 103 insertions(+), 18 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index 8c69451cbf..814debb5fb 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,6 +1,6 @@
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('jest', {
+const config = createConfig('jest', {
   setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],
@@ -17,5 +17,23 @@ module.exports = createConfig('jest', {
   },
   testTimeout: 30000,
   testEnvironment: 'jsdom',
-  globalSetup: "./global-setup.js"
+  globalSetup: "./global-setup.js",
 });
+
+config.reporters = [...(config.reporters || []), ["jest-console-group-reporter", {
+  // change this setting if need to see less details for each test
+  // reportType: "summary" | "details", 
+  // enable: true | false,
+  afterEachTest: {
+    enable: true,
+    filePaths: false,
+    reportType: "details",
+  },
+  afterAllTests: {
+    reportType: "summary",
+    enable: true,
+    filePaths: true,
+  },
+}]];
+
+module.exports = config;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5aa8b93847..830f9323ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,6 +67,7 @@
         "es-check": "6.2.1",
         "husky": "7.0.4",
         "jest": "29.5.0",
+        "jest-console-group-reporter": "^1.0.1",
         "rosie": "2.1.1"
       }
     },
@@ -14465,6 +14466,20 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/jest-console-group-reporter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/jest-console-group-reporter/-/jest-console-group-reporter-1.0.1.tgz",
+      "integrity": "sha512-r5I28U1pge/7cvKi83gE+9Q14NBYxnH9PGf3HGM0uFiajn5y9xA2dxhkUSSaBd1qiGv/R6MeG1+/zndyaIRH7w==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "chalk": "^4.0.0"
+      },
+      "peerDependencies": {
+        "@jest/reporters": ">=25.1.0",
+        "jest-message-util": ">=25.1.0"
+      }
+    },
     "node_modules/jest-diff": {
       "version": "29.6.4",
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.6.4.tgz",
diff --git a/package.json b/package.json
index 6f5c06aec8..a2fcb9e98d 100644
--- a/package.json
+++ b/package.json
@@ -32,8 +32,8 @@
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/frontend-component-footer": "12.2.1",
     "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-lib-special-exams": "2.29.0",
     "@edx/frontend-lib-learning-assistant": "^1.24.0",
+    "@edx/frontend-lib-special-exams": "2.29.0",
     "@edx/frontend-platform": "5.5.2",
     "@edx/openedx-atlas": "^0.6.0",
     "@edx/paragon": "20.46.0",
@@ -80,6 +80,7 @@
     "es-check": "6.2.1",
     "husky": "7.0.4",
     "jest": "29.5.0",
+    "jest-console-group-reporter": "^1.0.1",
     "rosie": "2.1.1"
   }
 }
diff --git a/src/course-home/courseware-search/CoursewareSearch.jsx b/src/course-home/courseware-search/CoursewareSearch.jsx
index 5fb8c9742c..a068d463f3 100644
--- a/src/course-home/courseware-search/CoursewareSearch.jsx
+++ b/src/course-home/courseware-search/CoursewareSearch.jsx
@@ -103,7 +103,7 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
       </div>
       <div className="courseware-search__outer-content">
         <div className="courseware-search__content">
-          <h1 class="h2">{intl.formatMessage(messages.searchModuleTitle)}</h1>
+          <h1 className="h2">{intl.formatMessage(messages.searchModuleTitle)}</h1>
           <CoursewareSearchForm
             searchTerm={searchKeyword}
             onSubmit={handleSubmit}
diff --git a/src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx b/src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx
index b604ddb87e..1ebb7daa20 100644
--- a/src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx
+++ b/src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx
@@ -33,7 +33,7 @@ const CompleteDonutSegment = ({ completePercentage, intl, lockedPercentage }) =>
         show={showCompletePopover}
         placement="top"
         overlay={(
-          <Popover aria-hidden="true">
+          <Popover id="complete-content-tooltip-popover" aria-hidden="true">
             <Popover.Content>
               {intl.formatMessage(messages.completeContentTooltip)}
             </Popover.Content>
diff --git a/src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx b/src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx
index 9f2d16eb87..b75090ec96 100644
--- a/src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx
+++ b/src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx
@@ -37,7 +37,7 @@ const IncompleteDonutSegment = ({ incompletePercentage, intl }) => {
         show={showIncompletePopover}
         placement="top"
         overlay={(
-          <Popover aria-hidden="true">
+          <Popover id="incomplete-tooltip-popover" aria-hidden="true">
             <Popover.Content>
               {intl.formatMessage(messages.incompleteContentTooltip)}
             </Popover.Content>
diff --git a/src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx b/src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx
index 9ab5b4de71..e5257db287 100644
--- a/src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx
+++ b/src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx
@@ -36,7 +36,7 @@ const LockedDonutSegment = ({ intl, lockedPercentage }) => {
         show={showLockedPopover}
         placement="top"
         overlay={(
-          <Popover aria-hidden="true">
+          <Popover id="locked-tooltip-popover" aria-hidden="true">
             <Popover.Content>
               {intl.formatMessage(messages.lockedContentTooltip)}
             </Popover.Content>
diff --git a/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx b/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
index 855f3dfe46..7970821aaf 100644
--- a/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
@@ -15,8 +15,9 @@ const ProblemScoreDrawer = ({ intl, problemScores, subsection }) => {
       <span id="problem-score-label" className="col-auto p-0">{intl.formatMessage(messages.problemScoreLabel)}</span>
       <div className={classNames('col', 'p-0', { 'greyed-out': !subsection.learnerHasAccess })}>
         <ul className="list-unstyled row w-100 m-0" aria-labelledby="problem-score-label">
-          {problemScores.map(problemScore => (
-            <li className="ml-3">{problemScore.earned}{isLocaleRtl ? '\\' : '/'}{problemScore.possible}</li>
+          {problemScores.map((problemScore, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <li key={i} className="ml-3">{problemScore.earned}{isLocaleRtl ? '\\' : '/'}{problemScore.possible}</li>
           ))}
         </ul>
       </div>
diff --git a/src/courseware/CoursewareContainer.test.jsx b/src/courseware/CoursewareContainer.test.jsx
index 4cf883636f..1db3514d82 100644
--- a/src/courseware/CoursewareContainer.test.jsx
+++ b/src/courseware/CoursewareContainer.test.jsx
@@ -88,6 +88,7 @@ describe('CoursewareContainer', () => {
           <Routes>
             {DECODE_ROUTES.COURSEWARE.map((route) => (
               <Route
+                key={route}
                 path={route}
                 element={<CoursewareContainer />}
               />
diff --git a/src/courseware/course/CourseBreadcrumbs.jsx b/src/courseware/course/CourseBreadcrumbs.jsx
index 24e2f7745a..d959f0b545 100644
--- a/src/courseware/course/CourseBreadcrumbs.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -62,6 +62,7 @@ const CourseBreadcrumb = ({
               <Menu>
                 {content.map((item) => (
                   <JumpNavMenuItem
+                    key={item.label}
                     isDefault={item.default}
                     sequences={item.sequences}
                     courseId={courseId}
@@ -169,8 +170,10 @@ const CourseBreadcrumbs = ({
             />
           </Link>
         </li>
-        {links.map((content) => (
+        {links.map((content, i) => (
           <CourseBreadcrumb
+            // eslint-disable-next-line react/no-array-index-key
+            key={i}
             courseId={courseId}
             sequenceId={sequenceId}
             content={content}
diff --git a/src/courseware/course/sequence/Unit/translation-selection/__snapshots__/index.test.jsx.snap b/src/courseware/course/sequence/Unit/translation-selection/__snapshots__/index.test.jsx.snap
index f73d8afe3a..14654f5fe7 100644
--- a/src/courseware/course/sequence/Unit/translation-selection/__snapshots__/index.test.jsx.snap
+++ b/src/courseware/course/sequence/Unit/translation-selection/__snapshots__/index.test.jsx.snap
@@ -1,3 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TranslationSelection /> renders 1`] = `undefined`;
+exports[`<TranslationSelection /> renders 1`] = `
+<Fragment>
+  <ProductTour
+    tours={
+      Array [
+        Object {
+          "abitrarily": "defined",
+        },
+      ]
+    }
+  />
+  <IconButton
+    alt="change-language"
+    className="mr-2 mb-2 float-right"
+    iconAs="Icon"
+    id="translation-selection-button"
+    onClick={[MockFunction open]}
+    src="Language"
+    variant="primary"
+  />
+  <TranslationModal
+    close={[MockFunction close]}
+    courseId="course-v1:edX+DemoX+Demo_Course"
+    isOpen={false}
+  />
+</Fragment>
+`;
diff --git a/src/courseware/course/sequence/Unit/translation-selection/index.test.jsx b/src/courseware/course/sequence/Unit/translation-selection/index.test.jsx
index 9107ef2f11..b48ab0dc3a 100644
--- a/src/courseware/course/sequence/Unit/translation-selection/index.test.jsx
+++ b/src/courseware/course/sequence/Unit/translation-selection/index.test.jsx
@@ -10,7 +10,7 @@ jest.mock('@edx/paragon', () => ({
 jest.mock('@edx/paragon/icons', () => ({
   Language: 'Language',
 }));
-jest.mock('./useTranslationTour', () => ({
+jest.mock('./useTranslationTour', () => () => ({
   translationTour: {
     abitrarily: 'defined',
   },
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.jsx
index 8898ff3d8e..965ba9bbce 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.jsx
@@ -12,7 +12,7 @@ const SequenceNavigationDropdown = ({
   unitIds,
 }) => (
   <Dropdown className="sequence-navigation-dropdown">
-    <Dropdown.Toggle variant="link" className="font-weight-normal w-100 border-right-0">
+    <Dropdown.Toggle id="navigation-toggle" variant="link" className="font-weight-normal w-100 border-right-0">
       <FormattedMessage
         defaultMessage="{current} of {total}"
         description="The title of the mobile menu for sequence navigation of units"
diff --git a/src/courseware/course/sidebar/Sidebar.jsx b/src/courseware/course/sidebar/Sidebar.jsx
index 94511ab740..fe943fa540 100644
--- a/src/courseware/course/sidebar/Sidebar.jsx
+++ b/src/courseware/course/sidebar/Sidebar.jsx
@@ -6,7 +6,7 @@ const Sidebar = () => (
     {
       SIDEBAR_ORDER.map((sideBarId) => {
         const SidebarToRender = SIDEBARS[sideBarId].Sidebar;
-        return <SidebarToRender />;
+        return <SidebarToRender key={sideBarId} />;
       })
     }
   </>
diff --git a/src/courseware/course/sidebar/sidebars/notifications/NotificationIcon.jsx b/src/courseware/course/sidebar/sidebars/notifications/NotificationIcon.jsx
index d7fbc7d995..1a039f7882 100644
--- a/src/courseware/course/sidebar/sidebars/notifications/NotificationIcon.jsx
+++ b/src/courseware/course/sidebar/sidebars/notifications/NotificationIcon.jsx
@@ -29,9 +29,13 @@ const NotificationIcon = ({
   </>
 );
 
+NotificationIcon.defaultProps = {
+  status: null,
+};
+
 NotificationIcon.propTypes = {
   intl: intlShape.isRequired,
-  status: PropTypes.string.isRequired,
+  status: PropTypes.string,
   notificationColor: PropTypes.string.isRequired,
 };
 
diff --git a/src/index.jsx b/src/index.jsx
index 7f2af36f58..7892399e39 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -96,6 +96,7 @@ subscribe(APP_READY, () => {
               />
               {DECODE_ROUTES.PROGRESS.map((route) => (
                 <Route
+                  key={route}
                   path={route}
                   element={(
                     <DecodePageRoute>
@@ -123,6 +124,7 @@ subscribe(APP_READY, () => {
               />
               {DECODE_ROUTES.COURSEWARE.map((route) => (
                 <Route
+                  key={route}
                   path={route}
                   element={(
                     <DecodePageRoute>
diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx
index d560a848a3..8b3ce500ff 100644
--- a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx
+++ b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx
@@ -122,7 +122,7 @@ class MasqueradeWidget extends Component {
         <div className="row">
           <span className="col-auto col-form-label pl-3">View this course as:</span>
           <Dropdown className="flex-shrink-1 mx-1">
-            <Dropdown.Toggle variant="inverse-outline-primary">
+            <Dropdown.Toggle id="masquerade-widget-toggle" variant="inverse-outline-primary">
               {masquerade}
             </Dropdown.Toggle>
             <Dropdown.Menu>
diff --git a/src/product-tours/ProductTours.test.jsx b/src/product-tours/ProductTours.test.jsx
index ae4afdcafc..6c0f69ddf6 100644
--- a/src/product-tours/ProductTours.test.jsx
+++ b/src/product-tours/ProductTours.test.jsx
@@ -217,6 +217,7 @@ describe('Courseware Tour', () => {
           <Routes>
             {DECODE_ROUTES.COURSEWARE.map((route) => (
               <Route
+                key={route}
                 path={route}
                 element={<CoursewareContainer />}
               />
diff --git a/src/setupTest.js b/src/setupTest.js
index 3f5cc5c08e..59bec0255b 100755
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -18,6 +18,8 @@ import { reducer as specialExamsReducer } from '@edx/frontend-lib-special-exams'
 import AppProvider from '@edx/frontend-platform/react/AppProvider';
 import { reducer as courseHomeReducer } from './course-home/data';
 import { reducer as coursewareReducer } from './courseware/data/slice';
+import { reducer as recommendationsReducer } from './courseware/course/course-exit/data/slice';
+import { reducer as toursReducer } from './product-tours/data';
 import { reducer as modelsReducer } from './generic/model-store';
 import { UserMessagesProvider } from './generic/user-messages';
 
@@ -39,6 +41,13 @@ window.getComputedStyle = jest.fn(() => ({
   getPropertyValue: jest.fn(),
 }));
 
+const supressWarningBlock = (callback) => {
+  const originalConsoleWarning = console.warn;
+  console.warn = jest.fn();
+  callback();
+  console.warn = originalConsoleWarning;
+};
+
 // Mock Intersection Observer which is unavailable in the context of a test.
 global.IntersectionObserver = jest.fn(function mockIntersectionObserver() {
   this.observe = jest.fn();
@@ -77,11 +86,13 @@ export function initializeMockApp() {
   });
 
   // i18n doesn't have a service class to return.
-  configureI18n({
+  // ignore missing/unexpect locale warnings from @edx/frontend-platform/i18n
+  // it is unnecessary and not relevant to the tests
+  supressWarningBlock(() => configureI18n({
     config: getConfig(),
     loggingService,
     messages,
-  });
+  }));
 
   return { loggingService, authService };
 }
@@ -120,6 +131,8 @@ export async function initializeTestStore(options = {}, overrideStore = true) {
       courseHome: courseHomeReducer,
       learningAssistant: learningAssistantReducer,
       specialExams: specialExamsReducer,
+      recommendations: recommendationsReducer,
+      tours: toursReducer,
     },
   });
   if (overrideStore) {