test: replacing snapshot tests with RTL tests part 10 (#2207)

Author: jacobo-dominguez-wgu

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import { Icon, IconButton, Truncate } from '@openedx/paragon';
 import { EditOutline } from '@openedx/paragon/icons';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { selectors } from '../../../../data/redux';
 import { localTitleHooks } from './hooks';
@@ -13,10 +13,9 @@ import EditableHeader from './EditableHeader';
 
 const TitleHeader = ({
   isInitialized,
-  // injected
-  intl,
 }) => {
-  if (!isInitialized) { return intl.formatMessage(messages.loading); }
+  const intl = useIntl();
+  if (!isInitialized) { return <FormattedMessage {...messages.loading} />; }
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const dispatch = useDispatch();
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -66,9 +65,6 @@ const TitleHeader = ({
 TitleHeader.defaultProps = {};
 TitleHeader.propTypes = {
   isInitialized: PropTypes.bool.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export const TitleHeaderInternal = TitleHeader; // For testing only
-export default injectIntl(TitleHeader);
+export default TitleHeader;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  render, screen, initializeMocks,
+} from '@src/testUtils';
+import * as redux from 'react-redux';
+
+import * as hooks from './hooks';
+import TitleHeader from '.';
+
+describe('TitleHeader', () => {
+  // setting any type to prevent warnings on the mockReturnValue
+  const localTitleHooksProps: any = {
+    inputRef: jest.fn().mockName('localTitleHooks.inputRef'),
+    isEditing: false,
+    handleChange: jest.fn().mockName('localTitleHooks.handleChange'),
+    handleKeyDown: jest.fn().mockName('localTitleHooks.handleKeyDown'),
+    localTitle: 'TeST LocALtitLE',
+    startEditing: jest.fn().mockName('localTitleHooks.startEditing'),
+    updateTitle: jest.fn().mockName('localTitleHooks.updateTitle'),
+  };
+
+  beforeEach(() => {
+    initializeMocks();
+    jest.spyOn(hooks, 'localTitleHooks').mockReturnValue(localTitleHooksProps);
+    jest.spyOn(redux, 'useSelector').mockReturnValueOnce('Title mock');
+  });
+
+  const props = {
+    isInitialized: true,
+  };
+
+  describe('behavior', () => {
+    it('calls localTitleHooks with initialization args', () => {
+      const mockDispatch = jest.fn();
+      jest.spyOn(redux, 'useDispatch').mockReturnValueOnce(mockDispatch);
+      render(<TitleHeader {...props} />);
+      expect(screen.getByText('Title mock')).toBeInTheDocument();
+      expect(hooks.localTitleHooks).toHaveBeenCalledWith({ dispatch: mockDispatch });
+    });
+  });
+
+  describe('renders', () => {
+    test('component is not initialized and renders loading text', () => {
+      render(<TitleHeader isInitialized={false} />);
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    test('renders component correctly when initialized is true', () => {
+      render(<TitleHeader {...props} />);
+      expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+      expect(screen.getByText('Title mock')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Edit Title' })).toBeInTheDocument();
+    });
+
+    test('renders editing component', () => {
+      jest.spyOn(hooks, 'localTitleHooks').mockReturnValue({ ...localTitleHooksProps, isEditing: true });
+      render(<TitleHeader {...props} />);
+      const editable = screen.getByRole('textbox');
+      expect(editable).toBeInTheDocument();
+      expect(editable).toHaveDisplayValue('TeST LocALtitLE');
+    });
+  });
+});

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

@@ -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 messages from './messages';
 import { groupFeedbackCardHooks, groupFeedbackRowHooks } from './hooks';
@@ -11,9 +11,8 @@ const GroupFeedbackCard = ({
   groupFeedbacks,
   updateSettings,
   answers,
-  // inject
-  intl,
 }) => {
+  const intl = useIntl();
   const { summary, handleAdd } = groupFeedbackCardHooks(groupFeedbacks, updateSettings, answers);
   return (
     <SettingsOption
@@ -47,7 +46,6 @@ const GroupFeedbackCard = ({
 };
 
 GroupFeedbackCard.propTypes = {
-  intl: intlShape.isRequired,
   groupFeedbacks: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number.isRequired,
     feedback: PropTypes.string.isRequired,
@@ -63,5 +61,4 @@ GroupFeedbackCard.propTypes = {
   updateSettings: PropTypes.func.isRequired,
 };
 
-export const GroupFeedbackCardInternal = GroupFeedbackCard; // For testing only
-export default injectIntl(GroupFeedbackCard);
+export default GroupFeedbackCard;