test(ui-dom-utils): migrate old Ddom-utils tests

Closes: INSTUI-3880

packages/ui-dom-utils/package.json

@@ -23,7 +23,8 @@
   "license": "MIT",
   "devDependencies": {
     "@instructure/ui-babel-preset": "8.46.1",
-    "@instructure/ui-test-utils": "8.46.1"
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",

packages/ui-dom-utils/src/__tests__/addEventListener.test.tsx → packages/ui-dom-utils/src/__new-tests__/addEventListener.test.tsx

@@ -23,23 +23,23 @@
  */
 
 import React from 'react'
-import { expect, mount, spy } from '@instructure/ui-test-utils'
+import { fireEvent, render } from '@testing-library/react'
+import '@testing-library/jest-dom'
 import { addEventListener } from '../addEventListener'
 
-describe('addEventListener', async () => {
-  it('should add an event listener and provide a remove method', async () => {
-    const callback = spy()
+describe('addEventListener', () => {
+  it('should add an event listener and provide a remove method', () => {
+    const callback = jest.fn()
 
-    const subject = await mount(<div />)
-    const node = subject.getDOMNode()
+    const { container } = render(<div />)
+    const node = container.firstChild as HTMLDivElement
 
     const listener = addEventListener(node, 'click', callback)
 
-    // @ts-expect-error TS2339: Property 'click' does not exist on type 'Element'.
-    await node.click()
+    fireEvent.click(node)
 
-    expect(callback).to.have.been.calledOnce()
-    expect(typeof listener.remove).to.equal('function')
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(typeof listener.remove).toBe('function')
 
     listener.remove()
   })

packages/ui-dom-utils/src/__tests__/addInputModeListener.test.tsx → packages/ui-dom-utils/src/__new-tests__/addInputModeListener.test.tsx

@@ -23,41 +23,38 @@
  */
 
 import React from 'react'
-import {
-  expect,
-  mount,
-  stub,
-  wrapQueryResult
-} from '@instructure/ui-test-utils'
+import { render, fireEvent, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
 import { addInputModeListener } from '../addInputModeListener'
 
-describe('addInputModeListener', async () => {
-  it('should handle input mode changes', async () => {
-    const handleInputModeChange = stub()
-    await mount(
+describe('addInputModeListener', () => {
+  it('should handle input mode changes', () => {
+    const handleInputModeChange = jest.fn()
+
+    render(
       <div>
         <button id="button-1">hello</button>
         <button>world</button>
       </div>
     )
+
     const inputModeListener = addInputModeListener({
       onInputModeChange: handleInputModeChange
     })
 
-    const button = wrapQueryResult(document.getElementById('button-1')!)
+    const button = screen.getByRole('button', { name: 'hello' })
 
-    await button.mouseUp()
-    expect(inputModeListener.isKeyboardMode()).to.be.false()
+    fireEvent.mouseUp(button)
+    expect(inputModeListener.isKeyboardMode()).toBe(false)
 
-    await button.keyDown()
-    expect(inputModeListener.isKeyboardMode()).to.be.true()
-    expect(handleInputModeChange).to.have.been.calledTwice()
+    fireEvent.keyDown(button)
+    expect(inputModeListener.isKeyboardMode()).toBe(true)
+    expect(handleInputModeChange).toHaveBeenCalledTimes(2)
 
     inputModeListener.remove()
 
-    await button.mouseUp()
-    expect(inputModeListener.isKeyboardMode()).to.be.true()
-
-    expect(handleInputModeChange).to.have.been.calledTwice()
+    fireEvent.mouseUp(button)
+    expect(inputModeListener.isKeyboardMode()).toBe(true)
+    expect(handleInputModeChange).toHaveBeenCalledTimes(2)
   })
 })

packages/ui-dom-utils/src/__tests__/addPositionChangeListener.test.tsx → packages/ui-dom-utils/src/__new-tests__/addPositionChangeListener.test.tsx

@@ -23,27 +23,43 @@
  */
 
 import React from 'react'
-import { expect, mount, spy, wait } from '@instructure/ui-test-utils'
+import { render, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
 import { addPositionChangeListener } from '../addPositionChangeListener'
 
-describe('addPositionChangeListener', async () => {
-  it('should provide a remove method', async () => {
-    const callback = spy()
+const mockRect = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0,
+  toJSON: jest.fn()
+}
 
-    const subject = await mount(<div />)
-    const node = subject.getDOMNode() as HTMLDivElement
+describe('addPositionChangeListener', () => {
+  it('should provide a remove method', async () => {
+    const callback = jest.fn()
+    Element.prototype.getBoundingClientRect = jest.fn(() => mockRect as DOMRect)
 
-    node.style.position = 'relative'
+    const { container } = render(<div />)
+    const node = container.firstChild as HTMLDivElement
 
     const listener = addPositionChangeListener(node, callback)
 
-    node.style.top = '100px'
+    // Manually trigger a position change (since JSDOM won't)
+    Element.prototype.getBoundingClientRect = jest.fn(() => {
+      return { ...mockRect, top: 200 } as DOMRect
+    })
 
-    await wait(() => {
-      expect(callback).to.have.been.calledOnce()
-      expect(typeof listener.remove).to.equal('function')
+    await waitFor(() => {
+      expect(callback).toHaveBeenCalledTimes(1)
+      expect(typeof listener.remove).toBe('function')
     })
 
     listener.remove()
+    jest.restoreAllMocks()
   })
 })

packages/ui-dom-utils/src/__tests__/addResizeListener.test.tsx → packages/ui-dom-utils/src/__new-tests__/addResizeListener.test.tsx

@@ -23,25 +23,43 @@
  */
 
 import React from 'react'
-import { expect, mount, spy, wait } from '@instructure/ui-test-utils'
+import { render, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
 import { addResizeListener } from '../addResizeListener'
 
-describe('addResizeListener', async () => {
+const mockRect = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0,
+  toJSON: jest.fn()
+}
+
+describe('addResizeListener', () => {
   it('should provide a remove method', async () => {
-    const callback = spy()
+    const callback = jest.fn()
+    Element.prototype.getBoundingClientRect = jest.fn(() => mockRect as DOMRect)
 
-    const subject = await mount(<div />)
-    const node = subject.getDOMNode() as HTMLDivElement
+    const { container } = render(<div />)
+    const node = container.firstChild as HTMLDivElement
 
     const listener = addResizeListener(node, callback)
 
-    node.style.width = '50px'
+    // Manually trigger a size change (since JSDOM won't)
+    Element.prototype.getBoundingClientRect = jest.fn(() => {
+      return { ...mockRect, width: 200 } as DOMRect
+    })
 
-    await wait(() => {
-      expect(callback).to.have.been.calledOnce()
-      expect(typeof listener.remove).to.equal('function')
+    await waitFor(() => {
+      expect(callback).toHaveBeenCalledTimes(1)
+      expect(typeof listener.remove).toBe('function')
     })
 
     listener.remove()
+    jest.restoreAllMocks()
   })
 })

packages/ui-dom-utils/src/__tests__/findTabbable.test.tsx → packages/ui-dom-utils/src/__new-tests__/findTabbable.test.tsx

@@ -23,49 +23,49 @@
  */
 
 import React from 'react'
-import { expect, mount } from '@instructure/ui-test-utils'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
 import { findTabbable } from '../findTabbable'
 
-describe('findTabbable', async () => {
-  describe('tabbable content', async () => {
-    it('should find tabbable descendants', async () => {
-      /* eslint-disable jsx-a11y/anchor-is-valid */
+describe('findTabbable', () => {
+  describe('tabbable content', () => {
+    it('should find tabbable descendants', () => {
       /* eslint-disable jsx-a11y/tabindex-no-positive */
       /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-
-      const subject = await mount(
+      const { container } = render(
         <div>
-          <a href="#">Yep</a>
-          <div>Nope</div>
-          <div tabIndex={1}>Yep</div>
-          <input type="text" value="Yep" readOnly />
+          <a href="https://instructure-test">Tabbable</a>
+          <div>Not Tabbable</div>
+          <div tabIndex={1}>Tabbable</div>
+          <input type="text" value="Tabbable" readOnly />
           <div>
-            <button>Yep</button>
-            <button style={{ display: 'none' }}>Nope</button>
+            <button>Tabbable</button>
+            <button style={{ display: 'none' }}>Not Tabbable</button>
           </div>
         </div>
       )
-      /* eslint-enable jsx-a11y/no-noninteractive-tabindex */
-      /* eslint-enable jsx-a11y/tabindex-no-positive */
-      /* eslint-enable jsx-a11y/anchor-is-valid */
 
-      expect(findTabbable(subject.getDOMNode()).length).to.equal(4)
+      const node = container.firstChild as HTMLElement
+      expect(findTabbable(node).length).toBe(4)
     })
   })
 
-  describe('tabbable root', async () => {
-    it('should search the root node when shouldSearchRootNode is set', async () => {
-      const subject = await mount(
+  describe('tabbable root', () => {
+    it('should search the root node when shouldSearchRootNode is set', () => {
+      const shouldSearchRootNode = true
+      const { container } = render(
         <button>
           <span>hello</span>
         </button>
       )
-      expect(findTabbable(subject.getDOMNode()).length).to.equal(0)
-      expect(findTabbable(subject.getDOMNode(), true).length).to.equal(1)
+
+      const node = container.firstChild as HTMLElement
+      expect(findTabbable(node).length).toBe(0)
+      expect(findTabbable(node, shouldSearchRootNode).length).toBe(1)
     })
   })
 
-  it('should gracefully handle null', async () => {
-    expect(findTabbable(null).length).to.equal(0)
+  it('should gracefully handle null', () => {
+    expect(findTabbable(null).length).toBe(0)
   })
 })

packages/ui-dom-utils/src/__tests__/getClassList.test.tsx → packages/ui-dom-utils/src/__new-tests__/getClassList.test.tsx

@@ -23,22 +23,25 @@
  */
 
 import React from 'react'
-import { expect, mount } from '@instructure/ui-test-utils'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
 import { getClassList } from '../getClassList'
 
-describe('getClassList', async () => {
-  it('should provide classlist methods', async () => {
-    const subject = await mount(<span className="foo bar baz">hello</span>)
-    const classes = getClassList(subject.getDOMNode())
+describe('getClassList', () => {
+  it('should provide classlist methods', () => {
+    const { container } = render(<span className="foo bar baz">Test</span>)
+    const node = container.firstChild as HTMLElement
 
-    expect(classes.toArray().length).to.equal(3)
-    expect(classes.contains('foo')).to.be.true()
-    expect(classes.contains('lorem')).to.be.false()
+    const classes = getClassList(node)
+
+    expect(classes.toArray().length).toBe(3)
+    expect(classes.contains('foo')).toBeTruthy()
+    expect(classes.contains('lorem')).toBeFalsy()
 
     classes.add('lorem')
-    expect(classes.contains('lorem')).to.be.true()
+    expect(classes.contains('lorem')).toBeTruthy()
 
     classes.remove('lorem')
-    expect(classes.contains('lorem')).to.be.false()
+    expect(classes.contains('lorem')).toBeFalsy()
   })
 })

packages/ui-dom-utils/src/__tests__/getFontSize.test.tsx → packages/ui-dom-utils/src/__new-tests__/getFontSize.test.tsx

@@ -23,12 +23,15 @@
  */
 
 import React from 'react'
-import { expect, mount } from '@instructure/ui-test-utils'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
 import { getFontSize } from '../getFontSize'
 
-describe('getFontSize', async () => {
-  it('should return font size as a number', async () => {
-    const subject = await mount(<span style={{ fontSize: '17px' }}>hello</span>)
-    expect(getFontSize(subject.getDOMNode())).to.equal(17)
+describe('getFontSize', () => {
+  it('should return font size as a number', () => {
+    const { container } = render(<span style={{ fontSize: '17px' }}>Test</span>)
+    const node = container.firstChild
+
+    expect(getFontSize(node)).toBe(17)
   })
 })