test(ui-spinner): migrate old Spinner tests

Author: git-nandor

package-lock.json

@@ -36,8 +36,8 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
+    "@instructure/ui-axe-check": "10.10.0",
     "@instructure/ui-babel-preset": "10.10.0",
-    "@instructure/ui-test-locator": "10.10.0",
     "@instructure/ui-test-utils": "10.10.0",
     "@instructure/ui-themes": "10.10.0",
     "@testing-library/jest-dom": "^6.6.3",

packages/ui-spinner/package.json

@@ -23,11 +23,100 @@
  */
 import React from 'react'
 import { render, waitFor, screen } from '@testing-library/react'
+import { runAxeCheck } from '@instructure/ui-axe-check'
+import { vi, expect } from 'vitest'
+import type { MockInstance } from 'vitest'
 
 import '@testing-library/jest-dom'
+import { View } from '@instructure/ui-view'
 import Spinner from '../index'
+import type { SpinnerProps } from '../props'
 
 describe('<Spinner />', () => {
+  let consoleErrorMock: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {}) as MockInstance
+  })
+
+  afterEach(() => {
+    consoleErrorMock.mockRestore()
+  })
+
+  it('should render', async () => {
+    const { container } = render(<Spinner renderTitle="Loading" size="small" />)
+    const spinner = container.querySelector('div[class$="-spinner"]')
+
+    expect(spinner).toBeInTheDocument()
+  })
+
+  it('should render the title prop text in the SVG element title', async () => {
+    const { container } = render(<Spinner renderTitle="Loading" size="large" />)
+    const spinner = container.querySelector('div[class$="-spinner"]')
+
+    expect(spinner).toHaveTextContent('Loading')
+  })
+
+  it('should meet a11y standards', async () => {
+    const { container } = render(<Spinner renderTitle="Loading" size="small" />)
+    const axeCheck = await runAxeCheck(container)
+    expect(axeCheck).toBe(true)
+  })
+
+  it('should render the contents of a component used in renderTitle', async () => {
+    const Translation = ({ children }: SpinnerProps) => (
+      <span>I have translated {children}.</span>
+    )
+
+    const { container } = render(
+      <Spinner renderTitle={<Translation>Loading</Translation>} size="small" />
+    )
+
+    const spinner = container.querySelector('div[class$="-spinner"]')
+    const axeCheck = await runAxeCheck(container)
+
+    expect(axeCheck).toBe(true)
+    expect(spinner).toHaveTextContent('I have translated Loading')
+  })
+
+  describe('when passing down props to View', () => {
+    const allowedProps: { [key: string]: any } = {
+      margin: 'small',
+      elementRef: () => {},
+      as: 'div'
+    }
+
+    View.allowedProps
+      .filter((prop) => prop !== 'children')
+      .forEach((prop) => {
+        if (Object.keys(allowedProps).indexOf(prop) < 0) {
+          it(`should NOT allow the '${prop}' prop`, async () => {
+            const props = {
+              [prop]: 'foo'
+            }
+            const expectedErrorMessage = `prop '${prop}' is not allowed.`
+
+            render(<Spinner renderTitle="Loading" {...props} />)
+
+            expect(consoleErrorMock).toHaveBeenCalledWith(
+              expect.stringContaining(expectedErrorMessage),
+              expect.any(String)
+            )
+          })
+        } else {
+          it(`should allow the '${prop}' prop`, async () => {
+            const props = { [prop]: allowedProps[prop] }
+            render(<Spinner renderTitle="Loading" {...props} />)
+
+            expect(consoleErrorMock).not.toHaveBeenCalled()
+          })
+        }
+      })
+  })
+
   describe('with the delay prop', () => {
     it('should delay rendering', async () => {
       render(<Spinner renderTitle="Loading" delay={300} />)

packages/ui-spinner/src/Spinner/SpinnerLocator.ts

@@ -7,6 +7,7 @@
   },
   "include": ["src"],
   "references": [
+    { "path": "../ui-axe-check/tsconfig.build.json" },
     { "path": "../console/tsconfig.build.json" },
     { "path": "../emotion/tsconfig.build.json" },
     { "path": "../shared-types/tsconfig.build.json" },
@@ -17,7 +18,6 @@
     { "path": "../ui-view/tsconfig.build.json" },
     { "path": "../uid/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" }
   ]