Issue/2118 remove enzyme

packages/app/obojobo-document-engine/__tests__/common/chunk/text-chunk/text-group-el.test.js

@@ -1,4 +1,3 @@
-import { mount } from 'enzyme'
 import React from 'react'
 import renderer from 'react-test-renderer'
 import TextGroupEl from '../../../../src/scripts/common/chunk/text-chunk/text-group-el'
@@ -39,35 +38,73 @@ describe('TextGroupEl', () => {
 	})
 
 	test('Renders text', () => {
-		const component = mount(
+		const component = renderer.create(
 			<TextGroupEl groupIndex={0} textItem={tg.get(0)} parentModel={jest.fn()} />
 		)
 
-		expect(component.text()).toBe('First line')
+		const tree = component.toJSON()
+
+		const findText = node => {
+			if (typeof node === 'string') {
+				return node
+			}
+			if (Array.isArray(node.children) && node.children.length > 0) {
+				return findText(node.children[0])
+			}
+			return null
+		}
+
+		const textContent = findText(tree)
+		expect(textContent).toBe('First line')
 	})
 
 	test('Variable replacement', () => {
 		Dispatcher.trigger.mockImplementationOnce((eventName, event, variable) => {
 			event.text = 'REPLACE(' + variable + ')'
 		})
 
-		const component = mount(
+		const component = renderer.create(
 			<TextGroupEl groupIndex={1} textItem={tg.get(1)} parentModel={jest.fn()} />
 		)
+		const tree = component.toJSON()
 
-		expect(component.text()).toBe('Some BOLD text with a REPLACE(variable) included')
+		const findText = node => {
+			if (typeof node === 'string') {
+				return node
+			}
+			if (Array.isArray(node.children) && node.children.length > 0) {
+				return node.children.map(child => findText(child)).join('')
+			}
+			return ''
+		}
+
+		const textContent = findText(tree)
+		expect(textContent).toBe('Some BOLD text with a REPLACE(variable) included')
 	})
 
 	test('Variable replacement with no match', () => {
 		Dispatcher.trigger.mockImplementationOnce((eventName, event) => {
 			event.text = null
 		})
 
-		const component = mount(
+		const component = renderer.create(
 			<TextGroupEl groupIndex={1} textItem={tg.get(1)} parentModel={jest.fn()} />
 		)
 
-		expect(component.text()).toBe('Some BOLD text with a {{variable}} included')
+		const tree = component.toJSON()
+
+		const findText = node => {
+			if (typeof node === 'string') {
+				return node
+			}
+			if (Array.isArray(node.children) && node.children.length > 0) {
+				return node.children.map(child => findText(child)).join('')
+			}
+			return ''
+		}
+
+		const textContent = findText(tree)
+		expect(textContent).toBe('Some BOLD text with a {{variable}} included')
 	})
 
 	test('String values of hangingIndent work as expected', () => {

packages/app/obojobo-document-engine/__tests__/common/components/button-bar.test.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import ButtonBar from '../../../src/scripts/common/components/button-bar'
 import renderer from 'react-test-renderer'
-import { mount } from 'enzyme'
 
 describe('ButtonBar', () => {
 	test('ButtonBar component', () => {
@@ -35,21 +34,17 @@ describe('ButtonBar', () => {
 			}
 		]
 		const mockClick = jest.fn()
-		const component = mount(<ButtonBar onClick={mockClick}>{children}</ButtonBar>)
+		const component = renderer.create(<ButtonBar onClick={mockClick}>{children}</ButtonBar>)
+		const buttonInstance = component.root.findByType('button')
 
-		component
-			.childAt(0)
-			.find('button')
-			.simulate('click')
-		expect(mockClick).toBeCalledTimes(1)
+		buttonInstance.props.onClick()
+		expect(mockClick).toHaveBeenCalledTimes(1)
 
-		// default function coverage for buttonBarOnClick
-		const componentNoClick = mount(<ButtonBar>{children}</ButtonBar>)
-		componentNoClick
-			.childAt(0)
-			.find('button')
-			.simulate('click')
-		expect(mockClick).toBeCalledTimes(1)
+		const componentNoClick = renderer.create(<ButtonBar>{children}</ButtonBar>)
+		const buttonInstanceNoClick = componentNoClick.root.findByType('button')
+
+		buttonInstanceNoClick.props.onClick()
+		expect(mockClick).toHaveBeenCalledTimes(1)
 	})
 
 	test('ButtonBar component clicks button but does not fire', () => {
@@ -59,13 +54,10 @@ describe('ButtonBar', () => {
 			}
 		]
 		const mockClick = jest.fn()
-		const component = mount(<ButtonBar onClick={mockClick}>{children}</ButtonBar>)
-
-		component
-			.childAt(0)
-			.find('button')
-			.simulate('click')
+		const component = renderer.create(<ButtonBar onClick={mockClick}>{children}</ButtonBar>)
+		const buttonInstance = component.root.findByType('button')
 
+		buttonInstance.props.onClick()
 		expect(mockClick).toHaveBeenCalled()
 	})
 })

packages/app/obojobo-document-engine/__tests__/common/components/delete-button-base.test.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import DeleteButton from '../../../src/scripts/common/components/delete-button'
 import DeleteButtonBase from '../../../src/scripts/common/components/delete-button-base'
-import { mount } from 'enzyme'
 import renderer from 'react-test-renderer'
 
 jest.mock('../../../src/scripts/common/page/focus')
@@ -44,8 +43,8 @@ describe('DeleteButton', () => {
 
 	test('DeleteButton calls focus callback with ref argument', () => {
 		const focus = require('../../../src/scripts/common/page/focus').default
-		const wrapper = mount(<DeleteButton focus={focus} />)
-		const inst = wrapper.find(DeleteButtonBase).instance()
+		const component = renderer.create(<DeleteButton focus={focus} />)
+		const inst = component.root.findByType(DeleteButtonBase).instance
 		inst.focus()
 		expect(focus).toHaveBeenCalledWith(inst.deleteButtonRef)
 	})

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()