test: replacing snapshot tests with RTL tests part 7 (#2181)

Author: jacobo-dominguez-wgu

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

@@ -47,5 +47,4 @@ EditableHeader.propTypes = {
   cancelEdit: PropTypes.func.isRequired,
 };
 
-export const EditableHeaderInternal = EditableHeader; // For testing only
 export default EditableHeader;

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  render, screen, initializeMocks, fireEvent,
+} from '@src/testUtils';
+import EditableHeader from './EditableHeader';
+
+describe('EditableHeader', () => {
+  const props = {
+    handleChange: jest.fn().mockName('args.handleChange'),
+    updateTitle: jest.fn().mockName('args.updateTitle'),
+    handleKeyDown: jest.fn().mockName('args.handleKeyDown'),
+    inputRef: jest.fn().mockName('args.inputRef'),
+    localTitle: 'test-title-text',
+    cancelEdit: jest.fn().mockName('args.cancelEdit'),
+  };
+
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  test('renders input with correct value and placeholder', () => {
+    render(<EditableHeader {...props} />);
+    const input = screen.getByPlaceholderText('Title');
+    expect(input).toBeInTheDocument();
+    expect((input as HTMLInputElement).value).toBe(props.localTitle);
+  });
+
+  test('calls handleChange when input changes', () => {
+    render(<EditableHeader {...props} />);
+    const input = screen.getByPlaceholderText('Title');
+    fireEvent.change(input, { target: { value: 'New title' } });
+    expect(props.handleChange).toHaveBeenCalled();
+  });
+
+  test('calls handleKeyDown on keydown', () => {
+    render(<EditableHeader {...props} />);
+    const input = screen.getByPlaceholderText('Title');
+    fireEvent.keyDown(input, { target: { value: 'New title' } });
+    expect(props.handleKeyDown).toHaveBeenCalled();
+  });
+
+  test('calls updateTitle on blur', () => {
+    render(<EditableHeader {...props} />);
+    const input = screen.getByPlaceholderText('Title');
+    fireEvent.blur(input);
+    expect(props.updateTitle).toHaveBeenCalled();
+  });
+
+  test('calls inputRef if provided', () => {
+    const inputRef = jest.fn();
+    render(<EditableHeader {...props} inputRef={inputRef} />);
+    expect(inputRef).toHaveBeenCalled();
+  });
+
+  test('renders buttons from trailing element EditConfirmationButtons', () => {
+    render(<EditableHeader {...props} />);
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    expect(cancelButton).toBeInTheDocument();
+    const saveButton = screen.getByRole('button', { name: /save/i });
+    expect(saveButton).toBeInTheDocument();
+  });
+});

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import SettingsOption from '../SettingsOption';
 import { ProblemTypeKeys } from '../../../../../../data/constants/problem';
 import messages from '../messages';
@@ -15,9 +15,8 @@ const HintsCard = ({
   images,
   isLibrary,
   learningContextId,
-  // inject
-  intl,
 }) => {
+  const intl = useIntl();
   const { summary, handleAdd } = hintsCardHooks(hints, updateSettings);
 
   if (problemType === ProblemTypeKeys.ADVANCED) { return null; }
@@ -55,7 +54,6 @@ const HintsCard = ({
 };
 
 HintsCard.propTypes = {
-  intl: intlShape.isRequired,
   hints: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired,
     value: PropTypes.string.isRequired,
@@ -67,5 +65,4 @@ HintsCard.propTypes = {
   isLibrary: PropTypes.bool.isRequired,
 };
 
-export const HintsCardInternal = HintsCard; // For testing only
-export default injectIntl(HintsCard);
+export default HintsCard;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, screen, initializeMocks } from '@src/testUtils';
+import HintsCard from './HintsCard';
+
+jest.mock('./HintRow', () => 'HintRow');
+
+describe('HintsCard', () => {
+  const hint1 = { id: '1', value: 'hint-1' };
+  const hint2 = { id: '2', value: 'hint-2' };
+  const hints0 = [];
+  const hints1 = [hint1];
+  const hints2 = [hint1, hint2];
+
+  const props = {
+    hints: hints0,
+    updateSettings: jest.fn().mockName('args.updateSettings'),
+    problemType: 'multiplechoiceresponse',
+    images: {},
+    isLibrary: false,
+    learningContextId: 'ID+',
+  };
+
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  describe('HintsCard', () => {
+    test('renders component', () => {
+      render(<HintsCard {...props} />);
+      expect(screen.getByText('Hints')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Add hint' })).toBeInTheDocument();
+    });
+
+    test('does not render component when problemType is advanced', () => {
+      render(<HintsCard {...props} problemType="advanced" />);
+      expect(screen.queryByText('Hints')).not.toBeInTheDocument();
+      expect(screen.queryByText('button')).not.toBeInTheDocument();
+    });
+
+    test('renders hints setting card one hint', () => {
+      render(<HintsCard {...props} hints={hints1} />);
+      expect(document.querySelector('hintrow[value="hint-1"]')).toBeInTheDocument();
+    });
+
+    test('snapshot: renders hints setting card multiple hints', () => {
+      render(<HintsCard {...props} hints={hints2} />);
+      expect(document.querySelector('hintrow[value="hint-1"]')).toBeInTheDocument();
+      expect(document.querySelector('hintrow[value="hint-2"]')).toBeInTheDocument();
+    });
+  });
+});

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

@@ -2,7 +2,7 @@ import React from 'react';
 import isNil from 'lodash/isNil';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Form, Hyperlink } from '@openedx/paragon';
 import { selectors } from '../../../../../../data/redux';
 import SettingsOption from '../SettingsOption';
@@ -13,13 +13,12 @@ const ScoringCard = ({
   scoring,
   defaultValue,
   updateSettings,
-  // inject
-  intl,
   // redux
   studioEndpointUrl,
   learningContextId,
   isLibrary,
 }) => {
+  const intl = useIntl();
   const {
     handleUnlimitedChange,
     handleMaxAttemptChange,
@@ -93,7 +92,6 @@ const ScoringCard = ({
 };
 
 ScoringCard.propTypes = {
-  intl: intlShape.isRequired,
   // eslint-disable-next-line
   scoring: PropTypes.any.isRequired,
   updateSettings: PropTypes.func.isRequired,
@@ -117,5 +115,4 @@ export const mapStateToProps = (state) => ({
 
 export const mapDispatchToProps = {};
 
-export const ScoringCardInternal = ScoringCard; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ScoringCard));
+export default connect(mapStateToProps, mapDispatchToProps)(ScoringCard);