Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brian-smith-tcril merged 5 commits into from
Mar 27, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f904f5d
chore(deps): update `@openedx` dependencies to versions that support …
brian-smith-tcril Mar 25, 2025
42727c0
chore(tests): fix `HoverCard` tests
brian-smith-tcril Mar 25, 2025
c274fc5
chore(tests): fix `DiscussionsHome` tests
brian-smith-tcril Mar 25, 2025
cf8e505
chore(tests): fix `TopicsView` tests
brian-smith-tcril Mar 25, 2025
985cb97
chore(tests): restore coverage
brian-smith-tcril Mar 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4,377 changes: 2,831 additions & 1,546 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 6 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -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",
Expand All @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/discussions/common/HoverCard.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

Expand Down
33 changes: 12 additions & 21 deletions src/discussions/discussions-home/DiscussionsHome.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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([
Expand All @@ -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([
Expand All @@ -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');
},
);

Expand All @@ -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 () => {
Expand All @@ -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());
Expand All @@ -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 () => {
Expand All @@ -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 () => {
Expand Down
6 changes: 2 additions & 4 deletions src/discussions/empty-posts/EmptyTopics.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
6 changes: 3 additions & 3 deletions src/discussions/in-context-topics/TopicPostsView.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
},
);

Expand Down
15 changes: 11 additions & 4 deletions src/discussions/in-context-topics/TopicsView.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
Expand All @@ -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');
Expand All @@ -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');

Expand All @@ -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}]`);
Expand Down