test: replacing snapshot tests with RTL tests part 3 (#2134)

* test: replacing snapshot tests with rtl tests part 3

* test: addint alt text to icon buttons and test refactor

Author: jacobo-dominguez-wgu

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

@@ -17,13 +17,15 @@ const EditConfirmationButtons = ({
       <IconButtonWithTooltip
         tooltipPlacement="left"
         tooltipContent={intl.formatMessage(messages.saveTitleEdit)}
+        alt={intl.formatMessage(messages.saveAltText)}
         src={Check}
         iconAs={Icon}
         onClick={updateTitle}
       />
       <IconButtonWithTooltip
         tooltipPlacement="right"
         tooltipContent={intl.formatMessage(messages.cancelTitleEdit)}
+        alt={intl.formatMessage(messages.cancelAltText)}
         src={Close}
         iconAs={Icon}
         onClick={cancelEdit}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  render, screen, fireEvent, initializeMocks,
+} from '../../../../../testUtils';
+import EditConfirmationButtons from './EditConfirmationButtons';
+
+describe('EditConfirmationButtons', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders two IconButtonWithTooltip buttons', () => {
+    render(
+      <EditConfirmationButtons updateTitle={jest.fn()} cancelEdit={jest.fn()} />,
+    );
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    expect(cancelButton).toBeInTheDocument();
+    const saveButton = screen.getByRole('button', { name: /save/i });
+    expect(saveButton).toBeInTheDocument();
+  });
+
+  it('calls updateTitle when save button is clicked', () => {
+    const updateTitleMock = jest.fn();
+    render(
+      <EditConfirmationButtons updateTitle={updateTitleMock} cancelEdit={jest.fn()} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /save/i }));
+    expect(updateTitleMock).toHaveBeenCalled();
+  });
+
+  it('calls cancelEdit when cancel button is clicked', () => {
+    const cancelEditMock = jest.fn();
+    render(
+      <EditConfirmationButtons updateTitle={jest.fn()} cancelEdit={cancelEditMock} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
+    expect(cancelEditMock).toHaveBeenCalled();
+  });
+});

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

@@ -27,11 +27,21 @@ const messages = defineMessages({
     defaultMessage: 'Cancel',
     description: 'Screen reader label title for icon button to edit the xblock title',
   },
+  cancelAltText: {
+    id: 'authoring.texteditor.header.cancelAltText',
+    defaultMessage: 'Cancel',
+    description: 'Alt text for icon button to cancel edit the xblock title',
+  },
   saveTitleEdit: {
     id: 'authoring.texteditor.header.saveTitleEdit',
     defaultMessage: 'Save',
     description: 'Screen reader label title for icon button to edit the xblock title',
   },
+  saveAltText: {
+    id: 'authoring.texteditor.header.saveAltText',
+    defaultMessage: 'Save',
+    description: 'Alt text for icon button to save edit the xblock title',
+  },
 });
 
 export default messages;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Form } from '@openedx/paragon';
 
 import { answerOptionProps } from '../../../../../../../data/services/cms/types';
