Merge pull request #9 from edx/zhancock/review-dash

feat: add lti launch view
edx · Jun 30, 2023 · 3a89c8e · 3a89c8e
2 parents 69e03f7 + e6e98b1
commit 3a89c8e
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 58 deletions.
diff --git a/src/pages/ExamsPage/__snapshots__/index.test.jsx.snap b/src/pages/ExamsPage/__snapshots__/index.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ExamsPage snapshots loaded 1`] = `
+exports[`ExamsPage snapshots exams and attempts loaded 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": <body>
@@ -71,9 +71,6 @@ Object {
               <div
                 data-testid="attempt_list"
               >
-                <p>
-                  Data Table
-                </p>
                 <div
                   class="pgn__data-table-layout-wrapper"
                 >
@@ -428,22 +425,6 @@ Object {
                 </div>
               </div>
             </div>
-            <div
-              aria-hidden="true"
-              class="fade tab-pane"
-              role="tabpanel"
-            >
-              <div
-                data-testid="review_dash"
-              >
-                Placeholder for external review app
-              </div>
-            </div>
-            <div
-              aria-hidden="true"
-              class="fade tab-pane"
-              role="tabpanel"
-            />
           </div>
         </div>
       </div>
@@ -516,9 +497,6 @@ Object {
             <div
               data-testid="attempt_list"
             >
-              <p>
-                Data Table
-              </p>
               <div
                 class="pgn__data-table-layout-wrapper"
               >
@@ -873,22 +851,6 @@ Object {
               </div>
             </div>
           </div>
-          <div
-            aria-hidden="true"
-            class="fade tab-pane"
-            role="tabpanel"
-          >
-            <div
-              data-testid="review_dash"
-            >
-              Placeholder for external review app
-            </div>
-          </div>
-          <div
-            aria-hidden="true"
-            class="fade tab-pane"
-            role="tabpanel"
-          />
         </div>
       </div>
     </div>

diff --git a/src/pages/ExamsPage/components/AttemptList.jsx b/src/pages/ExamsPage/components/AttemptList.jsx
@@ -20,7 +20,6 @@ const AttemptList = ({ attempts }) => {
 
   return (
     <div data-testid="attempt_list">
-      <p>Data Table</p>
       <DataTable
         isPaginated
         initialState={{

diff --git a/src/pages/ExamsPage/components/ExternalReviewDashboard.jsx b/src/pages/ExamsPage/components/ExternalReviewDashboard.jsx
@@ -1,9 +1,24 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-const ExternalReviewDashboard = () => (
+import { getExamsBaseUrl } from '../data/api';
+
+const getLaunchUrlByExamId = (id) => `${getExamsBaseUrl()}/lti/exam/${id}/instructor_tool`;
+
+const ExternalReviewDashboard = ({ exam }) => (
   <div data-testid="review_dash">
-    Placeholder for external review app
+    {exam && <iframe title="lti_tool" src={getLaunchUrlByExamId(exam.id)} width="100%" height="1100" style={{ border: 'none' }} />}
   </div>
 );
 
+ExternalReviewDashboard.propTypes = {
+  exam: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+  }),
+};
+
+ExternalReviewDashboard.defaultProps = {
+  exam: null,
+};
+
 export default ExternalReviewDashboard;
diff --git a/src/pages/ExamsPage/components/ExternalReviewDashboard.test.jsx b/src/pages/ExamsPage/components/ExternalReviewDashboard.test.jsx
@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+
+import ExternalReviewDashboard from './ExternalReviewDashboard';
+
+// nomally mocked for unit tests but required for rendering/snapshots
+jest.unmock('react');
+
+jest.mock('../data/api', () => ({
+  getExamsBaseUrl: jest.fn().mockReturnValue('http://test.org'),
+}));
+
+const testExam = {
+  id: 3,
+  name: 'Test Proctored Exam',
+};
+
+describe('ExternalReviewDashboard', () => {
+  it('does not include iframe if no exam provided', () => {
+    render(<ExternalReviewDashboard exam={null} />);
+    expect(screen.queryByTitle('lti_tool')).not.toBeInTheDocument();
+  });
+  it('includes an iframe with the correct url for the current exam', () => {
+    render(<ExternalReviewDashboard exam={testExam} />);
+    expect(screen.getByTitle('lti_tool')).toHaveAttribute('src', 'http://test.org/lti/exam/3/instructor_tool');
+  });
+});
diff --git a/src/pages/ExamsPage/components/ResetExamAttemptButton.jsx b/src/pages/ExamsPage/components/ResetExamAttemptButton.jsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -9,8 +8,6 @@ import { useDeleteExamAttempt } from '../hooks';
 
 const ResetExamAttemptButton = ({ username, examName, attemptId }) => {
   const [isOpen, open, close] = useToggle(false);
-  const modalSize = useState('md');
-  const modalVariant = useState('default');
   const resetExamAttempt = useDeleteExamAttempt();
   const { formatMessage } = useIntl();
 
@@ -29,8 +26,8 @@ const ResetExamAttemptButton = ({ username, examName, attemptId }) => {
         title="my dialog"
         isOpen={isOpen}
         onClose={close}
-        size={modalSize}
-        variant={modalVariant}
+        size="md"
+        variant="default"
         hasCloseButton
         isFullscreenOnMobile
       >

diff --git a/src/pages/ExamsPage/components/__snapshots__/AttemptList.test.jsx.snap b/src/pages/ExamsPage/components/__snapshots__/AttemptList.test.jsx.snap
@@ -8,9 +8,6 @@ Object {
       <div
         data-testid="attempt_list"
       >
-        <p>
-          Data Table
-        </p>
         <div
           class="pgn__data-table-layout-wrapper"
         >
@@ -432,9 +429,6 @@ Object {
     <div
       data-testid="attempt_list"
     >
-      <p>
-        Data Table
-      </p>
       <div
         class="pgn__data-table-layout-wrapper"
       >

diff --git a/src/pages/ExamsPage/data/api.js b/src/pages/ExamsPage/data/api.js
@@ -1,7 +1,7 @@
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
-function getExamsBaseUrl() {
+export function getExamsBaseUrl() {
   ensureConfig([
     'EXAMS_BASE_URL',
   ]);

diff --git a/src/pages/ExamsPage/index.jsx b/src/pages/ExamsPage/index.jsx
@@ -38,12 +38,12 @@ const ExamsPage = ({ courseId }) => {
     <Container>
       {isLoading && <div>Loading...</div>}
       <ExamList exams={examsList} />
-      <Tabs variant="tabs" defaultActiveKey="attempts">
+      <Tabs variant="tabs" mountOnEnter defaultActiveKey="attempts">
         <Tab eventKey="attempts" title={formatMessage(messages.attemptsViewTabTitle)}>
           <AttemptList attempts={attemptsList} />
         </Tab>
         <Tab eventKey="review" title={formatMessage(messages.reviewDashboardTabTitle)}>
-          <ExternalReviewDashboard />
+          <ExternalReviewDashboard exam={currentExam} />
         </Tab>
       </Tabs>
     </Container>

diff --git a/src/pages/ExamsPage/index.test.jsx b/src/pages/ExamsPage/index.test.jsx
@@ -19,6 +19,7 @@ describe('ExamsPage', () => {
     examsList: [
       { id: 1, name: 'exam1' },
     ],
+    currentExam: { id: 1, name: 'exam1' },
     isLoading: false,
   };
   const defaultAttemptsData = {
@@ -37,7 +38,10 @@ describe('ExamsPage', () => {
     hooks.useExamAttemptsData.mockReturnValue(defaultAttemptsData);
   });
   describe('snapshots', () => {
-    test('loaded', () => {
+    test('exams and attempts loaded', () => {
+      // temporary, this won't fire on useEffect once we have an exam selection handler
+      hooks.useFetchExamAttempts.mockReturnValue(jest.fn());
+
       hooks.useExamsData.mockReturnValue(defaultExamsData);
       expect(render(<ExamsPage courseId="test_course" />)).toMatchSnapshot();
     });
@@ -59,7 +63,10 @@ describe('ExamsPage', () => {
     it('should render attempt list by default', () => {
       expect(screen.getByTestId('attempt_list')).toBeInTheDocument();
     });
-    test('swtich tabs to review dashboard', () => {
+    it('should not render review dashboard by default', () => {
+      expect(screen.queryByTestId('review_dash')).not.toBeInTheDocument();
+    });
+    test('switch tabs to review dashboard', () => {
       screen.getByText('Review Dashboard').click();
       expect(screen.getByTestId('review_dash')).toBeInTheDocument();
     });