test: replacing snapshot tests with RTL tests part 3 (#2134)

* test: replacing snapshot tests with rtl tests part 3

* test: addint alt text to icon buttons and test refactor

src/editors/containers/EditorContainer/components/TitleHeader/EditConfirmationButtons.jsx

@@ -17,6 +17,7 @@ const EditConfirmationButtons = ({
       <IconButtonWithTooltip
         tooltipPlacement="left"
         tooltipContent={intl.formatMessage(messages.saveTitleEdit)}
+        alt={intl.formatMessage(messages.saveAltText)}
         src={Check}
         iconAs={Icon}
         onClick={updateTitle}
@@ -24,6 +25,7 @@ const EditConfirmationButtons = ({
       <IconButtonWithTooltip
         tooltipPlacement="right"
         tooltipContent={intl.formatMessage(messages.cancelTitleEdit)}
+        alt={intl.formatMessage(messages.cancelAltText)}
         src={Close}
         iconAs={Icon}
         onClick={cancelEdit}

src/editors/containers/EditorContainer/components/TitleHeader/EditConfirmationButtons.test.jsx

@@ -1,19 +0,0 @@
-import 'CourseAuthoring/editors/setupEditorTest';
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../testUtils';
-
-import EditConfirmationButtons from './EditConfirmationButtons';
-
-describe('EditConfirmationButtons', () => {
-  const props = {
-    intl: { formatMessage },
-    updateTitle: jest.fn().mockName('args.updateTitle'),
-    cancelEdit: jest.fn().mockName('args.cancelEdit'),
-  };
-  describe('snapshot', () => {
-    test('snapshot', () => {
-      expect(shallow(<EditConfirmationButtons {...props} />).snapshot).toMatchSnapshot();
-    });
-  });
-});

src/editors/containers/EditorContainer/components/TitleHeader/EditConfirmationButtons.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  render, screen, fireEvent, initializeMocks,
+} from '../../../../../testUtils';
+import EditConfirmationButtons from './EditConfirmationButtons';
+
+describe('EditConfirmationButtons', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders two IconButtonWithTooltip buttons', () => {
+    render(
+      <EditConfirmationButtons updateTitle={jest.fn()} cancelEdit={jest.fn()} />,
+    );
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    expect(cancelButton).toBeInTheDocument();
+    const saveButton = screen.getByRole('button', { name: /save/i });
+    expect(saveButton).toBeInTheDocument();
+  });
+
+  it('calls updateTitle when save button is clicked', () => {
+    const updateTitleMock = jest.fn();
+    render(
+      <EditConfirmationButtons updateTitle={updateTitleMock} cancelEdit={jest.fn()} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /save/i }));
+    expect(updateTitleMock).toHaveBeenCalled();
+  });
+
+  it('calls cancelEdit when cancel button is clicked', () => {
+    const cancelEditMock = jest.fn();
+    render(
+      <EditConfirmationButtons updateTitle={jest.fn()} cancelEdit={cancelEditMock} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
+    expect(cancelEditMock).toHaveBeenCalled();
+  });
+});

