test(cli): migrate sandbox to verdaccio

.gitignore

@@ -39,7 +39,7 @@ testem.log
 .DS_Store
 Thumbs.db
 
-.nx/cache
+.nx
 
 .env
 .code-pushup

.prettierignore

@@ -3,4 +3,5 @@
 /dist
 /coverage
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data

.verdaccio/config.yml

@@ -0,0 +1,28 @@
+# path to a directory with all packages
+storage: ../tmp/local-registry/storage
+
+# a list of other known repositories we can talk to
+uplinks:
+  npmjs:
+    url: https://registry.npmjs.org/
+    maxage: 60m
+
+packages:
+  '**':
+    # give all users (including non-authenticated users) full access
+    # because it is a local registry
+    access: $all
+    publish: $all
+    unpublish: $all
+
+    # if package is not available locally, proxy requests to npm registry
+    proxy: npmjs
+
+# log settings
+log:
+  type: stdout
+  format: pretty
+  level: warn
+
+publish:
+  allow_offline: true # set offline to true to allow publish offline

e2e/cli-e2e/mocks/user-flows/basic-navigation.uf.mts

@@ -0,0 +1,21 @@
+// @ts-ignore // This is a mock file!
+import { UserFlowContext, UserFlowInteractionsFn, UserFlowProvider } from '@push-based/user-flow';
+
+const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promise<any> => {
+  const { flow, collectOptions } = ctx;
+  const { url } = collectOptions;
+
+  await flow.navigate(url, {
+    name: `Navigate to ${url}`,
+  });
+
+  // ℹ Tip:
+  // Read more about the other measurement modes here:
+  // https://github.com/push-based/user-flow/blob/main/packages/cli/docs/writing-basic-user-flows.md
+
+};
+
+export default {
+  flowOptions: {name: 'Basic Navigation Example'},
+  interactions
+} satisfies UserFlowProvider;

e2e/cli-e2e/project.json

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

e2e/cli-e2e/setup.e2e.ts

