test(ui-tag): migrate old Tag tests

Closes: INSTUI-4128

packages/ui-tag/package.json

@@ -36,10 +36,14 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
+    "@instructure/ui-axe-check": "9.2.0",
     "@instructure/ui-babel-preset": "9.2.0",
-    "@instructure/ui-test-locator": "9.2.0",
     "@instructure/ui-test-utils": "9.2.0",
-    "@instructure/ui-themes": "9.2.0"
+    "@instructure/ui-themes": "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"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

packages/ui-tag/src/Tag/__tests__/Tag.test.tsx → packages/ui-tag/src/Tag/__new-tests__/Tag.test.tsx

@@ -22,76 +22,109 @@
  * SOFTWARE.
  */
 
-import React from 'react'
+import React, { ComponentType } from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import { vi } from 'vitest'
 
-import { expect, mount, spy, stub, wait } from '@instructure/ui-test-utils'
-import { View } from '@instructure/ui-view'
+import { Tag } from '../index'
+import { runAxeCheck } from '@instructure/ui-axe-check'
 import type { ViewProps } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view'
 
-import { Tag } from '../index'
-import { TagLocator } from '../TagLocator'
+const originalOmitViewProps = View.omitViewProps
 
 describe('<Tag />', async () => {
-  it('should display text', async () => {
-    await mount(<Tag text="Summer" />)
+  beforeAll(() => {
+    // View component read Component.name instead of Component.displayName
+    // causing [undefined] in error messages
+    type TagComponentType = ComponentType & {
+      name: 'Tag'
+    }
 
-    const tag = await TagLocator.find()
+    View.omitViewProps = (props, Component) => {
+      const ModifiedComponent = {
+        ...Component,
+        name: 'Tag'
+      } as TagComponentType
+      return originalOmitViewProps(props, ModifiedComponent)
+    }
+  })
+  afterAll(() => {
+    View.omitViewProps = originalOmitViewProps
+  })
+
+  it('should display text', async () => {
+    render(<Tag text="Summer" />)
+    const tag = screen.getByText('Summer')
 
-    expect(await tag.find(':contains(Summer)')).to.exist()
+    expect(tag).toBeInTheDocument()
   })
 
   it('should render as a button and respond to onClick event', async () => {
-    const onClick = stub()
-    await mount(<Tag text="Summer" onClick={onClick} />)
-    const tag = await TagLocator.find()
-    const button = await tag.find('button')
-    await button.click()
-
-    await wait(() => {
-      expect(onClick).to.have.been.called()
+    const onClick = vi.fn()
+    render(<Tag data-testid="summer-button" text="Summer" onClick={onClick} />)
+
+    const button = screen.getByTestId('summer-button')
+
+    userEvent.click(button)
+
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1)
+      expect(button.tagName).toBe('BUTTON')
     })
   })
 
   it('should render a close icon when it is dismissible and clickable', async () => {
-    const onClick = stub()
-    await mount(<Tag text="Summer" onClick={onClick} dismissible={true} />)
-    const tag = await TagLocator.find()
-    expect(await tag.find('svg[name="IconX"]')).to.exist()
+    const onClick = vi.fn()
+    const { container } = render(
+      <Tag text="Summer" onClick={onClick} dismissible={true} />
+    )
+    const icon = container.querySelector('svg')
+
+    expect(icon).toHaveAttribute('name', 'IconX')
   })
 
   it('should meet a11y standards', async () => {
-    await mount(<Tag text="Summer" />)
-    const tag = await TagLocator.find()
-    expect(await tag.accessible()).to.be.true()
+    const { container } = render(<Tag text="Summer" />)
+    const axeCheck = await runAxeCheck(container)
+
+    expect(axeCheck).toBe(true)
   })
 
   describe('when passing down props to View', async () => {
     const allowedProps: Partial<ViewProps> = {
       margin: 'small',
       elementRef: () => {}
     }
-
     View.allowedProps
       .filter((prop) => prop !== 'children')
       .forEach((prop) => {
         if (Object.keys(allowedProps).indexOf(prop) < 0) {
           it(`should NOT allow the '${prop}' prop`, async () => {
-            const warning = `Warning: [Tag] prop '${prop}' is not allowed.`
             const props = {
               [prop]: 'foo'
             }
-            const consoleError = spy(console, 'error')
+            const consoleError = vi
+              .spyOn(console, 'error')
+              .mockImplementation(() => {})
 
-            await mount(<Tag text="Summer" {...props} />)
-            expect(consoleError.firstCall.args[0]).to.be.equal(warning)
+            render(<Tag text="Summer" {...props} />)
+            const warning = `Warning: [Tag] prop '${prop}' is not allowed.`
+
+            expect(consoleError.mock.calls[0][0]).toBe(warning)
+            consoleError.mockRestore()
           })
         } else {
           it(`should allow the '${prop}' prop`, async () => {
             const props = { [prop]: allowedProps[prop] }
-            const consoleError = stub(console, 'error')
+            const consoleError = vi.spyOn(console, 'error')
+
+            render(<Tag text="Summer" {...props} />)
 
-            await mount(<Tag text="Summer" {...props} />)
-            expect(consoleError).to.not.be.called()
+            expect(consoleError).not.toHaveBeenCalled()
+            consoleError.mockRestore()
           })
         }
       })

packages/ui-tag/tsconfig.build.json

@@ -10,14 +10,14 @@
     { "path": "../console/tsconfig.build.json" },
     { "path": "../emotion/tsconfig.build.json" },
     { "path": "../shared-types/tsconfig.build.json" },
+    { "path": "../ui-axe-check/tsconfig.build.json" },
     { "path": "../ui-color-utils/tsconfig.build.json" },
     { "path": "../ui-dom-utils/tsconfig.build.json" },
     { "path": "../ui-icons/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-view/tsconfig.build.json" },
     { "path": "../ui-babel-preset/tsconfig.build.json" },
-    { "path": "../ui-test-locator/tsconfig.build.json" },
     { "path": "../ui-test-utils/tsconfig.build.json" },
     { "path": "../ui-themes/tsconfig.build.json" }
   ]