enzyme removed from modal.js

ucfopen · May 1, 2024 · 0225099 · 0225099
1 parent b5fba46
commit 0225099
Showing 1 changed file with 40 additions and 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
@@ -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,26 +28,25 @@ describe('Modal', () => {
 	})
 
 	test('Modal close button closes the modal', () => {
-		const component = mount(
+		const component = renderer.create(
 			<Modal onClose={onClose} focusOnFirstElement={focusOnFirstElement}>
 				Content
 			</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)
 
 		component.unmount()
 	})
 
 	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,60 +117,47 @@ describe('Modal', () => {
 	})
 
 	test('Tab will focus on nothing if no close or first element', () => {
-		const component = mount(
+		const component = renderer.create(
 			<Modal>
 				<textarea />
 			</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()
 
 		component.unmount()
 	})
 
 	test('Tab will focus on the first element if no close button', () => {
-		const component = mount(
+		const component = renderer.create(
 			<Modal focusOnFirstElement={focusOnFirstElement}>
 				<textarea />
 			</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)
 
 		component.unmount()
 	})
 
 	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()