chore: add whole_course_translation and language to courseware meta (#1305)

Author: leangseu-edx

package-lock.json

@@ -48,7 +48,6 @@
     "classnames": "2.3.2",
     "core-js": "3.22.2",
     "history": "5.3.0",
-    "jest": "^26.6.3",
     "joi": "^17.11.0",
     "js-cookie": "3.0.5",
     "lodash.camelcase": "4.3.0",
@@ -80,7 +79,9 @@
     "copy-webpack-plugin": "^11.0.0",
     "es-check": "6.2.1",
     "husky": "7.0.4",
+    "jest": "^26.6.3",
     "jest-console-group-reporter": "^1.0.1",
+    "jest-when": "^3.6.0",
     "rosie": "2.1.1"
   }
 }

package.json

@@ -63,8 +63,7 @@ describe('Course', () => {
     expect(await screen.findByText('Loading learning sequence...')).toBeInTheDocument();
 
     expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-    // one from translation product tour
-    expect(screen.getAllByRole('dialog')).toHaveLength(1);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Learn About Verified Certificates' })).not.toBeInTheDocument();
 
     loadUnit();

src/courseware/course/Course.test.jsx

@@ -137,8 +137,7 @@ describe('Sequence', () => {
     render(<Sequence {...mockData} />, { wrapWithRouter: true });
     expect(await screen.findByText('Loading learning sequence...')).toBeInTheDocument();
     // `Previous`, `Bookmark` and `Close Tray` buttons
-    // `Change Language`, `Dismiss` and `Try it` buttons from translation selection.
-    expect(screen.getAllByRole('button')).toHaveLength(6);
+    expect(screen.getAllByRole('button')).toHaveLength(3);
     // Renders `Next` button plus one button for each unit.
     expect(screen.getAllByRole('link')).toHaveLength(1 + unitBlocks.length);
 

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

@@ -16,7 +16,7 @@ exports[`Unit component output BookmarkButton props not bookmarked, bookmark upd
 />
 `;
 
-exports[`Unit component output snapshot: not bookmarked, do not show content 1`] = `
+exports[`Unit component output TranslationSelection renders if wholeCourseTranslationEnabled 1`] = `
 <div
   className="unit"
 >
@@ -58,3 +58,41 @@ exports[`Unit component output snapshot: not bookmarked, do not show content 1`]
   />
 </div>
 `;
+
+exports[`Unit component output snapshot: not bookmarked, do not show content 1`] = `
+<div
+  className="unit"
+>
+  <div
+    className="mb-0"
+  >
+    <h3
+      className="h3"
+    >
+      unit-title
+    </h3>
+  </div>
+  <h2
+    className="sr-only"
+  >
+    Level 2 headings may be created by course providers in the future.
+  </h2>
+  <BookmarkButton
+    isBookmarked={false}
+    isProcessing={false}
+    unitId="unit-id"
+  />
+  <UnitSuspense
+    courseId="test-course-id"
+    id="test-props-id"
+  />
+  <ContentIFrame
+    elementId="unit-iframe"
+    id="test-props-id"
+    loadingMessage="Loading learning sequence..."
+    onLoaded={[MockFunction props.onLoaded]}
+    shouldShowContent={true}
+    title="unit-title"
+  />
+</div>
+`;

src/courseware/course/sequence/Unit/__snapshots__/index.test.jsx.snap

@@ -24,6 +24,7 @@ const Unit = ({
   const examAccess = useExamAccess({ id });
   const shouldDisplayHonorCode = useShouldDisplayHonorCode({ courseId, id });
   const unit = useModel(modelKeys.units, id);
+  const { wholeCourseTranslationEnabled } = useModel('coursewareMeta', courseId);
   const isProcessing = unit.bookmarkedUpdateState === 'loading';
   const view = authenticatedUser ? views.student : views.public;
   const { selectedLanguage, setSelectedLanguage } = useSelectLanguage(courseId);
@@ -40,11 +41,13 @@ const Unit = ({
     <div className="unit">
       <div className="mb-0">
         <h3 className="h3">{unit.title}</h3>
-        <TranslationSelection
-          courseId={courseId}
-          selectedLanguage={selectedLanguage}
-          setSelectedLanguage={setSelectedLanguage}
-        />
+        {wholeCourseTranslationEnabled && (
+          <TranslationSelection
+            courseId={courseId}
+            selectedLanguage={selectedLanguage}
+            setSelectedLanguage={setSelectedLanguage}
+          />
+        )}
       </div>
       <h2 className="sr-only">{formatMessage(messages.headerPlaceholder)}</h2>
       <BookmarkButton

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { when } from 'jest-when';
 import { formatMessage, shallow } from '@edx/react-unit-test-utils/dist';
 
 import { useModel } from '../../../../generic/model-store';
@@ -9,7 +10,7 @@ import ContentIFrame from './ContentIFrame';
 import Unit from '.';
 import messages from '../messages';
 import { getIFrameUrl } from './urls';
-import { views } from './constants';
+import { modelKeys, views } from './constants';
 import * as hooks from './hooks';
 
 jest.mock('./hooks', () => ({ useUnitData: jest.fn() }));
@@ -75,7 +76,14 @@ const unit = {
   bookmarked: false,
   bookmarkedUpdateState: 'pending',
 };
-useModel.mockReturnValue(unit);
+const mockCoursewareMetaFn = jest.fn(() => ({ wholeCourseTranslationEnabled: false }));
+const mockUnitsFn = jest.fn(() => unit);
+
+when(useModel)
+  .calledWith('coursewareMeta', props.courseId)
+  .mockImplementation(mockCoursewareMetaFn)
+  .calledWith(modelKeys.units, props.id)
+  .mockImplementation(mockUnitsFn);
 
 let el;
 describe('Unit component', () => {
@@ -118,7 +126,7 @@ describe('Unit component', () => {
       });
       describe('bookmarked, bookmark update pending', () => {
         beforeEach(() => {
-          useModel.mockReturnValueOnce({ ...unit, bookmarked: true });
+          mockUnitsFn.mockReturnValueOnce({ ...unit, bookmarked: true });
           renderComponent();
         });
         test('snapshot', () => {
@@ -192,5 +200,18 @@ describe('Unit component', () => {
         });
       });
     });
+    describe('TranslationSelection', () => {
+      test('renders if wholeCourseTranslationEnabled', () => {
+        mockCoursewareMetaFn.mockReturnValueOnce({ wholeCourseTranslationEnabled: true });
+        el = shallow(<Unit {...props} />);
+        expect(el.snapshot).toMatchSnapshot();
+        expect(el.instance.findByType('TranslationSelection')).toHaveLength(1);
+      });
+      test('does not render if wholeCourseTranslationEnabled is false', () => {
+        mockCoursewareMetaFn.mockReturnValueOnce({ wholeCourseTranslationEnabled: false });
+        el = shallow(<Unit {...props} />);
+        expect(el.instance.findByType('TranslationSelection')).toHaveLength(0);
+      });
+    });
   });
 });

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

@@ -39,6 +39,8 @@ Factory.define('courseMetadata')
       enabled: false,
     },
     marketing_url: null,
+    language: 'en',
+    whole_course_translation_enabled: false,
     celebrations: null,
     enroll_alert: null,
     course_exit_page_is_active: true,

src/courseware/data/__factories__/courseMetadata.factory.js

@@ -110,6 +110,8 @@ function normalizeMetadata(metadata) {
     showCalculator: data.show_calculator,
     notes: camelCaseObject(data.notes),
     marketingUrl: data.marketing_url,
+    language: data.language,
+    wholeCourseTranslationEnabled: data.whole_course_translation_enabled,
     celebrations: camelCaseObject(data.celebrations),
     userHasPassingGrade: data.user_has_passing_grade,
     courseExitPageIsActive: data.course_exit_page_is_active,

src/courseware/data/api.js

@@ -335,6 +335,8 @@ describe('Courseware Service', () => {
               linkedin_add_to_profile_url: null,
               user_needs_integrity_signature: boolean(false),
               learning_assistant_enabled: boolean(false),
+              language: string('en'),
+              whole_course_translation_enabled: boolean(false),
             },
           },
         });