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(
Content
@@ -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(
Content
@@ -64,7 +62,9 @@ describe('Modal', () => {
})
test('Esc closes modal (even when no onClose method present)', () => {
- const component = mount(Content)
+ const component = renderer.create(
+ Content
+ )
expect(ModalUtil.hide).toHaveBeenCalledTimes(0)
@@ -76,25 +76,32 @@ describe('Modal', () => {
})
test('Esc does not work if preventEsc is set', () => {
- const component = mount(
-
+ const onCloseMock = jest.fn()
+ const onKeyUpMock = jest.fn()
+ const component = renderer.create(
+
Content
)
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(
Content
@@ -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(
@@ -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(
@@ -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(
)
- 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(
Content
@@ -184,7 +178,9 @@ describe('Modal', () => {
})
test('Unmounts with no onClose function', () => {
- const component = mount(Content)
+ const component = renderer.create(
+ Content
+ )
component.unmount()
@@ -195,9 +191,11 @@ describe('Modal', () => {
const onClose = jest.fn()
const focusOnFirstElement = jest.fn()
const focus = jest.fn()
- const component = mount()
+ const component = renderer.create(
+
+ )
- 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()
+ const component = renderer.create()
- 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()
+ const component = renderer.create()
- const inst = component.instance()
+ const inst = component.getInstance()
inst.deleteButtonRef = { current: { focus } }
inst.onTabTrapFocus()