test: add visual regression tests for Tooltip

Author: matyasf

regression-test/.gitignore

@@ -24,6 +24,7 @@
 
 # debug
 npm-debug.log*
+build-archive.log
 
 # local env files
 .env*.local

regression-test/README.md

@@ -13,7 +13,7 @@ This is a simple Next.js app importing (locally) @instructure/ui. This allows us
 2. Then open the regression test folder: `cd regression-test`
 3. Run the dev server with `npm run dev`
 4. The dev server will be accessible at `localhost:3000`
-5. Once the dev server is running you can start the Cypress e2e tests with the `npm run cypress` command
+5. Once the dev server is running you can start the Cypress e2e tests with the `npm run cypress` command. Run `npm run cypress-chrome` to open the Cypress GUI where you can see detailed error logs, snapshots etc.
 
 ### To add a new component
 

regression-test/cypress.config.ts

@@ -25,6 +25,9 @@ import { defineConfig } from 'cypress'
 import { installPlugin } from '@chromatic-com/cypress'
 
 export default defineConfig({
+  env: {
+    delay: 100
+  },
   e2e: {
     setupNodeEvents(on, config) {
       installPlugin(on, config)

regression-test/cypress/e2e/spec.cy.ts

@@ -65,7 +65,7 @@ function terminalLog(violations: Result[]) {
 const axeOptions: { runOnly: RunOnly } = {
   runOnly: {
     type: 'tag',
-    values: ['wcag2a', 'wcag2aa', 'section508', 'best-practice']
+    values: ['wcag2a', 'wcag2aa', 'section508']
   }
 }
 
@@ -84,6 +84,14 @@ describe('visual regression test', () => {
 
   it('check avatar', () => {
     cy.visit('http://localhost:3000/avatar')
+    cy.wait(300) // images render a frame later, Chromatic needs a bit more delay
+    cy.injectAxe()
+    cy.checkA11y('.axe-test', axeOptions, terminalLog)
+  })
+
+  it('check tooltip', () => {
+    cy.visit('http://localhost:3000/tooltip')
+    cy.wait(300) // tooltips render a frame later, Chromatic needs a bit more delay
     cy.injectAxe()
     cy.checkA11y('.axe-test', axeOptions, terminalLog)
   })

regression-test/next.config.mjs

@@ -21,6 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  *//** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  // strict mode needs to be disabled, so deterministic ID generation
+  // works. If its enabled, client side double rendering causes IDs to
+  // come out of sync. TODO fix
+  reactStrictMode: false
+  }
 
 export default nextConfig

regression-test/package-lock.json

@@ -8,19 +8,18 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "cypress": "ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=9222 cypress run"
+    "cypress": "ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=9222 cypress run",
+    "cypress-chrome": "cypress open --browser chrome"
   },
   "keywords": [],
   "devDependencies": {
     "@chromatic-com/cypress": "^0.11.0",
     "@instructure/browserslist-config-instui": "10.14.0",
     "@tailwindcss/postcss": "^4.1.4",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "axe-core": "^4.10.3",
-    "chromatic": "^11.27.0",
+    "chromatic": "^13.1.3",
     "cypress": "^14.4.1",
     "cypress-axe": "^1.6.0",
     "eslint": "^8",
@@ -32,8 +31,8 @@
   "dependencies": {
     "instructure-ui": "file:../packages",
     "next": "14.2.31",
-    "react": "^18.3.1",
-    "react-dom": "^18"
+    "react": "18.3.1",
+    "react-dom": "^18.3.1"
   },
   "//dependency-comments": {
     "next": "NextJS 15 uses React 19, this is not overrideable"

regression-test/package.json

@@ -23,8 +23,14 @@
  */
 'use client'
 import React from 'react'
-import { Avatar } from 'instructure-ui/ui-avatar/es/index'
-import { IconGroupLine, IconAiSolid } from 'instructure-ui/ui-icons/es/index'
+import { Avatar as avv } from 'instructure-ui/ui-avatar/es/index'
+import {
+  IconGroupLine as igl,
+  IconAiSolid
+} from 'instructure-ui/ui-icons/es/index'
+
+const Avatar = avv as any
+const IconGroupLine = igl as any
 
 export default function AvatarPage() {
   return (
@@ -255,7 +261,7 @@ export default function AvatarPage() {
           name="David Herbert"
           hasInverseColor
           color="fire"
-          themeOverride={{ colorFire: '#efb410' }}
+          themeOverride={{ colorFire: '#013410' }}
         />
       </div>
       <div>

regression-test/src/app/avatar/page.tsx

@@ -21,25 +21,26 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+'use client'
 import React from 'react'
-import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
+import { InstUISettingsProvider } from '@instructure/emotion'
 
 const inter = Inter({ subsets: ['latin'] })
 
-export const metadata: Metadata = {
-  title: 'InstUI Visual Regression Test Suite'
-}
-
 export default function RootLayout({
   children
 }: Readonly<{
   children: React.ReactNode
 }>) {
   return (
+    // we need to make a new Map to reset counting on the server side
+    // on each page refresh TODO fix
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <InstUISettingsProvider instanceCounterMap={new Map()}>
+        <body className={inter.className}>{children}</body>
+      </InstUISettingsProvider>
     </html>
   )
 }

regression-test/src/app/layout.tsx

@@ -25,7 +25,7 @@
 'use client'
 import { Link } from 'instructure-ui/ui-link/es/index'
 
-const components = ['button', 'alert', 'avatar']
+const components = ['button', 'alert', 'avatar', 'tooltip']
 
 export default function Home() {
   return (