test: replacing snapshot tests with RTL tests part 4 (#2135)

* test: replacing snapshot tests with rtl tests part 4

* test: removing not needed icon mocks, and changing name to render function for editors

Author: jacobo-dominguez-wgu

src/editors/VideoSelector.test.tsx

@@ -1,22 +1,9 @@
 import React from 'react';
 import * as reactRedux from 'react-redux';
-import { Provider } from 'react-redux';
 import * as hooks from './hooks';
 import VideoSelector from './VideoSelector';
-import { render as baseRender, initializeMocks, screen } from '../testUtils';
-
-import { EditorContextProvider } from './EditorContext';
-import editorStore from './data/store';
-
-const render = (ui) => baseRender(ui, {
-  extraWrapper: ({ children }) => (
-    <EditorContextProvider learningContextId="course-v1:Org+COURSE+RUN">
-      <Provider store={editorStore}>
-        {children}
-      </Provider>
-    </EditorContextProvider>
-  ),
-});
+import editorRender from './editorTestRender';
+import { initializeMocks, screen } from '../testUtils';
 
 const defaultProps = {
   blockId: 'block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4',
@@ -32,15 +19,15 @@ describe('VideoSelector', () => {
 
   test('renders VideoGallery when loading is false', () => {
     jest.spyOn(hooks, 'useInitializeApp').mockReturnValue(false);
-    render(<VideoSelector {...defaultProps} />);
+    editorRender(<VideoSelector {...defaultProps} />);
     expect(screen.getByText('Add video to your course')).toBeInTheDocument();
   });
 
   // TODO: transform into user-centric test to follow the best practices:
   // "testing the application components in the way the user would use it"
   test('renders nothing when loading is true', () => {
     jest.spyOn(hooks, 'useInitializeApp').mockReturnValue(true);
-    render(<VideoSelector {...defaultProps} />);
+    editorRender(<VideoSelector {...defaultProps} />);
     expect(screen.queryByText('Add video to your course')).not.toBeInTheDocument();
   });
 
@@ -54,7 +41,7 @@ describe('VideoSelector', () => {
     const mockDispatch = jest.fn();
     jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(mockDispatch);
     jest.spyOn(hooks, 'useInitializeApp');
-    render(<VideoSelector {...defaultProps} />);
+    editorRender(<VideoSelector {...defaultProps} />);
     expect(hooks.useInitializeApp).toHaveBeenCalledWith({
       dispatch: mockDispatch,
       data: initData,

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  render, screen, fireEvent, initializeMocks,
+} from '../../../../../../testUtils';
+import { AnswersContainerInternal as AnswersContainer } from './AnswersContainer';
+import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+
+const { useAnswerContainer } = require('./hooks');
+
+jest.mock('./AnswerOption', () => jest.fn(({ answer }) => <div>AnswerOption-{answer.id}</div>));
+jest.mock(
+  '../../../../../sharedComponents/Button',
+  () => jest.fn(({ children, ...props }) => <button type="button" {...props}>{children}</button>),
+);
+
+jest.mock('./hooks', () => ({
+  useAnswerContainer: jest.fn(),
+  isSingleAnswerProblem: jest.fn(() => false),
+}));
+
+describe('AnswersContainer', () => {
+  const defaultProps = {
+    problemType: 'multiple_choice',
+    answers: [
+      { id: 'a1', isAnswerRange: false },
+      { id: 'a2', isAnswerRange: false },
+    ],
+    addAnswer: jest.fn(),
+    addAnswerRange: jest.fn(),
+    updateField: jest.fn(),
+  };
+
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders AnswerOption for each answer', () => {
+    render(<AnswersContainer {...defaultProps} />);
+    expect(screen.getByText('AnswerOption-a1')).toBeInTheDocument();
+    expect(screen.getByText('AnswerOption-a2')).toBeInTheDocument();
+  });
+
+  it('renders add answer Button for non-NUMERIC problemType and calls addAnswer on click', () => {
+    render(<AnswersContainer {...defaultProps} />);
+    const button = screen.getByRole('button', { name: 'Add answer' });
+    expect(button).toBeInTheDocument();
+    fireEvent.click(button);
+    expect(defaultProps.addAnswer).toHaveBeenCalled();
+  });
+
+  it('renders Dropdown for NUMERIC problemType', () => {
+    render(<AnswersContainer {...defaultProps} problemType={ProblemTypeKeys.NUMERIC} />);
+    expect(screen.getByRole('button', { name: 'Add answer' })).toBeInTheDocument();
+    expect(screen.getByText('Add answer').closest('.dropdown')).toBeInTheDocument();
+  });
+
+  it('calls useAnswerContainer with correct args', () => {
+    render(<AnswersContainer {...defaultProps} />);
+    expect(useAnswerContainer).toHaveBeenCalledWith({
+      answers: defaultProps.answers,
+      problemType: defaultProps.problemType,
+      updateField: defaultProps.updateField,
+    });
+  });
+});