Merge branch 'jci/issue35245'

lms/djangoapps/instructor/static/instructor/ProblemBrowser/components/Main/Main.test.jsx

@@ -1,96 +1,99 @@
-// eslint-disable-next-line no-redeclare
-/* global jest,test,describe,expect */
-import { Button } from '@edx/paragon';
-import BlockBrowserContainer from 'BlockBrowser/components/BlockBrowser/BlockBrowserContainer';
 import { Provider } from 'react-redux';
-import { shallow } from 'enzyme';
 import React from 'react';
-import renderer from 'react-test-renderer';
+import {
+    render,
+    screen,
+    waitFor,
+    act,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import store from '../../data/store';
-
 import Main from './Main';
 
+jest.mock('BlockBrowser/components/BlockBrowser/BlockBrowserContainer', () => {
+    function MockedBlockBrowserContainer() {
+        return (
+            <div data-testid="mocked-block-browser-container" className="block-browser">
+                Mocked BlockBrowserContainer
+            </div>
+        );
+    }
+    return MockedBlockBrowserContainer;
+});
+
 describe('ProblemBrowser Main component', () => {
     const courseId = 'testcourse';
     const problemResponsesEndpoint = '/api/problem_responses/';
     const taskStatusEndpoint = '/api/task_status/';
     const excludedBlockTypes = [];
+    const reportDownloadEndpoint = '/api/report_download';
+    let fetchCourseBlocksMock;
+    let createProblemResponsesReportTaskMock;
+    let onSelectBlockMock;
 
-    test('render with basic parameters', () => {
-        const component = renderer.create(
-            <Provider store={store}>
-                <Main
-                    courseId={courseId}
-                    createProblemResponsesReportTask={jest.fn()}
-                    excludeBlockTypes={excludedBlockTypes}
-                    fetchCourseBlocks={jest.fn()}
-                    problemResponsesEndpoint={problemResponsesEndpoint}
-                    onSelectBlock={jest.fn()}
-                    selectedBlock={null}
-                    taskStatusEndpoint={taskStatusEndpoint}
-                />
-            </Provider>,
-        );
-        const tree = component.toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    test('render with selected block', () => {
-        const component = renderer.create(
-            <Provider store={store}>
-                <Main
-                    courseId={courseId}
-                    createProblemResponsesReportTask={jest.fn()}
-                    excludeBlockTypes={excludedBlockTypes}
-                    fetchCourseBlocks={jest.fn()}
-                    problemResponsesEndpoint={problemResponsesEndpoint}
-                    onSelectBlock={jest.fn()}
-                    selectedBlock="some-selected-block"
-                    taskStatusEndpoint={taskStatusEndpoint}
-                />
-            </Provider>,
-        );
-        const tree = component.toJSON();
-        expect(tree).toMatchSnapshot();
+    beforeEach(() => {
+        fetchCourseBlocksMock = jest.fn();
+        createProblemResponsesReportTaskMock = jest.fn();
+        onSelectBlockMock = jest.fn();
     });
 
-    test('fetch course block on toggling dropdown', () => {
-        const fetchCourseBlocksMock = jest.fn();
-        const component = renderer.create(
+    const renderMainComponent = (props = {}) => (
+        render(
             <Provider store={store}>
                 <Main
                     courseId={courseId}
-                    createProblemResponsesReportTask={jest.fn()}
+                    createProblemResponsesReportTask={createProblemResponsesReportTaskMock}
                     excludeBlockTypes={excludedBlockTypes}
                     fetchCourseBlocks={fetchCourseBlocksMock}
                     problemResponsesEndpoint={problemResponsesEndpoint}
-                    onSelectBlock={jest.fn()}
+                    onSelectBlock={onSelectBlockMock}
                     selectedBlock="some-selected-block"
                     taskStatusEndpoint={taskStatusEndpoint}
+                    reportDownloadEndpoint={reportDownloadEndpoint}
+                    ShowBtnUi="false"
+                    {...props}
                 />
             </Provider>,
-        );
-        // eslint-disable-next-line prefer-destructuring
-        const instance = component.root.children[0].instance;
-        instance.handleToggleDropdown();
-        expect(fetchCourseBlocksMock.mock.calls.length).toBe(1);
+        )
+    );
+
+    describe('Initial rendering', () => {
+        test('should match snapshot with basic parameters', () => {
+            const { container } = renderMainComponent();
+            expect(container).toMatchSnapshot();
+        });
+
+        test('should match snapshot with selected block', () => {
+            const { container } = renderMainComponent({ selectedBlock: 'some-selected-block' });
+            expect(container).toMatchSnapshot();
+        });
     });
 
-    test('display dropdown on toggling dropdown', () => {
-        const component = shallow(
-            <Main
-                courseId={courseId}
-                createProblemResponsesReportTask={jest.fn()}
-                excludeBlockTypes={excludedBlockTypes}
-                fetchCourseBlocks={jest.fn()}
-                problemResponsesEndpoint={problemResponsesEndpoint}
-                onSelectBlock={jest.fn()}
-                selectedBlock="some-selected-block"
-                taskStatusEndpoint={taskStatusEndpoint}
-            />,
-        );
-        expect(component.find(BlockBrowserContainer).length).toBeFalsy();
-        component.find(Button).find({ label: 'Select a section or problem' }).simulate('click');
-        expect(component.find(BlockBrowserContainer).length).toBeTruthy();
+    describe('Dropdown interactions', () => {
+        test('should fetch course blocks when dropdown is toggled', async () => {
+            renderMainComponent();
+
+            await userEvent.click(screen.getByText('Select a section or problem'));
+
+            await waitFor(() => {
+                expect(fetchCourseBlocksMock).toHaveBeenCalledTimes(1);
+                expect(fetchCourseBlocksMock).toHaveBeenCalledWith(courseId, excludedBlockTypes);
+            });
+        });
+
+        test('should display dropdown when toggled', async () => {
+            renderMainComponent();
+            expect(screen.queryByTestId('mocked-block-browser-container')).toBeNull();
+            await act(async () => {
+                await userEvent.click(screen.getByText('Select a section or problem'));
+            });
+            await waitFor(() => expect(
+                screen.getByTestId('mocked-block-browser-container'),
+            ).toHaveClass('block-browser'));
+            await act(async () => {
+                await userEvent.click(screen.getByText('Select a section or problem'));
+            });
+            await waitFor(() => expect(screen.queryByTestId('mocked-block-browser-container')).toBeNull());
+        });
     });
 });

lms/djangoapps/instructor/static/instructor/ProblemBrowser/components/Main/__snapshots__/Main.test.jsx.snap

@@ -1,83 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ProblemBrowser Main component render with basic parameters 1`] = `
-<div
-  className="problem-browser-container"
->
+exports[`ProblemBrowser Main component Initial rendering should match snapshot with basic parameters 1`] = `
+<div>
   <div
-    className="problem-browser"
+    class="problem-browser-container"
   >
-    <button
-      className="btn"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
-    >
-      Select a section or problem
-    </button>
-    <input
-      disabled={true}
-      hidden={false}
-      name="problem-location"
-      type="text"
-      value={null}
-    />
-    <button
-      className="btn"
-      name="list-problem-responses-csv"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
-    >
-      Create a report of problem responses
-    </button>
     <div
-      aria-live="polite"
-      className="report-generation-status"
-    />
+      class="problem-browser"
+    >
+      <button
+        class="btn"
+        type="button"
+      >
+        Select a section or problem
+      </button>
+      <input
+        disabled=""
+        name="problem-location"
+        type="text"
+        value="some-selected-block"
+      />
+      <button
+        class="btn"
+        name="list-problem-responses-csv"
+        type="button"
+      >
+        Create a report of problem responses
+      </button>
+      <div
+        aria-live="polite"
+        class="report-generation-status"
+      />
+    </div>
   </div>
 </div>
 `;
 
-exports[`ProblemBrowser Main component render with selected block 1`] = `
-<div
-  className="problem-browser-container"
->
+exports[`ProblemBrowser Main component Initial rendering should match snapshot with selected block 1`] = `
+<div>
   <div
-    className="problem-browser"
+    class="problem-browser-container"
   >
-    <button
-      className="btn"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
-    >
-      Select a section or problem
-    </button>
-    <input
-      disabled={true}
-      hidden={false}
-      name="problem-location"
-      type="text"
-      value="some-selected-block"
-    />
-    <button
-      className="btn"
-      name="list-problem-responses-csv"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
-    >
-      Create a report of problem responses
-    </button>
     <div
-      aria-live="polite"
-      className="report-generation-status"
-    />
+      class="problem-browser"
+    >
+      <button
+        class="btn"
+        type="button"
+      >
+        Select a section or problem
+      </button>
+      <input
+        disabled=""
+        name="problem-location"
+        type="text"
+        value="some-selected-block"
+      />
+      <button
+        class="btn"
+        name="list-problem-responses-csv"
+        type="button"
+      >
+        Create a report of problem responses
+      </button>
+      <div
+        aria-live="polite"
+        class="report-generation-status"
+      />
+    </div>
   </div>
 </div>
 `;