From 2add759014b46dc68cf96732669cc121a1c1b4a0 Mon Sep 17 00:00:00 2001 From: Rachel Dauns Date: Tue, 30 Apr 2024 11:27:46 -0400 Subject: [PATCH] Modal added for notifications --- .../server/routes/library.test.js | 1 + .../__snapshots__/dashboard.test.js.snap | 155 +++++++++++++++ .../__snapshots__/repository-nav.test.js.snap | 161 +++++++++++++++ .../__snapshots__/stats.test.js.snap | 186 ++++++++++++++++++ .../shared/components/dashboard.test.js | 23 ++- .../__snapshots__/page-error.test.js.snap | 31 +++ .../__snapshots__/page-homepage.test.js.snap | 31 +++ .../__snapshots__/page-login.test.js.snap | 31 +++ .../__snapshots__/page-module.test.js.snap | 62 ++++++ .../components/pages/page-error.test.js | 6 + .../components/pages/page-homepage.test.js | 6 + .../components/pages/page-login.test.js | 6 + .../components/pages/page-module.test.js | 5 + .../shared/components/repository-nav.jsx | 34 ++-- .../shared/components/repository-nav.scss | 5 - .../shared/components/repository-nav.test.js | 24 ++- .../shared/components/stats.test.js | 8 +- 17 files changed, 744 insertions(+), 31 deletions(-) diff --git a/packages/app/obojobo-repository/server/routes/library.test.js b/packages/app/obojobo-repository/server/routes/library.test.js index 110a26b54f..cfbd43d2c9 100644 --- a/packages/app/obojobo-repository/server/routes/library.test.js +++ b/packages/app/obojobo-repository/server/routes/library.test.js @@ -13,6 +13,7 @@ jest.mock( }), { virtual: true } ) +jest.mock('react-modal') jest.setTimeout(10000) // extend test timeout? diff --git a/packages/app/obojobo-repository/shared/components/__snapshots__/dashboard.test.js.snap b/packages/app/obojobo-repository/shared/components/__snapshots__/dashboard.test.js.snap index e00b16e294..772bc3b7f9 100644 --- a/packages/app/obojobo-repository/shared/components/__snapshots__/dashboard.test.js.snap +++ b/packages/app/obojobo-repository/shared/components/__snapshots__/dashboard.test.js.snap @@ -79,6 +79,37 @@ exports[`Dashboard renders in MODE_RECENT with fewer modules than moduleCount, n + +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+ +
+ `; @@ -153,6 +176,29 @@ exports[`RepositoryNav loads notifications from cookies on mount 1`] = ` + +
+ +
+
+ +
+ `; @@ -231,6 +277,29 @@ exports[`RepositoryNav renders correctly with standard expected props 1`] = ` + +
+ +
+
+ +
+ `; @@ -272,6 +341,29 @@ exports[`RepositoryNav renders correctly with standard expected props but no log + +
+ +
+
+ +
+ `; @@ -350,6 +442,29 @@ exports[`RepositoryNav renders null when document.cookie is null 1`] = ` + +
+ +
+
+ +
+ `; @@ -428,6 +543,29 @@ exports[`RepositoryNav renders null when there are no notifications but document + +
+ +
+
+ +
+ `; @@ -515,5 +653,28 @@ exports[`RepositoryNav renders stats section with canViewStatsPage 1`] = ` + +
+ +
+
+ +
+ `; diff --git a/packages/app/obojobo-repository/shared/components/__snapshots__/stats.test.js.snap b/packages/app/obojobo-repository/shared/components/__snapshots__/stats.test.js.snap index c276ed5fa3..2208c80cf3 100644 --- a/packages/app/obojobo-repository/shared/components/__snapshots__/stats.test.js.snap +++ b/packages/app/obojobo-repository/shared/components/__snapshots__/stats.test.js.snap @@ -79,6 +79,37 @@ exports[`Stats Renders "modules loaded" state correctly 1`] = ` + +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
{ } const expectDialogToBeRendered = (component, dialogComponent, title) => { - expect(ReactModal.setAppElement).toHaveBeenCalledTimes(1) - expect(component.root.findByType(ReactModal).props.contentLabel).toBe(title) + expect(ReactModal.setAppElement).toHaveBeenCalledTimes(2) + const modal = component.root.findByProps({ contentLabel: title }) + expect(modal).toBeDefined() expect(component.root.findAllByType(dialogComponent).length).toBe(1) + const modalNotifications = component.root.findByProps({ contentLabel: 'Notifications' }) + expect(modalNotifications).toBeDefined() } const expectMethodToBeCalledOnceWith = (method, calledWith = []) => { @@ -487,8 +490,9 @@ describe('Dashboard', () => { expect(moduleComponents[3].props.draftId).toBe('mockDraftId') expect(moduleComponents[4].props.draftId).toBe('mockDraftId4') - // Shouldn't be any modal dialogs open, either - expect(component.root.findAllByType(ReactModal).length).toBe(0) + // Shouldn't be any modal dialogs open other than notifications, either + expect(component.root.findAllByType(ReactModal).length).toBe(1) + expect(component.root.findAllByType(ReactModal)[0].props.contentLabel).toBe('Notifications') return component } @@ -2176,14 +2180,21 @@ describe('Dashboard', () => { expectMethodToBeCalledOnceWith(dashboardProps.closeModal) }) - test('renders no dialogs if props.dialog value is unsupported', () => { + test('renders only the notification modal if props.dialog value is unsupported', () => { dashboardProps.dialog = 'some-unsupported-value' let component act(() => { component = create() }) - expect(component.root.findAllByType(ReactModal).length).toBe(0) + const modalInstances = component.root.findAllByType(ReactModal) + + const notificationModals = modalInstances.filter(instance => + instance.findByProps({ contentLabel: 'Notifications' }) + ) + + expect(component.root.findAllByType(ReactModal).length).toBe(1) + expect(notificationModals.length).toBe(1) component.unmount() }) diff --git a/packages/app/obojobo-repository/shared/components/pages/__snapshots__/page-error.test.js.snap b/packages/app/obojobo-repository/shared/components/pages/__snapshots__/page-error.test.js.snap index 52d1b40ac6..8f0c4a949c 100644 --- a/packages/app/obojobo-repository/shared/components/pages/__snapshots__/page-error.test.js.snap +++ b/packages/app/obojobo-repository/shared/components/pages/__snapshots__/page-error.test.js.snap @@ -112,6 +112,37 @@ exports[`PageError renders when given props 1`] = `
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
+ +
+ +
+
+
+

+ That's all for now +

+
+
+
props => { + return +}) import React from 'react' import renderer from 'react-test-renderer' +import ReactModal from 'react-modal' mockStaticDate() @@ -7,6 +11,8 @@ mockStaticDate() const PageError = require('./page-error') describe('PageError', () => { + ReactModal.setAppElement = jest.fn() + test('renders when given props', () => { const mockCurrentUser = { id: 99, diff --git a/packages/app/obojobo-repository/shared/components/pages/page-homepage.test.js b/packages/app/obojobo-repository/shared/components/pages/page-homepage.test.js index a7deb0aa9d..542f0a8532 100644 --- a/packages/app/obojobo-repository/shared/components/pages/page-homepage.test.js +++ b/packages/app/obojobo-repository/shared/components/pages/page-homepage.test.js @@ -1,5 +1,9 @@ +jest.mock('react-modal', () => props => { + return +}) import React from 'react' import renderer from 'react-test-renderer' +import ReactModal from 'react-modal' mockStaticDate() @@ -7,6 +11,8 @@ mockStaticDate() const PageHomepage = require('./page-homepage') describe('PageHomepage', () => { + ReactModal.setAppElement = jest.fn() + test('renders when given props', () => { const mockCurrentUser = { id: 99, diff --git a/packages/app/obojobo-repository/shared/components/pages/page-login.test.js b/packages/app/obojobo-repository/shared/components/pages/page-login.test.js index 91a17f96f7..75e2f5c8c6 100644 --- a/packages/app/obojobo-repository/shared/components/pages/page-login.test.js +++ b/packages/app/obojobo-repository/shared/components/pages/page-login.test.js @@ -1,5 +1,9 @@ +jest.mock('react-modal', () => props => { + return +}) import React from 'react' import renderer from 'react-test-renderer' +import ReactModal from 'react-modal' mockStaticDate() @@ -7,6 +11,8 @@ mockStaticDate() const PageLogin = require('./page-login') describe('PageLogin', () => { + ReactModal.setAppElement = jest.fn() + test('renders when given props', () => { const mockCurrentUser = { id: 99, diff --git a/packages/app/obojobo-repository/shared/components/pages/page-module.test.js b/packages/app/obojobo-repository/shared/components/pages/page-module.test.js index 57c61106f5..dca534e4e5 100644 --- a/packages/app/obojobo-repository/shared/components/pages/page-module.test.js +++ b/packages/app/obojobo-repository/shared/components/pages/page-module.test.js @@ -1,9 +1,13 @@ jest.mock('../../api-util') jest.mock('dayjs') +jest.mock('react-modal', () => props => { + return +}) import React from 'react' import PageModule from './page-module' import { create, act } from 'react-test-renderer' +import ReactModal from 'react-modal' const Button = require('../button') const ButtonLink = require('../button-link') @@ -23,6 +27,7 @@ describe('PageModule', () => { fromNow: () => 'A long time ago' })) dayjs.extend = jest.fn() + ReactModal.setAppElement = jest.fn() }) beforeEach(() => { diff --git a/packages/app/obojobo-repository/shared/components/repository-nav.jsx b/packages/app/obojobo-repository/shared/components/repository-nav.jsx index 9b5b2ef21d..acb5cb2555 100644 --- a/packages/app/obojobo-repository/shared/components/repository-nav.jsx +++ b/packages/app/obojobo-repository/shared/components/repository-nav.jsx @@ -3,12 +3,14 @@ require('./repository-nav.scss') const React = require('react') const Avatar = require('./avatar') const Notification = require('./notification') +const ReactModal = require('react-modal') const RepositoryNav = props => { let timeOutId const [isMenuOpen, setMenuOpen] = React.useState(false) const [isNotificationsOpen, setNotificationsOpen] = React.useState(false) const [numberNotifications, setNumberNotifications] = React.useState(0) + ReactModal.setAppElement('#react-hydrate-root') const handleNotificationsData = numberOfNotificationsData => { // Handle the data received from the Notification component @@ -53,8 +55,6 @@ const RepositoryNav = props => { if (parsedValue && parsedValue.length >= 1) { setNumberNotifications(parsedValue.length) } - } else { - // there is nothing to update } }, []) @@ -117,21 +117,23 @@ const RepositoryNav = props => {
)} - {isNotificationsOpen && ( -
-
-
- -
-
- -
-
-
+ + +
+ +
+
+
- )} +
) } diff --git a/packages/app/obojobo-repository/shared/components/repository-nav.scss b/packages/app/obojobo-repository/shared/components/repository-nav.scss index 2cc9acdb14..5c17efd0e8 100644 --- a/packages/app/obojobo-repository/shared/components/repository-nav.scss +++ b/packages/app/obojobo-repository/shared/components/repository-nav.scss @@ -192,11 +192,6 @@ height: 100%; background: $color-shadow; z-index: 999; - display: none; -} - -.overlay.active { - display: block; } // if the last child is a link (login link instead of logged in user avatar) diff --git a/packages/app/obojobo-repository/shared/components/repository-nav.test.js b/packages/app/obojobo-repository/shared/components/repository-nav.test.js index 0fca260c47..f0813f223d 100644 --- a/packages/app/obojobo-repository/shared/components/repository-nav.test.js +++ b/packages/app/obojobo-repository/shared/components/repository-nav.test.js @@ -1,15 +1,22 @@ jest.mock('./notification', () => props => { return {props.children} }) +jest.mock('react-modal', () => props => { + return +}) import React from 'react' import RepositoryNav from './repository-nav' import { create, act } from 'react-test-renderer' import Notification from './notification' +import ReactModal from 'react-modal' describe('RepositoryNav', () => { let navProps + beforeAll(() => { + ReactModal.setAppElement = jest.fn() + }) beforeEach(() => { jest.resetAllMocks() jest.useFakeTimers() @@ -27,7 +34,6 @@ describe('RepositoryNav', () => { afterEach(() => { jest.resetAllMocks() }) - const expectMenuToBeOpen = component => { expect( component.root.findAllByProps({ className: 'repository--nav--current-user--menu is-open' }) @@ -42,10 +48,22 @@ describe('RepositoryNav', () => { ).toBe(1) } const expectNotificationsPopupToBeOpen = component => { - expect(component.root.findAllByProps({ className: 'popup active' }).length).toBe(1) + //expect(component.root.findAllByProps({ className: 'popup' }).length).toBe(1) + const modalInstances = component.root.findAllByType(ReactModal) + + const modalInstance = modalInstances.find(instance => + instance.findByProps({ contentLabel: 'Notifications' }) + ) + expect(modalInstance.props.isOpen).toBe(true) } const expectNotificationsPopupToBeClosed = component => { - expect(component.root.findAllByProps({ className: 'popup' }).length).toBe(0) + //expect(component.root.findAllByProps({ className: 'popup' }).length).toBe(0) + const modalInstances = component.root.findAllByType(ReactModal) + + const modalInstance = modalInstances.find(instance => + instance.findByProps({ contentLabel: 'Notifications' }) + ) + expect(modalInstance.props.isOpen).toBe(false) } // default props.userId = 0 means there is no user logged in diff --git a/packages/app/obojobo-repository/shared/components/stats.test.js b/packages/app/obojobo-repository/shared/components/stats.test.js index 633a4a2eaa..2cdf61f73a 100644 --- a/packages/app/obojobo-repository/shared/components/stats.test.js +++ b/packages/app/obojobo-repository/shared/components/stats.test.js @@ -1,3 +1,6 @@ +jest.mock('react-modal', () => props => { + return +}) import React from 'react' import { create, act } from 'react-test-renderer' import Button from './button' @@ -5,6 +8,7 @@ import Button from './button' import Stats from './stats' import AssessmentStats from './stats/assessment-stats' import DataGridDrafts from './stats/data-grid-drafts' +import ReactModal from 'react-modal' jest.mock('react-data-table-component', () => ({ default: props => ( @@ -35,7 +39,9 @@ describe('Stats', () => { revisionCount: 1 } ] - + beforeAll(() => { + ReactModal.setAppElement = jest.fn() + }) beforeEach(() => { jest.resetAllMocks() })