diff --git a/src/courseware/course/sequence/Unit.jsx b/src/courseware/course/sequence/Unit.jsx index 4cc96fc3..1e80ff70 100644 --- a/src/courseware/course/sequence/Unit.jsx +++ b/src/courseware/course/sequence/Unit.jsx @@ -118,6 +118,10 @@ function Unit({ } else if (type === 'plugin.modal') { payload.open = true; setModalOptions(payload); + } else if (event.data.offset) { + // We listen for this message from LMS to know when the page needs to + // be scroll to another location on the page. + window.scrollTo(0, event.data.offset); } } // If we currently have an event listener, remove it. diff --git a/src/courseware/course/sequence/Unit.test.jsx b/src/courseware/course/sequence/Unit.test.jsx index c92b3934..02ba79a7 100644 --- a/src/courseware/course/sequence/Unit.test.jsx +++ b/src/courseware/course/sequence/Unit.test.jsx @@ -103,6 +103,16 @@ describe('Unit', () => { expect(onLoaded).toHaveBeenCalledTimes(1); }); + it('scrolls page on MessagaeEvent when receiving offset', async () => { + // Set message to constain offset data. + const testMessageWithOffset = { offset: 1500 }; + render(); + window.postMessage(testMessageWithOffset, '*'); + + await expect(waitFor(() => expect(window.scrollTo()).toHaveBeenCalled())); + expect(window.scrollY === testMessageWithOffset.offset); + }); + it('ignores MessageEvent with unhandled type', async () => { // Clone message and set different type. const testMessageWithUnhandledType = { ...messageEvent, type: 'wrong type' };