test: replacing snapshot tests with RTL tests part 15 (#2248)

Author: jacobo-dominguez-wgu

src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/__snapshots__/index.test.jsx.snap

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
 import { selectors } from '../../../../../data/redux';
@@ -16,9 +16,8 @@ const ExplanationWidget = ({
   images,
   isLibrary,
   blockId,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
   const initialContent = settings?.solutionExplanation || '';
   const newContent = replaceStaticWithAsset({
@@ -66,8 +65,6 @@ ExplanationWidget.propTypes = {
   images: PropTypes.shape({}).isRequired,
   isLibrary: PropTypes.bool.isRequired,
   blockId: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 export const mapStateToProps = (state) => ({
   settings: selectors.problem.settings(state),
@@ -78,4 +75,4 @@ export const mapStateToProps = (state) => ({
 });
 
 export const ExplanationWidgetInternal = ExplanationWidget; // For testing only
-export default injectIntl(connect(mapStateToProps)(ExplanationWidget));
+export default connect(mapStateToProps)(ExplanationWidget);

src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen, initializeMocks } from '@src/testUtils';
+import ExplanationWidget from '.';
+
+jest.mock('../../../../../data/redux', () => ({
+  __esModule: true,
+  default: jest.fn(),
+  selectors: {
+    problem: {
+      settings: jest.fn(state => ({ question: state })),
+    },
+    app: {
+      learningContextId: jest.fn(state => ({ learningContextId: state })),
+      images: jest.fn(state => ({ images: state })),
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+      blockId: jest.fn(state => ({ blockId: state })),
+    },
+  },
+  thunkActions: {
+    video: {
+      importTranscript: jest.fn(),
+    },
+  },
+}));
+
+jest.mock('../../../../../sharedComponents/TinyMceWidget/hooks', () => ({
+  ...jest.requireActual('../../../../../sharedComponents/TinyMceWidget/hooks'),
+  prepareEditorRef: jest.fn(() => ({
+    refReady: true,
+    setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),
+  })),
+}));
+
+jest.mock('../../../../../sharedComponents/TinyMceWidget', () => ({
+  __esModule: true,
+  default: () => <div>TinyMceWidget</div>,
+}));
+
+describe('SolutionWidget', () => {
+  const props = {
+    settings: { solutionExplanation: 'This is my solution' },
+    learningContextId: 'course+org+run',
+    images: {},
+    isLibrary: false,
+    blockId: 'block-v1:Org+TS100+24+type@html+block@12345',
+  };
+  beforeEach(() => {
+    initializeMocks();
+  });
+  test('renders correct default', () => {
+    render(<ExplanationWidget {...props} />);
+    expect(screen.getByText('Explanation')).toBeInTheDocument();
+    expect(screen.getByText('Provide an explanation for the correct answer')).toBeInTheDocument();
+    expect(screen.getByText('TinyMceWidget')).toBeInTheDocument();
+  });
+});

src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Form } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import SettingsOption from '../../SettingsOption';
@@ -9,9 +9,8 @@ import { generalFeedbackHooks } from './hooks';
 export const GeneralFeedbackCard = ({
   generalFeedback,
   updateSettings,
-  // inject
-  intl,
 }) => {
+  const intl = useIntl();
   const { summary, handleChange } = generalFeedbackHooks(generalFeedback, updateSettings);
   return (
     <SettingsOption
@@ -38,7 +37,6 @@ export const GeneralFeedbackCard = ({
 GeneralFeedbackCard.propTypes = {
   generalFeedback: PropTypes.string.isRequired,
   updateSettings: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(GeneralFeedbackCard);
+export default GeneralFeedbackCard;

src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  render, screen, initializeMocks, fireEvent,
+} from '@src/testUtils';
+import { GeneralFeedbackCard } from './index';
+import * as hooks from './hooks';
+
+describe('GeneralFeedbackCard', () => {
+  const props = {
+    generalFeedback: 'sOmE_vAlUE',
+    updateSettings: jest.fn().mockName('args.updateSettings'),
+  };
+
+  const randomizationCardHooksProps = {
+    summary: { message: { defaultMessage: 'sUmmary' } },
+    handleChange: jest.fn().mockName('randomizationCardHooks.handleChange'),
+  };
+
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('behavior', () => {
+    it('calls generalFeedbackHooks with props when initialized', () => {
+      jest.spyOn(hooks, 'generalFeedbackHooks').mockImplementation(() => randomizationCardHooksProps);
+      render(<GeneralFeedbackCard {...props} />);
+      expect(hooks.generalFeedbackHooks).toHaveBeenCalledWith(props.generalFeedback, props.updateSettings);
+    });
+  });
+
+  describe('render', () => {
+    test('renders general feedback setting card', () => {
+      render(<GeneralFeedbackCard {...props} />);
+      expect(screen.getByText('General Feedback')).toBeInTheDocument();
+      expect(screen.getByText('sOmE_vAlUE')).toBeInTheDocument();
+      fireEvent.click(screen.getByText('General Feedback'));
+      expect(screen.getByText('Enter General Feedback')).toBeInTheDocument();
+    });
+  });
+});