chore(deps): update @openedx dependencies to versions that support React 18 (#758)

Author: brian-smith-tcril

package-lock.json

@@ -16,6 +16,7 @@
     "lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/discussions/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
   "husky": {
@@ -34,11 +35,12 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.6.0",
-    "@edx/frontend-platform": "8.0.0",
+    "@edx/frontend-component-footer": "^14.3.0",
+    "@edx/frontend-component-header": "^6.2.0",
+    "@edx/frontend-platform": "^8.3.1",
     "@edx/openedx-atlas": "^0.6.0",
     "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.1.1",
+    "@openedx/paragon": "^22.16.0",
     "@reduxjs/toolkit": "1.9.7",
     "@tinymce/tinymce-react": "3.13.1",
     "babel-polyfill": "6.26.0",
@@ -64,7 +66,7 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
     "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "14.0.3",
+    "@openedx/frontend-build": "^14.3.3",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",

package.json

@@ -106,8 +106,8 @@ describe('HoverCard', () => {
   });
 
   test('it should have hover card on post', async () => {
-    await waitFor(() => renderComponent(discussionPostId));
-    const post = screen.getByTestId('post-thread-1');
+    renderComponent(discussionPostId);
+    const post = await screen.findByTestId('post-thread-1');
     expect(within(post).getByTestId('hover-card-thread-1')).toBeInTheDocument();
   });
 

src/discussions/common/HoverCard.test.jsx

@@ -90,8 +90,7 @@ describe('DiscussionsHome', () => {
 
   test('full view should hide close button', async () => {
     renderComponent(`/${courseId}/topics`);
-    expect(screen.queryByText(navigationBarMessages.allTopics.defaultMessage))
-      .toBeInTheDocument();
+    await screen.findByText(navigationBarMessages.allTopics.defaultMessage);
     expect(screen.queryByRole('button', { name: 'Close' }))
       .not
       .toBeInTheDocument();
@@ -144,9 +143,7 @@ describe('DiscussionsHome', () => {
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
-    waitFor(() => {
-      expect(screen.queryByText('Add a post')).toBeInTheDocument();
-    });
+    await screen.findByText('Add a post');
   });
 
   it.each([
@@ -170,9 +167,7 @@ describe('DiscussionsHome', () => {
     await executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
-    waitFor(() => {
-      expect(screen.queryByText(result)).toBeInTheDocument();
-    });
+    await screen.findByText(result);
   });
 
   it.each([
@@ -199,9 +194,7 @@ describe('DiscussionsHome', () => {
       await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
       await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
-      waitFor(() => {
-        expect(screen.queryByText('No topic selected')).toBeInTheDocument();
-      });
+      await screen.findByText('No topic selected');
     },
   );
 
@@ -210,9 +203,7 @@ describe('DiscussionsHome', () => {
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/learners`);
 
-    waitFor(() => {
-      expect(screen.queryByText('Nothing here yet')).toBeInTheDocument();
-    });
+    await screen.findByText('Nothing here yet');
   });
 
   it('should display post editor form when click on add a post button for posts', async () => {
@@ -235,10 +226,10 @@ describe('DiscussionsHome', () => {
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/topics`);
 
-    await waitFor(() => expect(screen.queryByText('Nothing here yet')).toBeInTheDocument());
+    await screen.findByText('Nothing here yet');
 
     await act(async () => {
-      fireEvent.click(screen.queryByText('Add a post'));
+      fireEvent.click(await screen.findByText('Add a post'));
     });
 
     await waitFor(() => expect(container.querySelector('.post-form')).toBeInTheDocument());
@@ -247,27 +238,27 @@ describe('DiscussionsHome', () => {
   it('should display Add a post button for legacy topics view', async () => {
     await renderComponent(`/${courseId}/topics/topic-1`);
 
-    await waitFor(() => expect(screen.queryByText('Add a post')).toBeInTheDocument());
+    await screen.findByText('Add a post');
   });
 
   it('should display No post selected for legacy topics view', async () => {
     await setUpV1TopicsMockResponse();
     await renderComponent(`/${courseId}/topics/category-1-topic-1`);
 
-    await waitFor(() => expect(screen.queryByText('No post selected')).toBeInTheDocument());
+    await screen.findByText('No post selected');
   });
 
   it('should display No topic selected for legacy topics view', async () => {
     await setUpV1TopicsMockResponse();
     await renderComponent(`/${courseId}/topics`);
 
-    await waitFor(() => expect(screen.queryByText('No topic selected')).toBeInTheDocument());
+    await screen.findByText('No topic selected');
   });
 
   it('should display navigation tabs', async () => {
     renderComponent(`/${courseId}/topics`);
 
-    await waitFor(() => expect(screen.queryByText('Discussion')).toBeInTheDocument());
+    await screen.findByText('Discussion');
   });
 
   it('should display content unavailable message when the user is not enrolled in the course.', async () => {
@@ -276,7 +267,7 @@ describe('DiscussionsHome', () => {
 
     renderComponent();
 
-    await waitFor(() => expect(screen.queryByText('Content unavailable')).toBeInTheDocument());
+    await screen.findByText('Content unavailable');
   });
 
   it('should redirect to dashboard when the user clicks on the Enroll button.', async () => {

src/discussions/discussions-home/DiscussionsHome.test.jsx

@@ -66,15 +66,13 @@ describe('EmptyTopics', () => {
 
   test('"no topic selected" text shown when viewing topics page', async () => {
     renderComponent(`/${courseId}/topics/`);
-    expect(screen.queryByText(messages.emptyTitle.defaultMessage))
-      .toBeInTheDocument();
+    await screen.findByText(messages.emptyTitle.defaultMessage);
   });
 
   test('"no post selected" text shown when viewing a specific topic', async () => {
     await setupMockResponse();
     renderComponent(`/${courseId}/topics/ncwtopic-3/`);
 
-    expect(screen.queryByText(messages.noPostSelected.defaultMessage))
-      .toBeInTheDocument();
+    await screen.findByText(messages.noPostSelected.defaultMessage);
   });
 });

src/discussions/empty-posts/EmptyTopics.test.jsx

@@ -283,9 +283,9 @@ describe('InContext Topic Posts View', () => {
       await setupTopicsMockResponse(0, 0, 0);
       await renderComponent({ topicId: 'test-topic', category: 'test-category' });
 
-      await waitFor(() => expect(within(container).queryByText('Nothing here yet')).toBeInTheDocument());
-      expect(within(container).queryByText('No topic exists')).toBeInTheDocument();
-      expect(within(container).queryByText('Unnamed Topic')).toBeInTheDocument();
+      await within(container).findByText('Nothing here yet');
+      await within(container).findByText('No topic exists');
+      await within(container).findByText('Unnamed Topic');
     },
   );
 

src/discussions/in-context-topics/TopicPostsView.test.jsx

@@ -2,6 +2,7 @@ import {
   fireEvent, render, screen, waitFor,
   within,
 } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
@@ -165,9 +166,10 @@ describe('InContext Topics View', () => {
   it('The subsection should have a title name, be clickable, and have the stats', async () => {
     await setupMockResponse();
     renderComponent();
+    await screen.findByTestId('redux-provider');
     const subsectionObject = coursewareTopics[0].children[0];
     const subSection = await container.querySelector(`[data-subsection-id=${subsectionObject.id}]`);
-    const subSectionTitle = await within(subSection).queryByText(subsectionObject.displayName);
+    const subSectionTitle = await within(subSection).findByText(subsectionObject.displayName);
     const statsList = await subSection.querySelectorAll('.icon-size');
 
     expect(subSectionTitle).toBeInTheDocument();
@@ -177,11 +179,12 @@ describe('InContext Topics View', () => {
   it('Subsection names should be clickable and redirected to the units lists', async () => {
     await setupMockResponse();
     renderComponent();
+    await screen.findByTestId('redux-provider');
 
     const subsectionObject = coursewareTopics[0].children[0];
     const subSection = await container.querySelector(`[data-subsection-id=${subsectionObject.id}]`);
 
-    await act(async () => { fireEvent.click(subSection); });
+    await userEvent.click(subSection);
     await waitFor(async () => {
       const backButton = await screen.getByLabelText('Back to topics list');
       const topicsList = await screen.getByRole('list');
@@ -198,9 +201,11 @@ describe('InContext Topics View', () => {
   it('The number of units should be matched with the actual unit length.', async () => {
     await setupMockResponse();
     renderComponent();
+    await screen.findByTestId('redux-provider');
+
     const subSection = await container.querySelector(`[data-subsection-id=${coursewareTopics[0].children[0].id}]`);
 
-    await act(async () => { fireEvent.click(subSection); });
+    await userEvent.click(subSection);
     await waitFor(async () => {
       const units = await container.querySelectorAll('.discussion-topic');
 
@@ -211,12 +216,14 @@ describe('InContext Topics View', () => {
   it('A unit should have a title and should be clickable', async () => {
     await setupMockResponse();
     renderComponent();
+    await screen.findByTestId('redux-provider');
+
     const subSectionObject = coursewareTopics[0].children[0];
     const unitObject = subSectionObject.children[0];
 
     const subSection = await container.querySelector(`[data-subsection-id=${subSectionObject.id}]`);
 
-    await act(async () => { fireEvent.click(subSection); });
+    await userEvent.click(subSection);
     await waitFor(async () => {
       const unitElement = await screen.findByText(unitObject.name);
       const unitContainer = await container.querySelector(`[data-topic-id=${unitObject.id}]`);