diff --git a/packages/app/obojobo-repository/shared/components/__snapshots__/notification.test.js.snap b/packages/app/obojobo-repository/shared/components/__snapshots__/notification.test.js.snap
index f5fe6a26a..405bdff0b 100644
--- a/packages/app/obojobo-repository/shared/components/__snapshots__/notification.test.js.snap
+++ b/packages/app/obojobo-repository/shared/components/__snapshots__/notification.test.js.snap
@@ -14,13 +14,87 @@ exports[`Notification component does not update cookie when there are no notific
exports[`Notification component handles click on exit button and updates state and cookie 1`] = `
-
- That's all for now
-
+
+
+ Title1
+
+
+ x
+
+
+
+ Notification1
+
+
+
+
+
+ Title2
+
+
+ x
+
+
+
+ Notification2
+
+
+
+`;
+
+exports[`Notification component handles click on exit button and updates state and cookie 2`] = `
+
+
+
+
+ Title2
+
+
+ x
+
+
+
+ Notification2
+
+
`;
@@ -69,13 +143,32 @@ exports[`Notification component hides the notification on exit button click 2`]
exports[`Notification component loads notifications from cookies on mount 1`] = `
-
- That's all for now
-
+
+
+ Test Title
+
+
+ x
+
+
+
+ Test Notification
+
+
`;
diff --git a/packages/app/obojobo-repository/shared/components/notification.test.js b/packages/app/obojobo-repository/shared/components/notification.test.js
index 3d048003b..2ccbd5968 100644
--- a/packages/app/obojobo-repository/shared/components/notification.test.js
+++ b/packages/app/obojobo-repository/shared/components/notification.test.js
@@ -35,20 +35,25 @@ describe('Notification component', () => {
const notificationValue = [{ key: 1, text: 'Test Notification', title: 'Test Title' }]
document.cookie = `notifications=${JSON.stringify(notificationValue)}`
- const component = create( )
+ const reusableComponent =
+ let component
+ act(() => {
+ component = create(reusableComponent)
+ })
+
const tree = component.toJSON()
expect(tree).toMatchSnapshot()
- expect(document.cookie).toBe(`notifications=${JSON.stringify(notificationValue)}`)
+ expect(document.cookie).toBe(
+ `notifications=${encodeURIComponent(JSON.stringify(notificationValue))};`
+ )
})
- test('handles click on exit button and updates state and cookie', () => {
+ test('hides the notification on exit button click', () => {
const onDataFromNotification = jest.fn()
- const notificationValue = [
- { key: 1, text: 'Notification1', title: 'Title1' },
- { key: 2, text: 'Notification2', title: 'Title2' }
- ]
- document.cookie = `notifications=${JSON.stringify(notificationValue)}`
+ document.cookie =
+ 'notifications=' +
+ JSON.stringify([{ key: 1, text: 'Test Notification', title: 'Test Title' }])
const reusableComponent =
let component
@@ -59,28 +64,22 @@ describe('Notification component', () => {
let tree = component.toJSON()
expect(tree).toMatchSnapshot()
- // Simulate click on exit button for the first notification
- const key = 0
const exitButtons = component.root.findAllByProps({ className: 'notification-exit-button' })
- if (exitButtons[key]) {
- act(() => {
- exitButtons[key].props.onClick()
- })
-
- tree = component.toJSON()
- expect(tree).toMatchSnapshot()
- expect(document.cookie).toBe(
- `notifications=${encodeURIComponent(JSON.stringify(notificationValue))};`
- )
- }
- })
+ act(() => {
+ exitButtons[0].props.onClick()
+ })
- test('hides the notification on exit button click', () => {
+ tree = component.toJSON()
+ expect(tree).toMatchSnapshot()
+ })
+ test('handles click on exit button and updates state and cookie', () => {
const onDataFromNotification = jest.fn()
- document.cookie =
- 'notifications=' +
- JSON.stringify([{ key: 1, text: 'Test Notification', title: 'Test Title' }])
+ const notificationValue = [
+ { key: 1, text: 'Notification1', title: 'Title1' },
+ { key: 2, text: 'Notification2', title: 'Title2' }
+ ]
+ document.cookie = `notifications=${JSON.stringify(notificationValue)}`
const elementToExit = document.getElementsByClassName('notification-exit-button')[0]
const reusableComponent =
@@ -99,11 +98,15 @@ describe('Notification component', () => {
exitButtons[key].props.onClick()
})
+ const newNotificationValue = [{ key: 2, text: 'Notification2', title: 'Title2' }]
tree = component.toJSON()
expect(tree).toMatchSnapshot()
-
+ expect(document.cookie).toBe(
+ `notifications=${encodeURIComponent(JSON.stringify(newNotificationValue))};`
+ )
expect(elementToExit).toBe(undefined)
})
+
test('renders null when there are no notifications but document.cookie is not null', () => {
const onDataFromNotification = jest.fn()
const reusableComponent =