feat: better tests for <SettingsComponent>

Author: bradenmacdonald

src/pages-and-resources/SettingsComponent.test.jsx

@@ -1,26 +1,83 @@
 import React, { Suspense } from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import { render } from '@testing-library/react';
+import { useParams } from 'react-router-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
 
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import initializeStore from 'CourseAuthoring/store';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
 import SettingsComponent from './SettingsComponent';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
-  useParams: () => ({
-    appId: 'wiki',
-  }),
+  useParams: jest.fn(),
 }));
 
+jest.mock('CourseAuthoring/utils', () => ({
+  useAppSetting: () => [false, () => undefined],
+  useIsMobile: () => false,
+}));
+
+let store;
+
+// eslint-disable-next-line react/prop-types
+const RequiredProviders = ({ children }) => (
+  <IntlProvider locale="en" messages={{}}>
+    <AppProvider store={store}>
+      <PagesAndResourcesProvider courseId="course-v1:foo+bar+baz">
+        {children}
+      </PagesAndResourcesProvider>
+    </AppProvider>
+  </IntlProvider>
+);
+
 describe('SettingsComponent', () => {
+  beforeEach(async () => {
+    initializeMockApp();
+    store = initializeStore({
+      models: {
+        courseApps: {
+          wiki: {},
+        },
+      },
+      pagesAndResources: {
+        loadingStatus: RequestStatus.SUCCESSFUL,
+      },
+    });
+  });
+
   test('renders LazyLoadedComponent when provided with props', async () => {
-    const { asFragment } = render(
-      <BrowserRouter>
-        <Suspense fallback="...">
-          <SettingsComponent url="/some-url" />
-        </Suspense>
-      </BrowserRouter>,
+    useParams.mockImplementation(() => ({ appId: 'wiki' }));
+
+    const rendered = render(
+      <Suspense fallback="...">
+        <SettingsComponent url="/some-url" />
+      </Suspense>,
+      { wrapper: RequiredProviders },
+    );
+
+    await waitFor(() => expect(rendered.getByText('Configure wiki')).toBeInTheDocument());
+
+    const modalComponent = screen.getByRole('dialog');
+    expect(modalComponent.querySelector('#enable-wiki-toggleHelpText')).toContainHTML('The course wiki can be set up');
+  });
+
+  test('renders error message when plugin is unavilable when provided with props', async () => {
+    // Silence noisy error about the plugin failing to load, when we do that deliberately.
+    jest.spyOn(console, 'trace').mockImplementation(() => {});
+    // Specify an invalid course app, with no matching plugin:
+    useParams.mockImplementation(() => ({ appId: 'invalid-plugin' }));
+
+    const rendered = render(
+      <Suspense fallback="...">
+        <SettingsComponent url="/some-url" />
+      </Suspense>,
+      { wrapper: RequiredProviders },
     );
 
-    expect(asFragment).toMatchSnapshot();
+    const errorMessage = 'An error occurred when loading the configuration UI';
+    await waitFor(() => expect(rendered.container).toHaveTextContent(errorMessage));
   });
 });

src/pages-and-resources/__snapshots__/SettingsComponent.test.jsx.snap

@@ -6,8 +6,8 @@ import React, { useState } from 'react';
 
 import { useSelector } from 'react-redux';
 import * as Yup from 'yup';
-import { useModel, useModels } from '../../../../../generic/model-store';
-import { setupYupExtensions } from '../../../../../utils';
+import { useModel, useModels } from 'CourseAuthoring/generic/model-store';
+import { setupYupExtensions } from 'CourseAuthoring/utils';
 import messages from '../../messages';
 import { checkFieldErrors } from '../../utils';
 import AnonymousPostingFields from '../shared/AnonymousPostingFields';

src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.jsx

@@ -6,7 +6,7 @@ import { reducer as liveReducer } from '@openedx-plugins/course-app-live/data/sl
 
 import { reducer as modelsReducer } from './generic/model-store';
 import { reducer as courseDetailReducer } from './data/slice';
-import { reducer as discussionsReducer } from './pages-and-resources/discussions';
+import { reducer as discussionsReducer } from './pages-and-resources/discussions/data/slice';
 import { reducer as pagesAndResourcesReducer } from './pages-and-resources/data/slice';
 import { reducer as customPagesReducer } from './custom-pages/data/slice';
 import { reducer as advancedSettingsReducer } from './advanced-settings/data/slice';