test(ui-metric): migrate old Metric tests

Closes: INSTUI-4150

packages/ui-metric/package.json

@@ -33,11 +33,14 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
+    "@instructure/ui-axe-check": "10.2.0",
     "@instructure/ui-babel-preset": "10.2.0",
     "@instructure/ui-color-utils": "10.2.0",
-    "@instructure/ui-test-locator": "10.2.0",
     "@instructure/ui-test-utils": "10.2.0",
-    "@instructure/ui-themes": "10.2.0"
+    "@instructure/ui-themes": "10.2.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^15.0.7",
+    "vitest": "^2.0.2"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

packages/ui-metric/src/Metric/__tests__/Metric.test.tsx → packages/ui-metric/src/Metric/__new-tests__/Metric.test.tsx

@@ -23,65 +23,74 @@
  */
 
 import React from 'react'
-import { expect, mount } from '@instructure/ui-test-utils'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { vi } from 'vitest'
 
 import { Metric } from '../index'
-import { MetricLocator } from '../MetricLocator'
 
-describe('<Metric />', async () => {
+describe('<Metric />', () => {
   it('should render the label', async () => {
-    await mount(<Metric renderLabel="Grade" renderValue="80%" />)
-
-    const metric = await MetricLocator.find()
+    const { container } = render(
+      <Metric renderLabel="Grade" renderValue="80%" />
+    )
 
-    expect(await metric.findWithText('Grade')).to.exist()
+    expect(container).toHaveTextContent('Grade')
   })
 
   it('should render the value', async () => {
-    await mount(<Metric renderLabel="Grade" renderValue="80%" />)
-
-    const metric = await MetricLocator.find()
+    const { container } = render(
+      <Metric renderLabel="Grade" renderValue="80%" />
+    )
 
-    expect(await metric.findWithText('80%')).to.exist()
+    expect(container).toHaveTextContent('80%')
   })
 
   it('passes props through to Metric element', async () => {
-    await mount(
-      <Metric data-automation="foo" renderLabel="Grade" renderValue="80%" />
+    render(
+      <Metric
+        data-testid="metric"
+        data-automation="foo"
+        renderLabel="Grade"
+        renderValue="80%"
+      />
     )
+    const metric = screen.getByTestId('metric')
 
-    expect(await MetricLocator.find()).to.have.attribute(
-      'data-automation',
-      'foo'
-    )
+    expect(metric).toHaveAttribute('data-automation', 'foo')
   })
 
   it('should not have role="gridcell" for the value', async () => {
-    await mount(<Metric renderLabel="Grade" renderValue="80%" />)
-
-    const metric = await MetricLocator.find()
-    const value = await metric.findWithText('80%')
+    render(<Metric renderLabel="Grade" renderValue="80%" />)
+    const value = screen.getByText('80%')
 
-    expect(
-      await value.find('[role="gridcell"]', { expectEmpty: true })
-    ).to.not.exist()
+    expect(value).not.toHaveAttribute('role', 'gridcell')
   })
 
   it('should not have role=rowheader for the label', async () => {
-    await mount(<Metric renderLabel="Grade" renderValue="80%" />)
+    render(<Metric renderLabel="Grade" renderValue="80%" />)
+    const label = screen.getByText('Grade')
 
-    const metric = await MetricLocator.find()
-    const label = await metric.findWithText('Grade')
+    expect(label).not.toHaveAttribute('role', 'rowheader')
+  })
+
+  it('should allow ReactNodes as labels and values', async () => {
+    const { container } = render(<Metric renderLabel={<div>hello</div>} />)
+
+    expect(container).toHaveTextContent('hello')
+  })
+
+  it('should allow methods as labels', async () => {
+    const renderLabel = vi.fn()
+    render(<Metric renderLabel={renderLabel} />)
 
-    expect(
-      await label.find('[role="rowheader"]', { expectEmpty: true })
-    ).to.not.exist()
+    expect(renderLabel).toHaveBeenCalled()
   })
 
-  it('should allow methods and ReactNodes as labels and values', async () => {
-    await mount(<Metric renderLabel={<div>hello</div>} />)
-    const metric = await MetricLocator.find()
-    const label = await metric.findWithText('hello')
-    expect(label).to.exist()
+  it('should allow methods as values', async () => {
+    const renderValue = vi.fn()
+    render(<Metric renderValue={renderValue} />)
+
+    expect(renderValue).toHaveBeenCalled()
   })
 })