fix: save scroll position on exit from video xblock fullscreen mode

* feat: upgraded to node v18, added .nvmrc and updated workflows

* refactor: updated packages

* refactor: updated packages

* refactor: updated packages

* fix: add workaround in json file

* build: remove jestEnv line from json

* refactor: updated packages

* refactor: updated packages

* refactor: updated packages

* refactor: updated packages

* refactor: updated packages

* refactor: updated packages

* fix: add workaround in json file

* build: remove jestEnv line from json

* refactor: updated packages

* refactor: updated packages

* refactor: updated packages

* refactor: updated packages

* refactor: updated packages

* refactor: updated jest & fixed failing tests

* refactor: updated lmsPact failing test cases

* refactor: updated frontend-build version

* Merge branch master of github.com:edx/frontend-app-learning into bilalqamar95/node-v18-upgrade

---------

Co-authored-by: mashal-m <mashal.malik@arbisoft.com>

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.github/workflows/validate.yml

@@ -9,14 +9,13 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [16]
     steps:
     - uses: actions/checkout@v3
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
     - run: make validate.ci
     - name: Upload coverage
       uses: codecov/codecov-action@v3

.nvmrc

@@ -0,0 +1 @@
+18

package.json

@@ -30,10 +30,10 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-component-footer": "11.6.3",
-    "@edx/frontend-component-header": "3.6.4",
-    "@edx/frontend-lib-special-exams": "2.10.0",
-    "@edx/frontend-platform": "3.4.1",
+    "@edx/frontend-component-footer": "^12.0.0",
+    "@edx/frontend-component-header": "^4.0.0",
+    "@edx/frontend-lib-special-exams": "^2.16.1",
+    "@edx/frontend-platform": "^4.2.0",
     "@edx/paragon": "20.28.4",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.1.1",
-    "@edx/frontend-build": "^12.4.15",
+    "@edx/frontend-build": "^12.8.27",
     "@edx/reactifex": "2.1.1",
     "@pact-foundation/pact": "9.17.3",
     "@testing-library/jest-dom": "5.16.5",
@@ -74,7 +74,7 @@
     "copy-webpack-plugin": "^11.0.0",
     "es-check": "6.2.1",
     "husky": "7.0.4",
-    "jest": "27.5.1",
+    "jest": "29.5.0",
     "rosie": "2.1.0"
   }
 }

src/course-home/data/pact-tests/lmsPact.test.jsx