src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditConfirmationButtons.test.jsx.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditConfirmationButtons snapshot snapshot 1`] = `
-<ButtonGroup>
-  <IconButtonWithTooltip
-    iconAs="Icon"
-    onClick={[MockFunction args.updateTitle]}
-    tooltipContent="Save"
-    tooltipPlacement="left"
-  />
-  <IconButtonWithTooltip
-    iconAs="Icon"
-    onClick={[MockFunction args.cancelEdit]}
-    src={[MockFunction icons.Close]}
-    tooltipContent="Cancel"
-    tooltipPlacement="right"
-  />
-</ButtonGroup>
-`;

src/editors/containers/EditorContainer/components/TitleHeader/messages.js

@@ -27,11 +27,21 @@ const messages = defineMessages({
     defaultMessage: 'Cancel',
     description: 'Screen reader label title for icon button to edit the xblock title',
   },
+  cancelAltText: {
+    id: 'authoring.texteditor.header.cancelAltText',
+    defaultMessage: 'Cancel',
+    description: 'Alt text for icon button to cancel edit the xblock title',
+  },
   saveTitleEdit: {
     id: 'authoring.texteditor.header.saveTitleEdit',
     defaultMessage: 'Save',
     description: 'Screen reader label title for icon button to edit the xblock title',
   },
+  saveAltText: {
+    id: 'authoring.texteditor.header.saveAltText',
+    defaultMessage: 'Save',
+    description: 'Alt text for icon button to save edit the xblock title',
+  },
 });
 
 export default messages;

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Form } from '@openedx/paragon';
 
 import { answerOptionProps } from '../../../../../../../data/services/cms/types';
@@ -13,46 +13,47 @@ const FeedbackControl = ({
   labelMessage,
   labelMessageBoldUnderline,
   answer,
-  intl,
   type,
   images,
   isLibrary,
   learningContextId,
-}) => (
-  <Form.Group>
-    <Form.Label className="mb-3">
-      <FormattedMessage
-        {...labelMessage}
-        values={{
-          answerId: answer.id,
-          boldunderline: <b><u><FormattedMessage {...labelMessageBoldUnderline} /></u></b>,
+}) => {
+  const intl = useIntl();
+  return (
+    <Form.Group>
+      <Form.Label className="mb-3">
+        <FormattedMessage
+          {...labelMessage}
+          values={{
+            answerId: answer.id,
+            boldunderline: <b><u><FormattedMessage {...labelMessageBoldUnderline} /></u></b>,
+          }}
+        />
+      </Form.Label>
+      <ExpandableTextArea
+        id={`${type}Feedback-${answer.id}`}
+        value={feedback}
+        setContent={onChange}
+        placeholder={intl.formatMessage(messages.feedbackPlaceholder)}
+        {...{
+          images,
+          isLibrary,
+          learningContextId,
         }}
       />
-    </Form.Label>
-    <ExpandableTextArea
-      id={`${type}Feedback-${answer.id}`}
-      value={feedback}
-      setContent={onChange}
-      placeholder={intl.formatMessage(messages.feedbackPlaceholder)}
-      {...{
-        images,
-        isLibrary,
-        learningContextId,
-      }}
-    />
-  </Form.Group>
-);
+    </Form.Group>
+  );
+};
 FeedbackControl.propTypes = {
   feedback: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
-  labelMessage: PropTypes.string.isRequired,
-  labelMessageBoldUnderline: PropTypes.string.isRequired,
+  labelMessage: PropTypes.shape.isRequired,
+  labelMessageBoldUnderline: PropTypes.shape.isRequired,
   answer: answerOptionProps.isRequired,
   type: PropTypes.string.isRequired,
   images: PropTypes.shape({}).isRequired,
   learningContextId: PropTypes.string.isRequired,
   isLibrary: PropTypes.bool.isRequired,
-  intl: intlShape.isRequired,
 };
 
 export default FeedbackControl;

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.test.jsx

@@ -1,30 +0,0 @@
-import 'CourseAuthoring/editors/setupEditorTest';
-import { shallow } from '@edx/react-unit-test-utils';
-import FeedbackControl from './FeedbackControl';
-
-const answerWithFeedback = {
-  id: 'A',
-  title: 'Answer 1',
-  correct: true,
-  selectedFeedback: 'some feedback',
-  unselectedFeedback: 'unselectedFeedback',
-};
-
-const props = {
-  answer: answerWithFeedback,
-  intl: { formatMessage: jest.fn() },
-  setAnswer: jest.fn(),
-  feedback: 'feedback',
-  onChange: jest.fn(),
-  labelMessage: 'msg',
-  labelMessageBoldUnderline: 'msg',
-  images: {},
-  isLibrary: false,
-  learningContextId: 'course+org+run',
-};
-
-describe('FeedbackControl component', () => {
-  test('renders', () => {
-    expect(shallow(<FeedbackControl {...props} />).snapshot).toMatchSnapshot();
-  });
-});

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  render, screen, fireEvent, initializeMocks,
+} from '../../../../../../../../testUtils';
+import FeedbackControl from './FeedbackControl';
+
+jest.mock('../../../../../../../sharedComponents/ExpandableTextArea', () => jest.fn(({
+  id, value, setContent, placeholder,
+}) => (
+  <textarea id={id} value={value} placeholder={placeholder} onChange={e => setContent(e.target.value)} />
+)));
+
+const defaultProps = {
+  feedback: 'Initial feedback',
+  onChange: jest.fn(),
+  labelMessage: { id: 'label.id', defaultMessage: 'Feedback for answer {answerId} {boldunderline}' },
+  labelMessageBoldUnderline: { id: 'bold.id', defaultMessage: 'Important' },
+  answer: { id: 'a1', text: 'Answer 1' },
+  type: 'correct',
+  images: {},
+  isLibrary: false,
+  learningContextId: 'lc1',
+};
+
+describe('FeedbackControl', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders Form.Label with FormattedMessage and ExpandableTextArea', () => {
+    render(<FeedbackControl {...defaultProps} />);
+    expect(screen.getByText(/Feedback for answer/)).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: '' })).toBeInTheDocument();
+  });
+
+  it('passes correct props to ExpandableTextArea', () => {
+    render(<FeedbackControl {...defaultProps} />);
+    const textarea = screen.getByRole('textbox', { name: '' });
+    expect(textarea).toHaveAttribute('id', 'correctFeedback-a1');
+    expect(textarea).toHaveValue('Initial feedback');
+    expect(textarea).toHaveAttribute('placeholder', 'Feedback message');
+  });
+
+  it('calls onChange when textarea value changes', () => {
+    const onChange = jest.fn();
+    render(<FeedbackControl {...defaultProps} onChange={onChange} />);
+    const textarea = screen.getByRole('textbox', { name: '' });
+    fireEvent.change(textarea, { target: { value: 'Updated feedback' } });
+    expect(onChange).toHaveBeenCalledWith('Updated feedback');
+  });
+
+  it('renders with different isLibrary, images, and learningContextId', () => {
+    render(<FeedbackControl
+      {...defaultProps}
+      isLibrary
+      images={{ img1: 'url' }}
+      learningContextId="lc2"
+    />);
+    expect(screen.getByRole('textbox', { name: '' })).toBeInTheDocument();
+  });
+
+  it('renders boldunderline content inside FormattedMessage', () => {
+    render(<FeedbackControl {...defaultProps} />);
+    expect(screen.getByText('Important')).toBeInTheDocument();
+  });
+});

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackControl.test.jsx.snap

@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FeedbackControl component renders 1`] = `
-<Form.Group>
-  <Form.Label
-    className="mb-3"
-  >
-    <FormattedMessage
-      0="m"
-      1="s"
-      2="g"
-      values={
-        {
-          "answerId": "A",
-          "boldunderline": <b>
-            <u>
-              <FormattedMessage
-                0="m"
-                1="s"
-                2="g"
-              />
-            </u>
-          </b>,
-        }
-      }
-    />
-  </Form.Label>
-  <ExpandableTextArea
-    error={false}
-    errorMessage={null}
-    id="undefinedFeedback-A"
-    images={{}}
-    isLibrary={false}
-    learningContextId="course+org+run"
-    placeholder={null}
-    setContent={[MockFunction]}
-    value="feedback"
-  />
-</Form.Group>
-`;

src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.test.tsx

@@ -1,48 +1,46 @@
-import 'CourseAuthoring/editors/setupEditorTest';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import React from 'react';
+import {
+  render, screen, fireEvent, initializeMocks,
+} from '../../../../../../testUtils';
 import AdvanceTypeSelect from './AdvanceTypeSelect';
