chore: update tests so we have less error message

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;

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"
   }
 }

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}

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>

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>

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>

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>

src/courseware/CoursewareContainer.test.jsx

@@ -88,6 +88,7 @@ describe('CoursewareContainer', () => {
           <Routes>
             {DECODE_ROUTES.COURSEWARE.map((route) => (
               <Route
+                key={route}
                 path={route}
                 element={<CoursewareContainer />}
               />

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}

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>
+`;

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',
   },

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"

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} />;
       })
     }
   </>

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,
 };
 

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>

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>

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 />}
               />

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) {