@@ -0,0 +1,135 @@
+import { afterAll, beforeAll, beforeEach, afterEach } from 'vitest';
+
+import { cpSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import { join, normalize, sep } from 'node:path';
+
+import { CliTest, E2E_DIR, normalizePath } from './utils/setup';
+import { spawn } from 'node:child_process';
+
+const ANSI_ESCAPE_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
+
+function filePath(p: string): string {
+  const paths = normalizePath(p).split(sep);
+  return paths.splice(0, paths.length - 1).join();
+}
+
+beforeAll((ctx) => {
+  mkdirSync(join(E2E_DIR, filePath(ctx.name)), { recursive: true });
+});
+
+beforeEach<CliTest>((ctx) => {
+  ctx.root = join(E2E_DIR, filePath(ctx.task.file.name), normalizePath(join(ctx.task.suite.name, ctx.task.name)));
+
+  ctx.setupFns = {
+    setupRcJson: (rc: {}, rcName= `.user-flowrc.json`) => {
+      writeFileSync(
+        join(ctx.root, rcName),
+        JSON.stringify(rc, null, 4),
+        { encoding: 'utf8' }
+      );
+    },
+    setupUserFlows: (mockUserFlow: string, userFlowDir = 'user-flows') => {
+      cpSync(mockUserFlow, join(ctx.root, userFlowDir, normalize(mockUserFlow).split(sep).at(-1)))
+    }
+  }
+
+  mkdirSync(ctx.root, { recursive: true });
+});
+
+export type CliProcessResult = {
+  stdout: string;
+  stderr: string;
+  code: number | null;
+}
+
+beforeEach<CliTest>((ctx) => {
+  ctx.cli = {} as any;
+  ctx.cli.stdout = '';
+  ctx.cli.stderr = '';
+  ctx.cli.code = null;
+
+
+  ctx.cli.run = (command: string, args: string[] = [], waitForClose = true) => new Promise<CliProcessResult>((resolve) => {
+    ctx.cli.process = spawn(command, args, { stdio: 'pipe', shell: true, cwd: ctx.root });
+
+    ctx.cli.process.stdout.on('data', (data) => {
+      const stdout = String(data).replace(ANSI_ESCAPE_REGEX, '');
+
+      if (ctx.cli.verbose) {
+        console.log(stdout);
+      }
+
+      ctx.cli.stdout += stdout;
+    });
+
+
+    ctx.cli.process.stderr.on('data', (data) => {
+      const stderr = String(data).replace(ANSI_ESCAPE_REGEX, '');
+
+      if (ctx.cli.verbose) {
+        console.log(stderr);
+      }
+
+      ctx.cli.stderr += stderr;
+    });
+
+
+    ctx.cli.process.on('close', code => {
+      ctx.cli.code = code;
+
+      if (ctx.cli.verbose) {
+        console.log(code);
+      }
+
+      resolve({
+        stdout: ctx.cli.stdout,
+        stderr: ctx.cli.stderr,
+        code: ctx.cli.code
+      });
+    });
+
+    if (!waitForClose) {
+      resolve({
+        stdout: ctx.cli.stdout,
+        stderr: ctx.cli.stderr,
+        code: ctx.cli.code
+      });
+    }
+  });
+
+  ctx.cli.waitForStdout = (expectedStdout: string) => {
+    return new Promise((resolve) => {
+      ctx.cli.process.stdout.on('data', (data) => {
+        const stdout = String(data).replace(ANSI_ESCAPE_REGEX, '');
+        if (stdout.includes(expectedStdout)) {
+          resolve();
+        }
+      });
+    });
+  };
+
+  ctx.cli.waitForClose = () => {
+    return new Promise((resolve) => {
+      ctx.cli.process.on('close', (code) => {
+        ctx.cli.code = code;
+        resolve({
+          stdout: ctx.cli.stdout,
+          stderr: ctx.cli.stderr,
+          code: ctx.cli.code
+        });
+      });
+    });
+  };
+
+  ctx.cli.type = (inputs: string) => {
+    ctx.cli.process.stdin.write(inputs);
+  };
+});
+
+afterEach<CliTest>((ctx) => {
+  rmSync(ctx.root, { recursive: true });
+});
+
+afterAll((ctx) => {
+  rmSync(join(E2E_DIR, filePath(ctx.name)), { recursive: true });
+});

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

@@ -0,0 +1,47 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`user-flow help > should print global help 1`] = `
+"cli.js
+
+Run a set of user flows and save the result
+
+Commands:
+  cli.js init     Setup .user-flowrc.json
+  cli.js collect  Run a set of user flows and save the result
+  cli.js          Run a set of user flows and save the result          [default]
+  cli.js assert   Setup .user-flowrc.json
+
+Options:
+      --version           Show version number                          [boolean]
+  -v, --verbose           Run with verbose logging    [boolean] [default: false]
+  -p, --rcPath            Path to user-flow.config.json. e.g.
+                          \`./user-flowrc.json\`
+                                         [string] [default: ".user-flowrc.json"]
+  -i, --interactive       When false questions are skipped with the values from
+                          the suggestions. This is useful for CI integrations.
+                                                       [boolean] [default: true]
+  -t, --url               URL to analyze                                [string]
+  -u, --ufPath            folder containing user-flow files to run. (\`*.uf.ts\`
+                          or \`*.uf.js\`)                                 [string]
+  -l, --config            Lighthouse configuration (RC file only)       [string]
+  -c, --configPath        Path to Lighthouse configuration e.g config.json
+                                                                        [string]
+  -s, --serveCommand      The npm command to serve your application. e.g. "npm
+                          run serve:prod"                               [string]
+  -w, --awaitServeStdout  A string in stdout resulting from serving the app, to
+                          be awaited before start running the tests. e.g.
+                          "server running..."                           [string]
+  -d, --dryRun            Execute commands without effects             [boolean]
+  -o, --outPath           output folder for the user-flow reports       [string]
+  -f, --format            Report output formats e.g. JSON
+                               [array] [choices: "html", "json", "md", "stdout"]
+  -e, --openReport        Opens browser automatically after the user-flow is
+                          collected. (true by default) [boolean] [default: true]
+  -k, --budgetPath        Path to budgets.json                          [string]
+  -j, --budgets           Performance budgets (RC file only)             [array]
+  -h, --help              Show help                                    [boolean]
+
+Examples:
+  init  Setup user-flows over prompts
+"
+`;

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

