test: replacing snapshot tests with RTL tests part 9 (#2206)

Author: jacobo-dominguez-wgu

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,43 @@
+import {
+  render, screen, initializeMocks, fireEvent,
+} from '@src/testUtils';
+import Checker from '.';
+
+const props = {
+  hasSingleAnswer: true,
+  answer: {
+    id: 1,
+    correct: true,
+  },
+  setAnswer: jest.fn(),
+};
+describe('Checker component', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  test('renders with single answer', () => {
+    render(<Checker {...props} />);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByRole('radio')).toBeInTheDocument();
+    expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
+  });
+
+  test('renders with multiple answers', () => {
+    render(<Checker {...props} hasSingleAnswer={false} />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    expect(screen.queryByRole('radio')).not.toBeInTheDocument();
+  });
+
+  test('renders with disabled radio', () => {
+    render(<Checker {...props} disabled />);
+    expect(screen.getByRole('radio')).toBeInTheDocument();
+  });
+
+  test('calls setAnswer when radio button is clicked', () => {
+    render(<Checker {...props} />);
+    expect(screen.getByRole('radio')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('radio'), { target: { checked: !props.answer.correct } });
+    expect(props.setAnswer).toHaveBeenCalledWith({ correct: true });
+  });
+});

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.jsx

@@ -1,14 +1,11 @@
-import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../testUtils';
+import {
+  render, screen, initializeMocks,
+} from '@src/testUtils';
+import { formatMessage } from '@src/editors/testUtils';
 import { selectors } from '../../../../../../data/redux';
 import { ShowAnswerCardInternal as ShowAnswerCard, mapStateToProps, mapDispatchToProps } from './ShowAnswerCard';
-import { useAnswerSettings } from '../hooks';
-
-jest.mock('../hooks', () => ({
-  useAnswerSettings: jest.fn(),
-}));
+import * as hooks from '../hooks';
 
 jest.mock('../../../../../../data/redux', () => ({
   selectors: {
@@ -30,45 +27,48 @@ describe('ShowAnswerCard', () => {
     updateSettings: jest.fn().mockName('args.updateSettings'),
     intl: { formatMessage },
   };
+
   const props = {
     showAnswer,
     defaultValue: 'finished',
+    updateSettings: jest.fn(),
     // injected
     intl: { formatMessage },
     // redux
     studioEndpointUrl: 'SoMEeNDpOinT',
     learningContextId: 'sOMEcouRseId',
+    isLibrary: false,
   };
 
-  const useAnswerSettingsProps = {
-    handleShowAnswerChange: jest.fn().mockName('useAnswerSettings.handleShowAnswerChange'),
-    handleAttemptsChange: jest.fn().mockName('useAnswerSettings.handleAttemptsChange'),
-  };
-
-  useAnswerSettings.mockReturnValue(useAnswerSettingsProps);
+  describe('renders', () => {
+    beforeEach(() => {
+      initializeMocks();
+    });
 
-  describe('behavior', () => {
-    it(' calls useAnswerSettings when initialized', () => {
-      shallow(<ShowAnswerCard {...props} />);
-      expect(useAnswerSettings).toHaveBeenCalledWith(showAnswer, props.updateSettings);
+    test('show answer setting card', () => {
+      render(<ShowAnswerCard {...props} />);
+      expect(screen.getByText('Show answer')).toBeInTheDocument();
     });
-  });
 
-  describe('snapshot', () => {
-    test('snapshot: show answer setting card', () => {
-      expect(shallow(<ShowAnswerCard {...props} />).snapshot).toMatchSnapshot();
+    test('calls useAnswerSettings when initialized', () => {
+      jest.spyOn(hooks, 'useAnswerSettings');
+      render(<ShowAnswerCard {...props} />);
+      expect(screen.getByText('Show answer')).toBeInTheDocument();
+      expect(hooks.useAnswerSettings).toHaveBeenCalledWith(showAnswer, props.updateSettings);
     });
   });
   describe('mapStateToProps', () => {
     const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
     test('studioEndpointUrl from app.studioEndpointUrl', () => {
       expect(
         mapStateToProps(testState).studioEndpointUrl,
+        // @ts-ignore
       ).toEqual(selectors.app.studioEndpointUrl(testState));
     });
     test('learningContextId from app.learningContextId', () => {
       expect(
         mapStateToProps(testState).learningContextId,
+        // @ts-ignore
       ).toEqual(selectors.app.learningContextId(testState));
     });
   });

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import SettingsOption from '../SettingsOption';
 import { ProblemTypeKeys, ProblemTypes } from '../../../../../../data/constants/problem';
 import messages from '../messages';
@@ -14,9 +14,8 @@ const TypeCard = ({
   setBlockTitle,
   updateField,
   updateAnswer,
-  // inject
-  intl,
 }) => {
+  const intl = useIntl();
   const problemTypeKeysArray = Object.values(ProblemTypeKeys).filter(key => key !== ProblemTypeKeys.ADVANCED);
 
   if (problemType === ProblemTypeKeys.ADVANCED) { return null; }
@@ -60,9 +59,6 @@ TypeCard.propTypes = {
   setBlockTitle: PropTypes.func.isRequired,
   updateField: PropTypes.func.isRequired,
   updateAnswer: PropTypes.func.isRequired,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export const TypeCardInternal = TypeCard; // For testing only
-export default injectIntl(TypeCard);
+export default TypeCard;

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.jsx renamed to src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen, initializeMocks } from '@src/testUtils';
+import TypeCard from './TypeCard';
+import { ProblemTypeKeys } from '../../../../../../data/constants/problem';
+
+describe('TypeCard', () => {
+  const props = {
+    answers: [],
+    blockTitle: 'BLocktiTLE',
+    correctAnswerCount: 0,
+    problemType: ProblemTypeKeys.TEXTINPUT,
+    setBlockTitle: jest.fn().mockName('args.setBlockTitle'),
+    updateField: jest.fn().mockName('args.updateField'),
+    updateAnswer: jest.fn().mockName('args.updateAnswer'),
+  };
+
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  test('renders type setting card', () => {
+    render(<TypeCard {...props} />);
+    expect(screen.getByText('Type')).toBeInTheDocument();
+    expect(screen.getByText('Text input')).toBeInTheDocument();
+  });
+
+  test('renders nothing if problemType is advanced', () => {
+    const { container } = render(<TypeCard {...props} problemType={ProblemTypeKeys.ADVANCED} />);
+    expect(screen.queryByText('Type')).not.toBeInTheDocument();
+    expect(container.firstChild?.textContent).toBe('');
+  });
+});