From 0225099c4d6b4cee8f3c21a3ca09366750523288 Mon Sep 17 00:00:00 2001
From: Rachel Dauns <ra657495@ucf.edu>
Date: Wed, 1 May 2024 09:56:19 -0400
Subject: [PATCH] enzyme removed from modal.js

---
 .../common/components/modal/modal.test.js     | 82 +++++++++----------
 1 file changed, 40 insertions(+), 42 deletions(-)

diff --git a/packages/app/obojobo-document-engine/__tests__/common/components/modal/modal.test.js b/packages/app/obojobo-document-engine/__tests__/common/components/modal/modal.test.js
index d24f6c456d..ea8a8445f0 100644
--- a/packages/app/obojobo-document-engine/__tests__/common/components/modal/modal.test.js
+++ b/packages/app/obojobo-document-engine/__tests__/common/components/modal/modal.test.js
@@ -1,7 +1,6 @@
 import Modal from '../../../../src/scripts/common/components/modal/modal'
 import ModalUtil from '../../../../src/scripts/common/util/modal-util'
 import React from 'react'
-import { mount } from 'enzyme'
 import renderer from 'react-test-renderer'
 
 jest.mock('../../../../src/scripts/common/util/modal-util')
@@ -29,7 +28,7 @@ describe('Modal', () => {
 	})
 
 	test('Modal close button closes the modal', () => {
-		const component = mount(
+		const component = renderer.create(
 			<Modal onClose={onClose} focusOnFirstElement={focusOnFirstElement}>
 				Content
 			</Modal>
@@ -37,10 +36,9 @@ describe('Modal', () => {
 
 		expect(onClose).toHaveBeenCalledTimes(0)
 
-		component
-			.find('DeleteButton')
-			.find('button')
-			.simulate('click')
+		const instance = component.root
+		const deleteButton = instance.findByType('button')
+		deleteButton.props.onClick()
 
 		expect(onClose).toHaveBeenCalledTimes(1)
 
@@ -48,7 +46,7 @@ describe('Modal', () => {
 	})
 
 	test('Esc closes modal', () => {
-		const component = mount(
+		const component = renderer.create(
 			<Modal onClose={onClose} focusOnFirstElement={focusOnFirstElement}>
 				Content
 			</Modal>
@@ -64,7 +62,9 @@ describe('Modal', () => {
 	})
 
 	test('Esc closes modal (even when no onClose method present)', () => {
-		const component = mount(<Modal focusOnFirstElement={focusOnFirstElement}>Content</Modal>)
+		const component = renderer.create(
+			<Modal focusOnFirstElement={focusOnFirstElement}>Content</Modal>
+		)
 
 		expect(ModalUtil.hide).toHaveBeenCalledTimes(0)
 
@@ -76,25 +76,32 @@ describe('Modal', () => {
 	})
 
 	test('Esc does not work if preventEsc is set', () => {
-		const component = mount(
-			<Modal onClose={onClose} focusOnFirstElement={focusOnFirstElement} preventEsc>
+		const onCloseMock = jest.fn()
+		const onKeyUpMock = jest.fn()
+		const component = renderer.create(
+			<Modal
+				onClose={onCloseMock}
+				focusOnFirstElement={focusOnFirstElement}
+				preventEsc
+				onKeyUp={onKeyUpMock}
+			>
 				Content
 			</Modal>
 		)
 
 		expect(ModalUtil.hide).toHaveBeenCalledTimes(0)
-		expect(onClose).toHaveBeenCalledTimes(0)
+		expect(onCloseMock).toHaveBeenCalledTimes(0)
 
-		document.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 27 }))
+		component.getInstance().onKeyUp({ keyCode: 27 })
 
 		expect(ModalUtil.hide).toHaveBeenCalledTimes(0)
-		expect(onClose).toHaveBeenCalledTimes(0)
+		expect(onCloseMock).toHaveBeenCalledTimes(0)
 
 		component.unmount()
 	})
 
 	test('Modal does not close with other keys', () => {
-		const component = mount(
+		const component = renderer.create(
 			<Modal onClose={onClose} focusOnFirstElement={focusOnFirstElement}>
 				Content
 			</Modal>
@@ -110,7 +117,7 @@ describe('Modal', () => {
 	})
 
 	test('Tab will focus on nothing if no close or first element', () => {
-		const component = mount(
+		const component = renderer.create(
 			<Modal>
 				<textarea />
 			</Modal>
@@ -118,11 +125,7 @@ describe('Modal', () => {
 
 		expect(focusOnFirstElement).toHaveBeenCalledTimes(0)
 
-		component
-			.find('div')
-			.at(0)
-			.find('.first-tab')
-			.simulate('focus')
+		component.root.findByProps({ className: 'first-tab' }).props.onFocus()
 
 		expect(focusOnFirstElement).not.toHaveBeenCalled()
 
@@ -130,7 +133,7 @@ describe('Modal', () => {
 	})
 
 	test('Tab will focus on the first element if no close button', () => {
-		const component = mount(
+		const component = renderer.create(
 			<Modal focusOnFirstElement={focusOnFirstElement}>
 				<textarea />
 			</Modal>
@@ -138,11 +141,7 @@ describe('Modal', () => {
 
 		expect(focusOnFirstElement).toHaveBeenCalledTimes(0)
 
-		component
-			.find('div')
-			.at(0)
-			.find('.first-tab')
-			.simulate('focus')
+		component.root.findByProps({ className: 'first-tab' }).props.onFocus()
 
 		expect(focusOnFirstElement).toHaveBeenCalledTimes(1)
 
@@ -150,20 +149,15 @@ describe('Modal', () => {
 	})
 
 	test('Tab will focus on the close button if it exists', () => {
-		const component = mount(
+		const component = renderer.create(
 			<Modal onClose={onClose} focusOnFirstElement={focusOnFirstElement}>
 				<textarea />
 			</Modal>
 		)
 
-		const deleteButtonFocus = jest.spyOn(component.instance().deleteButtonRef.current, 'focus')
+		const deleteButtonFocus = jest.spyOn(component.getInstance().deleteButtonRef.current, 'focus')
 		expect(focusOnFirstElement).toHaveBeenCalledTimes(0)
-
-		component
-			.find('div')
-			.at(0)
-			.find('.first-tab')
-			.simulate('focus')
+		component.root.findByProps({ className: 'first-tab' }).props.onFocus()
 
 		expect(focusOnFirstElement).toHaveBeenCalledTimes(0)
 		expect(deleteButtonFocus).toHaveBeenCalledTimes(1)
@@ -172,7 +166,7 @@ describe('Modal', () => {
 	})
 
 	test('Unmounts with onClose function', () => {
-		const component = mount(
+		const component = renderer.create(
 			<Modal onClose={onClose} focusOnFirstElement={focusOnFirstElement}>
 				Content
 			</Modal>
@@ -184,7 +178,9 @@ describe('Modal', () => {
 	})
 
 	test('Unmounts with no onClose function', () => {
-		const component = mount(<Modal focusOnFirstElement={focusOnFirstElement}>Content</Modal>)
+		const component = renderer.create(
+			<Modal focusOnFirstElement={focusOnFirstElement}>Content</Modal>
+		)
 
 		component.unmount()
 
@@ -195,9 +191,11 @@ describe('Modal', () => {
 		const onClose = jest.fn()
 		const focusOnFirstElement = jest.fn()
 		const focus = jest.fn()
-		const component = mount(<Modal onClose={onClose} focusOnFirstElement={focusOnFirstElement} />)
+		const component = renderer.create(
+			<Modal onClose={onClose} focusOnFirstElement={focusOnFirstElement} />
+		)
 
-		const inst = component.instance()
+		const inst = component.getInstance()
 		inst.deleteButtonRef = { current: { focus } }
 		inst.onTabTrapFocus()
 
@@ -210,9 +208,9 @@ describe('Modal', () => {
 	test('onTabTrapFocus focuses on focusOnFirstElement with onClose prop not set', () => {
 		const focusOnFirstElement = jest.fn()
 		const focus = jest.fn()
-		const component = mount(<Modal focusOnFirstElement={focusOnFirstElement} />)
+		const component = renderer.create(<Modal focusOnFirstElement={focusOnFirstElement} />)
 
-		const inst = component.instance()
+		const inst = component.getInstance()
 		inst.deleteButtonRef = { current: { focus } }
 		inst.onTabTrapFocus()
 
@@ -224,9 +222,9 @@ describe('Modal', () => {
 
 	test('onTabTrapFocus does nothing without focusOnFirstElement or onClose props', () => {
 		const focus = jest.fn()
-		const component = mount(<Modal />)
+		const component = renderer.create(<Modal />)
 
-		const inst = component.instance()
+		const inst = component.getInstance()
 		inst.deleteButtonRef = { current: { focus } }
 		inst.onTabTrapFocus()