test(ui-portal): migrate old Portal tests

Closes: INSTUI-4124
instructure · Jul 12, 2024 · aabb557 · aabb557
1 parent 3d48f20
commit aabb557
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 73 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ui-portal/package.json b/packages/ui-portal/package.json
@@ -23,8 +23,12 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@instructure/ui-axe-check": "9.2.0",
     "@instructure/ui-babel-preset": "9.2.0",
-    "@instructure/ui-test-utils": "9.2.0"
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^1.6.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",

diff --git a/...rtal/src/Portal/__tests__/Portal.test.tsx → .../src/Portal/__new-tests__/Portal.test.tsx b/...rtal/src/Portal/__tests__/Portal.test.tsx → .../src/Portal/__new-tests__/Portal.test.tsx
@@ -24,130 +24,143 @@
  */
 
 import React from 'react'
-import { find, expect, mount, stub } from '@instructure/ui-test-utils'
+import { vi } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
 
+import { runAxeCheck } from '@instructure/ui-axe-check'
 import { Portal } from '../index'
 
-describe(`<Portal />`, async () => {
+describe(`<Portal />`, () => {
   it('should render', async () => {
-    await mount(<Portal open>Hello World</Portal>)
-    const portal = await find(':contains(Hello World)')
-    expect(portal.getDOMNode()).to.exist()
+    render(<Portal open>Hello World</Portal>)
+    const portal = screen.getByText('Hello World')
+
+    expect(portal).toBeInTheDocument()
   })
 
   it('should be accessible', async () => {
-    await mount(
-      <Portal open id="portal">
+    const { container } = render(
+      <Portal open data-testid="portal">
         Hello World
       </Portal>
     )
-    const portal = await find('#portal')
-    expect(await portal.accessible()).to.be.true()
+    const axeCheck = await runAxeCheck(container)
+
+    expect(axeCheck).toBe(true)
   })
 
   it('should support onOpen prop', async () => {
-    const onOpen = stub()
-    await mount(
-      <Portal open onOpen={onOpen} id="portal">
+    const onOpen = vi.fn()
+    render(
+      <Portal open onOpen={onOpen} data-testid="portal">
         Hello World
       </Portal>
     )
+    const portal = screen.getByTestId('portal')
 
-    const portal = await find('#portal')
-
-    expect(onOpen).to.have.been.calledWith(portal.getDOMNode())
+    expect(onOpen).toHaveBeenCalledWith(portal)
   })
 
   it('should support onClose prop', async () => {
-    const onClose = stub()
-
-    const subject = await mount(
+    const onClose = vi.fn()
+    const { rerender } = render(
       <Portal open onClose={onClose}>
         Hello World
       </Portal>
     )
 
-    await subject.setProps({ open: false })
+    expect(onClose).not.toHaveBeenCalled()
+
+    rerender(
+      <Portal open={false} onClose={onClose}>
+        Hello World
+      </Portal>
+    )
 
-    expect(onClose).to.have.been.called()
+    expect(onClose).toHaveBeenCalled()
   })
 
   it('should add a dir attribute to the root DOM node', async () => {
-    const onOpen = stub()
-    await mount(
-      <Portal open onOpen={onOpen} id="portal">
+    const onOpen = vi.fn()
+    render(
+      <Portal open onOpen={onOpen} data-testid="portal">
         Hello World
       </Portal>
     )
-    const portal = await find('#portal')
-    expect(portal.getAttribute('dir')).to.equal('ltr')
+    const portal = screen.getByTestId('portal')
+
+    expect(portal).toHaveAttribute('dir', 'ltr')
   })
 
   it('should not render if children are empty', async () => {
-    await mount(<Portal open id="portal" />)
-    const portal = await find('#portal', { expectEmpty: true })
-    expect(portal).to.not.exist()
+    render(<Portal open data-testid="portal" />)
+    const portal = screen.queryByTestId('portal')
+
+    expect(portal).not.toBeInTheDocument()
   })
 
   describe('without a mountNode prop', () => {
     it('should render nothing when closed', async () => {
-      await mount(<Portal>Hello World</Portal>)
-      const portal = await find('#portal', { expectEmpty: true })
-      expect(portal).to.not.exist()
+      render(<Portal>Hello World</Portal>)
+      const portal = screen.queryByTestId('portal')
+
+      expect(portal).not.toBeInTheDocument()
     })
 
     it('should render children and have a node with a parent when open', async () => {
-      const onKeyDown = stub()
-
-      await mount(
-        <Portal open id="portal">
+      const onKeyDown = vi.fn()
+      render(
+        <Portal open data-testid="portal">
           <button onKeyDown={onKeyDown}>Hello World</button>
         </Portal>
       )
+      const portal = screen.getByTestId('portal')
+      const button = screen.getByRole('button', { name: 'Hello World' })
 
-      const portal = await find('#portal')
-      const button = await find('button:label(Hello World)')
-
-      await button.keyDown('Enter')
+      await userEvent.type(button, '{enter}')
 
-      expect(onKeyDown).to.have.been.called()
+      await waitFor(() => {
+        expect(onKeyDown).toHaveBeenCalled()
+      })
 
-      expect(portal.getParentNode()).to.equal(button.getOwnerDocument().body)
+      expect(portal).toContainElement(button)
     })
   })
 
   describe('when a mountNode prop is provided', () => {
     it('should render nothing when closed', async () => {
-      await mount(
+      render(
         <div>
           <Portal
             mountNode={() => document.getElementById('portal-mount-node')!}
-            id="portal"
+            data-testid="portal"
           >
             Hello World
           </Portal>
           <div id="portal-mount-node" />
         </div>
       )
-      const portal = await find('#portal', { expectEmpty: true })
+      const portal = screen.queryByTestId('portal')
 
-      expect(portal).to.not.exist()
+      expect(portal).not.toBeInTheDocument()
     })
 
     it('should render children and have a node with a parent when open', async () => {
       const mountNode = document.createElement('div')
       mountNode.setAttribute('id', 'portal-mount-node')
       document.body.appendChild(mountNode)
 
-      await mount(
-        <Portal open mountNode={mountNode} id="portal">
+      render(
+        <Portal open mountNode={mountNode} data-testid="portal">
           Hello World
         </Portal>
       )
+      const portal = screen.getByTestId('portal')
 
-      const portal = await find('#portal')
-
-      expect(portal).to.have.exactly(1).ancestors('#portal-mount-node')
+      expect(portal.parentElement).toBe(mountNode)
+      expect(mountNode.parentElement).toBe(document.body)
     })
   })
 })
diff --git a/packages/ui-portal/tsconfig.build.json b/packages/ui-portal/tsconfig.build.json
@@ -7,26 +7,12 @@
   },
   "include": ["src"],
   "references": [
-    {
-      "path": "../ui-babel-preset/tsconfig.build.json"
-    },
-    {
-      "path": "../ui-test-utils/tsconfig.build.json"
-    },
-    {
-      "path": "../shared-types/tsconfig.build.json"
-    },
-    {
-      "path": "../ui-i18n/tsconfig.build.json"
-    },
-    {
-      "path": "../ui-prop-types/tsconfig.build.json"
-    },
-    {
-      "path": "../ui-react-utils/tsconfig.build.json"
-    },
-    {
-      "path": "../ui-dom-utils/tsconfig.build.json"
-    }
+    { "path": "../ui-babel-preset/tsconfig.build.json" },
+    { "path": "../shared-types/tsconfig.build.json" },
+    { "path": "../ui-i18n/tsconfig.build.json" },
+    { "path": "../ui-prop-types/tsconfig.build.json" },
+    { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-dom-utils/tsconfig.build.json" },
+    { "path": "../ui-axe-check/tsconfig.build.json" }
   ]
 }