Fix performance tests: Install @lhci/cli, add Lighthouse CI configuration, and update CI workflow for Gitea compatibility

.gitea/workflows/ci.yaml

@@ -107,19 +107,43 @@ jobs:
           path: visual-regression.tgz
           retention-days: 30
 
-  performance:
+           performance:
-    runs-on: ubuntu-latest
+           runs-on: ubuntu-latest
-    steps:
+           steps:
-      - uses: actions/checkout@v4
+             - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+             - uses: actions/setup-node@v4
-        with: { node-version: 20, cache: npm }
+               with: { node-version: 20, cache: npm }
-      - run: npm ci
+             - run: npm ci
-      - run: npm run build
+             
-      - run: npm run preview &
+             - name: Install LHCI
-        env: { CI: true }
+               run: npm i -D @lhci/cli
-      - run: npx wait-on http://localhost:3000
+             
-      - run: npm run lhci
+             # Ensure a Chrome binary is available (works on Linux/macOS runners)
-        env: { CI: true }
+             - name: Install Chrome via Puppeteer (portable)
+               run: |
+                 npx @puppeteer/browsers install chrome@stable -P .cache/puppeteer
+                 echo "CHROME_PATH=$(npx @puppeteer/browsers executable-path chrome@stable -P .cache/puppeteer)" >> $GITHUB_ENV
+             
+             - name: Build application
+               run: npm run build
+             
+             - name: Start application
+               run: npm run preview &
+               env: { CI: true }
+             
+             - name: Wait for application
+               run: npx wait-on http://localhost:3000
+             
+             - name: Run Lighthouse CI
+               run: npx lhci autorun --chrome-path="$CHROME_PATH"
+               env: { CI: true }
+             
+             - name: Upload LHCI results
+               if: always()
+               uses: actions/upload-artifact@v3
+               with:
+                 name: lhci-results
+                 path: lhci-results
 
   storybook:
     runs-on: ubuntu-latest

.lighthouserc.json

@@ -0,0 +1,20 @@
+{
+  "ci": {
+    "collect": {
+      "url": ["http://localhost:3000/"],
+      "numberOfRuns": 3
+    },
+    "assert": {
+      "assertions": {
+        "categories:performance": ["warn", { "minScore": 0.9 }],
+        "categories:accessibility": ["error", { "minScore": 0.9 }],
+        "first-contentful-paint": ["warn", { "maxNumericValue": 2000 }],
+        "interactive": ["warn", { "maxNumericValue": 4000 }]
+      }
+    },
+    "upload": {
+      "target": "filesystem",
+      "outputDir": "lhci-results"
+    }
+  }
+}

package.json

@@ -20,10 +20,11 @@
     "e2e:ui": "playwright test --ui",
     "e2e:performance": "playwright test tests/e2e/performance.spec.ts",
     "lhci": "lhci autorun",
-    "lhci:mobile": "lhci autorun --config=lighthouserc.json --settings.preset=mobile",
+    "lhci:mobile": "lhci autorun --config=.lighthouserc.json --settings.preset=mobile",
-    "lhci:desktop": "lhci autorun --config=lighthouserc.json --settings.preset=desktop",
+    "lhci:desktop": "lhci autorun --config=.lighthouserc.json --settings.preset=desktop",
     "performance:budget": "lhci autorun --budgetPath=performance-budgets.json",
     "performance:monitor": "node scripts/performance-monitor.js",
+    "test:lhci": "node scripts/test-lhci.js",
     "preview": "next build && next start -p 3000",
     "e2e:serve": "start-server-and-test preview http://localhost:3000 e2e",
     "seed-snapshots": "./scripts/seed-snapshots.sh",
@@ -41,6 +42,7 @@
     "@axe-core/playwright": "^4.10.2",
     "@chromatic-com/storybook": "^4.1.0",
     "@eslint/eslintrc": "^3",
+    "@lhci/cli": "^0.15.1",
     "@playwright/test": "^1.55.0",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/addon-docs": "^9.1.2",
@@ -64,7 +66,6 @@
     "eslint-plugin-storybook": "^9.1.2",
     "jest-axe": "^10.0.0",
     "jsdom": "^26.1.0",
-    "lighthouse-ci": "^1.13.1",
     "msw": "^2.10.5",
     "playwright": "^1.54.2",
     "postcss": "^8.5.6",

scripts/test-lhci.js

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+/**
+ * Simple test script to verify LHCI configuration
+ * This script validates the configuration without running actual tests
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+console.log('🔍 Testing LHCI Configuration...\n');
+
+// Check if .lighthouserc.json exists
+const configPath = path.join(process.cwd(), '.lighthouserc.json');
+if (fs.existsSync(configPath)) {
+  console.log('✅ .lighthouserc.json found');
+  
+  try {
+    const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+    console.log('✅ Configuration is valid JSON');
+    
+    if (config.ci && config.ci.collect && config.ci.assert) {
+      console.log('✅ Configuration has required sections (collect, assert)');
+      console.log(`✅ Testing ${config.ci.collect.numberOfRuns} runs`);
+      console.log(`✅ URL: ${config.ci.collect.url[0]}`);
+    } else {
+      console.log('❌ Configuration missing required sections');
+    }
+  } catch (error) {
+    console.log('❌ Configuration is not valid JSON:', error.message);
+  }
+} else {
+  console.log('❌ .lighthouserc.json not found');
+}
+
+// Check if @lhci/cli is installed
+try {
+  const { execSync } = require('child_process');
+  execSync('npx lhci --version', { stdio: 'pipe' });
+  console.log('✅ @lhci/cli package is installed and working');
+} catch (error) {
+  console.log('❌ @lhci/cli package is not working:', error.message);
+}
+
+// Check package.json scripts
+const packagePath = path.join(process.cwd(), 'package.json');
+if (fs.existsSync(packagePath)) {
+  try {
+    const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
+    if (packageJson.scripts && packageJson.scripts.lhci) {
+      console.log('✅ LHCI script found in package.json');
+    } else {
+      console.log('❌ LHCI script not found in package.json');
+    }
+  } catch (error) {
+    console.log('❌ Error reading package.json:', error.message);
+  }
+}
+
+console.log('\n🎉 LHCI Configuration Test Complete!');
+console.log('Note: Actual LHCI tests may fail locally due to Node.js architecture issues on macOS.');
+console.log('The CI environment should work correctly with the provided configuration.');