fix(eds-color-palette-generator): fix vitest and playwright tests (#3936)

Author: torleifhalseth

.github/workflows/playwright.yml

@@ -19,14 +19,16 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
+      - name: Install pnpm
+        run: npm install -g pnpm
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install
         working-directory: packages/eds-color-palette-generator
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+        run: pnpm exec playwright install --with-deps
         working-directory: packages/eds-color-palette-generator
       - name: Run Playwright tests
-        run: npx playwright test
+        run: pnpm run test:e2e
         working-directory: packages/eds-color-palette-generator
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}

packages/eds-color-palette-generator/package.json

@@ -3,6 +3,7 @@
   "description": "EDS Color Palette Generator",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",

packages/eds-color-palette-generator/src/utils/color.test.ts

@@ -43,6 +43,7 @@ describe('Color Contrast Tests', () => {
       foreground: 'invalid-color',
       background: '#ffffff',
       algorithm: 'WCAG21',
+      silent: true,
     })
 
     expect(result).toBe('0')
@@ -258,7 +259,12 @@ describe('Edge Cases and Error Handling', () => {
     const foreground = 'oklch(invalid values)'
     const background = '#ffffff'
 
-    const result = contrast({ foreground, background, algorithm: 'APCA' })
+    const result = contrast({
+      foreground,
+      background,
+      algorithm: 'APCA',
+      silent: true,
+    })
 
     expect(result).toBe('0')
   })
@@ -268,6 +274,7 @@ describe('Edge Cases and Error Handling', () => {
       foreground: '',
       background: '#ffffff',
       algorithm: 'APCA',
+      silent: true,
     })
 
     expect(result).toBe('0')
@@ -296,7 +303,12 @@ describe('Edge Cases and Error Handling', () => {
     const foreground = 'oklch(0.2 0 NaN)' // Grayscale with NaN hue
     const background = 'oklch(0.8 0 180)' // Light gray
 
-    const result = contrast({ foreground, background, algorithm: 'APCA' })
+    const result = contrast({
+      foreground,
+      background,
+      algorithm: 'APCA',
+      silent: true,
+    })
 
     // Should handle gracefully and calculate based on lightness
     expect(typeof result).toBe('string')

packages/eds-color-palette-generator/src/utils/color.ts

@@ -72,16 +72,19 @@ export function generateColorScale(
  * @param foreground - Text/foreground color (OKLCH or HEX string)
  * @param background - Background color (OKLCH or HEX string)
  * @param algorithm - Contrast calculation algorithm ("WCAG21" or "APCA")
+ * @param silent - Whether to suppress error logging (useful for tests)
  * @returns Contrast score as number or string
  */
 export function contrast({
   foreground,
   background,
   algorithm,
+  silent = false,
 }: {
   foreground: string
   background: string
   algorithm: Algorithms
+  silent?: boolean
 }): string | number {
   try {
     const fgColor = new Color(foreground)
@@ -93,7 +96,9 @@ export function contrast({
       decimals,
     )
   } catch (error) {
-    console.error('Error calculating contrast:', error)
+    if (!silent) {
+      console.error('Error calculating contrast:', error)
+    }
     // Return default values in case of error
     return '0'
   }

packages/eds-color-palette-generator/tests/e2e/change-color.spec.ts

@@ -11,6 +11,6 @@ test('should change color name and hex', async ({ page }) => {
   await page.getByTestId('color-hex-input-0').fill('#ee7e17')
 
   await expect(page.getByTestId('brand-10')).toMatchAriaSnapshot(
-    '- \'button "Color 11: #9f561b, Click for details"\'',
+    '- \'button "Color 11: oklch(0.420 0.113 54.7), Click for details"\'',
   )
 })

packages/eds-color-palette-generator/vitest.config.ts

@@ -7,6 +7,15 @@ export default defineConfig({
     globals: true,
     include: ['src/**/*.{test,spec}.{js,ts}'],
     exclude: ['tests/**/*', 'node_modules/**/*'],
+    silent: false,
+    reporters: ['verbose'],
+    onConsoleLog(log, type) {
+      // Suppress expected error logs from color.js during tests
+      if (type === 'stderr' && log.includes('Error calculating contrast:')) {
+        return false
+      }
+      return true
+    },
   },
   resolve: {
     alias: {