Merge pull request #1096 from chromaui/cody/cap-2206-copy-update-cli-…

…output-for-playwright-and-cypress-runs

Update task output to account for E2E

.codacy.yaml

@@ -8,3 +8,5 @@ engines:
     exclude_paths:
       - '**/*.test.js'
       - '**/*.test.ts'
+      - '**/*.stories.js'
+      - '**/*.stories.ts'

eslint.config.mjs

@@ -118,6 +118,7 @@ export default [
             String.raw`^.*CSF.*\.[jt]s$`,
             String.raw`^.*TTY.*\.[jt]s$`,
             String.raw`^.*CI.*\.[jt]s$`,
+            String.raw`^.*E2E.*\.[jt]s$`,
           ],
         },
       ],

node-src/index.ts

@@ -17,7 +17,7 @@ import GraphQLClient from './io/graphqlClient';
 import HTTPClient from './io/httpClient';
 import checkForUpdates from './lib/checkForUpdates';
 import checkPackageJson from './lib/checkPackageJson';
-import { isE2EBuild } from './lib/e2e';
+import { isE2EBuild } from './lib/e2eUtils';
 import { emailHash } from './lib/emailHash';
 import { getConfiguration } from './lib/getConfiguration';
 import getEnvironment from './lib/getEnvironment';
@@ -233,7 +233,7 @@ async function runBuild(ctx: Context) {
         // Queue up any non-Listr log messages while Listr is running
         ctx.log.queue();
       }
-      await new Listr(getTasks(ctx.options), options).run(ctx);
+      await new Listr(getTasks(ctx), options).run(ctx);
       ctx.log.debug('Tasks completed');
     } catch (err) {
       Sentry.captureException(err);

node-src/lib/e2e.ts

@@ -1,6 +1,6 @@
 import { AGENTS, getCliCommand, Runner } from '@antfu/ni';
 
-import { Context, Options } from '../types';
+import { Context } from '../types';
 import missingDependency from '../ui/messages/errors/missingDependency';
 import { failed } from '../ui/tasks/build';
 import { exitCodes, setExitCode } from './setExitCode';
@@ -66,14 +66,3 @@ export async function getE2EBuildCommand(
     throw err;
   }
 }
-
-/**
- * Determine if the build is an E2E build.
- *
- * @param options Parsed options when executing the CLI (usually from the context).
- *
- * @returns true if the build is an E2E build.
- */
-export function isE2EBuild(options: Options) {
-  return options.playwright || options.cypress;
-}

node-src/lib/e2eUtils.ts

@@ -0,0 +1,12 @@
+import { Options } from '../types';
+
+/**
+ * Determine if the build is an E2E build.
+ *
+ * @param options Parsed options when executing the CLI (usually from the context).
+ *
+ * @returns true if the build is an E2E build.
+ */
+export function isE2EBuild(options: Options) {
+  return options.playwright || options.cypress;
+}

node-src/lib/getOptions.ts

@@ -14,7 +14,7 @@ import invalidSingularOptions from '../ui/messages/errors/invalidSingularOptions
 import missingBuildScriptName from '../ui/messages/errors/missingBuildScriptName';
 import missingProjectToken from '../ui/messages/errors/missingProjectToken';
 import deprecatedOption from '../ui/messages/warnings/deprecatedOption';
-import { isE2EBuild } from './e2e';
+import { isE2EBuild } from './e2eUtils';
 
 const takeLast = (input?: string | string[]) => (Array.isArray(input) ? input.at(-1) : input);
 
