|
diff --git a/src/courseware/course/sequence/Unit/hooks/useExamAccess.test.jsx b/src/courseware/course/sequence/Unit/hooks/useExamAccess.test.jsx
index d6d40852..05330007 100644
--- a/src/courseware/course/sequence/Unit/hooks/useExamAccess.test.jsx
+++ b/src/courseware/course/sequence/Unit/hooks/useExamAccess.test.jsx
@@ -1,6 +1,6 @@
import { useState } from 'react';
import { logError } from '@edx/frontend-platform/logging';
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook, waitFor } from '@testing-library/react';
import { useExamAccessToken, useFetchExamAccessToken, useIsExam } from '@edx/frontend-lib-special-exams';
import { initializeMockApp } from '../../../../../setupTest';
@@ -64,24 +64,27 @@ describe('useExamAccess hook', () => {
it('returns true for blockAccess if an exam but accessToken not yet fetched', async () => {
useIsExam.mockImplementation(() => mockUseIsExam(true));
- const { result, waitForNextUpdate } = renderHook(() => useExamAccess({ id }));
+ const { result } = renderHook(() => useExamAccess({ id }));
const { accessToken, blockAccess } = result.current;
expect(accessToken).toEqual('');
expect(blockAccess).toBe(true);
expect(mockFetchExamAccessToken).toHaveBeenCalled();
- // This is to get rid of the act(...) warning.
- await act(async () => {
- await waitForNextUpdate();
+ await waitFor(() => {
+ expect(result.current).toBeTruthy();
+ expect(result.current?.isFetching).toBeFalsy();
});
});
it('returns false for blockAccess if an exam and accessToken fetch succeeds', async () => {
useIsExam.mockImplementation(() => mockUseIsExam(true));
- const { result, waitForNextUpdate } = renderHook(() => useExamAccess({ id }));
+ const { result } = renderHook(() => useExamAccess({ id }));
// We wait for the promise to resolve and for updates to state to complete so that blockAccess is updated.
- await waitForNextUpdate();
+ await waitFor(() => {
+ expect(result.current).toBeTruthy();
+ expect(result.current?.isFetching).toBeFalsy();
+ });
const { accessToken, blockAccess } = result.current;
@@ -90,7 +93,7 @@ describe('useExamAccess hook', () => {
expect(mockFetchExamAccessToken).toHaveBeenCalled();
});
it('in progress', async () => {
- const { result, waitForNextUpdate } = renderHook(() => useExamAccess({ id }));
+ const { result } = renderHook(() => useExamAccess({ id }));
let { accessToken, blockAccess } = result.current;
@@ -104,7 +107,10 @@ describe('useExamAccess hook', () => {
// wait for call to setBlockAccess in the finally clause of useEffect hook.
await act(async () => {
jest.runAllTimers();
- await waitForNextUpdate();
+ await waitFor(() => {
+ expect(result.current).toBeTruthy();
+ expect(result.current?.isFetching).toBeFalsy();
+ });
});
({ accessToken, blockAccess } = result.current);
@@ -119,17 +125,22 @@ describe('useExamAccess hook', () => {
const testError = 'test-error';
mockFetchExamAccessToken.mockImplementationOnce(() => Promise.reject(testError));
- const { result, waitForNextUpdate } = renderHook(() => useExamAccess({ id }));
+ const { result } = renderHook(() => useExamAccess({ id }));
// We wait for the promise to resolve and for updates to state to complete so that blockAccess is updated.
- await waitForNextUpdate();
+ await waitFor(() => {
+ expect(result.current).toBeTruthy();
+ expect(result.current?.isFetching).toBeFalsy();
+ });
const { accessToken, blockAccess } = result.current;
expect(accessToken).toEqual(testAccessToken.curr);
expect(blockAccess).toBe(false);
expect(mockFetchExamAccessToken).toHaveBeenCalled();
- expect(logError).toHaveBeenCalledWith(testError);
+ await waitFor(() => {
+ expect(logError).toHaveBeenCalledWith(testError);
+ });
});
});
});
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx
index cbbbcf50..22631d90 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx
@@ -1,6 +1,7 @@
import React from 'react';
import { Factory } from 'rosie';
-import { act, fireEvent, getAllByRole } from '@testing-library/react';
+import { getAllByRole } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import { initializeTestStore, render, screen } from '../../../../setupTest';
import SequenceNavigationTabs from './SequenceNavigationTabs';
@@ -48,21 +49,18 @@ describe('Sequence Navigation Tabs', () => {
it('renders unit buttons and dropdown button', async () => {
let container = null;
- await act(async () => {
- useIndexOfLastVisibleChild.mockReturnValue([-1, null, null]);
- const booyah = render(, { wrapWithRouter: true });
- // wait for links to appear so we aren't testing an empty div
- await screen.findAllByRole('link');
+ useIndexOfLastVisibleChild.mockReturnValue([-1, null, null]);
+ const booyah = render(, { wrapWithRouter: true });
- container = booyah.container;
+ // wait for links to appear so we aren't testing an empty div
+ await screen.findAllByRole('link');
+
+ container = booyah.container;
+
+ const dropdownToggle = container.querySelector('.dropdown-toggle');
+ await userEvent.click(dropdownToggle);
- const dropdownToggle = container.querySelector('.dropdown-toggle');
- // We need to await this click here, which requires us to await the `act` as well above.
- // https://github.com/testing-library/react-testing-library/issues/535
- // Without doing this, we get a warning about using `act` even though we are.
- await fireEvent.click(dropdownToggle);
- });
const dropdownMenu = container.querySelector('.dropdown');
const dropdownButtons = getAllByRole(dropdownMenu, 'link');
expect(dropdownButtons).toHaveLength(unitBlocks.length);
diff --git a/src/index.jsx b/src/index.jsx
index 972d3c1e..fafe7e6d 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -4,7 +4,8 @@ import {
getConfig,
} from '@edx/frontend-platform';
import { AppProvider, ErrorPage, PageWrap } from '@edx/frontend-platform/react';
-import ReactDOM from 'react-dom';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
import { Routes, Route } from 'react-router-dom';
import { Helmet } from 'react-helmet';
@@ -37,113 +38,127 @@ import PreferencesUnsubscribe from './preferences-unsubscribe';
import PageNotFound from './generic/PageNotFound';
subscribe(APP_READY, () => {
- ReactDOM.render(
-
-
-
-
-
-
-
-
- } />
- } />
- } />
- } />
- }
- />
-
-
-
-
-
- )}
- />
-
-
-
-
-
- )}
- />
-
-
-
-
-
- )}
- />
-
-
-
-
-
- )}
- />
- {DECODE_ROUTES.PROGRESS.map((route) => (
+ const root = createRoot(document.getElementById('root'));
+
+ root.render(
+
+
+
+
+
+
+
+
+
+ } />
+ } />
+ } />
+ }
+ />
+ }
+ />
+
-
-
+
+
- )}
+ )}
/>
- ))}
-
-
-
-
-
- )}
- />
- {DECODE_ROUTES.COURSEWARE.map((route) => (
-
+
+
+
- )}
+ )}
/>
- ))}
-
-
-
-
- ,
- document.getElementById('root'),
+
+
+
+
+
+ )}
+ />
+
+
+
+
+
+ )}
+ />
+ {DECODE_ROUTES.PROGRESS.map((route) => (
+
+
+
+
+
+ )}
+ />
+ ))}
+
+
+
+
+
+ )}
+ />
+ {DECODE_ROUTES.COURSEWARE.map((route) => (
+
+
+
+ )}
+ />
+ ))}
+
+
+
+
+
+ ,
);
});
subscribe(APP_INIT_ERROR, (error) => {
- ReactDOM.render(, document.getElementById('root'));
+ const root = createRoot(document.getElementById('root'));
+
+ root.render(
+
+
+ ,
+ );
});
initialize({
diff --git a/src/index.test.jsx b/src/index.test.jsx
new file mode 100644
index 00000000..4ff17b46
--- /dev/null
+++ b/src/index.test.jsx
@@ -0,0 +1,83 @@
+import {
+ APP_INIT_ERROR, APP_READY, subscribe,
+} from '@edx/frontend-platform';
+
+// Jest needs this for module resolution
+import * as app from '.'; // eslint-disable-line @typescript-eslint/no-unused-vars
+
+// These need to be var not let so they get hoisted
+// and can be used by jest.mock (which is also hoisted)
+var mockRender; // eslint-disable-line no-var
+var mockCreateRoot; // eslint-disable-line no-var
+jest.mock('react-dom/client', () => {
+ mockRender = jest.fn();
+ mockCreateRoot = jest.fn(() => ({
+ render: mockRender,
+ }));
+
+ return ({
+ createRoot: mockCreateRoot,
+ });
+});
+
+jest.mock('react', () => ({
+ ...jest.requireActual('react'),
+ StrictMode: 'React Strict Mode',
+}));
+
+jest.mock('@edx/frontend-platform', () => ({
+ APP_READY: 'app-is-ready-key',
+ APP_INIT_ERROR: 'app-init-error',
+ subscribe: jest.fn(),
+ initialize: jest.fn(),
+ mergeConfig: jest.fn(),
+ getConfig: () => ({
+ FAVICON_URL: 'favicon-url',
+ }),
+ ensureConfig: jest.fn(),
+}));
+
+jest.mock('./generic/PageNotFound', () => 'Page Not Found');
+jest.mock('./course-home/goal-unsubscribe', () => 'Goal Unsubscribe');
+jest.mock('./courseware/CoursewareRedirectLandingPage', () => 'Courseware Redirect Landing Page');
+jest.mock('./preferences-unsubscribe', () => 'Preferences Unsubscribe');
+jest.mock('./generic/CourseAccessErrorPage', () => 'Course Access Error Page');
+jest.mock('./tab-page', () => ({ TabContainer: 'Tab Container' }));
+jest.mock('./course-home/outline-tab', () => 'Outline Tab');
+jest.mock('./course-home/live-tab/LiveTab', () => 'Live Tab');
+jest.mock('./course-home/dates-tab', () => 'Dates Tab');
+jest.mock('./course-home/discussion-tab/DiscussionTab', () => 'Discussion Tab');
+jest.mock('./course-home/progress-tab/ProgressTab', () => 'Progress Tab');
+jest.mock('./courseware/course/course-exit', () => ({ CourseExit: 'Course Exit' }));
+jest.mock('./courseware', () => 'Courseware Container');
+
+describe('app registry', () => {
+ let getElement;
+
+ beforeEach(() => {
+ mockCreateRoot.mockClear();
+ mockRender.mockClear();
+
+ getElement = window.document.getElementById;
+ window.document.getElementById = jest.fn(id => ({ id }));
+ });
+ afterAll(() => {
+ window.document.getElementById = getElement;
+ });
+
+ test('subscribe: APP_READY. links App to root element', () => {
+ const callArgs = subscribe.mock.calls[0];
+ expect(callArgs[0]).toEqual(APP_READY);
+ callArgs[1]();
+ const [rendered] = mockRender.mock.calls[0];
+ expect(rendered).toMatchSnapshot();
+ });
+ test('subscribe: APP_INIT_ERROR. snapshot: displays an ErrorPage to root element', () => {
+ const callArgs = subscribe.mock.calls[1];
+ expect(callArgs[0]).toEqual(APP_INIT_ERROR);
+ const error = { message: 'test-error-message' };
+ callArgs[1](error);
+ const [rendered] = mockRender.mock.calls[0];
+ expect(rendered).toMatchSnapshot();
+ });
+});
diff --git a/src/setupTest.js b/src/setupTest.js
index 9b2d0c5e..63da82ab 100755
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -1,5 +1,4 @@
import '@testing-library/jest-dom';
-import '@testing-library/jest-dom/extend-expect';
import './courseware/data/__factories__';
import './course-home/data/__factories__';
import { getConfig, mergeConfig } from '@edx/frontend-platform';
diff --git a/src/tests/MockedPluginSlot.test.jsx b/src/tests/MockedPluginSlot.test.jsx
index b830b68f..774a8807 100644
--- a/src/tests/MockedPluginSlot.test.jsx
+++ b/src/tests/MockedPluginSlot.test.jsx
@@ -10,23 +10,6 @@ describe('MockedPluginSlot', () => {
expect(component).toBeInTheDocument();
});
- it('renders as the slot children directly if there is content within', () => {
- render(
-
-
- How much wood could a woodchuck chuck if a woodchuck could chuck wood?
-
- ,
- );
-
- const component = screen.getByRole('article');
- expect(component).toBeInTheDocument();
-
- // Direct children
- const quote = component.querySelector(':scope > q');
- expect(quote.getAttribute('role')).toBe('note');
- });
-
it('renders mock plugin with a data-testid ', () => {
render(
|