@@ -0,0 +1,52 @@
+import { describe, expect } from 'vitest';
+import { CliTest, DEFAULT_RC, USER_FLOW_MOCKS } from '../../utils/setup';
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+describe('collect config', () => {
+
+  it<CliTest>('should log LH config from a user flow', async ({ setupFns, cli }) => {
+    setupFns.setupRcJson(DEFAULT_RC);
+    setupFns.setupUserFlows(USER_FLOW_MOCKS.BASIC);
+
+    const { code, stdout, stderr } = await cli.run('user-flow', ['collect', '--verbose', '--dry-run'])
+
+    expect(stdout).toContain('LH Configuration is used from a user flow file');
+    expect(stderr).toBe('');
+    expect(code).toBe(0);
+  });
+
+  it<CliTest>('should throw is invalid path to LH config', async ({ setupFns, cli }) => {
+    setupFns.setupRcJson(DEFAULT_RC);
+    setupFns.setupUserFlows(USER_FLOW_MOCKS.BASIC);
+
+    const { code, stdout, stderr } = await cli.run('user-flow', [
+      'collect',
+      '--configPath ./invalid/path/to/config.json',
+      '--verbose',
+      '--dry-run'
+    ]);
+
+    expect(stderr).toContain('Error: ./invalid/path/to/config.json does not exist.');
+    expect(code).toBe(1);
+  });
+
+  it<CliTest>('should load configPath from RC file', async ({ root, setupFns, cli }) => {
+    const rc = structuredClone(DEFAULT_RC);
+    // @ts-ignore
+    rc.collect['configPath'] = './lh-config.json';
+    setupFns.setupRcJson(rc);
+    setupFns.setupUserFlows(USER_FLOW_MOCKS.BASIC);
+
+    writeFileSync(join(root, './lh-config.json'), JSON.stringify({
+      extends: 'lighthouse:default',
+      settings: { onlyAudits: ['lcp-lazy-loaded'] }
+    }));
+
+    const { code, stdout, stderr } = await cli.run('user-flow', ['collect', '--verbose']);
+
+    expect(stdout).toContain('LH Configuration ./lh-config.json is used from CLI param or .user-flowrc.json');
+    expect(stderr).toBe('');
+    expect(code).toBe(0);
+  });
+});

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

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+
+import { CliTest, DEFAULT_RC, USER_FLOW_MOCKS } from '../../utils/setup';
+
+describe('collect --dry-run', () => {
+
+  it<CliTest>('should run user-flow', async ({ cli, setupFns }) => {
+    setupFns.setupRcJson(DEFAULT_RC);
+    setupFns.setupUserFlows(USER_FLOW_MOCKS.BASIC);
+
+    const { code, stdout, stderr } = await cli.run('user-flow', ['collect', '--dry-run']);
+
+    expect(stderr).toBe('');
+    expect(stdout).toBe('');
+    expect(code).toBe(0);
+  });
+});
+
+describe('collect --dry-run --verbose', () => {
+
+  it<CliTest>('should run user-flow and log', async ({ cli, setupFns }) => {
+    setupFns.setupRcJson(DEFAULT_RC);
+    setupFns.setupUserFlows(USER_FLOW_MOCKS.BASIC);
+
+    const { code, stdout, stderr } = await cli.run('user-flow', ['collect', '--dry-run', '--verbose']);
+
+    expect(stderr).toBe('');
+    expect(stdout).not.toBe('');
+    expect(code).toBe(0);
+  });
+});