+import { ProblemTypeKeys, AdvanceProblems } from '../../../../../data/constants/problem';
 
 describe('AdvanceTypeSelect', () => {
-  const props = {
-    selected: 'blankadvanced' as const,
-    setSelected: jest.fn().mockName('setSelect'),
-  };
-  describe('snapshots', () => {
-    test('snapshots: renders as expected with default props', () => {
-      expect(
-        shallow(<AdvanceTypeSelect {...props} />).snapshot,
-      ).toMatchSnapshot();
-    });
-    test('snapshots: renders as expected with problemType is circuitschematic', () => {
-      expect(
-        shallow(<AdvanceTypeSelect {...props} selected="circuitschematic" />).snapshot,
-      ).toMatchSnapshot();
-    });
-    test('snapshots: renders as expected with problemType is customgrader', () => {
-      expect(
-        shallow(<AdvanceTypeSelect {...props} selected="customgrader" />).snapshot,
-      ).toMatchSnapshot();
-    });
-    test('snapshots: renders as expected with problemType is formularesponse', () => {
-      expect(
-        shallow(<AdvanceTypeSelect {...props} selected="formularesponse" />).snapshot,
-      ).toMatchSnapshot();
-    });
-    test('snapshots: renders as expected with problemType is imageresponse', () => {
-      expect(
-        shallow(<AdvanceTypeSelect {...props} selected="imageresponse" />).snapshot,
-      ).toMatchSnapshot();
-    });
-    test('snapshots: renders as expected with problemType is jsinputresponse', () => {
-      expect(
-        shallow(<AdvanceTypeSelect {...props} selected="jsinputresponse" />).snapshot,
-      ).toMatchSnapshot();
-    });
-    test('snapshots: renders as expected with problemType is problemwithhint', () => {
-      expect(
-        shallow(<AdvanceTypeSelect {...props} selected="problemwithhint" />).snapshot,
-      ).toMatchSnapshot();
-    });
+  const setSelected = jest.fn();
+
+  beforeEach(() => {
+    initializeMocks();
+    setSelected.mockClear();
+  });
+
+  it('component shows on screen', () => {
+    const selected = 'blankadvanced';
+    render(<AdvanceTypeSelect selected={selected} setSelected={setSelected} />);
+    const container = screen.getByRole('radiogroup');
+    expect(container).toBeInTheDocument();
+  });
+
+  it('calls setSelected with the correct value when a radio is selected', () => {
+    const selected = 'blankadvanced';
+    render(<AdvanceTypeSelect selected={selected} setSelected={setSelected} />);
+    const nextType = 'circuitschematic';
+    const radio = screen.getByLabelText(AdvanceProblems[nextType].title);
+    fireEvent.click(radio);
+    expect(setSelected).toHaveBeenCalledWith(nextType);
+  });
+
+  it('calls setSelected with SINGLESELECT when back button is clicked', () => {
+    const selected = 'blankadvanced';
+    render(<AdvanceTypeSelect selected={selected} setSelected={setSelected} />);
+    const backButton = screen.getByRole('button', { name: /Go Back/i });
+    fireEvent.click(backButton);
+    expect(setSelected).toHaveBeenCalledWith(ProblemTypeKeys.SINGLESELECT);
+  });
+
+  it('checks the correct radio is selected', () => {
+    const selected = 'circuitschematic';
+    render(<AdvanceTypeSelect selected={selected} setSelected={setSelected} />);
+    const radio = screen.getByLabelText(AdvanceProblems[selected].title);
+    expect(radio).toBeChecked();
   });
 });

src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.tsx.snap

@@ -1,1919 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default props 1`] = `
-<Col
-  className="justify-content-center"
-  md={8}
-  xs={12}
->
-  <Form.Group
-    className="border rounded text-primary-500 p-0"
-  >
-    <ActionRow
-      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
-    >
-      <IconButton
-        alt="Go back"
-        iconAs="Icon"
-        onClick={[Function]}
-      />
-      <ActionRow.Spacer />
-      <Form.Label
-        className="h4"
-      >
-        <FormattedMessage
-          defaultMessage="Advanced problems"
-          description="Title for advanced problem menu"
-          id="authoring.problemEditor.advanceProblem.menu.title"
-        />
-      </Form.Label>
-      <ActionRow.Spacer />
-    </ActionRow>
-    <RadioSet
-      className="px-4"
-      name="advanceTypes"
-      onChange={[Function]}
-      value="blankadvanced"
-    >
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="blankadvanced"
-      >
-        <Radio
-          id="blankadvanced"
-          value="blankadvanced"
-        >
-          Blank problem
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="circuitschematic"
-      >
-        <Radio
-          id="circuitschematic"
-          value="circuitschematic"
-        >
-          Circuit schematic builder
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-circuitschematic"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="jsinputresponse"
-      >
-        <Radio
-          id="jsinputresponse"
-          value="jsinputresponse"
-        >
-          Custom JavaScript display and grading
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="customgrader"
-      >
-        <Radio
-          id="customgrader"
-          value="customgrader"
-        >
-          Custom Python-evaluated input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-customgrader"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Provisional
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="imageresponse"
-      >
-        <Radio
-          id="imageresponse"
-          value="imageresponse"
-        >
-          Image mapped input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-imageresponse"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="formularesponse"
-      >
-        <Radio
-          id="formularesponse"
-          value="formularesponse"
-        >
-          Math expression input
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="problemwithhint"
-      >
-        <Radio
-          id="problemwithhint"
-          value="problemwithhint"
-        >
-          Problem with adaptive hint
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-problemwithhint"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-    </RadioSet>
-  </Form.Group>
-  <Hyperlink
-    destination="https://docs.openedx.org/en/latest/educators/references/course_development/exercise_tools/guide_problem_types.html#advanced-problem-types"
-    target="_blank"
-  >
-    <FormattedMessage
-      defaultMessage="Learn more about advanced problem types"
-      description="Label for Learn more about advanced problem types button"
-      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
-    />
-  </Hyperlink>
-</Col>
-`;
-
-exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is circuitschematic 1`] = `
-<Col
-  className="justify-content-center"
-  md={8}
-  xs={12}
->
-  <Form.Group
-    className="border rounded text-primary-500 p-0"
-  >
-    <ActionRow
-      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
-    >
-      <IconButton
-        alt="Go back"
-        iconAs="Icon"
-        onClick={[Function]}
-      />
-      <ActionRow.Spacer />
-      <Form.Label
-        className="h4"
-      >
-        <FormattedMessage
-          defaultMessage="Advanced problems"
-          description="Title for advanced problem menu"
-          id="authoring.problemEditor.advanceProblem.menu.title"
-        />
-      </Form.Label>
-      <ActionRow.Spacer />
-    </ActionRow>
-    <RadioSet
-      className="px-4"
-      name="advanceTypes"
-      onChange={[Function]}
-      value="circuitschematic"
-    >
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="blankadvanced"
-      >
-        <Radio
-          id="blankadvanced"
-          value="blankadvanced"
-        >
-          Blank problem
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="circuitschematic"
-      >
-        <Radio
-          id="circuitschematic"
-          value="circuitschematic"
-        >
-          Circuit schematic builder
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-circuitschematic"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="jsinputresponse"
-      >
-        <Radio
-          id="jsinputresponse"
-          value="jsinputresponse"
-        >
-          Custom JavaScript display and grading
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="customgrader"
-      >
-        <Radio
-          id="customgrader"
-          value="customgrader"
-        >
-          Custom Python-evaluated input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-customgrader"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Provisional
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="imageresponse"
-      >
-        <Radio
-          id="imageresponse"
-          value="imageresponse"
-        >
-          Image mapped input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-imageresponse"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="formularesponse"
-      >
-        <Radio
-          id="formularesponse"
-          value="formularesponse"
-        >
-          Math expression input
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="problemwithhint"
-      >
-        <Radio
-          id="problemwithhint"
-          value="problemwithhint"
-        >
-          Problem with adaptive hint
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-problemwithhint"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-    </RadioSet>
-  </Form.Group>
-  <Hyperlink
-    destination="https://docs.openedx.org/en/latest/educators/references/course_development/exercise_tools/guide_problem_types.html#advanced-problem-types"
-    target="_blank"
-  >
-    <FormattedMessage
-      defaultMessage="Learn more about advanced problem types"
-      description="Label for Learn more about advanced problem types button"
-      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
-    />
-  </Hyperlink>
-</Col>
-`;
-
-exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is customgrader 1`] = `
-<Col
-  className="justify-content-center"
-  md={8}
-  xs={12}
->
-  <Form.Group
-    className="border rounded text-primary-500 p-0"
-  >
-    <ActionRow
-      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
-    >
-      <IconButton
-        alt="Go back"
-        iconAs="Icon"
-        onClick={[Function]}
-      />
-      <ActionRow.Spacer />
-      <Form.Label
-        className="h4"
-      >
-        <FormattedMessage
-          defaultMessage="Advanced problems"
-          description="Title for advanced problem menu"
-          id="authoring.problemEditor.advanceProblem.menu.title"
-        />
-      </Form.Label>
-      <ActionRow.Spacer />
-    </ActionRow>
-    <RadioSet
-      className="px-4"
-      name="advanceTypes"
-      onChange={[Function]}
-      value="customgrader"
-    >
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="blankadvanced"
-      >
-        <Radio
-          id="blankadvanced"
-          value="blankadvanced"
-        >
-          Blank problem
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="circuitschematic"
-      >
-        <Radio
-          id="circuitschematic"
-          value="circuitschematic"
-        >
-          Circuit schematic builder
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-circuitschematic"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="jsinputresponse"
-      >
-        <Radio
-          id="jsinputresponse"
-          value="jsinputresponse"
-        >
-          Custom JavaScript display and grading
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="customgrader"
-      >
-        <Radio
-          id="customgrader"
-          value="customgrader"
-        >
-          Custom Python-evaluated input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-customgrader"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Provisional
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="imageresponse"
-      >
-        <Radio
-          id="imageresponse"
-          value="imageresponse"
-        >
-          Image mapped input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-imageresponse"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="formularesponse"
-      >
-        <Radio
-          id="formularesponse"
-          value="formularesponse"
-        >
-          Math expression input
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="problemwithhint"
-      >
-        <Radio
-          id="problemwithhint"
-          value="problemwithhint"
-        >
-          Problem with adaptive hint
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-problemwithhint"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-    </RadioSet>
-  </Form.Group>
-  <Hyperlink
-    destination="https://docs.openedx.org/en/latest/educators/references/course_development/exercise_tools/guide_problem_types.html#advanced-problem-types"
-    target="_blank"
-  >
-    <FormattedMessage
-      defaultMessage="Learn more about advanced problem types"
-      description="Label for Learn more about advanced problem types button"
-      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
-    />
-  </Hyperlink>
-</Col>
-`;
-
-exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is formularesponse 1`] = `
-<Col
-  className="justify-content-center"
-  md={8}
-  xs={12}
->
-  <Form.Group
-    className="border rounded text-primary-500 p-0"
-  >
-    <ActionRow
-      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
-    >
-      <IconButton
-        alt="Go back"
-        iconAs="Icon"
-        onClick={[Function]}
-      />
-      <ActionRow.Spacer />
-      <Form.Label
-        className="h4"
-      >
-        <FormattedMessage
-          defaultMessage="Advanced problems"
-          description="Title for advanced problem menu"
-          id="authoring.problemEditor.advanceProblem.menu.title"
-        />
-      </Form.Label>
-      <ActionRow.Spacer />
-    </ActionRow>
-    <RadioSet
-      className="px-4"
-      name="advanceTypes"
-      onChange={[Function]}
-      value="formularesponse"
-    >
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="blankadvanced"
-      >
-        <Radio
-          id="blankadvanced"
-          value="blankadvanced"
-        >
-          Blank problem
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="circuitschematic"
-      >
-        <Radio
-          id="circuitschematic"
-          value="circuitschematic"
-        >
-          Circuit schematic builder
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-circuitschematic"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="jsinputresponse"
-      >
-        <Radio
-          id="jsinputresponse"
-          value="jsinputresponse"
-        >
-          Custom JavaScript display and grading
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="customgrader"
-      >
-        <Radio
-          id="customgrader"
-          value="customgrader"
-        >
-          Custom Python-evaluated input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-customgrader"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Provisional
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="imageresponse"
-      >
-        <Radio
-          id="imageresponse"
-          value="imageresponse"
-        >
-          Image mapped input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-imageresponse"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="formularesponse"
-      >
-        <Radio
-          id="formularesponse"
-          value="formularesponse"
-        >
-          Math expression input
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="problemwithhint"
-      >
-        <Radio
-          id="problemwithhint"
-          value="problemwithhint"
-        >
-          Problem with adaptive hint
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-problemwithhint"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-    </RadioSet>
-  </Form.Group>
-  <Hyperlink
-    destination="https://docs.openedx.org/en/latest/educators/references/course_development/exercise_tools/guide_problem_types.html#advanced-problem-types"
-    target="_blank"
-  >
-    <FormattedMessage
-      defaultMessage="Learn more about advanced problem types"
-      description="Label for Learn more about advanced problem types button"
-      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
-    />
-  </Hyperlink>
-</Col>
-`;
-
-exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is imageresponse 1`] = `
-<Col
-  className="justify-content-center"
-  md={8}
-  xs={12}
->
-  <Form.Group
-    className="border rounded text-primary-500 p-0"
-  >
-    <ActionRow
-      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
-    >
-      <IconButton
-        alt="Go back"
-        iconAs="Icon"
-        onClick={[Function]}
-      />
-      <ActionRow.Spacer />
-      <Form.Label
-        className="h4"
-      >
-        <FormattedMessage
-          defaultMessage="Advanced problems"
-          description="Title for advanced problem menu"
-          id="authoring.problemEditor.advanceProblem.menu.title"
-        />
-      </Form.Label>
-      <ActionRow.Spacer />
-    </ActionRow>
-    <RadioSet
-      className="px-4"
-      name="advanceTypes"
-      onChange={[Function]}
-      value="imageresponse"
-    >
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="blankadvanced"
-      >
-        <Radio
-          id="blankadvanced"
-          value="blankadvanced"
-        >
-          Blank problem
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="circuitschematic"
-      >
-        <Radio
-          id="circuitschematic"
-          value="circuitschematic"
-        >
-          Circuit schematic builder
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-circuitschematic"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="jsinputresponse"
-      >
-        <Radio
-          id="jsinputresponse"
-          value="jsinputresponse"
-        >
-          Custom JavaScript display and grading
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="customgrader"
-      >
-        <Radio
-          id="customgrader"
-          value="customgrader"
-        >
-          Custom Python-evaluated input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-customgrader"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Provisional
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="imageresponse"
-      >
-        <Radio
-          id="imageresponse"
-          value="imageresponse"
-        >
-          Image mapped input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-imageresponse"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="formularesponse"
-      >
-        <Radio
-          id="formularesponse"
-          value="formularesponse"
-        >
-          Math expression input
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="problemwithhint"
-      >
-        <Radio
-          id="problemwithhint"
-          value="problemwithhint"
-        >
-          Problem with adaptive hint
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-problemwithhint"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-    </RadioSet>
-  </Form.Group>
-  <Hyperlink
-    destination="https://docs.openedx.org/en/latest/educators/references/course_development/exercise_tools/guide_problem_types.html#advanced-problem-types"
-    target="_blank"
-  >
-    <FormattedMessage
-      defaultMessage="Learn more about advanced problem types"
-      description="Label for Learn more about advanced problem types button"
-      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
-    />
-  </Hyperlink>
-</Col>
-`;
-
-exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is jsinputresponse 1`] = `
-<Col
-  className="justify-content-center"
-  md={8}
-  xs={12}
->
-  <Form.Group
-    className="border rounded text-primary-500 p-0"
-  >
-    <ActionRow
-      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
-    >
-      <IconButton
-        alt="Go back"
-        iconAs="Icon"
-        onClick={[Function]}
-      />
-      <ActionRow.Spacer />
-      <Form.Label
-        className="h4"
-      >
-        <FormattedMessage
-          defaultMessage="Advanced problems"
-          description="Title for advanced problem menu"
-          id="authoring.problemEditor.advanceProblem.menu.title"
-        />
-      </Form.Label>
-      <ActionRow.Spacer />
-    </ActionRow>
-    <RadioSet
-      className="px-4"
-      name="advanceTypes"
-      onChange={[Function]}
-      value="jsinputresponse"
-    >
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="blankadvanced"
-      >
-        <Radio
-          id="blankadvanced"
-          value="blankadvanced"
-        >
-          Blank problem
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="circuitschematic"
-      >
-        <Radio
-          id="circuitschematic"
-          value="circuitschematic"
-        >
-          Circuit schematic builder
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-circuitschematic"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="jsinputresponse"
-      >
-        <Radio
-          id="jsinputresponse"
-          value="jsinputresponse"
-        >
-          Custom JavaScript display and grading
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="customgrader"
-      >
-        <Radio
-          id="customgrader"
-          value="customgrader"
-        >
-          Custom Python-evaluated input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-customgrader"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Provisional
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="imageresponse"
-      >
-        <Radio
-          id="imageresponse"
-          value="imageresponse"
-        >
-          Image mapped input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-imageresponse"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="formularesponse"
-      >
-        <Radio
-          id="formularesponse"
-          value="formularesponse"
-        >
-          Math expression input
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="problemwithhint"
-      >
-        <Radio
-          id="problemwithhint"
-          value="problemwithhint"
-        >
-          Problem with adaptive hint
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-problemwithhint"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-    </RadioSet>
-  </Form.Group>
-  <Hyperlink
-    destination="https://docs.openedx.org/en/latest/educators/references/course_development/exercise_tools/guide_problem_types.html#advanced-problem-types"
-    target="_blank"
-  >
-    <FormattedMessage
-      defaultMessage="Learn more about advanced problem types"
-      description="Label for Learn more about advanced problem types button"
-      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
-    />
-  </Hyperlink>
-</Col>
-`;
-
-exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is problemwithhint 1`] = `
-<Col
-  className="justify-content-center"
-  md={8}
-  xs={12}
->
-  <Form.Group
-    className="border rounded text-primary-500 p-0"
-  >
-    <ActionRow
-      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
-    >
-      <IconButton
-        alt="Go back"
-        iconAs="Icon"
-        onClick={[Function]}
-      />
-      <ActionRow.Spacer />
-      <Form.Label
-        className="h4"
-      >
-        <FormattedMessage
-          defaultMessage="Advanced problems"
-          description="Title for advanced problem menu"
-          id="authoring.problemEditor.advanceProblem.menu.title"
-        />
-      </Form.Label>
-      <ActionRow.Spacer />
-    </ActionRow>
-    <RadioSet
-      className="px-4"
-      name="advanceTypes"
-      onChange={[Function]}
-      value="problemwithhint"
-    >
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="blankadvanced"
-      >
-        <Radio
-          id="blankadvanced"
-          value="blankadvanced"
-        >
-          Blank problem
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="circuitschematic"
-      >
-        <Radio
-          id="circuitschematic"
-          value="circuitschematic"
-        >
-          Circuit schematic builder
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-circuitschematic"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="jsinputresponse"
-      >
-        <Radio
-          id="jsinputresponse"
-          value="jsinputresponse"
-        >
-          Custom JavaScript display and grading
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="customgrader"
-      >
-        <Radio
-          id="customgrader"
-          value="customgrader"
-        >
-          Custom Python-evaluated input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-customgrader"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Provisional
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="imageresponse"
-      >
-        <Radio
-          id="imageresponse"
-          value="imageresponse"
-        >
-          Image mapped input
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-imageresponse"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="formularesponse"
-      >
-        <Radio
-          id="formularesponse"
-          value="formularesponse"
-        >
-          Math expression input
-        </Radio>
-        <ActionRow.Spacer />
-      </ActionRow>
-      <ActionRow
-        className="border-primary-100 border-bottom m-0 py-3 w-100"
-        key="problemwithhint"
-      >
-        <Radio
-          id="problemwithhint"
-          value="problemwithhint"
-        >
-          Problem with adaptive hint
-        </Radio>
-        <ActionRow.Spacer />
-        <OverlayTrigger
-          overlay={
-            <Tooltip
-              id="tooltip-adv-problemwithhint"
-            >
-              <div
-                className="text-left"
-              >
-                {supportStatus,  select,
-      Provisional {Provisionally supported tools might lack the robustness of functionality
-        that your courses require. edX does not have control over the quality of the software,
-        or of the content that can be provided using these tools.
-        
- 
-
-        Test these tools thoroughly before using them in your course, especially in graded
-        sections. Complete documentstion might not be available for provisionally supported
-        tools, or documentation might be available from sources other than edX.}
-      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
-        in the future. They are not recommened for use in courses due to non-compliance with one
-        or more of the base requirements, such as testing, accessibility, internationalization,
-        and documentation.}
-      other { } 
-    }
-              </div>
-            </Tooltip>
-          }
-          placement="right"
-        >
-          <div
-            className="text-gray-500"
-          >
-            Not supported
-          </div>
-        </OverlayTrigger>
-      </ActionRow>
-    </RadioSet>
-  </Form.Group>
-  <Hyperlink
-    destination="https://docs.openedx.org/en/latest/educators/references/course_development/exercise_tools/guide_problem_types.html#advanced-problem-types"
-    target="_blank"
-  >
-    <FormattedMessage
-      defaultMessage="Learn more about advanced problem types"
-      description="Label for Learn more about advanced problem types button"
-      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
-    />
-  </Hyperlink>
-</Col>
-`;

src/editors/sharedComponents/SelectionModal/GalleryCard.test.jsx

@@ -1,46 +0,0 @@
-import 'CourseAuthoring/editors/setupEditorTest';
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { Image } from '@openedx/paragon';
-import GalleryCard from './GalleryCard';
-
-describe('GalleryCard component', () => {
-  const asset = {
-    externalUrl: 'props.img.externalUrl',
-    displayName: 'props.img.displayName',
-    dateAdded: 12345,
-  };
-  const thumbnailFallback = (<span>Image failed to load</span>);
-  let el;
-  beforeEach(() => {
-    el = shallow(<GalleryCard asset={asset} />);
-  });
-  test(`snapshot: dateAdded=${asset.dateAdded}`, () => {
-    expect(el.snapshot).toMatchSnapshot();
-  });
-  it('loads Image with src from image external url', () => {
-    expect(el.instance.findByType(Image)[0].props.src).toEqual(asset.externalUrl);
-  });
-  it('snapshot with thumbnail fallback and load error', () => {
-    el = shallow(<GalleryCard asset={asset} thumbnailFallback={thumbnailFallback} />);
-    el.instance.findByType(Image)[0].props.onError();
-    expect(el.snapshot).toMatchSnapshot();
-  });
-  it('snapshot with thumbnail fallback and no error', () => {
-    el = shallow(<GalleryCard asset={asset} thumbnailFallback={thumbnailFallback} />);
-    expect(el.snapshot).toMatchSnapshot();
-  });
-  it('snapshot with status badge', () => {
-    el = shallow(<GalleryCard asset={{ ...asset, status: 'failed', statusBadgeVariant: 'danger' }} />);
-    expect(el.snapshot).toMatchSnapshot();
-  });
-  it('snapshot with duration badge', () => {
-    el = shallow(<GalleryCard asset={{ ...asset, duration: 60 }} />);
-    expect(el.snapshot).toMatchSnapshot();
-  });
-  it('snapshot with duration transcripts', () => {
-    el = shallow(<GalleryCard asset={{ ...asset, transcripts: ['es'] }} />);
-    expect(el.snapshot).toMatchSnapshot();
-  });
-});

src/editors/sharedComponents/SelectionModal/GalleryCard.test.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import {
+  render, screen, fireEvent, initializeMocks,
+} from '../../../testUtils';
+import GalleryCard from './GalleryCard';
+
+jest.mock('../../utils', () => ({
+  formatDuration: (duration) => `Duration: ${duration}`,
+}));
+
+jest.mock(
+  '../../containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget',
+  () => function mockLanguageNamesWidget({ transcripts }) {
+    return <div>Languages: {transcripts && transcripts.join(', ')}</div>;
+  },
+);
+
+const baseAsset = {
+  contentType: 'video/mp4',
+  displayName: 'Test Video',
+  externalUrl: 'http://example.com/video.mp4',
+  id: 'asset-1',
+  dateAdded: new Date('2023-01-01T12:00:00Z'),
+  locked: false,
+  portableUrl: 'http://example.com/portable.mp4',
+  thumbnail: 'http://example.com/thumb.jpg',
+  url: 'http://example.com/video.mp4',
+  duration: 120,
+  status: 'ready',
+  statusMessage: { id: 'status.ready', defaultMessage: 'Ready' },
+  statusBadgeVariant: 'success',
+  transcripts: ['en', 'es'],
+};
+
+describe('GalleryCard', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders component on screen', () => {
+    render(<GalleryCard asset={baseAsset} />);
+    expect(screen.getByText('Test Video')).toBeInTheDocument();
+  });
+
+  it('renders image with correct src', () => {
+    render(<GalleryCard asset={baseAsset} />);
+    expect(screen.getByRole('img')).toHaveAttribute('src', baseAsset.externalUrl);
+  });
+
+  it('renders status badge when statusMessage and statusBadgeVariant are present', () => {
+    render(<GalleryCard asset={baseAsset} />);
+    expect(screen.getByText('Ready')).toBeInTheDocument();
+  });
+
+  it('renders duration badge when duration is >= 0', () => {
+    render(<GalleryCard asset={baseAsset} />);
+    expect(screen.getByText('Duration: 120')).toBeInTheDocument();
+  });
+
+  it('renders LanguageNamesWidget when transcripts are present', () => {
+    render(<GalleryCard asset={baseAsset} />);
+    expect(screen.getByText('Languages: en, es')).toBeInTheDocument();
+  });
+
+  it('renders added date and time when dateAdded is present', () => {
+    render(<GalleryCard asset={baseAsset} />);
+    const dateAdded = screen.getByText(/Added/);
+    expect(dateAdded).toBeInTheDocument();
+    expect(dateAdded.innerHTML).toContain('1/1/2023');
+    expect(dateAdded.innerHTML).toContain('12:00 PM');
+  });
+
+  it('renders thumbnailFallback when image fails to load', () => {
+    const assetWithError = { ...baseAsset, externalUrl: 'error' };
+    const fallback = <div>Fallback Image</div>;
+    render(<GalleryCard asset={assetWithError} thumbnailFallback={fallback} />);
+    fireEvent.error(screen.getByRole('img'));
+    expect(screen.getByText('Fallback Image')).toBeInTheDocument();
+  });
+
+  it('does not render status badge if statusMessage or statusBadgeVariant is missing', () => {
+    const asset = { ...baseAsset, statusMessage: null };
+    render(<GalleryCard asset={asset} />);
+    expect(screen.queryByText('Ready')).not.toBeInTheDocument();
+  });
+
+  it('does not render duration badge if duration is undefined', () => {
+    const asset = { ...baseAsset, duration: undefined };
+    render(<GalleryCard asset={asset} />);
+    expect(screen.queryByText(/Duration:/)).not.toBeInTheDocument();
+  });
+
+  it('does not render LanguageNamesWidget if transcripts is missing', () => {
+    const asset = { ...baseAsset, transcripts: undefined };
+    render(<GalleryCard asset={asset} />);
+    expect(screen.queryByText(/Languages:/)).not.toBeInTheDocument();
+  });
+
+  it('does not render added date if dateAdded is missing', () => {
+    const asset = { ...baseAsset, dateAdded: undefined };
+    render(<GalleryCard asset={asset} />);
+    expect(screen.queryByText(/Added/)).not.toBeInTheDocument();
+  });
+});

src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap

@@ -1,505 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GalleryCard component snapshot with duration badge 1`] = `
-<ForwardRef
-  checked={false}
-  className="card bg-white shadow-none border-0 py-0"
-  inputHidden={true}
-  isIndeterminate={false}
-  isInvalid={false}
-  key="props.img.externalUrl"
-  onClick={[Function]}
-  onFocus={[Function]}
-  type="radio"
->
-  <div
-    className="card-div d-flex flex-row flex-nowrap align-items-center"
-  >
-    <div
-      className="position-relative"
-      style={
-        {
-          "height": "100px",
-          "width": "200px",
-        }
-      }
-    >
-      <Image
-        src="props.img.externalUrl"
-        style={
-          {
-            "border": "none",
-            "height": "100px",
-            "width": "200px",
-          }
-        }
-      />
-      <Badge
-        style={
-          {
-            "backgroundColor": "black",
-            "bottom": "6px",
-            "position": "absolute",
-            "right": "6px",
-          }
-        }
-        variant="dark"
-      >
-        01:00
-      </Badge>
-    </div>
-    <div
-      className="card-text px-3 py-2"
-      style={
-        {
-          "marginTop": "10px",
-        }
-      }
-    >
-      <h3
-        className="text-primary-500"
-      >
-        <Truncate>
-          props.img.displayName
-        </Truncate>
-      </h3>
-      <p
-        className="text-gray-500"
-        style={
-          {
-            "fontSize": "11px",
-          }
-        }
-      >
-        <FormattedMessage
-          defaultMessage="Added {date} at {time}"
-          description="File date-added string"
-          id="authoring.selectionmodal.addedDate.label"
-          values={
-            {
-              "date": <FormattedDate
-                value={12345}
-              />,
-              "time": <FormattedTime
-                value={12345}
-              />,
-            }
-          }
-        />
-      </p>
-    </div>
-  </div>
-</ForwardRef>
-`;
-
-exports[`GalleryCard component snapshot with duration transcripts 1`] = `
-<ForwardRef
-  checked={false}
-  className="card bg-white shadow-none border-0 py-0"
-  inputHidden={true}
-  isIndeterminate={false}
-  isInvalid={false}
-  key="props.img.externalUrl"
-  onClick={[Function]}
-  onFocus={[Function]}
-  type="radio"
->
-  <div
-    className="card-div d-flex flex-row flex-nowrap align-items-center"
-  >
-    <div
-      className="position-relative"
-      style={
-        {
-          "height": "100px",
-          "width": "200px",
-        }
-      }
-    >
-      <Image
-        src="props.img.externalUrl"
-        style={
-          {
-            "border": "none",
-            "height": "100px",
-            "width": "200px",
-          }
-        }
-      />
-    </div>
-    <div
-      className="card-text px-3 py-2"
-      style={
-        {
-          "marginTop": "10px",
-        }
-      }
-    >
-      <h3
-        className="text-primary-500"
-      >
-        <Truncate>
-          props.img.displayName
-        </Truncate>
-      </h3>
-      <div
-        style={
-          {
-            "margin": "0 0 5px 0",
-          }
-        }
-      >
-        <injectIntl(ShimmedIntlComponent)
-          transcripts={
-            [
-              "es",
-            ]
-          }
-        />
-      </div>
-      <p
-        className="text-gray-500"
-        style={
-          {
-            "fontSize": "11px",
-          }
-        }
-      >
-        <FormattedMessage
-          defaultMessage="Added {date} at {time}"
-          description="File date-added string"
-          id="authoring.selectionmodal.addedDate.label"
-          values={
-            {
-              "date": <FormattedDate
-                value={12345}
-              />,
-              "time": <FormattedTime
-                value={12345}
-              />,
-            }
-          }
-        />
-      </p>
-    </div>
-  </div>
-</ForwardRef>
-`;
-
-exports[`GalleryCard component snapshot with status badge 1`] = `
-<ForwardRef
-  checked={false}
-  className="card bg-white shadow-none border-0 py-0"
-  inputHidden={true}
-  isIndeterminate={false}
-  isInvalid={false}
-  key="props.img.externalUrl"
-  onClick={[Function]}
-  onFocus={[Function]}
-  type="radio"
->
-  <div
-    className="card-div d-flex flex-row flex-nowrap align-items-center"
-  >
-    <div
-      className="position-relative"
-      style={
-        {
-          "height": "100px",
-          "width": "200px",
-        }
-      }
-    >
-      <Image
-        src="props.img.externalUrl"
-        style={
-          {
-            "border": "none",
-            "height": "100px",
-            "width": "200px",
-          }
-        }
-      />
-    </div>
-    <div
-      className="card-text px-3 py-2"
-      style={
-        {
-          "marginTop": "10px",
-        }
-      }
-    >
-      <h3
-        className="text-primary-500"
-      >
-        <Truncate>
-          props.img.displayName
-        </Truncate>
-      </h3>
-      <p
-        className="text-gray-500"
-        style={
-          {
-            "fontSize": "11px",
-          }
-        }
-      >
-        <FormattedMessage
-          defaultMessage="Added {date} at {time}"
-          description="File date-added string"
-          id="authoring.selectionmodal.addedDate.label"
-          values={
-            {
-              "date": <FormattedDate
-                value={12345}
-              />,
-              "time": <FormattedTime
-                value={12345}
-              />,
-            }
-          }
-        />
-      </p>
-    </div>
-  </div>
-</ForwardRef>
-`;
-
-exports[`GalleryCard component snapshot with thumbnail fallback and load error 1`] = `
-<ForwardRef
-  checked={false}
-  className="card bg-white shadow-none border-0 py-0"
-  inputHidden={true}
-  isIndeterminate={false}
-  isInvalid={false}
-  key="props.img.externalUrl"
-  onClick={[Function]}
-  onFocus={[Function]}
-  type="radio"
->
-  <div
-    className="card-div d-flex flex-row flex-nowrap align-items-center"
-  >
-    <div
-      className="position-relative"
-      style={
-        {
-          "height": "100px",
-          "width": "200px",
-        }
-      }
-    >
-      <Image
-        onError={[Function]}
-        src="props.img.externalUrl"
-        style={
-          {
-            "border": "none",
-            "height": "100px",
-            "width": "200px",
-          }
-        }
-      />
-    </div>
-    <div
-      className="card-text px-3 py-2"
-      style={
-        {
-          "marginTop": "10px",
-        }
-      }
-    >
-      <h3
-        className="text-primary-500"
-      >
-        <Truncate>
-          props.img.displayName
-        </Truncate>
-      </h3>
-      <p
-        className="text-gray-500"
-        style={
-          {
-            "fontSize": "11px",
-          }
-        }
-      >
-        <FormattedMessage
-          defaultMessage="Added {date} at {time}"
-          description="File date-added string"
-          id="authoring.selectionmodal.addedDate.label"
-          values={
-            {
-              "date": <FormattedDate
-                value={12345}
-              />,
-              "time": <FormattedTime
-                value={12345}
-              />,
-            }
-          }
-        />
-      </p>
-    </div>
-  </div>
-</ForwardRef>
-`;
-
-exports[`GalleryCard component snapshot with thumbnail fallback and no error 1`] = `
-<ForwardRef
-  checked={false}
-  className="card bg-white shadow-none border-0 py-0"
-  inputHidden={true}
-  isIndeterminate={false}
-  isInvalid={false}
-  key="props.img.externalUrl"
-  onClick={[Function]}
-  onFocus={[Function]}
-  type="radio"
->
-  <div
-    className="card-div d-flex flex-row flex-nowrap align-items-center"
-  >
-    <div
-      className="position-relative"
-      style={
-        {
-          "height": "100px",
-          "width": "200px",
-        }
-      }
-    >
-      <Image
-        onError={[Function]}
-        src="props.img.externalUrl"
-        style={
-          {
-            "border": "none",
-            "height": "100px",
-            "width": "200px",
-          }
-        }
-      />
-    </div>
-    <div
-      className="card-text px-3 py-2"
-      style={
-        {
-          "marginTop": "10px",
-        }
-      }
-    >
-      <h3
-        className="text-primary-500"
-      >
-        <Truncate>
-          props.img.displayName
-        </Truncate>
-      </h3>
-      <p
-        className="text-gray-500"
-        style={
-          {
-            "fontSize": "11px",
-          }
-        }
-      >
-        <FormattedMessage
-          defaultMessage="Added {date} at {time}"
-          description="File date-added string"
-          id="authoring.selectionmodal.addedDate.label"
-          values={
-            {
-              "date": <FormattedDate
-                value={12345}
-              />,
-              "time": <FormattedTime
-                value={12345}
-              />,
-            }
-          }
-        />
-      </p>
-    </div>
-  </div>
-</ForwardRef>
-`;
-
-exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `
-<ForwardRef
-  checked={false}
-  className="card bg-white shadow-none border-0 py-0"
-  inputHidden={true}
-  isIndeterminate={false}
-  isInvalid={false}
-  key="props.img.externalUrl"
-  onClick={[Function]}
-  onFocus={[Function]}
-  type="radio"
->
-  <div
-    className="card-div d-flex flex-row flex-nowrap align-items-center"
-  >
-    <div
-      className="position-relative"
-      style={
-        {
-          "height": "100px",
-          "width": "200px",
-        }
-      }
-    >
-      <Image
-        src="props.img.externalUrl"
-        style={
-          {
-            "border": "none",
-            "height": "100px",
-            "width": "200px",
-          }
-        }
-      />
-    </div>
-    <div
-      className="card-text px-3 py-2"
-      style={
-        {
-          "marginTop": "10px",
-        }
-      }
-    >
-      <h3
-        className="text-primary-500"
-      >
-        <Truncate>
-          props.img.displayName
-        </Truncate>
-      </h3>
-      <p
-        className="text-gray-500"
-        style={
-          {
-            "fontSize": "11px",
-          }
-        }
-      >
-        <FormattedMessage
-          defaultMessage="Added {date} at {time}"
-          description="File date-added string"
-          id="authoring.selectionmodal.addedDate.label"
-          values={
-            {
-              "date": <FormattedDate
-                value={12345}
-              />,
-              "time": <FormattedTime
-                value={12345}
-              />,
-            }
-          }
-        />
-      </p>
-    </div>
-  </div>
-</ForwardRef>
-`;

