test(cli-e2e): separate e2e tests for lighthouse plugin (#809)

Author: BioPhoton

e2e/cli-e2e/project.json

@@ -25,7 +25,6 @@
     "cli",
     "cli",
     "plugin-eslint",
-    "plugin-lighthouse",
     "plugin-coverage",
     "plugin-js-packages",
     "react-todos-app"

e2e/cli-e2e/tests/__snapshots__/collect.e2e.test.ts.snap

@@ -1419,133 +1419,3 @@ exports[`CLI collect > should run ESLint plugin and create report.json 1`] = `
   ],
 }
 `;
-
-exports[`CLI collect > should run Lighthouse plugin that runs lighthouse CLI and creates report.json 1`] = `
-{
-  "categories": [
-    {
-      "refs": [
-        {
-          "plugin": "lighthouse",
-          "slug": "performance",
-          "type": "group",
-          "weight": 1,
-        },
-      ],
-      "slug": "performance",
-      "title": "Performance",
-    },
-    {
-      "refs": [
-        {
-          "plugin": "lighthouse",
-          "slug": "accessibility",
-          "type": "group",
-          "weight": 1,
-        },
-      ],
-      "slug": "a11y",
-      "title": "Accessibility",
-    },
-    {
-      "refs": [
-        {
-          "plugin": "lighthouse",
-          "slug": "best-practices",
-          "type": "group",
-          "weight": 1,
-        },
-      ],
-      "slug": "best-practices",
-      "title": "Best Practices",
-    },
-    {
-      "refs": [
-        {
-          "plugin": "lighthouse",
-          "slug": "seo",
-          "type": "group",
-          "weight": 1,
-        },
-      ],
-      "slug": "seo",
-      "title": "SEO",
-    },
-  ],
-  "packageName": "@code-pushup/core",
-  "plugins": [
-    {
-      "audits": [
-        {
-          "description": "Largest Contentful Paint marks the time at which the largest text or image is painted. [Learn more about the Largest Contentful Paint metric](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/)",
-          "slug": "largest-contentful-paint",
-          "title": "Largest Contentful Paint",
-        },
-        {
-          "description": "Deprecated APIs will eventually be removed from the browser. [Learn more about deprecated APIs](https://developer.chrome.com/docs/lighthouse/best-practices/deprecations/).",
-          "slug": "deprecations",
-          "title": "Avoids deprecated APIs",
-        },
-        {
-          "description": "Each ARIA \`role\` supports a specific subset of \`aria-*\` attributes. Mismatching these invalidates the \`aria-*\` attributes. [Learn how to match ARIA attributes to their roles](https://dequeuniversity.com/rules/axe/4.9/aria-allowed-attr).",
-          "slug": "aria-allowed-attr",
-          "title": "\`[aria-*]\` attributes match their roles",
-        },
-        {
-          "description": "hreflang links tell search engines what version of a page they should list in search results for a given language or region. [Learn more about \`hreflang\`](https://developer.chrome.com/docs/lighthouse/seo/hreflang/).",
-          "slug": "hreflang",
-          "title": "Document has a valid \`hreflang\`",
-        },
-      ],
-      "groups": [
-        {
-          "refs": [
-            {
-              "slug": "largest-contentful-paint",
-              "weight": 25,
-            },
-          ],
-          "slug": "performance",
-          "title": "Performance",
-        },
-        {
-          "description": "These checks highlight opportunities to [improve the accessibility of your web app](https://developer.chrome.com/docs/lighthouse/accessibility/). Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so [manual testing](https://web.dev/articles/how-to-review) is also encouraged.",
-          "refs": [
-            {
-              "slug": "aria-allowed-attr",
-              "weight": 10,
-            },
-          ],
-          "slug": "accessibility",
-          "title": "Accessibility",
-        },
-        {
-          "refs": [
-            {
-              "slug": "deprecations",
-              "weight": 5,
-            },
-          ],
-          "slug": "best-practices",
-          "title": "Best Practices",
-        },
-        {
-          "description": "These checks ensure that your page is following basic search engine optimization advice. There are many additional factors Lighthouse does not score here that may affect your search ranking, including performance on [Core Web Vitals](https://web.dev/explore/vitals). [Learn more about Google Search Essentials](https://support.google.com/webmasters/answer/35769).",
-          "refs": [
-            {
-              "slug": "hreflang",
-              "weight": 1,
-            },
-          ],
-          "slug": "seo",
-          "title": "SEO",
-        },
-      ],
-      "icon": "lighthouse",
-      "packageName": "@code-pushup/lighthouse-plugin",
-      "slug": "lighthouse",
-      "title": "Lighthouse",
-    },
-  ],
-}
-`;

e2e/cli-e2e/tests/collect.e2e.test.ts

@@ -118,21 +118,6 @@ describe('CLI collect', () => {
     expect(omitVariableReportData(report as Report)).toMatchSnapshot();
   });
 
-  it('should run Lighthouse plugin that runs lighthouse CLI and creates report.json', async () => {
-    const { code, stderr } = await executeProcess({
-      command: 'code-pushup',
-      args: ['collect', '--no-progress', '--onlyPlugins=lighthouse'],
-      cwd: 'examples/react-todos-app',
-    });
-
-    expect(code).toBe(0);
-    expect(stderr).toBe('');
-
-    const report = await readJsonFile('tmp/e2e/react-todos-app/report.json');
-    expect(() => reportSchema.parse(report)).not.toThrow();
-    expect(omitVariableReportData(report as Report)).toMatchSnapshot();
-  });
-
   it('should create report.md', async () => {
     const { code, stderr } = await executeProcess({
       command: 'code-pushup',

e2e/cli-e2e/vite.config.e2e.ts

@@ -6,7 +6,7 @@ export default defineConfig({
   cacheDir: '../../node_modules/.vite/cli-e2e',
   test: {
     reporters: ['basic'],
-    testTimeout: 140_000,
+    testTimeout: 120_000,
     globals: true,
     alias: tsconfigPathAliases(),
     pool: 'threads',

e2e/create-cli-e2e/tests/init.e2e.test.ts

@@ -1,9 +1,8 @@
-import { join, relative } from 'node:path';
+import { dirname, join, relative } from 'node:path';
 import { afterEach, expect } from 'vitest';
 import { teardownTestFolder } from '@code-pushup/test-setup';
-import { removeColorCodes } from '@code-pushup/test-utils';
+import { createNpmWorkspace, removeColorCodes } from '@code-pushup/test-utils';
 import { executeProcess, readJsonFile, readTextFile } from '@code-pushup/utils';
-import { createNpmWorkspace } from '../mocks/create-npm-workshpace';
 
 describe('create-cli-inti', () => {
   const workspaceRoot = 'tmp/e2e/create-cli-e2e';
@@ -19,7 +18,12 @@ describe('create-cli-inti', () => {
     await createNpmWorkspace(cwd);
     const { code, stdout } = await executeProcess({
       command: 'npm',
-      args: ['exec', '@code-pushup/create-cli', `--userconfig=${userconfig}`],
+      args: [
+        'exec',
+        '@code-pushup/create-cli',
+        `--userconfig=${userconfig}`,
+        `--prefix=${dirname(userconfig)}`,
+      ],
       cwd,
     });
 
@@ -48,16 +52,20 @@ describe('create-cli-inti', () => {
     );
   });
 
-  // eslint-disable-next-line vitest/no-disabled-tests
-  it.skip('should execute package correctly over npm init', async () => {
+  it('should execute package correctly over npm init', async () => {
     const cwd = join(baseDir, 'npm-init');
     const userconfig = relative(cwd, join(workspaceRoot, '.npmrc'));
 
     await createNpmWorkspace(cwd);
 
     const { code, stdout } = await executeProcess({
       command: 'npm',
-      args: ['init', '@code-pushup/cli', `--userconfig=${userconfig}`],
+      args: [
+        'init',
+        '@code-pushup/cli',
+        `--userconfig=${userconfig}`,
+        `--prefix=${dirname(userconfig)}`,
+      ],
       cwd,
     });
 
@@ -94,7 +102,12 @@ describe('create-cli-inti', () => {
 
     await executeProcess({
       command: 'npm',
-      args: ['init', '@code-pushup/cli', `--userconfig=${userconfig}`],
+      args: [
+        'init',
+        '@code-pushup/cli',
+        `--userconfig=${userconfig}`,
+        `--prefix=${dirname(userconfig)}`,
+      ],
       cwd,
     });
 

e2e/plugin-lighthouse-e2e/.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "code-pushup.config*.ts"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parserOptions": {
+        "project": ["e2e/plugin-lighthouse-e2e/tsconfig.*?.json"]
+      }
+    }
+  ]
+}

e2e/plugin-lighthouse-e2e/mocks/fixtures/code-pushup.config.lh-default.ts

@@ -0,0 +1,46 @@
+import { DEFAULT_FLAGS } from 'chrome-launcher/dist/flags.js';
+import lighthousePlugin, {
+  lighthouseGroupRef,
+} from '@code-pushup/lighthouse-plugin';
+import type { CoreConfig } from '@code-pushup/models';
+
+export default {
+  plugins: [
+    await lighthousePlugin('https://codepushup.dev/', {
+      // A reduced set of tests to reduce e2e tets time
+      onlyAudits: [
+        // performance category
+        `largest-contentful-paint`,
+        // a11y category
+        `aria-allowed-attr`,
+        // best-practices category
+        `deprecations`,
+        // seo category
+        `hreflang`,
+      ],
+      chromeFlags: DEFAULT_FLAGS.concat([`--headless`, `--verbose`]),
+    }),
+  ],
+  categories: [
+    {
+      slug: 'performance',
+      title: 'Performance',
+      refs: [lighthouseGroupRef('performance')],
+    },
+    {
+      slug: 'a11y',
+      title: 'Accessibility',
+      refs: [lighthouseGroupRef('accessibility')],
+    },
+    {
+      slug: 'best-practices',
+      title: 'Best Practices',
+      refs: [lighthouseGroupRef('best-practices')],
+    },
+    {
+      slug: 'seo',
+      title: 'SEO',
+      refs: [lighthouseGroupRef('seo')],
+    },
+  ],
+} satisfies CoreConfig;

e2e/plugin-lighthouse-e2e/project.json

@@ -0,0 +1,29 @@
+{
+  "name": "plugin-lighthouse-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "e2e/plugin-lighthouse-e2e/src",
+  "projectType": "application",
+  "targets": {
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["e2e/plugin-lighthouse-e2e/**/*.ts"]
+      }
+    },
+    "e2e": {
+      "executor": "@nx/vite:test",
+      "options": {
+        "configFile": "e2e/plugin-lighthouse-e2e/vite.config.e2e.ts"
+      }
+    }
+  },
+  "implicitDependencies": [
+    "models",
+    "utils",
+    "core",
+    "cli",
+    "plugin-lighthouse"
+  ],
+  "tags": ["scope:plugin", "type:e2e"]
+}