test: improve test coverage of SelectTypeModal, refactor some code

openedx · Sep 16, 2024 · 64be177 · 64be177
1 parent 6b8f6ff
commit 64be177
Show file tree

Hide file tree

Showing 13 changed files with 132 additions and 211 deletions.
diff --git a/...ontainers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/SelectTypeFooter.jsx b/...ontainers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/SelectTypeFooter.jsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
+import { useDispatch, useSelector } from 'react-redux';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Button,
   ModalDialog,
 } from '@openedx/paragon';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import * as hooks from '../hooks';
 
@@ -16,68 +15,55 @@ import { actions, selectors } from '../../../../../data/redux';
 const SelectTypeFooter = ({
   onCancel,
   selected,
-  // redux
-  defaultSettings,
-  updateField,
-  setBlockTitle,
-  // injected,
-  intl,
-}) => (
-  <div className="editor-footer fixed-bottom">
-    <ModalDialog.Footer className="border-top-0">
-      <ActionRow>
-        <ActionRow.Spacer />
-        <Button
-          aria-label={intl.formatMessage(messages.cancelButtonAriaLabel)}
-          variant="tertiary"
-          onClick={onCancel}
-        >
-          <FormattedMessage {...messages.cancelButtonLabel} />
-        </Button>
-        <Button
-          aria-label={intl.formatMessage(messages.selectButtonAriaLabel)}
-          onClick={hooks.onSelect({
-            selected,
-            updateField,
-            setBlockTitle,
-            defaultSettings,
-          })}
-          disabled={!selected}
-        >
-          <FormattedMessage {...messages.selectButtonLabel} />
-        </Button>
-      </ActionRow>
-    </ModalDialog.Footer>
-  </div>
-);
+}) => {
+  const intl = useIntl();
+  const defaultSettings = useSelector(selectors.problem.defaultSettings);
+  const dispatch = useDispatch();
+  const updateField = React.useCallback((data) => dispatch(actions.problem.updateField(data)), [dispatch]);
+  const setBlockTitle = React.useCallback((title) => dispatch(actions.app.setBlockTitle(title)), [dispatch]);
+  return (
+    <div className="editor-footer fixed-bottom">
+      <ModalDialog.Footer className="border-top-0">
+        <ActionRow>
+          <ActionRow.Spacer />
+          <Button
+            aria-label={intl.formatMessage(messages.cancelButtonAriaLabel)}
+            variant="tertiary"
+            onClick={onCancel}
+          >
+            <FormattedMessage {...messages.cancelButtonLabel} />
+          </Button>
+          <Button
+            aria-label={intl.formatMessage(messages.selectButtonAriaLabel)}
+            onClick={hooks.onSelect({
+              selected,
+              updateField,
+              setBlockTitle,
+              defaultSettings,
+            })}
+            disabled={!selected}
+          >
+            <FormattedMessage {...messages.selectButtonLabel} />
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </div>
+  );
+};
 
 SelectTypeFooter.defaultProps = {
   selected: null,
 };
 
 SelectTypeFooter.propTypes = {
-  defaultSettings: PropTypes.shape({
-    maxAttempts: PropTypes.number,
-    rerandomize: PropTypes.string,
-    showResetButton: PropTypes.bool,
-    showanswer: PropTypes.string,
-  }).isRequired,
+  // defaultSettings: PropTypes.shape({
+  //   maxAttempts: PropTypes.number,
+  //   rerandomize: PropTypes.string,
+  //   showResetButton: PropTypes.bool,
+  //   showanswer: PropTypes.string,
+  // }).isRequired,
   onCancel: PropTypes.func.isRequired,
   selected: PropTypes.string,
-  updateField: PropTypes.func.isRequired,
-  setBlockTitle: PropTypes.func.isRequired,
-  // injected
-  intl: intlShape.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
-  defaultSettings: selectors.problem.defaultSettings(state),
-});
-
-export const mapDispatchToProps = {
-  updateField: actions.problem.updateField,
-  setBlockTitle: actions.app.setBlockTitle,
 };
 
-export const SelectTypeFooterInternal = SelectTypeFooter; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SelectTypeFooter));
+export default SelectTypeFooter;
diff --git a/...ners/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/SelectTypeFooter.test.jsx b/...ners/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/SelectTypeFooter.test.jsx
@@ -1,14 +1,10 @@
 import 'CourseAuthoring/editors/setupEditorTest';
-import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
 import { Button } from '@openedx/paragon';
 import { formatMessage } from '../../../../../testUtils';
-import * as module from './SelectTypeFooter';
+import SelectTypeFooter from './SelectTypeFooter';
 import * as hooks from '../hooks';
-import { actions } from '../../../../../data/redux';
-
-const SelectTypeFooter = module.SelectTypeFooterInternal;
 
 jest.mock('../hooks', () => ({
   onSelect: jest.fn().mockName('onSelect'),
@@ -46,15 +42,4 @@ describe('SelectTypeFooter', () => {
         .toEqual(expected);
     });
   });
-
-  describe('mapStateToProps', () => {
-    test('is empty', () => {
-      expect(module.mapDispatchToProps.defaultSettings).toEqual(actions.problem.defaultSettings);
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('loads updateField from problem.updateField actions', () => {
-      expect(module.mapDispatchToProps.updateField).toEqual(actions.problem.updateField);
-    });
-  });
 });
diff --git a/...blemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/index.test.jsx.snap b/...blemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/index.test.jsx.snap
@@ -31,7 +31,7 @@ exports[`SelectTypeWrapper snapshot 1`] = `
       test child
     </h1>
   </ModalDialog.Body>
-  <injectIntl(ShimmedIntlComponent)
+  <SelectTypeFooter
     selected="iMAsElecTedValUE"
   />
 </div>

diff --git a/...ors/containers/ProblemEditor/components/SelectTypeModal/__snapshots__/index.test.jsx.snap b/...ors/containers/ProblemEditor/components/SelectTypeModal/__snapshots__/index.test.jsx.snap
diff --git a/...editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.tsx b/...editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.tsx
@@ -4,12 +4,18 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 // SelectableBox in paragon has a bug where you can't change selection. So we override it
 import SelectableBox from '../../../../../sharedComponents/SelectableBox';
-import { ProblemTypes, ProblemTypeKeys, AdvanceProblemKeys } from '../../../../../data/constants/problem';
+import {
+  ProblemTypes,
+  ProblemTypeKeys,
+  AdvanceProblemKeys,
+  AdvancedProblemType,
+  ProblemType,
+} from '../../../../../data/constants/problem';
 import messages from './messages';
 
 interface Props {
   selected: string;
-  setSelected: (selected: string) => void;
+  setSelected: (selected: ProblemType | AdvancedProblemType) => void;
 }
 
 const ProblemTypeSelect: React.FC<Props> = ({
@@ -18,7 +24,7 @@ const ProblemTypeSelect: React.FC<Props> = ({
 }) => {
   const handleChange = e => setSelected(e.target.value);
   const handleClick = () => setSelected(AdvanceProblemKeys.BLANK);
-  const settings = { 'aria-label': 'checkbox', type: 'radio' };
+  const settings = { type: 'radio' };
 
   return (
     <Container style={{ width: '494px', height: '400px' }}>