test: replacing snapshot tests with RTL tests part 8 (#2184)

Author: jacobo-dominguez-wgu

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Container,
@@ -19,34 +19,35 @@ const HintRow = ({
   images,
   isLibrary,
   learningContextId,
-  // injected
-  intl,
-}) => (
-  <ActionRow className="mb-4">
-    <Container fluid className="p-0">
-      <ExpandableTextArea
-        value={value}
-        setContent={handleChange}
-        placeholder={intl.formatMessage(messages.hintInputLabel)}
-        id={`hint-${id}`}
-        {...{
-          images,
-          isLibrary,
-          learningContextId,
-        }}
-      />
-    </Container>
-    <div className="d-flex flex-row flex-nowrap">
-      <IconButton
-        src={DeleteOutline}
-        iconAs={Icon}
-        alt={intl.formatMessage(messages.settingsDeleteIconAltText)}
-        onClick={handleDelete}
-        variant="primary"
-      />
-    </div>
-  </ActionRow>
-);
+}) => {
+  const intl = useIntl();
+  return (
+    <ActionRow className="mb-4">
+      <Container fluid className="p-0">
+        <ExpandableTextArea
+          value={value}
+          setContent={handleChange}
+          placeholder={intl.formatMessage(messages.hintInputLabel)}
+          id={`hint-${id}`}
+          {...{
+            images,
+            isLibrary,
+            learningContextId,
+          }}
+        />
+      </Container>
+      <div className="d-flex flex-row flex-nowrap">
+        <IconButton
+          src={DeleteOutline}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.settingsDeleteIconAltText)}
+          onClick={handleDelete}
+          variant="primary"
+        />
+      </div>
+    </ActionRow>
+  );
+};
 
 HintRow.propTypes = {
   value: PropTypes.string.isRequired,
@@ -56,9 +57,6 @@ HintRow.propTypes = {
   images: PropTypes.shape({}).isRequired,
   learningContextId: PropTypes.string.isRequired,
   isLibrary: PropTypes.bool.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export const HintRowInternal = HintRow; // For testing only
-export default injectIntl(HintRow);
+export default HintRow;

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.test.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  render, screen, initializeMocks, fireEvent,
+} from '@src/testUtils';
+import HintRow from './HintRow';
+
+jest.mock('../../../../../../sharedComponents/ExpandableTextArea', () => 'ExpandableTextArea');
+
+describe('HintRow', () => {
+  const props = {
+    value: 'hint_1',
+    handleChange: jest.fn(),
+    handleDelete: jest.fn(),
+    id: '0',
+    images: {},
+    isLibrary: false,
+    learningContextId: 'course+org+run',
+  };
+
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  test('renders hints row', () => {
+    render(<HintRow {...props} />);
+    expect(screen.getByPlaceholderText('Hint')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Delete answer' })).toBeInTheDocument();
+  });
+
+  test('calls handleDelete when button is clicked', () => {
+    render(<HintRow {...props} />);
+    expect(screen.getByRole('button', { name: 'Delete answer' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Delete answer' }));
+    expect(props.handleDelete).toHaveBeenCalled();
+  });
+});

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.test.tsx

@@ -9,14 +9,14 @@ exports[`HintsCard snapshot snapshot: renders hints setting card multiple hints
   summary=" {count, plural, =0 {} other {(+# more)}}"
   title="Hints"
 >
-  <injectIntl(ShimmedIntlComponent)
+  <HintRow
     handleChange={[MockFunction hintsRowHooks.handleChange]}
     handleDelete={[MockFunction hintsRowHooks.handleDelete]}
     id={1}
     key="1"
     value="hint1"
   />
-  <injectIntl(ShimmedIntlComponent)
+  <HintRow
     handleChange={[MockFunction hintsRowHooks.handleChange]}
     handleDelete={[MockFunction hintsRowHooks.handleDelete]}
     id={2}
@@ -73,7 +73,7 @@ exports[`HintsCard snapshot snapshot: renders hints setting card one hint 1`] =
   summary="hint1 {count, plural, =0 {} other {(+# more)}}"
   title="Hints"
 >
-  <injectIntl(ShimmedIntlComponent)
+  <HintRow
     handleChange={[MockFunction hintsRowHooks.handleChange]}
     handleDelete={[MockFunction hintsRowHooks.handleDelete]}
     id={1}

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintRow.test.jsx.snap

@@ -1,6 +1,7 @@
-import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import {
+  render, screen, initializeMocks,
+} from '@src/testUtils';
 
 import * as mod from './ErrorSummary';
 
@@ -11,22 +12,29 @@ describe('ErrorSummary', () => {
     widgetWithError: [{ err1: 'mSg', err2: 'msG2' }, jest.fn()],
     widgetWithNoError: [{}, jest.fn()],
   };
+  beforeEach(() => {
+    initializeMocks();
+  });
+
   afterEach(() => {
     jest.restoreAllMocks();
   });
-  describe('render', () => {
-    beforeEach(() => {
-      jest.spyOn(React, 'useContext').mockReturnValueOnce({});
-    });
-    test('snapshots: renders as expected when there are no errors', () => {
+
+  describe('renders', () => {
+    jest.spyOn(React, 'useContext').mockReturnValueOnce({});
+    test('renders as expected when there are no errors', () => {
       jest.spyOn(mod, 'showAlert').mockReturnValue(false);
-      expect(shallow(<ErrorSummary />).snapshot).toMatchSnapshot();
+      render(<ErrorSummary />);
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
     });
+
     test('snapshots: renders as expected when there are errors', () => {
       jest.spyOn(mod, 'showAlert').mockReturnValue(true);
-      expect(shallow(<ErrorSummary />).snapshot).toMatchSnapshot();
+      render(<ErrorSummary />);
+      expect(screen.getByRole('alert')).toBeInTheDocument();
     });
   });
+
   describe('hasNoError', () => {
     it('returns true', () => {
       expect(mod.hasNoError(errors.widgetWithError)).toEqual(false);
@@ -35,6 +43,7 @@ describe('ErrorSummary', () => {
       expect(mod.hasNoError(errors.widgetWithNoError)).toEqual(true);
     });
   });
+
   describe('showAlert', () => {
     it('returns true', () => {
       jest.spyOn(mod, 'hasNoError').mockReturnValue(false);

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintsCard.test.jsx.snap

@@ -10,16 +10,11 @@ import {
 
 import { Check } from '@openedx/paragon/icons';
 import { connect, useDispatch } from 'react-redux';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { thunkActions, selectors } from '../../../../../../data/redux';
 import { videoTranscriptLanguages } from '../../../../../../data/constants/video';
 import { FileInput, fileInput } from '../../../../../../sharedComponents/FileInput';
 import messages from './messages';
-// This 'module' self-import hack enables mocking during tests.
-// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
-// should be re-thought and cleaned up to avoid this pattern.
-// eslint-disable-next-line import/no-self-import
-import * as module from './LanguageSelector';
 
 export const hooks = {
   onSelectLanguage: ({
@@ -54,13 +49,11 @@ const LanguageSelector = ({
   language,
   // Redux
   openLanguages, // Only allow those languages not already associated with a transcript to be selected
-  // intl
-  intl,
-
 }) => {
+  const intl = useIntl();
   const [localLang, setLocalLang] = React.useState(language);
   const input = fileInput({ onAddFile: hooks.addFileCallback({ dispatch: useDispatch(), localLang }) });
-  const onLanguageChange = module.hooks.onSelectLanguage({
+  const onLanguageChange = hooks.onSelectLanguage({
     dispatch: useDispatch(), languageBeforeChange: localLang, setLocalLang, triggerupload: input.click,
   });
 
@@ -124,7 +117,6 @@ LanguageSelector.propTypes = {
   openLanguages: PropTypes.arrayOf(PropTypes.string),
   index: PropTypes.number.isRequired,
   language: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
@@ -134,4 +126,4 @@ export const mapStateToProps = (state) => ({
 export const mapDispatchToProps = {};
 
 export const LanguageSelectorInternal = LanguageSelector; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(LanguageSelector));
+export default connect(mapStateToProps, mapDispatchToProps)(LanguageSelector);