fix: solve issues in some tests

eduNEXT · May 17, 2024 · 33a828a · 33a828a
1 parent e0f93fb
commit 33a828a
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 52 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/courseware/CoursewareContainer.test.jsx b/src/courseware/CoursewareContainer.test.jsx
@@ -13,7 +13,7 @@ import MockAdapter from 'axios-mock-adapter';
 
 import { UserMessagesProvider } from '../generic/user-messages';
 import tabMessages from '../tab-page/messages';
-import { initializeMockApp, waitFor } from '../setupTest';
+import { initializeMockApp } from '../setupTest';
 import { DECODE_ROUTES } from '../constants';
 
 import CoursewareContainer from './CoursewareContainer';
@@ -157,7 +157,7 @@ describe('CoursewareContainer', () => {
     // 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);
   }
 
   it('should initialize to show a spinner', () => {
@@ -213,7 +213,7 @@ describe('CoursewareContainer', () => {
         });
 
         history.push(`/course/${courseId}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -236,7 +236,7 @@ describe('CoursewareContainer', () => {
         axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/resume/${courseId}`).reply(200, {});
 
         history.push(`/course/${courseId}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -286,7 +286,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 waitFor(() => loadContainer());
+          const container = await loadContainer();
           assertLoadedHeader(container);
           assertSequenceNavigation(container, 2);
           assertLocation(container, sequenceTree[1][0].id, unitTree[1][0][0].id);
@@ -361,7 +361,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 waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -380,7 +380,7 @@ describe('CoursewareContainer', () => {
         setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });
 
         history.push(`/course/${courseId}/${sequenceBlock.id}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -397,7 +397,7 @@ describe('CoursewareContainer', () => {
 
       it('should load the specified unit', async () => {
         history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[2].id}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -413,7 +413,7 @@ describe('CoursewareContainer', () => {
         });
 
         history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation a, nav.sequence-navigation button');
         const sequenceNextButton = sequenceNavButtons[4];

diff --git a/src/courseware/course/sequence/Unit/ContentIFrame.jsx b/src/courseware/course/sequence/Unit/ContentIFrame.jsx
@@ -64,21 +64,6 @@ const ContentIFrame = ({
     onLoad: handleIFrameLoad,
   };
 
-  let modalContent;
-  if (modalOptions.isOpen) {
-    modalContent = modalOptions.body
-      ? <div className="unit-modal">{ modalOptions.body }</div>
-      : (
-        <iframe
-          title={modalOptions.title}
-          allow={IFRAME_FEATURE_POLICY}
-          frameBorder="0"
-          src={modalOptions.url}
-          style={{ width: '100%', height: modalOptions.height }}
-        />
-      );
-  }
-
   return (
     <>
       {(shouldShowContent && !hasLoaded) && (
@@ -89,19 +74,27 @@ const ContentIFrame = ({
           <iframe title={title} {...contentIFrameProps} data-testid={testIDs.contentIFrame} />
         </div>
       )}
-      {modalOptions.isOpen ? (
+      {modalOptions.isOpen && (
         <ModalDialog
           dialogClassName="modal-lti"
           onClose={handleModalClose}
-          size={modalOptions.isFullscreen ? 'fullscreen' : null}
-          hasCloseButton={!modalOptions.isFullscreen}
           isOpen
         >
-          <ModalDialog.Body className={modalOptions.modalBodyClassName}>
-            {modalContent}
+          <ModalDialog.Body>
+            {modalOptions.body
+              ? <div className="unit-modal">{ modalOptions.body }</div>
+              : (
+                <iframe
+                  title={modalOptions.title}
+                  allow={IFRAME_FEATURE_POLICY}
+                  frameBorder="0"
+                  src={modalOptions.url}
+                  style={{ width: '100%', height: modalOptions.height }}
+                />
+              )}
           </ModalDialog.Body>
         </ModalDialog>
-      ) : null}
+      )}
     </>
   );
 };

diff --git a/src/courseware/course/sequence/Unit/ContentIFrame.test.jsx b/src/courseware/course/sequence/Unit/ContentIFrame.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { ErrorPage } from '@edx/frontend-platform/react';
-import { ModalDialog, Modal } from '@openedx/paragon';
+import { ModalDialog } from '@openedx/paragon';
 import { shallow } from '@edx/react-unit-test-utils';
 
 import PageLoading from '@src/generic/PageLoading';
@@ -138,7 +138,7 @@ describe('ContentIFrame Component', () => {
     });
     it('does not display modal if modalOptions returns isOpen: false', () => {
       el = shallow(<ContentIFrame {...props} />);
-      expect(el.instance.findByType(Modal).length).toEqual(0);
+      expect(el.instance.findByType(ModalDialog).length).toEqual(0);
     });
     describe('if modalOptions.isOpen', () => {
       const testModalOpenAndHandleClose = () => {
@@ -193,30 +193,34 @@ describe('ContentIFrame Component', () => {
         beforeEach(() => {
           hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withBody });
           el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(Modal);
+          [component] = el.instance.findByType(ModalDialog);
         });
         it('displays Modal with div wrapping provided body content if modal.body is provided', () => {
-          expect(component.props.body).toEqual(<div className="unit-modal">{modalOptions.withBody.body}</div>);
+          const content = component.findByType(ModalDialog.Body)[0].children[0];
+          expect(content.matches(shallow(
+            <div className="unit-modal">{modalOptions.withBody.body}</div>,
+          ))).toEqual(true);
         });
         testModalOpenAndHandleClose();
       });
       describe('url modal', () => {
         beforeEach(() => {
           hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withUrl });
           el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(Modal);
+          [component] = el.instance.findByType(ModalDialog);
         });
         testModalOpenAndHandleClose();
         it('displays Modal with iframe to provided url if modal.body is not provided', () => {
-          expect(component.props.body).toEqual(
+          const content = component.findByType(ModalDialog.Body)[0].children[0];
+          expect(content.matches(shallow(
             <iframe
               title={modalOptions.withUrl.title}
               allow={IFRAME_FEATURE_POLICY}
               frameBorder="0"
               src={modalOptions.withUrl.url}
               style={{ width: '100%', height: modalOptions.withUrl.height }}
             />,
-          );
+          ))).toEqual(true);
         });
       });
     });

diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx
@@ -48,9 +48,9 @@ describe('Sequence Navigation Tabs', () => {
 
   it('renders unit buttons and dropdown button', async () => {
     let container = null;
+    useIndexOfLastVisibleChild.mockReturnValue([-1, null, null]);
+    const booyah = render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
     await act(async () => {
-      useIndexOfLastVisibleChild.mockReturnValue([-1, null, null]);
-      const booyah = render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
       container = booyah.container;
 
       const dropdownToggle = container.querySelector('.dropdown-toggle');