fix: pages and resources plugins not rendered (#1885)

Author: jansenk

src/pages-and-resources/PagesAndResources.jsx

@@ -92,15 +92,15 @@ const PagesAndResources = ({ courseId }) => {
           <Route path=":appId/settings" element={<PageWrap><SettingsComponent url={redirectUrl} /></PageWrap>} />
         </Routes>
 
-        <PageGrid pages={pages} pluginSlotComponent={AdditionalCoursePluginSlot} courseId={courseId} />
+        <PageGrid pages={pages} pluginSlotComponent={<AdditionalCoursePluginSlot />} courseId={courseId} />
         {
           (contentPermissionsPages.length > 0 || hasAdditionalCoursePlugin)
             && (
               <>
                 <div className="d-flex justify-content-between my-4 my-md-5 align-items-center">
                   <h3 className="m-0">{intl.formatMessage(messages.contentPermissions)}</h3>
                 </div>
-                <PageGrid pages={contentPermissionsPages} pluginSlotComponent={AdditionalCourseContentPluginSlot} />
+                <PageGrid pages={contentPermissionsPages} pluginSlotComponent={<AdditionalCourseContentPluginSlot />} />
               </>
             )
         }

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

@@ -1,16 +1,39 @@
 import { screen, waitFor } from '@testing-library/react';
 
+import { getConfig, setConfig } from '@edx/frontend-platform';
+import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
 import { PagesAndResources } from '.';
 import { render } from './utils.test';
 
+const mockPlugin = (identifier) => ({
+  plugins: [
+    {
+      op: PLUGIN_OPERATIONS.Insert,
+      widget: {
+        id: 'mock-plugin-1',
+        type: DIRECT_PLUGIN,
+        priority: 1,
+        RenderWidget: () => <div data-testid={identifier}>HELLO</div>,
+      },
+    },
+  ],
+});
+
 const courseId = 'course-v1:edX+TestX+Test_Course';
 
 describe('PagesAndResources', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    setConfig({
+      ...getConfig(),
+      pluginSlots: {
+        'org.openedx.frontend.authoring.additional_course_plugin.v1': mockPlugin('additional_course_plugin'),
+        'org.openedx.frontend.authoring.additional_course_content_plugin.v1': mockPlugin('additional_course_content_plugin'),
+      },
+    });
   });
 
-  it('doesn\'t show content permissions section if relevant apps are not enabled', () => {
+  it('doesn\'t show content permissions section if relevant apps are not enabled', async () => {
     const initialState = {
       models: {
         courseApps: {},
@@ -25,8 +48,11 @@ describe('PagesAndResources', () => {
       { preloadedState: initialState },
     );
 
-    expect(screen.queryByRole('heading', { name: 'Content permissions' })).not.toBeInTheDocument();
+    await waitFor(() => expect(screen.queryByRole('heading', { name: 'Content permissions' })).not.toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByTestId('additional_course_plugin')).toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByTestId('additional_course_content_plugin')).not.toBeInTheDocument());
   });
+
   it('show content permissions section if Learning Assistant app is enabled', async () => {
     const initialState = {
       models: {
@@ -56,6 +82,8 @@ describe('PagesAndResources', () => {
 
     await waitFor(() => expect(screen.getByRole('heading', { name: 'Content permissions' })).toBeInTheDocument());
     await waitFor(() => expect(screen.getByText('Learning Assistant')).toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByTestId('additional_course_plugin')).toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByTestId('additional_course_content_plugin')).toBeInTheDocument());
   });
 
   it('show content permissions section if Xpert learning summaries app is enabled', async () => {
@@ -89,5 +117,7 @@ describe('PagesAndResources', () => {
 
     await waitFor(() => expect(screen.getByRole('heading', { name: 'Content permissions' })).toBeInTheDocument());
     await waitFor(() => expect(screen.getByText('Xpert unit summaries')).toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByTestId('additional_course_plugin')).toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByTestId('additional_course_content_plugin')).toBeInTheDocument());
   });
 });

src/plugin-slots/AdditionalCourseContentPluginSlot/index.tsx

@@ -1,5 +1,4 @@
 import { PluginSlot } from '@openedx/frontend-plugin-framework/dist';
-import React from 'react';
 
 export const AdditionalCourseContentPluginSlot = () => (
   <PluginSlot

src/plugin-slots/AdditionalCoursePluginSlot/index.tsx

@@ -1,5 +1,4 @@
 import { PluginSlot } from '@openedx/frontend-plugin-framework/dist';
-import React from 'react';
 
 export const AdditionalCoursePluginSlot = () => (
   <PluginSlot