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 e00b16e29..be4328c58 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 @@ -48,6 +48,7 @@ exports[`Dashboard renders in MODE_RECENT with fewer modules than moduleCount, n >
firstName lastName
@@ -285,6 +286,7 @@ exports[`Dashboard renders with default props 1`] = ` >
firstName lastName
@@ -504,6 +506,7 @@ exports[`Dashboard renders with mode = MODE_ALL 1`] = ` >
firstName lastName
@@ -756,6 +759,7 @@ exports[`Dashboard renders with mode = MODE_COLLECTION 1`] = ` >
firstName lastName
@@ -948,6 +952,7 @@ exports[`Dashboard renders with mode = MODE_RECENT 1`] = ` >
firstName lastName
diff --git a/packages/app/obojobo-repository/shared/components/__snapshots__/repository-nav.test.js.snap b/packages/app/obojobo-repository/shared/components/__snapshots__/repository-nav.test.js.snap index 72da9e742..b5b193dce 100644 --- a/packages/app/obojobo-repository/shared/components/__snapshots__/repository-nav.test.js.snap +++ b/packages/app/obojobo-repository/shared/components/__snapshots__/repository-nav.test.js.snap @@ -45,6 +45,86 @@ exports[`RepositoryNav does not render stats section with just canViewSystemStat >
+ Display Name +
+
+
+ +
+
+ +
+
+ + Log Out + +
+
+ + + +`; + +exports[`RepositoryNav loads notifications from cookies on mount 1`] = ` +
+ + {isNotificationsOpen && ( +
+ +
+ )}
) } diff --git a/packages/app/obojobo-repository/shared/components/repository-nav.scss b/packages/app/obojobo-repository/shared/components/repository-nav.scss index 92c67e760..bb128079e 100644 --- a/packages/app/obojobo-repository/shared/components/repository-nav.scss +++ b/packages/app/obojobo-repository/shared/components/repository-nav.scss @@ -1,5 +1,7 @@ @import '../../client/css/defaults'; +$poppin-pink: #af1b5c; + .repository--section-wrapper { max-width: $dimension-width; margin: 0 auto; @@ -119,6 +121,19 @@ width: 2.9em; margin: 0; } + + .notification-indicator { + background: $poppin-pink; + border-radius: 50%; + width: 15px; + height: 15px; + margin-left: 5px; + } + + .repository--nav--current-user--name { + display: flex; + align-items: center; + } } // 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 fe5b67205..46f61cd20 100644 --- a/packages/app/obojobo-repository/shared/components/repository-nav.test.js +++ b/packages/app/obojobo-repository/shared/components/repository-nav.test.js @@ -169,4 +169,80 @@ describe('RepositoryNav', () => { }) expectMenuToBeClosed(component) }) + test('loads notifications from cookies on mount', () => { + document.cookie = + 'notifications=' + + JSON.stringify([{ key: 1, text: 'Test Notification', title: 'Test Title' }]) + + const component = create() + const tree = component.toJSON() + + expect(tree).toMatchSnapshot() + expect(document.cookie).toBe( + 'notifications=[{"key":1,"text":"Test Notification","title":"Test Title"}]' + ) + }) + test('renders null when document.cookie is null', () => { + const originalDocument = document.cookie + document.cookie = null + + const reusableComponent = + let component + act(() => { + component = create(reusableComponent) + }) + const tree = component.toJSON() + expect(tree).toMatchSnapshot() + + if (document && document.cookie) { + //don't get here + } else { + expect(document.cookie).toBe(null) + } + document.cookie = originalDocument + }) + test('toggles notifications popup on button click', () => { + const component = create() + const notificationsButton = component.root.findByProps({ + className: 'repository--nav--current-user--name' + }) + + expect(component.root.findAllByProps({ className: 'popup' }).length).toBe(0) + + act(() => { + notificationsButton.props.onClick() + component.update() + }) + expect(component.root.findAllByProps({ className: 'popup' }).length).toBe(1) + + act(() => { + notificationsButton.props.onClick() + component.update() + }) + expect(component.root.findAllByProps({ className: 'popup' }).length).toBe(0) + }) + + test('renders notifications indicator when notificationsExist is true', () => { + const navProps = { + userId: 99, + displayName: 'Display Name', + userPerms: [], + notificationsExist: true + } + const component = create() + const notificationsIndicator = component.root.findAllByProps({ + className: 'notification-indicator' + }) + expect(navProps.notificationsExist).toBe(true) + expect(notificationsIndicator).toBeTruthy() + }) + + test('does not render notifications indicator when notificationsExist is false', () => { + const component = create() + + const notificationsIndicators = component.root.findAllByProps({ + className: 'notification-indicator' + }) + expect(notificationsIndicators).not.toBe() + }) })