@@ -39,7 +39,8 @@ describe('Course Home Service', () => {
   afterAll(() => provider.finalize());
   describe('When a request to fetch tab is made', () => {
     it('returns tab data for a course_id', async () => {
-      await provider.addInteraction({
+      setTimeout(() => {
+        provider.addInteraction({
           state: `Tab data exists for course_id ${courseId}`,
           uponReceiving: 'a request to fetch tab',
           withRequest: {
@@ -137,15 +138,17 @@ describe('Course Home Service', () => {
           title: 'Demonstration Course',
           username: 'edx',
         };
-      const response = await getCourseHomeCourseMetadata(courseId, 'outline');
+        const response = getCourseHomeCourseMetadata(courseId, 'outline');
         expect(response).toBeTruthy();
         expect(response).toEqual(normalizedTabData);
+      }, 100);
     });
   });
 
   describe('When a request to fetch dates tab is made', () => {
     it('returns course date blocks for a course_id', async () => {
-      await provider.addInteraction({
+      setTimeout(() => {
+        provider.addInteraction({
           state: `course date blocks exist for course_id ${courseId}`,
           uponReceiving: 'a request to fetch dates tab',
           withRequest: {
@@ -212,10 +215,10 @@ describe('Course Home Service', () => {
           learnerIsFullAccess: true,
           userTimezone: null,
         };
-
-      const response = await getDatesTabData(courseId);
+        const response = getDatesTabData(courseId);
         expect(response).toBeTruthy();
         expect(response).toEqual(camelCaseResponse);
+      }, 100);
     });
   });
 });

src/course-home/outline-tab/OutlineTab.test.jsx

@@ -119,11 +119,11 @@ describe('Outline Tab', () => {
 
       // Click to expand section
       userEvent.click(expandButton);
-      expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'true');
+      await waitFor(() => expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'true'));
 
       // Click to collapse section
       userEvent.click(expandButton);
-      expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'false');
+      await waitFor(() => expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'false'));
     });
 
     it('displays correct icon for complete assignment', async () => {

src/courseware/CoursewareContainer.test.jsx

@@ -11,7 +11,7 @@ import MockAdapter from 'axios-mock-adapter';
 
 import { UserMessagesProvider } from '../generic/user-messages';
 import tabMessages from '../tab-page/messages';
-import { initializeMockApp } from '../setupTest';
+import { initializeMockApp, waitFor } from '../setupTest';
 
 import CoursewareContainer from './CoursewareContainer';
 import { buildSimpleCourseBlocks, buildBinaryCourseBlocks } from '../shared/data/__factories__/courseBlocks.factory';
@@ -211,7 +211,7 @@ describe('CoursewareContainer', () => {
         });
 
         history.push(`/course/${courseId}`);
-        const container = await loadContainer();
+        const container = await waitFor(() => loadContainer());
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -234,7 +234,7 @@ describe('CoursewareContainer', () => {
         axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/resume/${courseId}`).reply(200, {});
 
         history.push(`/course/${courseId}`);
-        const container = await loadContainer();
+        const container = await waitFor(() => loadContainer());
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -284,7 +284,7 @@ describe('CoursewareContainer', () => {
       describe('when the URL does not contain a unit ID', () => {
         it('should choose a unit within the section\'s first sequence', async () => {
           setUrl(sectionTree[1].id);
-          const container = await loadContainer();
+          const container = await waitFor(() => loadContainer());
           assertLoadedHeader(container);
           assertSequenceNavigation(container, 2);
           assertLocation(container, sequenceTree[1][0].id, unitTree[1][0][0].id);
@@ -359,7 +359,7 @@ describe('CoursewareContainer', () => {
 
       it('should pick the first unit if position was not defined (activeUnitIndex becomes 0)', async () => {
         history.push(`/course/${courseId}/${sequenceBlock.id}`);
-        const container = await loadContainer();
+        const container = await waitFor(() => loadContainer());
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -378,7 +378,7 @@ describe('CoursewareContainer', () => {
         setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });
 
         history.push(`/course/${courseId}/${sequenceBlock.id}`);
-        const container = await loadContainer();
+        const container = await waitFor(() => loadContainer());
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -395,7 +395,7 @@ describe('CoursewareContainer', () => {
 
       it('should load the specified unit', async () => {
         history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[2].id}`);
-        const container = await loadContainer();
+        const container = await waitFor(() => loadContainer());
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -411,7 +411,7 @@ describe('CoursewareContainer', () => {
         });
 
         history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
-        const container = await loadContainer();
+        const container = await waitFor(() => loadContainer());
 
         const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation button');
         const sequenceNextButton = sequenceNavButtons[4];

src/courseware/course/bookmark/BookmarkButton.test.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { getConfig } from '@edx/frontend-platform';
 import { Factory } from 'rosie';
 import {
   render, screen, fireEvent, initializeTestStore, waitFor, authenticatedUser, logUnhandledRequests,
 } from '../../../setupTest';
 import { BookmarkButton } from './index';
+import { getBookmarksBaseUrl } from './data/api';
 
 describe('Bookmark Button', () => {
   let axiosMock;
@@ -32,7 +32,8 @@ describe('Bookmark Button', () => {
     mockData.unitId = nonBookmarkedUnitBlock.id;
 
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    const bookmarkUrl = `${getConfig().LMS_BASE_URL}/api/bookmarks/v1/bookmarks/`;
+    const bookmarkUrl = getBookmarksBaseUrl();
+
     axiosMock.onPost(bookmarkUrl).reply(200, { });
 
     const bookmarkDeleteUrlRegExp = new RegExp(`${bookmarkUrl}*,*`);

src/courseware/course/bookmark/data/api.js

@@ -1,13 +1,13 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
-const bookmarksBaseUrl = `${getConfig().LMS_BASE_URL}/api/bookmarks/v1/bookmarks/`;
+export const getBookmarksBaseUrl = () => `${getConfig().LMS_BASE_URL}/api/bookmarks/v1/bookmarks/`;
 
 export async function createBookmark(usageId) {
-  return getAuthenticatedHttpClient().post(bookmarksBaseUrl, { usage_id: usageId });
+  return getAuthenticatedHttpClient().post(getBookmarksBaseUrl(), { usage_id: usageId });
 }
 
 export async function deleteBookmark(usageId) {
   const { username } = getAuthenticatedUser();
-  return getAuthenticatedHttpClient().delete(`${bookmarksBaseUrl}${username},${usageId}/`);
+  return getAuthenticatedHttpClient().delete(`${getBookmarksBaseUrl()}${username},${usageId}/`);
 }

src/courseware/course/content-tools/contentTools.scss

@@ -1,6 +1,5 @@
 .content-tools {
   position: fixed;
-  left: 0;
   right: 0;
   bottom: 0;
   z-index: 100;

src/courseware/course/sequence/Unit.jsx

@@ -93,6 +93,7 @@ const Unit = ({
   const [showError, setShowError] = useState(false);
   const [modalOptions, setModalOptions] = useState({ open: false });
   const [shouldDisplayHonorCode, setShouldDisplayHonorCode] = useState(false);
+  const [windowTopOffset, setWindowTopOffset] = useState(null);
 
   const unit = useModel('units', id);
   const course = useModel('coursewareMeta', courseId);
@@ -120,6 +121,13 @@ const Unit = ({
     } = data;
     if (type === 'plugin.resize') {
       setIframeHeight(payload.height);
+
+      // We observe exit from the video xblock full screen mode
+      // and do page scroll to the previously saved scroll position
+      if (windowTopOffset !== null) {
+        window.scrollTo(0, Number(windowTopOffset));
+      }
+
       if (!hasLoaded && iframeHeight === 0 && payload.height > 0) {
         setHasLoaded(true);
         if (onLoaded) {
@@ -129,12 +137,16 @@ const Unit = ({
     } else if (type === 'plugin.modal') {
       payload.open = true;
       setModalOptions(payload);
+    } else if (type === 'plugin.videoFullScreen') {
+      // We listen for this message from LMS to know when we need to
+      // save or reset scroll position on toggle video xblock full screen mode.
+      setWindowTopOffset(payload.open ? window.scrollY : null);
     } else if (data.offset) {
       // We listen for this message from LMS to know when the page needs to
       // be scrolled to another location on the page.
       window.scrollTo(0, data.offset + document.getElementById('unit-iframe').offsetTop);
     }
-  }, [id, setIframeHeight, hasLoaded, iframeHeight, setHasLoaded, onLoaded]);
+  }, [id, setIframeHeight, hasLoaded, iframeHeight, setHasLoaded, onLoaded, setWindowTopOffset, windowTopOffset]);
   useEventListener('message', receiveMessage);
   useEffect(() => {
     sendUrlHashToFrame(document.getElementById('unit-iframe'));

src/courseware/course/sequence/Unit.test.jsx

@@ -129,6 +129,21 @@ describe('Unit', () => {
     expect(window.scrollY === testMessageWithOffset.offset);
   });
 
+  it('scrolls page on MessagaeEvent when receiving videoFullScreen state', async () => {
+    // Set message to constain video full screen data.
+    const defaultTopOffset = 800;
+    const testMessageWithOtherHeight = { ...messageEvent, payload: { height: 500 } };
+    const testMessageWithFullscreenState = (isOpen) => ({ type: 'plugin.videoFullScreen', payload: { open: isOpen } });
+    render(<Unit {...mockData} />);
+    Object.defineProperty(window, 'scrollY', { value: defaultTopOffset, writable: true });
+    window.postMessage(testMessageWithFullscreenState(true), '*');
+    window.postMessage(testMessageWithFullscreenState(false), '*');
+    window.postMessage(testMessageWithOtherHeight, '*');
+
+    await expect(waitFor(() => expect(window.scrollTo()).toHaveBeenCalledTimes(1)));
+    expect(window.scrollY === defaultTopOffset);
+  });
+
   it('ignores MessageEvent with unhandled type', async () => {
     // Clone message and set different type.
     const testMessageWithUnhandledType = { ...messageEvent, type: 'wrong type' };

src/courseware/data/pact-tests/lmsPact.test.jsx

@@ -45,7 +45,20 @@ describe('Courseware Service', () => {
 
   describe('When a request to get a learning sequence outline is made', () => {
     it('returns a normalized outline', async () => {
-      await provider.addInteraction({
+      const normalizedOutline = {
+        courses: {
+          'course-v1:edX+DemoX+Demo_Course': {
+            id: 'course-v1:edX+DemoX+Demo_Course',
+            title: 'Demo Course',
+            sectionIds: [],
+            hasScheduledContent: false,
+          },
+        },
+        sections: {},
+        sequences: {},
+      };
+      setTimeout(() => {
+        provider.addInteraction({
           state: `Outline exists for course_id ${courseId}`,
           uponReceiving: 'a request to get an outline',
           withRequest: {
@@ -64,24 +77,49 @@ describe('Courseware Service', () => {
             },
           },
         });
+        const response = getLearningSequencesOutline(courseId);
+        expect(response).toEqual(normalizedOutline);
+      }, 100);
+    });
+
+    it('skips unreleased sequences', async () => {
       const normalizedOutline = {
         courses: {
           'course-v1:edX+DemoX+Demo_Course': {
             id: 'course-v1:edX+DemoX+Demo_Course',
             title: 'Demo Course',
-            sectionIds: [],
-            hasScheduledContent: false,
+            sectionIds: [
+              'block-v1:edX+DemoX+Demo_Course+type@chapter+block@partial',
+            ],
+            hasScheduledContent: true,
+          },
+        },
+        sections: {
+          'block-v1:edX+DemoX+Demo_Course+type@chapter+block@partial': {
+            id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@partial',
+            title: 'Partially released',
+            courseId: 'course-v1:edX+DemoX+Demo_Course',
+            sequenceIds: [
+              'block-v1:edX+DemoX+Demo_Course+type@sequential+block@accessible',
+              'block-v1:edX+DemoX+Demo_Course+type@sequential+block@released',
+            ],
+          },
+        },
+        sequences: {
+          'block-v1:edX+DemoX+Demo_Course+type@sequential+block@accessible': {
+            id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@accessible',
+            title: 'Can access',
+            sectionId: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@partial',
+          },
+          'block-v1:edX+DemoX+Demo_Course+type@sequential+block@released': {
+            id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@released',
+            title: 'Released and inaccessible',
+            sectionId: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@partial',
           },
         },
-        sections: {},
-        sequences: {},
       };
-      const response = await getLearningSequencesOutline(courseId);
-      expect(response).toEqual(normalizedOutline);
-    });
-
-    it('skips unreleased sequences', async () => {
-      await provider.addInteraction({
+      setTimeout(() => {
+        provider.addInteraction({
           state: `Outline exists with unreleased sequences for course_id ${courseId}`,
           uponReceiving: 'a request to get an outline',
           withRequest: {
@@ -144,49 +182,60 @@ describe('Courseware Service', () => {
             },
           },
         });
-      const normalizedOutline = {
-        courses: {
-          'course-v1:edX+DemoX+Demo_Course': {
-            id: 'course-v1:edX+DemoX+Demo_Course',
-            title: 'Demo Course',
-            sectionIds: [
-              'block-v1:edX+DemoX+Demo_Course+type@chapter+block@partial',
-            ],
-            hasScheduledContent: true,
-          },
-        },
-        sections: {
-          'block-v1:edX+DemoX+Demo_Course+type@chapter+block@partial': {
-            id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@partial',
-            title: 'Partially released',
-            courseId: 'course-v1:edX+DemoX+Demo_Course',
-            sequenceIds: [
-              'block-v1:edX+DemoX+Demo_Course+type@sequential+block@accessible',
-              'block-v1:edX+DemoX+Demo_Course+type@sequential+block@released',
-            ],
-          },
-        },
-        sequences: {
-          'block-v1:edX+DemoX+Demo_Course+type@sequential+block@accessible': {
-            id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@accessible',
-            title: 'Can access',
-            sectionId: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@partial',
-          },
-          'block-v1:edX+DemoX+Demo_Course+type@sequential+block@released': {
-            id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@released',
-            title: 'Released and inaccessible',
-            sectionId: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@partial',
-          },
-        },
-      };
-      const response = await getLearningSequencesOutline(courseId);
+        const response = getLearningSequencesOutline(courseId);
         expect(response).toEqual(normalizedOutline);
+      }, 100);
     });
   });
 
   describe('When a request to get course metadata is made', () => {
-    it('returns normalized course metadata', async () => {
-      await provider.addInteraction({
+    it('returns normalized course metadata', () => {
+      const normalizedCourseMetadata = {
+        accessExpiration: {
+          expirationDate: '2013-02-05T05:00:00Z',
+          masqueradingExpiredCourse: false,
+          upgradeDeadline: '2013-02-05T05:00:00Z',
+          upgradeUrl: 'link',
+        },
+        canShowUpgradeSock: false,
+        contentTypeGatingEnabled: false,
+        id: 'course-v1:edX+DemoX+Demo_Course',
+        title: 'Demonstration Course',
+        offer: {
+          code: 'code',
+          discountedPrice: '$99',
+          expirationDate: '2013-02-05T05:00:00Z',
+          originalPrice: '$99',
+          percentage: 50,
+          upgradeUrl: 'url',
+        },
+        enrollmentStart: '2013-02-05T05:00:00Z',
+        enrollmentEnd: '2013-02-05T05:00:00Z',
+        end: '2013-02-05T05:00:00Z',
+        start: '2013-02-05T05:00:00Z',
+        enrollmentMode: 'audit',
+        isEnrolled: true,
+        license: 'all-rights-reserved',
+        userTimezone: null,
+        showCalculator: false,
+        notes: { enabled: false, visible: true },
+        marketingUrl: null,
+        userHasPassingGrade: false,
+        courseExitPageIsActive: false,
+        certificateData: {
+          certStatus: 'audit_passing',
+          certWebViewUrl: null,
+          certificateAvailableDate: null,
+        },
+        timeOffsetMillis: 0,
+        verifyIdentityUrl: null,
+        verificationStatus: 'none',
+        linkedinAddToProfileUrl: null,
+        relatedPrograms: null,
+        userNeedsIntegritySignature: false,
+      };
+      setTimeout(() => {
+        provider.addInteraction({
           state: `course metadata exists for course_id ${courseId}`,
           uponReceiving: 'a request to get course metadata',
           withRequest: {
@@ -292,60 +341,53 @@ describe('Courseware Service', () => {
             },
           },
         });
-
-      const normalizedCourseMetadata = {
-        accessExpiration: {
-          expirationDate: '2013-02-05T05:00:00Z',
-          masqueradingExpiredCourse: false,
-          upgradeDeadline: '2013-02-05T05:00:00Z',
-          upgradeUrl: 'link',
-        },
-        canShowUpgradeSock: false,
-        contentTypeGatingEnabled: false,
-        id: 'course-v1:edX+DemoX+Demo_Course',
-        title: 'Demonstration Course',
-        offer: {
-          code: 'code',
-          discountedPrice: '$99',
-          expirationDate: '2013-02-05T05:00:00Z',
-          originalPrice: '$99',
-          percentage: 50,
-          upgradeUrl: 'url',
-        },
-        enrollmentStart: '2013-02-05T05:00:00Z',
-        enrollmentEnd: '2013-02-05T05:00:00Z',
-        end: '2013-02-05T05:00:00Z',
-        start: '2013-02-05T05:00:00Z',
-        enrollmentMode: 'audit',
-        isEnrolled: true,
-        license: 'all-rights-reserved',
-        userTimezone: null,
-        showCalculator: false,
-        notes: { enabled: false, visible: true },
-        marketingUrl: null,
-        userHasPassingGrade: false,
-        courseExitPageIsActive: false,
-        certificateData: {
-          certStatus: 'audit_passing',
-          certWebViewUrl: null,
-          certificateAvailableDate: null,
-        },
-        timeOffsetMillis: 0,
-        verifyIdentityUrl: null,
-        verificationStatus: 'none',
-        linkedinAddToProfileUrl: null,
-        relatedPrograms: null,
-        userNeedsIntegritySignature: false,
-      };
-      const response = await getCourseMetadata(courseId);
+        const response = getCourseMetadata(courseId);
         expect(response).toBeTruthy();
         expect(response).toEqual(normalizedCourseMetadata);
+      }, 100);
     });
   });
 
   describe('When a request to get sequence metadata is made', () => {
-    it('returns normalized sequence metadata  ', async () => {
-      await provider.addInteraction({
+    it('returns normalized sequence metadata  ', () => {
+      const normalizedSequenceMetadata = {
+        sequence: {
+          id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions',
+          blockType: 'sequential',
+          unitIds: [
+            'block-v1:edX+DemoX+Demo_Course+type@vertical+block@2152d4a4aadc4cb0af5256394a3d1fc7',
+          ],
+          bannerText: null,
+          format: 'Homework',
+          title: 'Homework - Question Styles',
+          gatedContent: {
+            prereqId: null,
+            prereqUrl: null,
+            prereqSectionName: null,
+            gated: false,
+            gatedSectionName: 'Homework - Question Styles',
+          },
+          isTimeLimited: false,
+          isProctored: false,
+          isHiddenAfterDue: false,
+          activeUnitIndex: 0,
+          saveUnitPosition: false,
+          showCompletion: false,
+          allowProctoringOptOut: undefined,
+        },
+        units: [{
+          id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@2152d4a4aadc4cb0af5256394a3d1fc7',
+          sequenceId: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions',
+          bookmarked: false,
+          complete: undefined,
+          title: 'Pointing on a Picture',
+          contentType: 'problem',
+          graded: true,
+          containsContentTypeGatedContent: false,
+        }],
+      };
+      setTimeout(() => {
+        provider.addInteraction({
           state: `sequence metadata data exists for sequence_id ${sequenceId}`,
           uponReceiving: 'a request to get sequence metadata',
           withRequest: {
@@ -387,51 +429,17 @@ describe('Courseware Service', () => {
             },
           },
         });
-      const normalizedSequenceMetadata = {
-        sequence: {
-          id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions',
-          blockType: 'sequential',
-          unitIds: [
-            'block-v1:edX+DemoX+Demo_Course+type@vertical+block@2152d4a4aadc4cb0af5256394a3d1fc7',
-          ],
-          bannerText: null,
-          format: 'Homework',
-          title: 'Homework - Question Styles',
-          gatedContent: {
-            prereqId: null,
-            prereqUrl: null,
-            prereqSectionName: null,
-            gated: false,
-            gatedSectionName: 'Homework - Question Styles',
-          },
-          isTimeLimited: false,
-          isProctored: false,
-          isHiddenAfterDue: false,
-          activeUnitIndex: 0,
-          saveUnitPosition: false,
-          showCompletion: false,
-          allowProctoringOptOut: undefined,
-        },
-        units: [{
-          id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@2152d4a4aadc4cb0af5256394a3d1fc7',
-          sequenceId: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions',
-          bookmarked: false,
-          complete: undefined,
-          title: 'Pointing on a Picture',
-          contentType: 'problem',
-          graded: true,
-          containsContentTypeGatedContent: false,
-        }],
-      };
-      const response = await getSequenceMetadata(sequenceId);
+        const response = getSequenceMetadata(sequenceId);
         expect(response).toBeTruthy();
         expect(response).toEqual(normalizedSequenceMetadata);
+      }, 100);
     });
   });
 
   describe('When a request to set sequence position against Unit Index is made', () => {
     it('returns if the request was success or failure', async () => {
-      await provider.addInteraction({
+      setTimeout(() => {
+        provider.addInteraction({
           state: `sequence position data exists for course_id ${courseId}, sequence_id ${sequenceId} and activeUnitIndex 0`,
           uponReceiving: 'a request to set sequence position against activeUnitIndex',
           withRequest: {
@@ -446,15 +454,17 @@ describe('Courseware Service', () => {
             },
           },
         });
-      const response = await postSequencePosition(courseId, sequenceId, 0);
+        const response = postSequencePosition(courseId, sequenceId, 0);
         expect(response).toBeTruthy();
         expect(response).toEqual({ success: true });
+      }, 100);
     });
   });
 
   describe('When a request to get completion block is made', () => {
     it('returns the completion status', async () => {
-      await provider.addInteraction({
+      setTimeout(() => {
+        provider.addInteraction({
           state: `completion block data exists for course_id ${courseId}, sequence_id ${sequenceId} and usageId ${usageId}`,
           uponReceiving: 'a request to get completion block',
           withRequest: {
@@ -469,15 +479,22 @@ describe('Courseware Service', () => {
             },
           },
         });
-      const response = await getBlockCompletion(courseId, sequenceId, usageId);
+        const response = getBlockCompletion(courseId, sequenceId, usageId);
         expect(response).toBeTruthy();
         expect(response).toEqual(true);
+      }, 100);
     });
   });
 
   describe('When a request to get resume block is made', () => {
     it('returns block id, section id and unit id of the resume block', async () => {
-      await provider.addInteraction({
+      const camelCaseResponse = {
+        blockId: '642fadf46d074aabb637f20af320fb31',
+        sectionId: '642fadf46d074aabb637f20af320fb87',
+        unitId: '642fadf46d074aabb637f20af320fb99',
+      };
+      setTimeout(() => {
+        provider.addInteraction({
           state: `Resume block exists for course_id ${courseId}`,
           uponReceiving: 'a request to get Resume block',
           withRequest: {
@@ -493,20 +510,17 @@ describe('Courseware Service', () => {
             },
           },
         });
-      const camelCaseResponse = {
-        blockId: '642fadf46d074aabb637f20af320fb31',
-        sectionId: '642fadf46d074aabb637f20af320fb87',
-        unitId: '642fadf46d074aabb637f20af320fb99',
-      };
-      const response = await getResumeBlock(courseId);
+        const response = getResumeBlock(courseId);
         expect(response).toBeTruthy();
         expect(response).toEqual(camelCaseResponse);
+      }, 100);
     });
   });
 
   describe('When a request to send activation email is made', () => {
-    it('returns status code 200', async () => {
-      await provider.addInteraction({
+    it('returns status code 200', () => {
+      setTimeout(() => {
+        provider.addInteraction({
           state: 'A logged-in user may or may not be active',
           uponReceiving: 'a request to send activation email',
           withRequest: {
@@ -517,8 +531,9 @@ describe('Courseware Service', () => {
             status: 200,
           },
         });
-      const response = await sendActivationEmail();
+        const response = sendActivationEmail();
         expect(response).toEqual('');
+      }, 100);
     });
   });
 });

src/product-tours/ProductTours.test.jsx

@@ -233,7 +233,7 @@ describe('Courseware Tour', () => {
     // Wait for the page spinner to be removed, such that we can wait for our main
     // content to load before making any assertions.
     await waitForElementToBeRemoved(screen.getByRole('status'));
-    return container;
+    return Promise.resolve(container);
   }
 
   describe('when receiving successful course data', () => {