diff --git a/src/courseware/course/Course.test.jsx b/src/courseware/course/Course.test.jsx index 5f936feef8..312a7862e7 100644 --- a/src/courseware/course/Course.test.jsx +++ b/src/courseware/course/Course.test.jsx @@ -49,8 +49,7 @@ describe('Course', () => { setItemSpy.mockRestore(); }); - const setupDiscussionSidebar = async (storageValue = false) => { - localStorage.clear(); + const setupDiscussionSidebar = async () => { const testStore = await initializeTestStore({ provider: 'openedx' }); const state = testStore.getState(); const { courseware: { courseId } } = state; @@ -65,9 +64,7 @@ describe('Course', () => { mockData.unitId = firstUnitId; const [firstSequenceId] = Object.keys(state.models.sequences); mockData.sequenceId = firstSequenceId; - if (storageValue !== null) { - localStorage.setItem('showDiscussionSidebar', storageValue); - } + await render(, { store: testStore }); }; @@ -131,26 +128,66 @@ describe('Course', () => { }); it('displays notification trigger and toggles active class on click', async () => { - localStorage.setItem('showDiscussionSidebar', false); render(); const notificationTrigger = screen.getByRole('button', { name: /Show notification tray/i }); expect(notificationTrigger).toBeInTheDocument(); - expect(notificationTrigger.parentNode).toHaveClass('border-primary-700'); + expect(notificationTrigger.parentNode).toHaveClass('mt-3'); fireEvent.click(notificationTrigger); - expect(notificationTrigger.parentNode).not.toHaveClass('border-primary-700'); + expect(notificationTrigger.parentNode).not.toHaveClass('mt-3', { exact: true }); + }); + + it('handles click to open/close discussions sidebar', async () => { + await setupDiscussionSidebar(); + const discussionsTrigger = await screen.getByRole('button', { name: /Show discussions tray/i }); + const discussionsSideBar = await waitFor(() => screen.findByTestId('sidebar-DISCUSSIONS')); + + expect(discussionsSideBar).not.toHaveClass('d-none'); + + await act(async () => { + fireEvent.click(discussionsTrigger); + }); + await expect(discussionsSideBar).toHaveClass('d-none'); + + await act(async () => { + fireEvent.click(discussionsTrigger); + }); + await expect(discussionsSideBar).not.toHaveClass('d-none'); + }); + + it('displays discussions sidebar when unit changes', async () => { + const testStore = await initializeTestStore(); + const { courseware, models } = testStore.getState(); + const { courseId, sequenceId } = courseware; + const testData = { + ...mockData, + courseId, + sequenceId, + unitId: Object.values(models.units)[0].id, + }; + + await setupDiscussionSidebar(); + + const { rerender } = render(, { store: testStore }); + loadUnit(); + + await waitFor(() => { + expect(screen.getByTestId('sidebar-DISCUSSIONS')).toBeInTheDocument(); + expect(screen.getByTestId('sidebar-DISCUSSIONS')).not.toHaveClass('d-none'); + }); + + rerender(null); }); it('handles click to open/close notification tray', async () => { sessionStorage.clear(); - localStorage.setItem('showDiscussionSidebar', false); 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 })).not.toHaveClass('d-none'); + expect(screen.queryByRole('region', { name: /notification tray/i })).toHaveClass('d-none'); fireEvent.click(notificationShowButton); expect(sessionStorage.getItem(`notificationTrayStatus.${mockData.courseId}`)).toBe('"closed"'); - expect(screen.queryByRole('region', { name: /notification tray/i })).toHaveClass('d-none'); + expect(screen.queryByRole('region', { name: /notification tray/i })).not.toHaveClass('d-none'); }); it('handles reload persisting notification tray status', async () => { @@ -174,7 +211,6 @@ describe('Course', () => { it('handles sessionStorage from a different course for the notification tray', async () => { sessionStorage.clear(); - localStorage.setItem('showDiscussionSidebar', false); const courseMetadataSecondCourse = Factory.build('courseMetadata', { id: 'second_course' }); // set sessionStorage for a different course before rendering Course @@ -217,34 +253,6 @@ describe('Course', () => { expect(screen.getByText(Object.values(models.sequences)[0].title)).toBeInTheDocument(); }); - [ - { value: true, visible: true }, - { value: false, visible: false }, - { value: null, visible: true }, - ].forEach(async ({ value, visible }) => ( - it(`discussion sidebar is ${visible ? 'shown' : 'hidden'} when localstorage value is ${value}`, async () => { - await setupDiscussionSidebar(value); - const element = await waitFor(() => screen.findByTestId('sidebar-DISCUSSIONS')); - if (visible) { - expect(element).not.toHaveClass('d-none'); - } else { - expect(element).toHaveClass('d-none'); - } - }))); - - [ - { value: true, result: 'false' }, - { value: false, result: 'true' }, - ].forEach(async ({ value, result }) => ( - it(`Discussion sidebar storage value is ${!value} when sidebar is ${value ? 'closed' : 'open'}`, async () => { - await setupDiscussionSidebar(value); - await act(async () => { - const button = await screen.queryByRole('button', { name: /Show discussions tray/i }); - button.click(); - }); - expect(localStorage.getItem('showDiscussionSidebar')).toBe(result); - }))); - it('passes handlers to the sequence', async () => { const nextSequenceHandler = jest.fn(); const previousSequenceHandler = jest.fn(); diff --git a/src/courseware/course/sidebar/SidebarContextProvider.jsx b/src/courseware/course/sidebar/SidebarContextProvider.jsx index 1a64025baf..87d470c9d5 100644 --- a/src/courseware/course/sidebar/SidebarContextProvider.jsx +++ b/src/courseware/course/sidebar/SidebarContextProvider.jsx @@ -5,7 +5,6 @@ import React, { } from 'react'; import { getLocalStorage, setLocalStorage } from '../../../data/localStorage'; -import { getSessionStorage } from '../../../data/sessionStorage'; import { useModel } from '../../../generic/model-store'; import SidebarContext from './SidebarContext'; import { SIDEBARS } from './sidebars'; @@ -18,29 +17,21 @@ const SidebarProvider = ({ const { verifiedMode } = useModel('courseHomeMeta', courseId); const shouldDisplayFullScreen = useWindowSize().width < breakpoints.large.minWidth; const shouldDisplaySidebarOpen = useWindowSize().width > breakpoints.medium.minWidth; - const showNotificationsOnLoad = getSessionStorage(`notificationTrayStatus.${courseId}`) !== 'closed'; const query = new URLSearchParams(window.location.search); - if (query.get('sidebar') === 'true') { - localStorage.setItem('showDiscussionSidebar', true); - } - const showDiscussionSidebar = localStorage.getItem('showDiscussionSidebar') !== 'false'; - const showNotificationSidebar = (verifiedMode && shouldDisplaySidebarOpen && showNotificationsOnLoad) - ? SIDEBARS.NOTIFICATIONS.ID - : null; - const initialSidebar = showDiscussionSidebar + const initialSidebar = ((verifiedMode && shouldDisplaySidebarOpen) || query.get('sidebar') === 'true') ? SIDEBARS.DISCUSSIONS.ID - : showNotificationSidebar; + : null; const [currentSidebar, setCurrentSidebar] = useState(initialSidebar); const [notificationStatus, setNotificationStatus] = useState(getLocalStorage(`notificationStatus.${courseId}`)); const [upgradeNotificationCurrentState, setUpgradeNotificationCurrentState] = useState(getLocalStorage(`upgradeNotificationCurrentState.${courseId}`)); useEffect(() => { // As a one-off set initial sidebar if the verified mode data has just loaded - if (verifiedMode && currentSidebar === null && initialSidebar) { - setCurrentSidebar(initialSidebar); + if (verifiedMode) { + setCurrentSidebar(SIDEBARS.DISCUSSIONS.ID); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [initialSidebar, verifiedMode]); + }, [verifiedMode, unitId]); const onNotificationSeen = useCallback(() => { setNotificationStatus('inactive'); @@ -49,11 +40,6 @@ const SidebarProvider = ({ const toggleSidebar = useCallback((sidebarId) => { // Switch to new sidebar or hide the current sidebar - if (currentSidebar === SIDEBARS.DISCUSSIONS.ID) { - localStorage.setItem('showDiscussionSidebar', false); - } else if (sidebarId === SIDEBARS.DISCUSSIONS.ID) { - localStorage.setItem('showDiscussionSidebar', true); - } setCurrentSidebar(sidebarId === currentSidebar ? null : sidebarId); }, [currentSidebar]);