test: replacing snapshot tests with RTL tests part 6 (#2173)

* test: replacing snapshot tests with rtl tests part 6

* fix: removing testing purposed text

* test: fixing test mocking issues

Author: jacobo-dominguez-wgu

src/course-unit/xblock-container-iframe/hooks/tests/hooks.test.tsx

@@ -11,10 +11,6 @@ import { useMessageHandlers } from '..';
 
 jest.useFakeTimers();
 
-jest.mock('@edx/react-unit-test-utils', () => ({
-  useKeyedState: jest.fn(),
-}));
-
 jest.mock('@edx/frontend-platform/logging', () => ({
   logError: jest.fn(),
 }));

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx

@@ -8,7 +8,7 @@ import {
   Form,
 } from '@openedx/paragon';
 import { FeedbackOutline, DeleteOutline } from '@openedx/paragon/icons';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 import { selectors } from '../../../../../data/redux';
@@ -22,15 +22,14 @@ import ExpandableTextArea from '../../../../../sharedComponents/ExpandableTextAr
 const AnswerOption = ({
   answer,
   hasSingleAnswer,
-  // injected
-  intl,
   // redux
   problemType,
   images,
   isLibrary,
   blockId,
   learningContextId,
 }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const removeAnswer = hooks.removeAnswer({ answer, dispatch });
   const setAnswer = hooks.setAnswer({ answer, hasSingleAnswer, dispatch });
@@ -151,8 +150,6 @@ const AnswerOption = ({
 AnswerOption.propTypes = {
   answer: answerOptionProps.isRequired,
   hasSingleAnswer: PropTypes.bool.isRequired,
-  // injected
-  intl: intlShape.isRequired,
   // redux
   problemType: PropTypes.string.isRequired,
   images: PropTypes.shape({}).isRequired,
@@ -171,4 +168,4 @@ export const mapStateToProps = (state) => ({
 
 export const mapDispatchToProps = {};
 export const AnswerOptionInternal = AnswerOption; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(memo(AnswerOption)));
+export default connect(mapStateToProps, mapDispatchToProps)(memo(AnswerOption));

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { render, screen, initializeMocks } from '@src/testUtils';
+import AnswerOption from './AnswerOption';
+import * as hooks from './hooks';
+import { selectors } from '../../../../../data/redux';
+
+const { problem } = selectors;
+
+jest.mock('../../../../../data/redux', () => ({
+  __esModule: true,
+  default: jest.fn(),
+  selectors: {
+    problem: {
+      problemType: jest.fn().mockReturnValue(''),
+    },
+    app: {
+      images: jest.fn(state => ({ images: state })),
+      isLibrary: jest.fn().mockReturnValue(true),
+      learningContextId: jest.fn(state => ({ learningContextId: state })),
+      blockId: jest.fn(state => ({ blockId: state })),
+    },
+  },
+  thunkActions: {
+    video: {
+      importTranscripts: jest.fn(),
+    },
+  },
+}));
+
+jest.mock('../../../../../sharedComponents/ExpandableTextArea', () => 'ExpandableTextArea');
+
+describe('AnswerOption', () => {
+  const answerWithOnlyFeedback = {
+    id: 'A',
+    title: 'Answer 1',
+    correct: true,
+    selectedFeedback: 'some feedback',
+    isAnswerRange: true,
+  };
+  const answerWithSelectedUnselectedFeedback = {
+    id: 'B',
+    title: 'Answer 2',
+    correct: true,
+    selectedFeedback: 'selected feedback',
+    unselectedFeedback: 'unselected feedback',
+    isAnswerRange: false,
+  };
+  const answerRange = {
+    id: 'A',
+    title: 'Answer Range 1',
+    correct: true,
+    selectedFeedback: 'selected feedback',
+    unselectedFeedback: 'unselected feedback',
+    isAnswerRange: true,
+  };
+
+  const props = {
+    hasSingleAnswer: false,
+    answer: answerWithOnlyFeedback,
+    // redux
+    problemType: 'multiplechoiceresponse',
+    images: {},
+    isLibrary: false,
+    learningContextId: 'course+org+run',
+    blockId: 'block-id',
+  };
+
+  beforeEach(() => {
+    jest.spyOn(hooks, 'removeAnswer').mockReturnValue(jest.fn());
+    jest.spyOn(hooks, 'setAnswer').mockReturnValue(jest.fn());
+    jest.spyOn(hooks, 'setAnswerTitle').mockReturnValue(jest.fn());
+    jest.spyOn(hooks, 'setSelectedFeedback').mockReturnValue(jest.fn());
+    jest.spyOn(hooks, 'setUnselectedFeedback').mockReturnValue(jest.fn());
+    jest.spyOn(hooks, 'useFeedback').mockReturnValue({
+      isFeedbackVisible: false,
+      toggleFeedback: jest.fn(),
+    });
+    initializeMocks();
+  });
+
+  test('renders correct option with feedback', () => {
+    jest.spyOn(problem, 'problemType').mockReturnValue('multiplechoiceresponse');
+    render(<AnswerOption {...props} />);
+    expect(screen.getByPlaceholderText('Enter an answer')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Delete answer' })).toBeInTheDocument();
+  });
+
+  test('renders correct option with selected unselected feedback', () => {
+    jest.spyOn(problem, 'problemType').mockReturnValue('choiceresponse');
+    const myProps = { ...props, answer: answerWithSelectedUnselectedFeedback };
+    render(<AnswerOption {...myProps} />);
+    expect(screen.getByText(answerWithSelectedUnselectedFeedback.id)).toBeInTheDocument();
+  });
+
+  test('renders correct option with optionresponse input problem', () => {
+    jest.spyOn(problem, 'problemType').mockReturnValue('optionresponse');
+    const myProps = { ...props };
+    render(<AnswerOption {...myProps} />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByText(answerWithOnlyFeedback.title)).toBeInTheDocument();
+  });
+
+  test('renders correct option with numeric input problem and answer range', () => {
+    jest.spyOn(problem, 'problemType').mockReturnValue('numericalresponse');
+    const myProps = { ...props };
+    render(<AnswerOption {...myProps} answer={answerRange} />);
+    expect(screen.getByText(answerRange.title)).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+});