diff --git a/src/courseware/course/Course.test.jsx b/src/courseware/course/Course.test.jsx
index 2dc15bd4..4eeb4f20 100644
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -117,10 +117,10 @@ describe('Course', () => {
render();
expect(sessionStorage.getItem(`notificationTrayStatus.${mockData.courseId}`)).toBe('"open"');
const notificationShowButton = await screen.findByRole('button', { name: /Show notification tray/i });
- expect(screen.queryByRole('region', { name: /notification tray/i })).toBeInTheDocument();
+ expect(screen.queryByRole('region', { name: /notification tray/i })).not.toHaveClass('d-none');
fireEvent.click(notificationShowButton);
expect(sessionStorage.getItem(`notificationTrayStatus.${mockData.courseId}`)).toBe('"closed"');
- expect(screen.queryByRole('region', { name: /notification tray/i })).not.toBeInTheDocument();
+ expect(screen.queryByRole('region', { name: /notification tray/i })).toHaveClass('d-none');
});
it('handles reload persisting notification tray status', async () => {
diff --git a/src/courseware/course/sequence/Sequence.test.jsx b/src/courseware/course/sequence/Sequence.test.jsx
index d771d97d..8c07f989 100644
--- a/src/courseware/course/sequence/Sequence.test.jsx
+++ b/src/courseware/course/sequence/Sequence.test.jsx
@@ -74,8 +74,8 @@ describe('Sequence', () => {
);
await waitFor(() => expect(screen.queryByText('Loading locked content messaging...')).toBeInTheDocument());
- // `Previous`, `Active`, `Next` and `Prerequisite` buttons.
- expect(screen.getAllByRole('button').length).toEqual(4);
+ // `Previous`, `Active`, `Next`, `Prerequisite` and `Close Tray` buttons.
+ expect(screen.getAllByRole('button').length).toEqual(5);
expect(screen.getByText('Content Locked')).toBeInTheDocument();
const unitContainer = container.querySelector('.unit-container');
@@ -126,7 +126,7 @@ describe('Sequence', () => {
render();
expect(await screen.findByText('Loading learning sequence...')).toBeInTheDocument();
// Renders navigation buttons plus one button for each unit.
- expect(screen.getAllByRole('button')).toHaveLength(3 + unitBlocks.length);
+ expect(screen.getAllByRole('button')).toHaveLength(4 + unitBlocks.length);
loadUnit();
await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument());
diff --git a/src/courseware/course/sidebar/Sidebar.jsx b/src/courseware/course/sidebar/Sidebar.jsx
index 7acfa525..94511ab7 100644
--- a/src/courseware/course/sidebar/Sidebar.jsx
+++ b/src/courseware/course/sidebar/Sidebar.jsx
@@ -1,18 +1,15 @@
-import React, { useContext } from 'react';
-import SidebarContext from './SidebarContext';
-import { SIDEBARS } from './sidebars';
+import React from 'react';
+import { SIDEBAR_ORDER, SIDEBARS } from './sidebars';
-const Sidebar = () => {
- const {
- currentSidebar,
- } = useContext(SidebarContext);
- if (!currentSidebar) {
- return null;
- }
- const CurrentSidebar = SIDEBARS[currentSidebar].Sidebar;
- return (
-
- );
-};
+const Sidebar = () => (
+ <>
+ {
+ SIDEBAR_ORDER.map((sideBarId) => {
+ const SidebarToRender = SIDEBARS[sideBarId].Sidebar;
+ return ;
+ })
+ }
+ >
+);
export default Sidebar;
diff --git a/src/courseware/course/sidebar/common/SidebarBase.jsx b/src/courseware/course/sidebar/common/SidebarBase.jsx
index a1c6651c..2e2e44fb 100644
--- a/src/courseware/course/sidebar/common/SidebarBase.jsx
+++ b/src/courseware/course/sidebar/common/SidebarBase.jsx
@@ -34,11 +34,12 @@ const SidebarBase = ({
useEventListener('message', receiveMessage);
- return currentSidebar === sidebarId && (
+ return (
{
className="d-flex w-100 h-100 border-0"
title={intl.formatMessage(messages.discussionsTitle)}
allow="clipboard-write"
+ loading="lazy"
/>
);