test: update test

jest.config.js

@@ -16,10 +16,16 @@ const config = createConfig('jest', {
     'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
   },
   testTimeout: 30000,
-  testEnvironment: 'jsdom',
   globalSetup: "./global-setup.js",
+  verbose: true,
+  testEnvironment: 'jsdom',
+  // testEnvironmentOptions: {
+  //   url: 'http://localhost/',
+  // },
 });
 
+// delete config.testURL;
+
 config.reporters = [...(config.reporters || []), ["jest-console-group-reporter", {
   // change this setting if need to see less details for each test
   // reportType: "summary" | "details", 

package.json

@@ -48,6 +48,7 @@
     "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",
@@ -79,7 +80,6 @@
     "copy-webpack-plugin": "^11.0.0",
     "es-check": "6.2.1",
     "husky": "7.0.4",
-    "jest": "29.5.0",
     "jest-console-group-reporter": "^1.0.1",
     "rosie": "2.1.1"
   }

src/courseware/course/sequence/Unit/translation-selection/TranslationModal.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   StandardModal,
   ActionRow,
@@ -12,24 +13,26 @@ import {
 import { Check } from '@edx/paragon/icons';
 
 import useTranslationSelection, { languages } from './useTranslationSelection';
+import messages, { languageMessages } from './messages';
 
 import './TranslationModal.scss';
 
 const TranslationModal = ({ courseId, isOpen, close }) => {
+  const { formatMessage } = useIntl();
   const { selectedIndex, setSelectedIndex, onSubmit } = useTranslationSelection({ courseId, close });
 
   return (
     <StandardModal
-      title="Translate this course"
+      title={formatMessage(messages.languageSelectionModalTitle)}
       isOpen={isOpen}
       onClose={close}
       footerNode={(
         <ActionRow>
           <ActionRow.Spacer />
           <Button variant="tertiary" onClick={close}>
-            Cancel
+            {formatMessage(messages.cancelButtonText)}
           </Button>
-          <Button onClick={onSubmit}>Submit</Button>
+          <Button onClick={onSubmit}>{formatMessage(messages.submitButtonText)}</Button>
         </ActionRow>
       )}
     >
@@ -41,7 +44,7 @@ const TranslationModal = ({ courseId, isOpen, close }) => {
             selectedOptionIndex={selectedIndex}
             onSelect={() => setSelectedIndex(index)}
           >
-            {value}
+            {formatMessage(languageMessages[value])}
             {selectedIndex === index && <Icon src={Check} />}
           </ListBoxOption>
         ))}

src/courseware/course/sequence/Unit/translation-selection/TranslationModal.test.jsx

@@ -0,0 +1,53 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import TranslationModal from './TranslationModal';
+
+jest.mock('./useTranslationSelection', () => ({
+  __esModule: true,
+  default: () => ({
+    selectedIndex: 0,
+    setSelectedIndex: jest.fn(),
+    onSubmit: jest.fn().mockName('onSubmit'),
+  }),
+  languages: [['en', 'English'], ['es', 'Spanish']],
+}));
+jest.mock('@edx/paragon', () => jest.requireActual('@edx/react-unit-test-utils').mockComponents({
+  StandardModal: 'StandardModal',
+  ActionRow: {
+    Spacer: 'Spacer',
+  },
+  Button: 'Button',
+  Icon: 'Icon',
+  ListBox: 'ListBox',
+  ListBoxOption: 'ListBoxOption',
+}));
+jest.mock('@edx/paragon/icons', () => ({
+  Check: jest.fn().mockName('icons.Check'),
+}));
+jest.mock('@edx/frontend-platform/i18n', () => {
+  const i18n = jest.requireActual('@edx/frontend-platform/i18n');
+  const { formatMessage } = jest.requireActual('@edx/react-unit-test-utils');
+  // this provide consistent for the test on different platform/timezone
+  const formatDate = jest.fn(date => new Date(date).toISOString()).mockName('useIntl.formatDate');
+  return {
+    ...i18n,
+    useIntl: jest.fn(() => ({
+      formatMessage,
+      formatDate,
+    })),
+    defineMessages: m => m,
+    FormattedMessage: () => 'FormattedMessage',
+  };
+});
+
+describe('TranslationModal', () => {
+  const props = {
+    courseId: 'course-v1:edX+DemoX+Demo_Course',
+    isOpen: true,
+    close: jest.fn().mockName('close'),
+  };
+  it('renders correctly', () => {
+    const wrapper = shallow(<TranslationModal {...props} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+  });
+});

src/courseware/course/sequence/Unit/translation-selection/__snapshots__/TranslationModal.test.jsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TranslationModal renders correctly 1`] = `
+<StandardModal
+  footerNode={
+    <ActionRow>
+      <Spacer />
+      <Button
+        onClick={[MockFunction close]}
+        variant="tertiary"
+      >
+        Cancel
+      </Button>
+      <Button
+        onClick={[MockFunction onSubmit]}
+      >
+        Submit
+      </Button>
+    </ActionRow>
+  }
+  isOpen={true}
+  onClose={[MockFunction close]}
+  title="Translate this course"
+>
+  <ListBox
+    className="listbox-container"
+  >
+    <ListBoxOption
+      className="d-flex justify-content-between"
+      key="en"
+      onSelect={[Function]}
+      selectedOptionIndex={0}
+    >
+      English
+      <Icon
+        src={[MockFunction icons.Check]}
+      />
+    </ListBoxOption>
+    <ListBoxOption
+      className="d-flex justify-content-between"
+      key="es"
+      onSelect={[Function]}
+      selectedOptionIndex={0}
+    >
+      Spanish
+    </ListBoxOption>
+  </ListBox>
+</StandardModal>
+`;

src/courseware/course/sequence/Unit/translation-selection/messages.js

@@ -1,15 +1,13 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
-// title: 'New translation feature!',
-// body: 'Now you can easily translate course content.',
 const messages = defineMessages({
-  translationModalTitle: {
-    id: 'translationSelection.translationModalTitle',
+  translationTourModalTitle: {
+    id: 'translationSelection.translationTourModalTitle',
     defaultMessage: 'This is a standard modal dialog',
     description: 'Title for the translation modal.',
   },
-  translationModalBody: {
-    id: 'translationSelection.translationModalBody',
+  translationTourModalBody: {
+    id: 'translationSelection.translationTourModalBody',
     defaultMessage: 'Now you can easily translate course content.',
     description: 'Body for the translation modal.',
   },
@@ -23,6 +21,34 @@ const messages = defineMessages({
     defaultMessage: 'Dismiss',
     description: 'Button text for the translation modal.',
   },
+  languageSelectionModalTitle: {
+    id: 'translationSelection.languageSelectionModalTitle',
+    defaultMessage: 'Translate this course',
+    description: 'Title for the translation modal.',
+  },
+  cancelButtonText: {
+    id: 'translationSelection.cancelButtonText',
+    defaultMessage: 'Cancel',
+    description: 'Button text for the translation modal.',
+  },
+  submitButtonText: {
+    id: 'translationSelection.submitButtonText',
+    defaultMessage: 'Submit',
+    description: 'Button text for the translation modal.',
+  },
+});
+
+export const languageMessages = defineMessages({
+  English: {
+    id: 'translationSelection.English',
+    defaultMessage: 'English',
+    description: 'Language name for English.',
+  },
+  Spanish: {
+    id: 'translationSelection.Spanish',
+    defaultMessage: 'Spanish',
+    description: 'Language name for Spanish.',
+  },
 });
 
 export default messages;

src/courseware/course/sequence/Unit/translation-selection/useTranslationSelection.js

@@ -40,7 +40,7 @@ const useTranslationSelection = ({ courseId, close }) => {
       [courseId]: newSelectedLanguage,
     });
     close();
-  }, [selectedIndex, setSelectedIndex]);
+  }, [selectedIndex]);
 
   return {
     selectedIndex,

src/courseware/course/sequence/Unit/translation-selection/useTranslationSelection.test.js

@@ -0,0 +1,58 @@
+import { mockUseKeyedState } from '@edx/react-unit-test-utils';
+import {
+  getLocalStorage,
+  setLocalStorage,
+} from '../../../../../data/localStorage';
+
+import useTranslationSelection, { stateKeys, languages } from './useTranslationSelection';
+
+import { languageMessages } from './messages';
+
+const state = mockUseKeyedState(stateKeys);
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useCallback: jest.fn((cb, prereqs) => ({ useCallback: { cb, prereqs } })),
+}));
+jest.mock('../../../../../data/localStorage', () => ({
+  getLocalStorage: jest.fn(),
+  setLocalStorage: jest.fn(),
+}));
+
+describe('useTranslationSelection', () => {
+  const props = { courseId: 'some-course-id', close: jest.fn() };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    state.mock();
+  });
+  afterEach(() => {
+    state.resetVals();
+  });
+
+  languages.forEach(([key, value], index) => {
+    it(`initializes selectedIndex to the index of the selected language (${value})`, () => {
+      getLocalStorage.mockReturnValueOnce({ [props.courseId]: key });
+      const { selectedIndex } = useTranslationSelection(props);
+
+      state.expectInitializedWith(stateKeys.selectedIndex, index);
+      expect(selectedIndex).toBe(index);
+    });
+  });
+
+  test('onSubmit behavior', () => {
+    const { onSubmit } = useTranslationSelection(props);
+
+    onSubmit.useCallback.cb();
+    expect(setLocalStorage).toHaveBeenCalled();
+    expect(props.close).toHaveBeenCalled();
+  });
+});
+
+describe('language messages', () => {
+  it('has a message defined for each language', () => {
+    languages.forEach(([, value]) => {
+      expect(languageMessages[value].defaultMessage).toBeDefined();
+    });
+  });
+});

src/courseware/course/sequence/Unit/translation-selection/useTranslationTour.js

@@ -19,26 +19,28 @@ const useTranslationTour = () => {
     stateKeys.showTranslationTour,
     global.localStorage.getItem(hasSeenTranslationTourKey) !== 'true',
   );
+  const [isOpen, open, close] = useToggle(false);
+
   const endTour = useCallback(() => {
     global.localStorage.setItem(hasSeenTranslationTourKey, 'true');
     setIsTourEnabled(false);
   }, [isTourEnabled, setIsTourEnabled]);
 
-  const [isOpen, open, close] = useToggle(false);
+  const tryIt = useCallback(() => {
+    endTour();
+    open();
+  }, [endTour, open]);
 
   const translationTour = isTourEnabled
     ? {
       tourId: 'translation',
       enabled: isTourEnabled,
       onDismiss: endTour,
-      onEnd: () => {
-        endTour();
-        open();
-      },
+      onEnd: tryIt,
       checkpoints: [
         {
-          title: formatMessage(messages.translationModalTitle),
-          body: formatMessage(messages.translationModalBody),
+          title: formatMessage(messages.translationTourModalTitle),
+          body: formatMessage(messages.translationTourModalBody),
           placement: 'bottom',
           target: '#translation-selection-button',
           showDismissButton: true,