@@ -119,6 +119,7 @@ export default function getOptions(ctx: InitialContext): Options {
   const DEFAULT_REPORT_FILE = 'chromatic-build-{buildNumber}.xml';
   const DEFAULT_DIAGNOSTICS_FILE = 'chromatic-diagnostics.json';
   const DEFAULT_STORYBOOK_LOG_FILE = 'build-storybook.log';
+  const DEFAULT_E2E_LOG_FILE = 'build-archive.log';
 
   // We need to strip out undefined because they otherwise they override anyway
   const optionsFromFlags = stripUndefined({
@@ -164,7 +165,11 @@ export default function getOptions(ctx: InitialContext): Options {
     storybookBuildDir: takeLast(flags.storybookBuildDir),
     storybookBaseDir: flags.storybookBaseDir,
     storybookConfigDir: flags.storybookConfigDir,
-    storybookLogFile: defaultUnlessSet(flags.storybookLogFile, DEFAULT_STORYBOOK_LOG_FILE),
+    // We should rename this flag so it makes more sense in E2E contexts
+    storybookLogFile:
+      flags.playwright || flags.cypress
+        ? defaultUnlessSet(flags.storybookLogFile, DEFAULT_E2E_LOG_FILE)
+        : defaultUnlessSet(flags.storybookLogFile, DEFAULT_STORYBOOK_LOG_FILE),
 
     ownerName: branchOwner || repositoryOwner,
     repositorySlug: flags.repositorySlug,

node-src/lib/getStorybookInfo.test.ts

@@ -31,7 +31,9 @@ describe('getStorybookInfo', () => {
     expect(sbInfo).toEqual(
       // We're getting the result of tracing chromatic-cli's node_modules here.
       expect.objectContaining({
-        viewLayer: 'react',
+        // We're currently using `react` and `@storybook/react-webpack5` so the we can end up with
+        // either one based on when those promises resolve.
+        viewLayer: expect.stringMatching(/(react|@storybook\/react-webpack5)/),
         version: expect.any(String),
         builder: { name: '@storybook/react-webpack5', packageVersion: expect.any(String) },
       })

node-src/tasks/auth.ts

@@ -59,8 +59,17 @@ export const setAuthorizationToken = async (ctx: Context) => {
   }
 };
 
-export default createTask({
-  name: 'auth',
-  title: initial.title,
-  steps: [transitionTo(authenticating), setAuthorizationToken, transitionTo(authenticated, true)],
-});
+/**
+ * Sets up the Listr task for authenticating with Chromatic.
+ *
+ * @param _ The context set when executing the CLI.
+ *
+ * @returns A Listr task.
+ */
+export default function main(_: Context) {
+  return createTask({
+    name: 'auth',
+    title: initial.title,
+    steps: [transitionTo(authenticating), setAuthorizationToken, transitionTo(authenticated, true)],
+  });
+}

node-src/tasks/build.ts

@@ -4,7 +4,8 @@ import path from 'path';
 import semver from 'semver';
 import tmp from 'tmp-promise';
 
-import { buildBinName as e2eBuildBinName, getE2EBuildCommand, isE2EBuild } from '../lib/e2e';
+import { buildBinName as e2eBuildBinName, getE2EBuildCommand } from '../lib/e2e';
+import { isE2EBuild } from '../lib/e2eUtils';
 import { getPackageManagerRunCommand } from '../lib/getPackageManager';
 import { exitCodes, setExitCode } from '../lib/setExitCode';
 import { createTask, transitionTo } from '../lib/tasks';
@@ -161,24 +162,33 @@ export const buildStorybook = async (ctx: Context) => {
   }
 };
 
-export default createTask({
-  name: 'build',
-  title: initial.title,
-  skip: async (ctx) => {
-    if (ctx.skip) return true;
-    if (ctx.options.storybookBuildDir) {
-      ctx.sourceDir = ctx.options.storybookBuildDir;
-      return skipped(ctx).output;
-    }
-    return false;
-  },
-  steps: [
-    setSourceDirectory,
-    setBuildCommand,
-    transitionTo(pending),
-    startActivity,
-    buildStorybook,
-    endActivity,
-    transitionTo(success, true),
-  ],
-});
+/**
+ * Sets up the Listr task for building the user's Storybook or E2E project.
+ *
+ * @param ctx The context set when executing the CLI.
+ *
+ * @returns A Listr task.
+ */
+export default function main(ctx: Context) {
+  return createTask({
+    name: 'build',
+    title: initial(ctx).title,
+    skip: async (ctx) => {
+      if (ctx.skip) return true;
+      if (ctx.options.storybookBuildDir) {
+        ctx.sourceDir = ctx.options.storybookBuildDir;
+        return skipped(ctx).output;
+      }
+      return false;
+    },
+    steps: [
+      setSourceDirectory,
+      setBuildCommand,
+      transitionTo(pending),
+      startActivity,
+      buildStorybook,
+      endActivity,
+      transitionTo(success, true),
+    ],
+  });
+}

node-src/tasks/gitInfo.ts

@@ -263,8 +263,17 @@ export const setGitInfo = async (ctx: Context, task: Task) => {
   transitionTo(success, true)(ctx, task);
 };
 
-export default createTask({
-  name: 'gitInfo',
-  title: initial.title,
-  steps: [transitionTo(pending), setGitInfo],
-});
+/**
+ * Sets up the Listr task for gathering information from Git.
+ *
+ * @param _ The context set when executing the CLI.
+ *
+ * @returns A Listr task.
+ */
+export default function main(_: Context) {
+  return createTask({
+    name: 'gitInfo',
+    title: initial.title,
+    steps: [transitionTo(pending), setGitInfo],
+  });
+}

node-src/tasks/index.ts

@@ -29,12 +29,17 @@ export const runPatchBuild = [prepareWorkspace, ...runUploadBuild, restoreWorksp
 /**
  * Prepare the list of tasks to run for a new build.
  *
- * @param options The context options set when executing the CLI.
+ * @param ctx The context set when executing the CLI.
  *
  * @returns The list of tasks to be completed.
  */
-export default function index(options: Context['options']): Listr.ListrTask<Context>[] {
-  const tasks = options.patchHeadRef && options.patchBaseRef ? runUploadBuild : runUploadBuild;
+export default function index(ctx: Context): Listr.ListrTask<Context>[] {
+  const tasks =
+    ctx.options.patchHeadRef && ctx.options.patchBaseRef ? runUploadBuild : runUploadBuild;
 
-  return options.junitReport ? [...tasks, report] : tasks;
+  if (ctx.options.junitReport) {
+    tasks.push(report);
+  }
+
+  return tasks.map((task) => task(ctx));
 }

node-src/tasks/initialize.ts

@@ -128,15 +128,24 @@ export const announceBuild = async (ctx: Context) => {
   }
 };
 
-export default createTask({
-  name: 'initialize',
-  title: initial.title,
-  skip: (ctx: Context) => ctx.skip,
-  steps: [
-    transitionTo(pending),
-    setEnvironment,
-    setRuntimeMetadata,
-    announceBuild,
-    transitionTo(success, true),
-  ],
-});
+/**
+ * Sets up the Listr task for announcing a new build on Chromatic.
+ *
+ * @param _ The context set when executing the CLI.
+ *
+ * @returns A Listr task.
+ */
+export default function main(_: Context) {
+  return createTask({
+    name: 'initialize',
+    title: initial.title,
+    skip: (ctx: Context) => ctx.skip,
+    steps: [
+      transitionTo(pending),
+      setEnvironment,
+      setRuntimeMetadata,
+      announceBuild,
+      transitionTo(success, true),
+    ],
+  });
+}

node-src/tasks/report.ts

@@ -140,9 +140,18 @@ export const generateReport = async (ctx: Context) => {
   log.info(wroteReport(ctx.reportPath, 'JUnit XML'));
 };
 
-export default createTask({
-  name: 'report',
-  title: initial.title,
-  skip: (ctx: Context) => ctx.skip,
-  steps: [transitionTo(pending), generateReport, transitionTo(success, true)],
-});
+/**
+ * Sets up the Listr task for generating a JUnit report.
+ *
+ * @param _ The context set when executing the CLI.
+ *
+ * @returns A Listr task.
+ */
+export default function main(_: Context) {
+  return createTask({
+    name: 'report',
+    title: initial.title,
+    skip: (ctx: Context) => ctx.skip,
+    steps: [transitionTo(pending), generateReport, transitionTo(success, true)],
+  });
+}

node-src/tasks/snapshot.ts

@@ -150,14 +150,23 @@ export const takeSnapshots = async (ctx: Context, task: Task) => {
   }
 };
 
-export default createTask({
-  name: 'snapshot',
-  title: initial.title,
-  skip: (ctx: Context) => {
-    if (ctx.skip) return true;
-    if (ctx.skipSnapshots) return skipped(ctx).output;
-    if (ctx.options.dryRun) return dryRun().output;
-    return false;
-  },
-  steps: [transitionTo(pending), takeSnapshots],
-});
+/**
+ * Sets up the Listr task for snapshotting the Storybook.
+ *
+ * @param ctx The context set when executing the CLI.
+ *
+ * @returns A Listr task.
+ */
+export default function main(ctx: Context) {
+  return createTask({
+    name: 'snapshot',
+    title: initial(ctx).title,
+    skip: (ctx: Context) => {
+      if (ctx.skip) return true;
+      if (ctx.skipSnapshots) return skipped(ctx).output;
+      if (ctx.options.dryRun) return dryRun(ctx).output;
+      return false;
+    },
+    steps: [transitionTo(pending), takeSnapshots],
+  });
+}

node-src/tasks/storybookInfo.ts

@@ -19,9 +19,18 @@ export const setStorybookInfo = async (ctx: Context) => {
   }
 };
 
-export default createTask({
-  name: 'storybookInfo',
-  title: initial.title,
-  skip: (ctx: Context) => ctx.skip,
-  steps: [transitionTo(pending), setStorybookInfo, transitionTo(success, true)],
-});
+/**
+ * Sets up the Listr task for gathering Storybook information.
+ *
+ * @param ctx The context set when executing the CLI.
+ *
+ * @returns A Listr task.
+ */
+export default function main(ctx: Context) {
+  return createTask({
+    name: 'storybookInfo',
+    title: initial(ctx).title,
+    skip: (ctx: Context) => ctx.skip,
+    steps: [transitionTo(pending), setStorybookInfo, transitionTo(success, true)],
+  });
+}

node-src/tasks/upload.test.ts

@@ -91,15 +91,15 @@ describe('validateFiles', () => {
     readdirSyncMock.mockReturnValue(['iframe.html'] as any);
     statSyncMock.mockReturnValue({ isDirectory: () => false, size: 42 } as any);
 
-    const ctx = { env: environment, log, http, sourceDir: '/static/' } as any;
+    const ctx = { env: environment, log, http, options: {}, sourceDir: '/static/' } as any;
     await expect(validateFiles(ctx)).rejects.toThrow('Invalid Storybook build at /static/');
   });
 
   it("throws when iframe.html doesn't exist", async () => {
     readdirSyncMock.mockReturnValue(['index.html'] as any);
     statSyncMock.mockReturnValue({ isDirectory: () => false, size: 42 } as any);
 
-    const ctx = { env: environment, log, http, sourceDir: '/static/' } as any;
+    const ctx = { env: environment, log, http, options: {}, sourceDir: '/static/' } as any;
     await expect(validateFiles(ctx)).rejects.toThrow('Invalid Storybook build at /static/');
   });