ci: add lighthouse workflow

.github/lighthouse/budget.json

@@ -0,0 +1,23 @@
+[
+  {
+    "path": "/*",
+    "resourceSizes": [
+      {
+        "resourceType": "document",
+        "budget": 60
+      },
+      {
+        "resourceType": "script",
+        "budget": 200
+      },
+      {
+        "resourceType": "stylesheet",
+        "budget": 20
+      },
+      {
+        "resourceType": "total",
+        "budget": 300
+      }
+    ]
+  }
+]

.github/lighthouse/lightrouserc.json

@@ -0,0 +1,10 @@
+{
+  "ci": {
+    "collect": {
+      "staticDistDir": "./dist/my-app"
+    },
+    "assert": {
+      "preset": "lighthouse:no-pwa"
+    }
+  }
+}

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
   main:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - uses: nrwl/nx-set-shas@v3
@@ -19,3 +19,4 @@ jobs:
       - run: npx nx affected -t lint --parallel=3
       - run: npx nx affected -t test --parallel=3 --configuration=ci
       - run: npx nx affected -t build --parallel=3
+      - run: npx nx e2e e2e --configuration=ci --browser=chrome

.github/workflows/lighthouse.yml

@@ -0,0 +1,20 @@
+name: Lighthouse
+on:
+  pull_request:
+    branches:
+      - main
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: nrwl/nx-set-shas@v3
+      - run: npm ci
+      - run: npx nx affected -t build --parallel=3
+      - name: Run Lighthouse CI
+        uses: treosh/lighthouse-ci-action@v12
+        with:
+          configPath: './.github/lighthouse/lightrouserc.json'
+          temporaryPublicStorage: true

e2e/cypress.config.ts

@@ -1,6 +1,19 @@
-import { defineConfig } from 'cypress';
+import { lighthouse, prepareAudit } from '@cypress-audit/lighthouse';
 import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
-  e2e: nxE2EPreset(__dirname),
+  e2e: {
+    ...nxE2EPreset(__dirname),
+
+    setupNodeEvents(on) {
+      on('before:browser:launch', (browser, launchOptions) => {
+        prepareAudit(launchOptions);
+      });
+
+      on('task', {
+        lighthouse: lighthouse(),
+      });
+    },
+  },
 });

e2e/src/e2e/app.cy.ts

@@ -4,10 +4,24 @@ describe('my-app', () => {
   beforeEach(() => cy.visit('/'));
 
   it('should display welcome message', () => {
-    // Custom command example, see `../support/commands.ts` file
-    cy.login('my-email@something.com', 'myPassword');
-
-    // Function helper example, see `../support/app.po.ts` file
     getGreeting().contains('Welcome my-app');
   });
+
+  it('should pass lighthouse audit', () => {
+    const customThresholds = {
+      performance: 30,
+      accessibility: 50,
+      seo: 70,
+      'first-contentful-paint': 2000,
+      'largest-contentful-paint': 10000,
+      'cumulative-layout-shift': 0.1,
+      'total-blocking-time': 800,
+    };
+
+    const desktopConfig = {
+      formFactor: 'desktop',
+      screenEmulation: { disabled: true },
+    };
+    cy.lighthouse(customThresholds, desktopConfig);
+  });
 });

e2e/src/support/commands.ts

@@ -1,30 +1 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-
-// eslint-disable-next-line @typescript-eslint/no-namespace
-declare namespace Cypress {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface Chainable<Subject> {
-    login(email: string, password: string): void;
-  }
-}
-//
-
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+import '@cypress-audit/lighthouse/commands';