test: lighthouse checks on e2e

AmadeusITGroup · Mar 5, 2024 · 0545a28 · 0545a28
1 parent 08421e5
commit 0545a28
Show file tree

Hide file tree

Showing 6 changed files with 546 additions and 46 deletions.
diff --git a/apps/showcase/e2e-playwright/playwright-config.ts b/apps/showcase/e2e-playwright/playwright-config.ts
@@ -24,11 +24,13 @@ const config = defineConfig({
     screenshot: 'only-on-failure',
     trace: 'retain-on-failure',
     ...process.env.USE_MOCKS ? {
-      launchOptions: { proxy: {server: 'per-context'}},
+      launchOptions: { proxy: {server: 'per-context'}, args: ['--remote-debugging-port=9222']},
       proxy: {server: 'http://localhost:4200'},
       serviceWorkers: 'block',
       ignoreHTTPSErrors: true
-    } : {}
+    } : {
+      launchOptions: { args: ['--remote-debugging-port=9222']}
+    }
   },
   expect: {
     toHaveScreenshot: {

diff --git a/apps/showcase/e2e-playwright/sanity/lighthouse-sanity.e2e.ts b/apps/showcase/e2e-playwright/sanity/lighthouse-sanity.e2e.ts
@@ -0,0 +1,108 @@
+import { O3rElement } from '@o3r/testing/core';
+import { type Page, test } from '@playwright/test';
+import { AppFixtureComponent } from '../../src/app/app.fixture';
+
+async function performAudit(page: Page) {
+  const { playAudit } = await import('playwright-lighthouse');
+  await playAudit({
+    page,
+    thresholds: {
+      performance: 50,
+      accessibility: 94,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'best-practices': 90
+    },
+    port: 9222
+  });
+}
+
+const baseUrl = process.env.PLAYWRIGHT_TARGET_URL || 'http://localhost:4200/';
+
+test.describe('Lighthouse tests', () => {
+  test('home', async ({context}) => {
+    const page = await context.newPage();
+    await page.goto(baseUrl);
+    await performAudit(page);
+    await page.close();
+  });
+
+  test('run-app-locally', async ({context}) => {
+    const page = await context.newPage();
+    await page.goto(baseUrl);
+    const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
+    await appFixture.navigateToRunAppLocally();
+    await page.waitForURL('**/run-app-locally');
+    await performAudit(page);
+    await page.close();
+  });
+
+  test('configuration', async ({context}) => {
+    const page = await context.newPage();
+    await page.goto(baseUrl);
+    const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
+    await appFixture.navigateToConfiguration();
+    await page.waitForURL('**/configuration');
+    await performAudit(page);
+    await page.close();
+  });
+
+  test('localization', async ({context}) => {
+    const page = await context.newPage();
+    await page.goto(baseUrl);
+    const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
+    await appFixture.navigateToLocalization();
+    await page.waitForURL('**/localization');
+    await performAudit(page);
+    await page.close();
+  });
+
+  test('dynamic-content', async ({context}) => {
+    const page = await context.newPage();
+    await page.goto(baseUrl);
+    const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
+    await appFixture.navigateToDynamicContent();
+    await page.waitForURL('**/dynamic-content');
+    await performAudit(page);
+    await page.close();
+  });
+
+  test('rules-engine', async ({context}) => {
+    const page = await context.newPage();
+    await page.goto(baseUrl);
+    const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
+    await appFixture.navigateToRulesEngine();
+    await page.waitForURL('**/rules-engine');
+    await performAudit(page);
+    await page.close();
+  });
+
+  test('component-replacement', async ({context}) => {
+    const page = await context.newPage();
+    await page.goto(baseUrl);
+    const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
+    await appFixture.navigateToComponentReplacement();
+    await page.waitForURL('**/component-replacement');
+    await performAudit(page);
+    await page.close();
+  });
+
+  test('design-token', async ({context}) => {
+    const page = await context.newPage();
+    await page.goto(baseUrl);
+    const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
+    await appFixture.navigateToDesignToken();
+    await page.waitForURL('**/design-token');
+    await performAudit(page);
+    await page.close();
+  });
+
+  test('sdk-generator', async ({context}) => {
+    const page = await context.newPage();
+    await page.goto(baseUrl);
+    const appFixture = new AppFixtureComponent(new O3rElement({element: page.locator('app-root'), page}));
+    await appFixture.navigateToSDKGenerator();
+    await page.waitForURL('**/sdk');
+    await performAudit(page);
+    await page.close();
+  });
+});
diff --git a/apps/showcase/package.json b/apps/showcase/package.json
@@ -110,6 +110,8 @@
     "jest-junit": "~16.0.0",
     "jest-preset-angular": "~14.0.0",
     "jsonc-eslint-parser": "~2.4.0",
+    "lighthouse": "9.6.8",
+    "playwright-lighthouse": "2.2.2",
     "rimraf": "^5.0.1",
     "ts-jest": "~29.1.1",
     "typescript": "~5.3.3",

diff --git a/apps/showcase/src/app/rules-engine/rules-engine.template.html b/apps/showcase/src/app/rules-engine/rules-engine.template.html
@@ -40,8 +40,8 @@ <h2 id="rules-engine-example">Example</h2>
         <li ngbNavItem class="nav-item" role="presentation">
           <a ngbNavLink class="nav-link" [class.active]="activeRuleTab === 'dynamic-content'" (click)="activateRuleTab('dynamic-content')">Dynamic content rule</a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link" [class.active]="activeRuleTab === 'operator-fact'" (click)="activateRuleTab('operator-fact')">Operator fact</a>
+        <li ngbNavItem class="nav-item" role="presentation">
+          <a ngbNavLink class="nav-link" [class.active]="activeRuleTab === 'operator-fact'" (click)="activateRuleTab('operator-fact')">Operator fact</a>
         </li>
       </ul>
       <div class="p-3">

diff --git a/package.json b/package.json
@@ -230,12 +230,14 @@
     "js-yaml": "^4.1.0",
     "jsonc-eslint-parser": "~2.4.0",
     "jsonpath-plus": "^8.0.0",
+    "lighthouse": "9.6.8",
     "lint-staged": "^15.0.0",
     "minimist": "^1.2.6",
     "ng-packagr": "~17.2.0",
     "ngx-highlightjs": "^10.0.0",
     "npm-run-all2": "^6.0.0",
     "nx": "~18.0.2",
+    "playwright-lighthouse": "2.2.2",
     "postcss": "~8.4.31",
     "postcss-scss": "~4.0.9",
     "react": "^18.0.0",