src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap

@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SourceCodeModal renders as expected with default behavior 1`] = `
-<BaseModal
-  bodyStyle={
-    {
-      "maxHeight": NaN,
-    }
-  }
-  close={[MockFunction]}
-  confirmAction={
-    <Button
-      0="S"
-      1="o"
-      2="M"
-      3="e"
-      4="v"
-      5="A"
-      6="l"
-      7="u"
-      8="e"
-      variant="primary"
-    >
-      <FormattedMessage
-        defaultMessage="Save"
-        description="Label for Save button for the source code editor"
-        id="authoring.texteditor.sourcecodemodal.next.label"
-      />
-    </Button>
-  }
-  footerAction={null}
-  headerComponent={null}
-  hideCancelButton={false}
-  isFullscreenScroll={true}
-  isOpen={false}
-  size="xl"
-  title="Edit Source Code"
->
-  <div
-    className="px-4.5 pt-2.5"
-  >
-    <injectIntl(ShimmedIntlComponent)
-      innerRef="moCKrEf"
-      lang="html"
-      value="mOckHtMl"
-    />
-  </div>
-</BaseModal>
-`;

src/editors/sharedComponents/SourceCodeModal/index.jsx

@@ -2,8 +2,7 @@ import PropTypes from 'prop-types';
 
 import {
   FormattedMessage,
-  injectIntl,
-  intlShape,
+  useIntl,
 } from '@edx/frontend-platform/i18n';
 
 import { Button, useWindowSize } from '@openedx/paragon';
@@ -17,11 +16,10 @@ const SourceCodeModal = ({
   isOpen,
   close,
   editorRef,
-  // injected
-  intl,
 }) => {
   const { saveBtnProps, value, ref } = hooks.prepareSourceCodeModal({ editorRef, close });
   const { height } = useWindowSize();
+  const intl = useIntl();
 
   return (
     <BaseModal
@@ -55,9 +53,6 @@ SourceCodeModal.propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     PropTypes.shape({ current: PropTypes.any }),
   ]).isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export const SourceCodeModalInternal = SourceCodeModal; // For testing only
-export default injectIntl(SourceCodeModal);
+export default SourceCodeModal;

src/editors/sharedComponents/SourceCodeModal/index.test.jsx

@@ -1,37 +0,0 @@
-import 'CourseAuthoring/editors/setupEditorTest';
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import * as hooks from './hooks';
-import { formatMessage } from '../../testUtils';
-
-import { SourceCodeModalInternal as SourceCodeModal } from '.';
-
-jest.mock('./hooks', () => ({
-  prepareSourceCodeModal: jest.fn(() => {
-
-  }),
-}));
-
-describe('SourceCodeModal', () => {
-  const mockClose = jest.fn();
-
-  const props = {
-    isOpen: false,
-    close: mockClose,
-    editorRef: {
-      current: jest.fn(),
-    },
-    intl: { formatMessage },
-  };
-  test('renders as expected with default behavior', () => {
-    const mocksaveBtnProps = 'SoMevAlue';
-    const mockvalue = 'mOckHtMl';
-    const mockref = 'moCKrEf';
-    hooks.prepareSourceCodeModal.mockReturnValueOnce({
-      saveBtnProps: mocksaveBtnProps,
-      value: mockvalue,
-      ref: mockref,
-    });
-    expect(shallow(<SourceCodeModal {...props} />).snapshot).toMatchSnapshot();
-  });
-});

src/editors/sharedComponents/SourceCodeModal/index.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useWindowSize } from '@openedx/paragon';
+import { render, screen, initializeMocks } from '../../../testUtils';
+import SourceCodeModal from './index';
+import * as hooks from './hooks';
+
+jest.mock('../BaseModal', () => jest.fn(({ children, ...props }) => (
+  <div data-base-modal {...props}>{children}</div>
+)));
+jest.mock('../CodeEditor', () => jest.fn(({ innerRef, value, lang }) => (
+  <div data-code-editor data-lang={lang} data-value={value} ref={innerRef}>CodeEditor</div>
+)));
+jest.mock('./hooks', () => ({
+  prepareSourceCodeModal: jest.fn().mockReturnValue({
+    saveBtnProps: { onClick: jest.fn() },
+    value: '<p>test</p>',
+    ref: React.createRef(),
+  }),
+}));
+jest.mock('@openedx/paragon', () => ({
+  useWindowSize: jest.fn().mockReturnValue({ height: 800 }),
+}));
+
+describe('SourceCodeModal', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders component', () => {
+    const mockEditorRef = React.createRef();
+    const mockClose = jest.fn();
+    render(
+      <SourceCodeModal isOpen close={mockClose} editorRef={mockEditorRef} />,
+    );
+    const modal = screen.getByTitle('Edit Source Code');
+    expect(modal).toBeInTheDocument();
+    expect(hooks.prepareSourceCodeModal).toHaveBeenCalledWith({ editorRef: mockEditorRef, close: mockClose });
+    expect(useWindowSize).toHaveBeenCalled();
+  });
+});