![{intl.formatMessage(messages['learn.lockPaywall.example.alt'])}]()
diff --git a/src/courseware/course/sequence/lock-paywall/LockPaywall.test.jsx b/src/courseware/course/sequence/lock-paywall/LockPaywall.test.jsx
index c37c6b4a50..60ac428642 100644
--- a/src/courseware/course/sequence/lock-paywall/LockPaywall.test.jsx
+++ b/src/courseware/course/sequence/lock-paywall/LockPaywall.test.jsx
@@ -11,7 +11,7 @@ jest.mock('@edx/frontend-platform/analytics');
describe('Lock Paywall', () => {
let store;
- const mockData = { currentSidebar: null };
+ const mockData = { notificationTrayVisible: false };
beforeAll(async () => {
store = await initializeTestStore();
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 7fc986cdf1..81cd5a6bc7 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -41,7 +41,7 @@ const SequenceNavigation = ({
sequence.gatedContent !== undefined && sequence.gatedContent.gated
) : undefined;
- const isSmallScreen = useWindowSize().width < breakpoints.small.minWidth;
+ const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth;
const renderUnitButtons = () => {
if (isLocked) {
@@ -71,7 +71,7 @@ const SequenceNavigation = ({
onClick={previousHandler}
previousLink={previousLink}
isFirstUnit={isFirstUnit}
- buttonLabel={isSmallScreen ? null : intl.formatMessage(messages.previousButton)}
+ buttonLabel={shouldDisplayNotificationTriggerInSequence ? null : intl.formatMessage(messages.previousButton)}
/>
);
@@ -82,7 +82,7 @@ const SequenceNavigation = ({
if (isLastUnit && exitText) {
buttonText = exitText;
- } else if (!isSmallScreen) {
+ } else if (!shouldDisplayNotificationTriggerInSequence) {
buttonText = intl.formatMessage(messages.nextButton);
}
return navigationDisabledNextSequence || (
@@ -101,7 +101,7 @@ const SequenceNavigation = ({
};
return sequenceStatus === LOADED ? (
-
) : null}
{showTitleBar && (
-
-
{title}
- {shouldDisplayFullScreen
- ? null
- : (
-
- toggleSidebar(null)}
- variant="primary"
- alt={intl.formatMessage(messages.closeSidebarTrigger)}
- />
-
- )}
-
+ <>
+
+
{title}
+ {shouldDisplayFullScreen
+ ? null
+ : (
+
+ toggleSidebar(null)}
+ variant="primary"
+ alt={intl.formatMessage(messages.closeNotificationTrigger)}
+ />
+
+ )}
+
+
)}
{children}
diff --git a/src/courseware/course/sidebar/common/SidebarBase.test.jsx b/src/courseware/course/sidebar/common/SidebarBase.test.jsx
deleted file mode 100644
index 7c3b4b777c..0000000000
--- a/src/courseware/course/sidebar/common/SidebarBase.test.jsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from 'react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { render, screen, fireEvent } from '@testing-library/react';
-import SidebarContext from '../SidebarContext';
-import SidebarBase from './SidebarBase';
-
-const mockToggleSidebar = jest.fn();
-
-const defaultContextValue = {
- toggleSidebar: mockToggleSidebar,
- shouldDisplayFullScreen: false,
- currentSidebar: 'TEST_SIDEBAR',
-};
-
-const defaultProps = {
- title: 'Test Sidebar Title',
- ariaLabel: 'Test Sidebar',
- sidebarId: 'TEST_SIDEBAR',
- className: '',
- children:
Sidebar child content
,
-};
-
-function renderSidebarBase(props = {}, contextValue = {}) {
- const mergedContext = { ...defaultContextValue, ...contextValue };
- return render(
-
-
-
-
- ,
- );
-}
-
-describe('SidebarBase', () => {
- beforeEach(() => {
- jest.clearAllMocks();
- });
-
- it('renders children when currentSidebar matches sidebarId', () => {
- renderSidebarBase();
-
- expect(screen.getByText('Sidebar child content')).toBeInTheDocument();
- });
-
- it('renders the sidebar section with correct data-testid', () => {
- const { container } = renderSidebarBase();
-
- expect(container.querySelector('[data-testid="sidebar-TEST_SIDEBAR"]')).toBeInTheDocument();
- });
-
- it('adds d-none class when currentSidebar does not match sidebarId', () => {
- const { container } = renderSidebarBase({}, { currentSidebar: 'OTHER_SIDEBAR' });
- const section = container.querySelector('[data-testid="sidebar-TEST_SIDEBAR"]');
-
- expect(section).toHaveClass('d-none');
- });
-
- it('does not add d-none class when currentSidebar matches sidebarId', () => {
- const { container } = renderSidebarBase();
- const section = container.querySelector('[data-testid="sidebar-TEST_SIDEBAR"]');
-
- expect(section).not.toHaveClass('d-none');
- });
-
- describe('desktop mode (shouldDisplayFullScreen=false)', () => {
- it('renders the sidebar title', () => {
- renderSidebarBase();
-
- expect(screen.getByText('Test Sidebar Title')).toBeInTheDocument();
- });
-
- it('renders the close button', () => {
- renderSidebarBase();
-
- expect(screen.getByRole('button', { name: /close sidebar/i })).toBeInTheDocument();
- });
-
- it('calls toggleSidebar(null) when close button is clicked', () => {
- renderSidebarBase();
- fireEvent.click(screen.getByRole('button', { name: /close sidebar/i }));
-
- expect(mockToggleSidebar).toHaveBeenCalledWith(null);
- });
-
- it('does not render the back-to-course button', () => {
- renderSidebarBase();
-
- expect(screen.queryByText(/back to course/i)).not.toBeInTheDocument();
- });
- });
-
- describe('mobile mode (shouldDisplayFullScreen=true)', () => {
- it('renders the "Back to course" back-navigation button', () => {
- renderSidebarBase({}, { shouldDisplayFullScreen: true });
-
- expect(screen.getByText(/back to course/i)).toBeInTheDocument();
- });
-
- it('calls toggleSidebar(null) when back-navigation button is clicked', () => {
- renderSidebarBase({}, { shouldDisplayFullScreen: true });
- fireEvent.click(screen.getByRole('button', { name: /back to course/i }));
-
- expect(mockToggleSidebar).toHaveBeenCalledWith(null);
- });
-
- it('does not render the desktop close button', () => {
- renderSidebarBase({}, { shouldDisplayFullScreen: true });
-
- expect(screen.queryByRole('button', { name: /close sidebar/i })).not.toBeInTheDocument();
- });
- });
-
- describe('showTitleBar prop', () => {
- it('hides title and close button when showTitleBar=false', () => {
- renderSidebarBase({ showTitleBar: false });
-
- expect(screen.queryByText('Test Sidebar Title')).not.toBeInTheDocument();
- expect(screen.queryByRole('button', { name: /close sidebar/i })).not.toBeInTheDocument();
- });
-
- it('shows title bar by default when showTitleBar is not specified', () => {
- renderSidebarBase();
-
- expect(screen.getByText('Test Sidebar Title')).toBeInTheDocument();
- });
- });
-
- describe('postMessage event handling', () => {
- it('calls toggleSidebar(null) when receiving learning.events.sidebar.close message', () => {
- renderSidebarBase();
- fireEvent(
- window,
- new MessageEvent('message', { data: { type: 'learning.events.sidebar.close' } }),
- );
-
- expect(mockToggleSidebar).toHaveBeenCalledWith(null);
- });
-
- it('does not call toggleSidebar for unrelated message types', () => {
- renderSidebarBase();
- fireEvent(
- window,
- new MessageEvent('message', { data: { type: 'some.other.event' } }),
- );
-
- expect(mockToggleSidebar).not.toHaveBeenCalled();
- });
- });
-
- describe('width prop', () => {
- it('applies custom width to the section element in desktop mode', () => {
- const { container } = renderSidebarBase({ width: '50rem' });
- const section = container.querySelector('[data-testid="sidebar-TEST_SIDEBAR"]');
-
- expect(section.style.width).toBe('50rem');
- });
- });
-});
diff --git a/src/courseware/course/sidebar/common/TriggerBase.jsx b/src/courseware/course/sidebar/common/TriggerBase.jsx
index 753d44abdf..d40303d012 100644
--- a/src/courseware/course/sidebar/common/TriggerBase.jsx
+++ b/src/courseware/course/sidebar/common/TriggerBase.jsx
@@ -7,7 +7,7 @@ const SidebarTriggerBase = ({
children,
}) => (