From 9e5a48b40ec34c611ed3f9f4cc98ca1cfa88883b Mon Sep 17 00:00:00 2001 From: Rachel Dauns Date: Wed, 10 Apr 2024 11:53:24 -0400 Subject: [PATCH 1/6] enzyme removed from text-group-el --- .../chunk/text-chunk/text-group-el.test.js | 53 ++++++++++++++++--- 1 file changed, 46 insertions(+), 7 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 index 789cb5e070..c0568839b8 100644 --- 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 @@ -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,11 +38,24 @@ describe('TextGroupEl', () => { }) test('Renders text', () => { - const component = mount( + const component = renderer.create( ) - expect(component.text()).toBe('First line') + const tree = component.toJSON() + + const findText = node => { + if (typeof node === 'string') { + return node // Return text content if it's a string + } + if (Array.isArray(node.children) && node.children.length > 0) { + return findText(node.children[0]) // Recursively search for text content + } + return null // Return null if no text content is found + } + + const textContent = findText(tree) + expect(textContent).toBe('First line') }) test('Variable replacement', () => { @@ -51,11 +63,24 @@ describe('TextGroupEl', () => { event.text = 'REPLACE(' + variable + ')' }) - const component = mount( + const component = renderer.create( ) + 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 // Return text content if it's a string + } + 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 + } + + const textContent = findText(tree) + expect(textContent).toBe('Some BOLD text with a REPLACE(variable) included') }) test('Variable replacement with no match', () => { @@ -63,11 +88,25 @@ describe('TextGroupEl', () => { event.text = null }) - const component = mount( + const component = renderer.create( ) - expect(component.text()).toBe('Some BOLD text with a {{variable}} included') + const tree = component.toJSON() + + const findText = node => { + if (typeof node === 'string') { + return node // Return text content if it's a string + } + 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 + } + + const textContent = findText(tree) + expect(textContent).toBe('Some BOLD text with a {{variable}} included') }) test('String values of hangingIndent work as expected', () => { From 1b6f814de7a026be61a3514a979ac97fb3ced533 Mon Sep 17 00:00:00 2001 From: Rachel Dauns Date: Wed, 10 Apr 2024 12:56:34 -0400 Subject: [PATCH 2/6] enzyme removed from button-bar and delete-buton-base --- .../common/components/button-bar.test.js | 31 +++++++------------ .../components/delete-button-base.test.js | 9 +++--- 2 files changed, 16 insertions(+), 24 deletions(-) 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 index e7fea9c6ba..175ceaa597 100644 --- 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 @@ -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,18 @@ describe('ButtonBar', () => { } ] const mockClick = jest.fn() - const component = mount({children}) + const component = renderer.create({children}) + 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({children}) - componentNoClick - .childAt(0) - .find('button') - .simulate('click') - expect(mockClick).toBeCalledTimes(1) + const componentNoClick = renderer.create({children}) + const buttonInstanceNoClick = componentNoClick.root.findByType('button') + + buttonInstanceNoClick.props.onClick() + expect(mockClick).toHaveBeenCalledTimes(1) }) test('ButtonBar component clicks button but does not fire', () => { @@ -59,13 +55,10 @@ describe('ButtonBar', () => { } ] const mockClick = jest.fn() - const component = mount({children}) - - component - .childAt(0) - .find('button') - .simulate('click') + const component = renderer.create({children}) + const buttonInstance = component.root.findByType('button') + buttonInstance.props.onClick() expect(mockClick).toHaveBeenCalled() }) }) 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 index 125b662712..6daf333fa3 100644 --- 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 @@ -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,9 +43,9 @@ describe('DeleteButton', () => { test('DeleteButton calls focus callback with ref argument', () => { const focus = require('../../../src/scripts/common/page/focus').default - const wrapper = mount() - const inst = wrapper.find(DeleteButtonBase).instance() - inst.focus() - expect(focus).toHaveBeenCalledWith(inst.deleteButtonRef) + const component = renderer.create() + 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 }) }) From 4a6daac19a62b9d02f9af918fcc75dcd541ce3a6 Mon Sep 17 00:00:00 2001 From: Rachel Dauns Date: Mon, 15 Apr 2024 09:00:41 -0400 Subject: [PATCH 3/6] more info button enzyme removed --- .../chunk/text-chunk/text-group-el.test.js | 16 ++-- .../common/components/button-bar.test.js | 1 - .../components/delete-button-base.test.js | 6 +- .../components/more-info-button.test.js | 87 +++++++++++++++---- .../common/components/more-info-button.js | 2 +- 5 files changed, 79 insertions(+), 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 index c0568839b8..1bb005a1fa 100644 --- 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 index 175ceaa597..35ae262613 100644 --- 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({children}) 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 index 6daf333fa3..13c51751f6 100644 --- 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() - 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 index f9e75c7c1a..8cc597105a 100644 --- 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() - component.instance().state.mode = 'hidden' + const component = renderer.create() + 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() + 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() - component.instance().state.mode = 'hover' + const component = renderer.create() + 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() + 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() - component.instance().state.mode = 'hidden' + const component = renderer.create() + 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() + 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 index 459ae0982e..b45e80fd35 100644 --- 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() } } From a463b3ba86786f5f36d465ac7f4ff3bf5ebe8066 Mon Sep 17 00:00:00 2001 From: Rachel Dauns Date: Mon, 15 Apr 2024 09:16:32 -0400 Subject: [PATCH 4/6] switch test enzyme removed --- .../__tests__/common/components/switch.test.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js b/packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js index e2826decae..70ece6882d 100644 --- a/packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js +++ b/packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js @@ -1,7 +1,6 @@ import React from 'react' import Switch from '../../../src/scripts/common/components/switch' import TestRenderer from 'react-test-renderer' -import { mount } from 'enzyme' describe('Switch', () => { test('Switch renders correctly with no options set', () => { @@ -41,11 +40,19 @@ describe('Switch', () => { test('Switch calls onChange', () => { const onChecked = jest.fn() - const component = mount() - const checkbox = component.find('input') + const component = TestRenderer.create() + const checkbox = component.root.findByType('input') + + // Initially, the onChange function should not have been called expect(onChecked).not.toHaveBeenCalled() - checkbox.simulate('change', { target: { checked: true } }) + + // Simulate the change event by directly setting the checked attribute of the input element + checkbox.props.onChange({ target: { checked: true } }) + + // After simulating the change event, the onChange function should have been called once expect(onChecked).toHaveBeenCalledTimes(1) + + // Also, it should have been called with the expected argument expect(onChecked).toHaveBeenCalledWith(expect.objectContaining({ target: { checked: true } })) }) }) From b5fba461ee40efeb1e7a5169a4a82d2d3ca0aafa Mon Sep 17 00:00:00 2001 From: Rachel Dauns Date: Tue, 16 Apr 2024 12:16:32 -0400 Subject: [PATCH 5/6] text-menu enzyme removed --- .../__tests__/common/components/switch.test.js | 4 ---- .../__tests__/common/components/text-menu.test.js | 14 ++++++++++---- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js b/packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js index 70ece6882d..01e940775f 100644 --- a/packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js +++ b/packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js @@ -43,16 +43,12 @@ describe('Switch', () => { const component = TestRenderer.create() const checkbox = component.root.findByType('input') - // Initially, the onChange function should not have been called expect(onChecked).not.toHaveBeenCalled() - // Simulate the change event by directly setting the checked attribute of the input element checkbox.props.onChange({ target: { checked: true } }) - // After simulating the change event, the onChange function should have been called once expect(onChecked).toHaveBeenCalledTimes(1) - // Also, it should have been called with the expected argument expect(onChecked).toHaveBeenCalledWith(expect.objectContaining({ target: { checked: true } })) }) }) diff --git a/packages/app/obojobo-document-engine/__tests__/common/components/text-menu.test.js b/packages/app/obojobo-document-engine/__tests__/common/components/text-menu.test.js index 74b022ace7..9cd6fcaf52 100644 --- a/packages/app/obojobo-document-engine/__tests__/common/components/text-menu.test.js +++ b/packages/app/obojobo-document-engine/__tests__/common/components/text-menu.test.js @@ -1,7 +1,5 @@ import React from 'react' import renderer from 'react-test-renderer' -import { mount } from 'enzyme' - import TextMenu from '../../../src/scripts/common/components/text-menu' const createRect = () => { @@ -59,8 +57,12 @@ describe('TextMenu', () => { test('TextMenu calls mouseDown', () => { const mockCommandHandler = jest.fn() + const mockEvent = { + preventDefault: jest.fn(), + stopPropagation: jest.fn() + } - const component = mount( + const component = renderer.create( createRect() @@ -72,8 +74,12 @@ describe('TextMenu', () => { /> ) - component.find('a').simulate('mouseDown') + const linkElement = component.root.findByType('a') + + linkElement.props.onMouseDown(mockEvent, 'Label') + expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1) + expect(mockEvent.stopPropagation).toHaveBeenCalledTimes(1) expect(mockCommandHandler).toHaveBeenCalledWith('Label') }) }) From 0225099c4d6b4cee8f3c21a3ca09366750523288 Mon Sep 17 00:00:00 2001 From: Rachel Dauns Date: Wed, 1 May 2024 09:56:19 -0400 Subject: [PATCH 6/6] 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( 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(