more info button enzyme removed

RachelDau · Apr 15, 2024 · 4a6daac · 4a6daac
1 parent 1b6f814
commit 4a6daac
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 33 deletions.
diff --git a/packages/app/obojobo-document-engine/__tests__/common/chunk/text-chunk/text-group-el.test.js b/packages/app/obojobo-document-engine/__tests__/common/chunk/text-chunk/text-group-el.test.js
@@ -46,12 +46,12 @@ describe('TextGroupEl', () => {
 
 		const findText = node => {
 			if (typeof node === 'string') {
-				return node // Return text content if it's a string
+				return node
 			}
 			if (Array.isArray(node.children) && node.children.length > 0) {
-				return findText(node.children[0]) // Recursively search for text content
+				return findText(node.children[0])
 			}
-			return null // Return null if no text content is found
+			return null
 		}
 
 		const textContent = findText(tree)
@@ -70,13 +70,12 @@ describe('TextGroupEl', () => {
 
 		const findText = node => {
 			if (typeof node === 'string') {
-				return node // Return text content if it's a string
+				return node
 			}
 			if (Array.isArray(node.children) && node.children.length > 0) {
-				// Concatenate text content from all child nodes
 				return node.children.map(child => findText(child)).join('')
 			}
-			return '' // Return empty string if no text content is found
+			return ''
 		}
 
 		const textContent = findText(tree)
@@ -96,13 +95,12 @@ describe('TextGroupEl', () => {
 
 		const findText = node => {
 			if (typeof node === 'string') {
-				return node // Return text content if it's a string
+				return node
 			}
 			if (Array.isArray(node.children) && node.children.length > 0) {
-				// Concatenate text content from all child nodes
 				return node.children.map(child => findText(child)).join('')
 			}
-			return '' // Return empty string if no text content is found
+			return ''
 		}
 
 		const textContent = findText(tree)

diff --git a/packages/app/obojobo-document-engine/__tests__/common/components/button-bar.test.js b/packages/app/obojobo-document-engine/__tests__/common/components/button-bar.test.js
@@ -40,7 +40,6 @@ describe('ButtonBar', () => {
 		buttonInstance.props.onClick()
 		expect(mockClick).toHaveBeenCalledTimes(1)
 
-		// default function coverage for buttonBarOnClick
 		const componentNoClick = renderer.create(<ButtonBar>{children}</ButtonBar>)
 		const buttonInstanceNoClick = componentNoClick.root.findByType('button')
 

diff --git a/packages/app/obojobo-document-engine/__tests__/common/components/delete-button-base.test.js b/packages/app/obojobo-document-engine/__tests__/common/components/delete-button-base.test.js
@@ -44,8 +44,8 @@ describe('DeleteButton', () => {
 	test('DeleteButton calls focus callback with ref argument', () => {
 		const focus = require('../../../src/scripts/common/page/focus').default
 		const component = renderer.create(<DeleteButton focus={focus} />)
-		const inst = component.root.findByType(DeleteButtonBase).instance // Get the instance of DeleteButton
-		inst.focus() // Call the focus method
-		expect(focus).toHaveBeenCalledWith(inst.deleteButtonRef) // Check if focus callback is called with correct argument
+		const inst = component.root.findByType(DeleteButtonBase).instance
+		inst.focus()
+		expect(focus).toHaveBeenCalledWith(inst.deleteButtonRef)
 	})
 })
diff --git a/packages/app/obojobo-document-engine/__tests__/common/components/more-info-button.test.js b/packages/app/obojobo-document-engine/__tests__/common/components/more-info-button.test.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
-import { mount } from 'enzyme'
 
 import MoreInfoButton from '../../../src/scripts/common/components/more-info-button'
 jest.mock('../../../src/scripts/common/util/uuid', () => {
@@ -23,41 +22,91 @@ describe('MoreInfoButton', () => {
 	})
 
 	test('Renders mouse over', () => {
-		const component = mount(<MoreInfoButton label="Testing 123" />)
-		component.instance().state.mode = 'hidden'
+		const component = renderer.create(<MoreInfoButton label="Testing 123" />)
+		const button = component.root.findByType('button')
+
+		component.getInstance().setState({ mode: 'hover' })
+		button.props.onMouseOver()
+
+		const tree = component.toJSON()
+		const classNames = tree.props.className.split(' ')
 
-		component.find('button').simulate('mouseOver')
+		expect(classNames).toContain('is-mode-hover')
+	})
+	test('Renders mouse over else', () => {
+		const component = renderer.create(<MoreInfoButton label="Testing 123" />)
+		const button = component.root.findByType('button')
 
-		expect(component.instance().state.mode).toEqual('hover')
+		button.props.onMouseOver()
 
-		component.find('button').simulate('mouseOver')
+		const tree = component.toJSON()
+		const classNames = tree.props.className.split(' ')
 
-		expect(component.instance().state.mode).toEqual('hover')
+		expect(classNames).toContain('is-mode-hover')
 	})
 
 	test('Renders mouse out', () => {
-		const component = mount(<MoreInfoButton label="Testing 123" />)
-		component.instance().state.mode = 'hover'
+		const component = renderer.create(<MoreInfoButton label="Testing 123" />)
+		const button = component.root.findByType('button')
 
-		component.find('button').simulate('mouseOut')
+		button.props.onMouseOver()
 
-		expect(component.instance().state.mode).toEqual('hidden')
+		button.props.onMouseOut()
 
-		component.find('button').simulate('mouseOut')
+		const tree = component.toJSON()
+		const classNames = tree.props.className.split(' ')
+
+		expect(classNames).toContain('is-mode-hidden')
+	})
+	test('Renders mouse out else', () => {
+		const component = renderer.create(<MoreInfoButton label="Testing 123" />)
+		const button = component.root.findByType('button')
+
+		button.props.onMouseOut()
+
+		const tree = component.toJSON()
+		const classNames = tree.props.className.split(' ')
 
-		expect(component.instance().state.mode).toEqual('hidden')
+		expect(classNames).toContain('is-mode-hidden')
 	})
 
 	test('Renders click', () => {
-		const component = mount(<MoreInfoButton label="Testing 123" />)
-		component.instance().state.mode = 'hidden'
+		const component = renderer.create(<MoreInfoButton label="Testing 123" />)
+		const button = component.root.findByType('button')
+
+		const focusMock = jest.fn()
+		const moreInfoButtonInstance = component.getInstance()
+		moreInfoButtonInstance.dialogRef = { current: { focus: focusMock } }
+
+		button.props.onClick()
+
+		const tree = component.toJSON()
+
+		const classNames = tree.props.className.split(' ')
+
+		expect(classNames).toContain('is-mode-clicked')
+
+		expect(focusMock).not.toHaveBeenCalled()
+
+		button.props.onClick()
+
+		const tree2 = component.toJSON()
+
+		const classNames2 = tree2.props.className.split(' ')
+
+		expect(classNames2).toContain('is-mode-hidden')
+	})
+	test('componentDidUpdate method', () => {
+		const component = renderer.create(<MoreInfoButton label="Testing 123" />)
+		const moreInfoButtonInstance = component.getInstance()
+		const focusMock = jest.fn()
 
-		component.find('button').simulate('click')
+		moreInfoButtonInstance.onClick()
 
-		expect(component.instance().state.mode).toEqual('clicked')
+		moreInfoButtonInstance.dialogRef = { current: { focus: focusMock } }
 
-		component.find('button').simulate('click')
+		moreInfoButtonInstance.componentDidUpdate()
 
-		expect(component.instance().state.mode).toEqual('hidden')
+		expect(focusMock).toHaveBeenCalled()
 	})
 })
diff --git a/packages/app/obojobo-document-engine/src/scripts/common/components/more-info-button.js b/packages/app/obojobo-document-engine/src/scripts/common/components/more-info-button.js
@@ -53,7 +53,7 @@ class MoreInfoButton extends React.Component {
 	}
 
 	componentDidUpdate() {
-		if (this.state.mode === 'clicked') {
+		if (this.state.mode === 'clicked' && this.dialogRef.current) {
 			this.dialogRef.current.focus()
 		}
 	}