f6aebc7d29
The CourseExit page uses the TabContainer because it seems to be a better solution than adding it into the paths for the CoursewareContainer, despite the CoursewareContainer already doing the correct fetch. The reason for this is because within the CoursewareContainer, it would still be necessary to check for the /course-exit path (due to the CoursewareContainer trying to greedily match sequenceId (read: it will try and look up 'course-exit' as a sequence)). That effectively defeats the purpose of using the routing in the first place so instead, we place it in a TabContainer. The InstructorToolbar didMount logic became necessary once we had a page (CourseExit) that does a redirect on a quick exit. As a result, it unmouunts the InstructorToolbar (which will be remounted by the new component), but the InstructorToolbar's MasqueradeWidget has an outgoing request. Since it is unmounted during that time, it raises an error about a potential memory leak. By stopping the render when the InstructorToolbar is unmounted, we avoid the memory leak.
46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import { history } from '@edx/frontend-platform';
|
|
import { Route } from 'react-router';
|
|
import { initializeTestStore, render, screen } from '../setupTest';
|
|
import { TabContainer } from './index';
|
|
|
|
const mockDispatch = jest.fn();
|
|
const mockFetch = jest.fn().mockImplementation((x) => x);
|
|
jest.mock('react-redux', () => ({
|
|
...jest.requireActual('react-redux'),
|
|
useDispatch: () => mockDispatch,
|
|
}));
|
|
jest.mock('./TabPage', () => () => <div data-testid="TabPage" />);
|
|
|
|
describe('Tab Container', () => {
|
|
const mockData = {
|
|
children: [],
|
|
fetch: mockFetch,
|
|
tab: 'dummy',
|
|
slice: 'courseware',
|
|
};
|
|
let courseId;
|
|
|
|
beforeAll(async () => {
|
|
const store = await initializeTestStore({ excludeFetchSequence: true });
|
|
courseId = store.getState().courseware.courseId;
|
|
});
|
|
|
|
it('renders correctly', () => {
|
|
history.push(`/course/${courseId}`);
|
|
render(
|
|
<Route path="/course/:courseId">
|
|
<TabContainer {...mockData} />
|
|
</Route>,
|
|
);
|
|
|
|
expect(mockFetch)
|
|
.toHaveBeenCalledTimes(1)
|
|
.toHaveBeenCalledWith(courseId);
|
|
expect(mockDispatch)
|
|
.toHaveBeenCalledTimes(1)
|
|
.toHaveBeenCalledWith(courseId);
|
|
expect(screen.getByTestId('TabPage')).toBeInTheDocument();
|
|
});
|
|
});
|