notification unit tests for button click updated

RachelDau · May 8, 2024 · c37cc24 · c37cc24
1 parent 6ca28de
commit c37cc24
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 37 deletions.
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
@@ -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`] = `
 <div
-  className="notification-none"
+  className="notification-wrapper"
 >
-  <p
-    tabIndex="0"
+  <div
+    className="notification-banner"
   >
-    That's all for now
-  </p>
+    <div
+      className="notification-header"
+    >
+      <h1
+        tabIndex="0"
+      >
+        Title1
+      </h1>
+      <button
+        className="notification-exit-button"
+        onClick={[Function]}
+      >
+        x
+      </button>
+    </div>
+    <p
+      tabIndex="0"
+    >
+      Notification1
+    </p>
+  </div>
+  <div
+    className="notification-banner"
+  >
+    <div
+      className="notification-header"
+    >
+      <h1
+        tabIndex="0"
+      >
+        Title2
+      </h1>
+      <button
+        className="notification-exit-button"
+        onClick={[Function]}
+      >
+        x
+      </button>
+    </div>
+    <p
+      tabIndex="0"
+    >
+      Notification2
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Notification component handles click on exit button and updates state and cookie 2`] = `
+<div
+  className="notification-wrapper"
+>
+  <div
+    className="notification-banner"
+  >
+    <div
+      className="notification-header"
+    >
+      <h1
+        tabIndex="0"
+      >
+        Title2
+      </h1>
+      <button
+        className="notification-exit-button"
+        onClick={[Function]}
+      >
+        x
+      </button>
+    </div>
+    <p
+      tabIndex="0"
+    >
+      Notification2
+    </p>
+  </div>
 </div>
 `;
 
@@ -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`] = `
 <div
-  className="notification-none"
+  className="notification-wrapper"
 >
-  <p
-    tabIndex="0"
+  <div
+    className="notification-banner"
   >
-    That's all for now
-  </p>
+    <div
+      className="notification-header"
+    >
+      <h1
+        tabIndex="0"
+      >
+        Test Title
+      </h1>
+      <button
+        className="notification-exit-button"
+        onClick={[Function]}
+      >
+        x
+      </button>
+    </div>
+    <p
+      tabIndex="0"
+    >
+      Test Notification
+    </p>
+  </div>
 </div>
 `;
 

diff --git 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(<Notification onDataFromNotification={onDataFromNotification} />)
+		const reusableComponent = <Notification onDataFromNotification={onDataFromNotification} />
+		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 = <Notification onDataFromNotification={onDataFromNotification} />
 		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 = <Notification onDataFromNotification={onDataFromNotification} />
@@ -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 = <Notification onDataFromNotification={onDataFromNotification} />