test: add visual regression tests for Tooltip

matyasf · matyasf · commit 000ebd2a09cb · 2025-08-12T14:38:22.000+02:00
diff --git a/regression-test/cypress/e2e/spec.cy.ts b/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']
   }
 }
 
@@ -87,4 +87,10 @@ describe('visual regression test', () => {
     cy.injectAxe()
     cy.checkA11y('.axe-test', axeOptions, terminalLog)
   })
+
+  it('check tooltip', { env: { delay: 500 } }, () => {
+    cy.visit('http://localhost:3000/tooltip')
+    cy.injectAxe()
+    cy.checkA11y('.axe-test', axeOptions, terminalLog)
+  })
 })
diff --git a/regression-test/next.config.mjs b/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
diff --git a/regression-test/package.json b/regression-test/package.json
@@ -8,7 +8,8 @@
     "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": {
diff --git a/regression-test/src/app/avatar/page.tsx b/regression-test/src/app/avatar/page.tsx
@@ -255,7 +255,7 @@ export default function AvatarPage() {
           name="David Herbert"
           hasInverseColor
           color="fire"
-          themeOverride={{ colorFire: '#efb410' }}
+          themeOverride={{ colorFire: '#013410' }}
         />
       </div>
       <div>
diff --git a/regression-test/src/app/layout.tsx b/regression-test/src/app/layout.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>
   )
 }
diff --git a/regression-test/src/app/page.tsx b/regression-test/src/app/page.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 (
diff --git a/regression-test/src/app/tooltip/page.tsx b/regression-test/src/app/tooltip/page.tsx