@@ -13,46 +13,47 @@ const FeedbackControl = ({
   labelMessage,
   labelMessageBoldUnderline,
   answer,
-  intl,
   type,
   images,
   isLibrary,
   learningContextId,
-}) => (
-  <Form.Group>
-    <Form.Label className="mb-3">
-      <FormattedMessage
-        {...labelMessage}
-        values={{
-          answerId: answer.id,
-          boldunderline: <b><u><FormattedMessage {...labelMessageBoldUnderline} /></u></b>,
+}) => {
+  const intl = useIntl();
+  return (
+    <Form.Group>
+      <Form.Label className="mb-3">
+        <FormattedMessage
+          {...labelMessage}
+          values={{
+            answerId: answer.id,
+            boldunderline: <b><u><FormattedMessage {...labelMessageBoldUnderline} /></u></b>,
+          }}
+        />
+      </Form.Label>
+      <ExpandableTextArea
+        id={`${type}Feedback-${answer.id}`}
+        value={feedback}
+        setContent={onChange}
+        placeholder={intl.formatMessage(messages.feedbackPlaceholder)}
+        {...{
+          images,
+          isLibrary,
+          learningContextId,
         }}
       />
-    </Form.Label>
-    <ExpandableTextArea
-      id={`${type}Feedback-${answer.id}`}
-      value={feedback}
-      setContent={onChange}
-      placeholder={intl.formatMessage(messages.feedbackPlaceholder)}
-      {...{
-        images,
-        isLibrary,
-        learningContextId,
-      }}
-    />
-  </Form.Group>
-);
+    </Form.Group>
+  );
+};
 FeedbackControl.propTypes = {
   feedback: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
-  labelMessage: PropTypes.string.isRequired,
-  labelMessageBoldUnderline: PropTypes.string.isRequired,
+  labelMessage: PropTypes.shape.isRequired,
+  labelMessageBoldUnderline: PropTypes.shape.isRequired,
   answer: answerOptionProps.isRequired,
   type: PropTypes.string.isRequired,
   images: PropTypes.shape({}).isRequired,
   learningContextId: PropTypes.string.isRequired,
   isLibrary: PropTypes.bool.isRequired,
-  intl: intlShape.isRequired,
 };
 
 export default FeedbackControl;

src/editors/containers/EditorContainer/components/TitleHeader/messages.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  render, screen, fireEvent, initializeMocks,
+} from '../../../../../../../../testUtils';
+import FeedbackControl from './FeedbackControl';
+
+jest.mock('../../../../../../../sharedComponents/ExpandableTextArea', () => jest.fn(({
+  id, value, setContent, placeholder,
+}) => (
+  <textarea id={id} value={value} placeholder={placeholder} onChange={e => setContent(e.target.value)} />
+)));
+
+const defaultProps = {
+  feedback: 'Initial feedback',
+  onChange: jest.fn(),
+  labelMessage: { id: 'label.id', defaultMessage: 'Feedback for answer {answerId} {boldunderline}' },
+  labelMessageBoldUnderline: { id: 'bold.id', defaultMessage: 'Important' },
+  answer: { id: 'a1', text: 'Answer 1' },
+  type: 'correct',
+  images: {},
+  isLibrary: false,
+  learningContextId: 'lc1',
+};
+
+describe('FeedbackControl', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders Form.Label with FormattedMessage and ExpandableTextArea', () => {
+    render(<FeedbackControl {...defaultProps} />);
+    expect(screen.getByText(/Feedback for answer/)).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: '' })).toBeInTheDocument();
+  });
+
+  it('passes correct props to ExpandableTextArea', () => {
+    render(<FeedbackControl {...defaultProps} />);
+    const textarea = screen.getByRole('textbox', { name: '' });
+    expect(textarea).toHaveAttribute('id', 'correctFeedback-a1');
+    expect(textarea).toHaveValue('Initial feedback');
+    expect(textarea).toHaveAttribute('placeholder', 'Feedback message');
+  });
+
+  it('calls onChange when textarea value changes', () => {
+    const onChange = jest.fn();
+    render(<FeedbackControl {...defaultProps} onChange={onChange} />);
+    const textarea = screen.getByRole('textbox', { name: '' });
+    fireEvent.change(textarea, { target: { value: 'Updated feedback' } });
+    expect(onChange).toHaveBeenCalledWith('Updated feedback');
+  });
+
+  it('renders with different isLibrary, images, and learningContextId', () => {
+    render(<FeedbackControl
+      {...defaultProps}
+      isLibrary
+      images={{ img1: 'url' }}
+      learningContextId="lc2"
+    />);
+    expect(screen.getByRole('textbox', { name: '' })).toBeInTheDocument();
+  });
+
+  it('renders boldunderline content inside FormattedMessage', () => {
+    render(<FeedbackControl {...defaultProps} />);
+    expect(screen.getByText('Important')).toBeInTheDocument();
+  });
+});