test(ui-progress): migrate old Progress tests

Closes: INSTUI-4354
instructure · Nov 19, 2024 · bd4b170 · bd4b170
1 parent 732a151
commit bd4b170
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 152 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ui-progress/package.json b/packages/ui-progress/package.json
@@ -35,10 +35,13 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
+    "@instructure/ui-axe-check": "10.6.0",
     "@instructure/ui-babel-preset": "10.6.0",
-    "@instructure/ui-test-locator": "10.6.0",
     "@instructure/ui-test-utils": "10.6.0",
-    "@instructure/ui-themes": "10.6.0"
+    "@instructure/ui-themes": "10.6.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.1",
+    "vitest": "^2.1.1"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

diff --git a/packages/ui-progress/src/ProgressBar/ProgressBarLocator.ts b/packages/ui-progress/src/ProgressBar/ProgressBarLocator.ts
diff --git a/...rogressBar/__tests__/ProgressBar.test.tsx → ...essBar/__new-tests__/ProgressBar.test.tsx b/...rogressBar/__tests__/ProgressBar.test.tsx → ...essBar/__new-tests__/ProgressBar.test.tsx
@@ -23,60 +23,64 @@
  */
 
 import React from 'react'
-import { expect, mount } from '@instructure/ui-test-utils'
+import { render } from '@testing-library/react'
 
+import '@testing-library/jest-dom'
+import { runAxeCheck } from '@instructure/ui-axe-check'
 import { ProgressBar } from '../index'
-import { ProgressBarLocator } from '../ProgressBarLocator'
 
-describe('<ProgressBar />', async () => {
+describe('<ProgressBar />', () => {
   it('should render', async () => {
-    await mount(
+    const { container } = render(
       <ProgressBar
         screenReaderLabel="Chapters read"
         valueMax={60}
         valueNow={30}
       />
     )
-    expect(await ProgressBarLocator.find()).to.exist()
+    const progress = container.querySelector('progress')
+
+    expect(progress).toBeInTheDocument()
   })
 
   it('should render a progress element with correct aria attributes', async () => {
-    await mount(
+    const { container } = render(
       <ProgressBar
         screenReaderLabel="Chapters read"
         valueMax={60}
         valueNow={30}
       />
     )
+    const progress = container.querySelector('progress')
 
-    const componentRoot = await ProgressBarLocator.find()
-    const progress = await componentRoot.find('progress')
-
-    expect(progress).to.exist()
-    expect(progress.getAttribute('value')).to.equal('30')
+    expect(progress).toHaveAttribute('value', '30')
   })
 
   it('should format the displayed text', async () => {
-    await mount(
+    const current = 30
+    const max = 60
+    const { container } = render(
       <ProgressBar
         screenReaderLabel="Chapters read"
-        valueMax={60}
-        valueNow={30}
+        valueMax={max}
+        valueNow={current}
         renderValue={({ valueNow, valueMax }) => `${valueNow} of ${valueMax}`}
       />
     )
-    expect(await ProgressBarLocator.find(':contains(30 of 60)')).to.exist()
+    const progress = container.querySelector('[class$="-progressBar"]')
+
+    expect(progress).toHaveTextContent(`${current} of ${max}`)
   })
 
   it('should meet a11y standards', async () => {
-    await mount(
+    const { container } = render(
       <ProgressBar
         screenReaderLabel="Chapters read"
         valueMax={60}
         valueNow={30}
       />
     )
-    const progress = await ProgressBarLocator.find()
-    expect(await progress.accessible()).to.be.true()
+    const axeCheck = await runAxeCheck(container)
+    expect(axeCheck).toBe(true)
   })
 })
diff --git a/packages/ui-progress/src/ProgressBar/locator.ts b/packages/ui-progress/src/ProgressBar/locator.ts
diff --git a/packages/ui-progress/src/ProgressCircle/ProgressCircleLocator.ts b/packages/ui-progress/src/ProgressCircle/ProgressCircleLocator.ts
diff --git a/...sCircle/__tests__/ProgressCircle.test.tsx → ...cle/__new-tests__/ProgressCircle.test.tsx b/...sCircle/__tests__/ProgressCircle.test.tsx → ...cle/__new-tests__/ProgressCircle.test.tsx
@@ -23,60 +23,64 @@
  */
 
 import React from 'react'
-import { expect, mount } from '@instructure/ui-test-utils'
+import { render } from '@testing-library/react'
 
+import '@testing-library/jest-dom'
+import { runAxeCheck } from '@instructure/ui-axe-check'
 import { ProgressCircle } from '../index'
-import { ProgressCircleLocator } from '../ProgressCircleLocator'
 
-describe('<ProgressCircle />', async () => {
+describe('<ProgressCircle />', () => {
   it('should render', async () => {
-    await mount(
+    const { container } = render(
       <ProgressCircle
         screenReaderLabel="Chapters read"
         valueMax={60}
         valueNow={30}
       />
     )
-    expect(await ProgressCircleLocator.find()).to.exist()
+    const progress = container.querySelector('progress')
+
+    expect(progress).toBeInTheDocument()
   })
 
   it('should render a progress element with correct aria attributes', async () => {
-    await mount(
+    const { container } = render(
       <ProgressCircle
         screenReaderLabel="Chapters read"
         valueMax={60}
         valueNow={30}
       />
     )
+    const progress = container.querySelector('progress')
 
-    const componentRoot = await ProgressCircleLocator.find()
-    const progress = await componentRoot.find('progress')
-
-    expect(progress).to.exist()
-    expect(progress.getAttribute('value')).to.equal('30')
+    expect(progress).toHaveAttribute('value', '30')
   })
 
   it('should format the displayed text', async () => {
-    await mount(
+    const current = 30
+    const max = 60
+    const { container } = render(
       <ProgressCircle
         screenReaderLabel="Chapters read"
-        valueMax={60}
-        valueNow={30}
+        valueMax={max}
+        valueNow={current}
         renderValue={({ valueNow, valueMax }) => `${valueNow} of ${valueMax}`}
       />
     )
-    expect(await ProgressCircleLocator.find(':contains(30 of 60)')).to.exist()
+    const progress = container.querySelector('[class$="-progressCircle"]')
+
+    expect(progress).toHaveTextContent(`${current} of ${max}`)
   })
 
   it('should meet a11y standards', async () => {
-    await mount(
+    const { container } = render(
       <ProgressCircle
         screenReaderLabel="Chapters read"
         valueMax={60}
         valueNow={30}
       />
     )
-    const progress = await ProgressCircleLocator.find()
-    expect(await progress.accessible()).to.be.true()
+    const axeCheck = await runAxeCheck(container)
+    expect(axeCheck).toBe(true)
   })
 })
diff --git a/packages/ui-progress/src/ProgressCircle/locator.ts b/packages/ui-progress/src/ProgressCircle/locator.ts
diff --git a/packages/ui-progress/tsconfig.build.json b/packages/ui-progress/tsconfig.build.json
@@ -11,6 +11,7 @@
     { "path": "../emotion/tsconfig.build.json" },
     { "path": "../shared-types/tsconfig.build.json" },
     { "path": "../ui-a11y-content/tsconfig.build.json" },
+    { "path": "../ui-axe-check/tsconfig.build.json" },
     { "path": "../ui-color-utils/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-testable/tsconfig.build.json" },