Support only testing components affected by recent git changes

bin/git/git.js

@@ -318,6 +318,12 @@ export async function getBaselineCommits(
   ];
 }
 
+export async function getChangedFiles(baseCommit, headCommit = '') {
+  // Note that an empty headCommit will include uncommitted (staged or unstaged) changes.
+  const files = await execGitCommand(`git diff --name-only ${baseCommit} ${headCommit}`);
+  return files.split(EOL).filter(Boolean);
+}
+
 /**
  * Returns a boolean indicating whether the workspace is up-to-date (neither ahead nor behind) with
  * the remote.

bin/lib/getDependentStoryFiles.js

@@ -0,0 +1,86 @@
+// Bail whenever one of these was changed
+const GLOBALS = [/\/node_modules\//, /\/package\.json$/, /\/package-lock\.json$/, /\/yarn\.lock$/];
+
+// Ignore these while tracing dependencies
+const EXTERNALS = [/\/node_modules\//, /\/webpack\/runtime\//, /^\(webpack\)/];
+
+const isGlobal = (name) => GLOBALS.some((re) => re.test(name));
+const isUserCode = ({ name, moduleName }) => !EXTERNALS.some((re) => re.test(name || moduleName));
+
+export function getDependentStoryFiles(ctx, stats, changedFiles) {
+  const { configDir = './.storybook', staticDir = [] } = ctx.storybook || {};
+
+  // TODO deal with Windows path separator
+  const storybookDir = configDir.startsWith('./') ? configDir : `./${configDir}`;
+  const staticDirs = staticDir.map((dir) => (dir.startsWith('./') ? dir : `./${dir}`));
+
+  // NOTE: this only works with `main:stories` -- if stories are imported from files in `.storybook/preview.js`
+  // we'll need a different approach to figure out CSF files (maybe the user should pass a glob?).
+  const storiesEntryFile = `${storybookDir}/generated-stories-entry.js`;
+
+  const idsByName = {};
+  const reasonsById = {};
+  const csfGlobsByName = {};
+
+  stats.modules.filter(isUserCode).forEach((mod) => {
+    if (mod.id) {
+      idsByName[mod.name] = mod.id;
+      (mod.modules ? mod.modules.map((m) => m.name) : []).forEach((name) => {
+        idsByName[name] = mod.id;
+      });
+    }
+
+    reasonsById[mod.id] = mod.reasons
+      .map((r) => r.moduleName)
+      .filter(Boolean)
+      .filter((n) => n !== mod.name);
+
+    if (reasonsById[mod.id].includes(storiesEntryFile)) {
+      csfGlobsByName[mod.name] = true;
+    }
+  });
+
+  const isCsfGlob = (name) => !!csfGlobsByName[name];
+  const isConfigFile = (name) => name.startsWith(storybookDir) && name !== storiesEntryFile;
+  const isStaticFile = (name) => staticDirs.some((dir) => name.startsWith(dir));
+
+  const changedCsfIds = new Set();
+  const checkedIds = {};
+  const toCheck = [];
+
+  let bail = changedFiles.find(isGlobal);
+
+  function traceName(name) {
+    if (bail || isCsfGlob(name)) return;
+    if (isConfigFile(name) || isStaticFile(name)) {
+      bail = name;
+      return;
+    }
+
+    const id = idsByName[name];
+    if (!id || !reasonsById[id] || checkedIds[id]) return;
+    toCheck.push(id);
+
+    if (reasonsById[id].some(isCsfGlob)) {
+      changedCsfIds.add(id);
+    }
+  }
+
+  changedFiles.forEach(traceName);
+  while (toCheck.length > 0) {
+    const id = toCheck.pop();
+    checkedIds[id] = true;
+    reasonsById[id].forEach(traceName);
+  }
+
+  if (bail) {
+    ctx.log.debug(`Ignoring --only-changed due to ${bail}`);
+    return false;
+  }
+
+  return Object.fromEntries(
+    stats.modules
+      .filter((mod) => changedCsfIds.has(mod.id))
+      .map((mod) => [String(mod.id), mod.name.replace(/ \+ \d+ modules$/, '')])
+  );
+}

bin/lib/getDependentStoryFiles.test.js

@@ -0,0 +1,7 @@
+import { getDependentStoryFiles } from './getDependentStoryFiles';
+
+describe('getDependentStoryFiles', () => {
+  it('traverses the reasons to find affected CSF files', () => {
+    getDependentStoryFiles([], { idsByName: {}, reasonsById: {}, isCsfGlob: {} });
+  });
+});

bin/lib/getOptions.js

@@ -30,6 +30,7 @@ export default async function getOptions({ argv, env, flags, log, packageJson })
     projectToken: takeLast(flags.projectToken || flags.appCode) || env.CHROMATIC_PROJECT_TOKEN, // backwards compatibility
 
     only: flags.only,
+    onlyChanged: flags.onlyChanged === '' ? true : flags.onlyChanged,
     list: flags.list,
     fromCI,
     skip: flags.skip === '' ? true : flags.skip,
@@ -41,7 +42,7 @@ export default async function getOptions({ argv, env, flags, log, packageJson })
     exitZeroOnChanges: flags.exitZeroOnChanges === '' ? true : flags.exitZeroOnChanges,
     exitOnceUploaded: flags.exitOnceUploaded === '' ? true : flags.exitOnceUploaded,
     ignoreLastBuildOnBranch: flags.ignoreLastBuildOnBranch,
-    preserveMissingSpecs: flags.preserveMissing || !!flags.only,
+    preserveMissingSpecs: flags.preserveMissing || !!flags.only || flags.onlyChanged !== undefined,
     originalArgv: argv,
 
     buildScriptName: flags.buildScriptName,
@@ -115,6 +116,10 @@ export default async function getOptions({ argv, env, flags, log, packageJson })
     throw new Error(invalidSingularOptions(foundSingularOpts.map((key) => singularOpts[key])));
   }
 
+  if (options.only && options.onlyChanged) {
+    throw new Error(invalidSingularOptions(['--only', '--only-changed']));
+  }
+
   // No need to start or build Storybook if we're going to fetch from a URL
   if (storybookUrl) {
     noStart = true;

bin/lib/getStorybookInfo.js

@@ -1,6 +1,8 @@
 // Figure out the Storybook version and view layer
 
 import fs from 'fs-extra';
+import meow from 'meow';
+import argv from 'string-argv';
 
 const viewLayers = [
   'react',
@@ -73,7 +75,7 @@ const findViewlayer = async ({ env }) => {
     if (!viewLayer || !version) {
       throw new Error('CHROMATIC_STORYBOOK_VERSION was provided but could not be used');
     }
-    return { viewLayer, version };
+    return { version, viewLayer };
   }
 
   // Try to find the Storybook viewlayer package
@@ -88,7 +90,7 @@ const findViewlayer = async ({ env }) => {
   return Promise.race([
     ...findings.map((p, i) =>
       p.then(
-        (l) => read(l).then((r) => ({ viewLayer: viewLayers[i], ...r })),
+        (l) => read(l).then(({ version }) => ({ version, viewLayer: viewLayers[i] })),
         disregard // keep it pending forever
       )
     ),
@@ -111,12 +113,25 @@ const findAddons = async () => {
   return { addons: result.filter(Boolean) };
 };
 
-export default async function getStorybookInfo(ctx) {
-  const storybookInfo = await findViewlayer(ctx);
-  const addonInfo = await findAddons();
+const findConfigFlags = async ({ options, packageJson }) => {
+  const { scripts = {} } = packageJson;
+  if (!options.buildScriptName || !scripts[options.buildScriptName]) return {};
+
+  const { flags } = meow({
+    argv: argv(scripts[options.buildScriptName]),
+    flags: {
+      configDir: { type: 'string', alias: 'c' },
+      staticDir: { type: 'string', alias: 's' },
+    },
+  });
 
   return {
-    ...storybookInfo,
-    ...addonInfo,
+    configDir: flags.configDir,
+    staticDir: flags.staticDir && flags.staticDir.split(','),
   };
+};
+
+export default async function getStorybookInfo(ctx) {
+  const info = await Promise.all([findAddons(), findConfigFlags(ctx), findViewlayer(ctx)]);
+  return info.reduce((acc, obj) => Object.assign(acc, obj), {});
 }

bin/lib/parseArgs.js

@@ -21,7 +21,8 @@ export default function parseArgs(argv) {
       --exit-once-uploaded [branch]  Exit with 0 once the built version has been published to Chromatic. Only for [branch], if specified. Globs are supported via picomatch.
       --exit-zero-on-changes [branch]  If all snapshots render but there are visual changes, exit with code 0 rather than the usual exit code 1. Only for [branch], if specified. Globs are supported via picomatch.
       --ignore-last-build-on-branch <branch>  Do not use the last build on this branch as a baseline if it is no longer in history (i.e. branch was rebased). Globs are supported via picomatch.
-      --only <storypath>  Only run a single story or a subset of stories. Story paths typically look like "Path/To/Story". Globs are supported via picomatch. This option implies --preserve-missing. 
+      --only <storypath>  Only run a single story or a subset of stories. Story paths typically look like "Path/To/Story". Globs are supported via picomatch. All other snapshots will be inherited from the prior commit.
+      --only-changed [branch]  Only run stories affected by files changed since the baseline build. Only for [branch], if specified. Globs are supported via picomatch. All other snapshots will be inherited from the prior commit.
       --patch-build <headbranch...basebranch>  Create a patch build to fix a missing PR comparison.
       --preserve-missing  Treat missing stories as unchanged rather than deleted when comparing to the baseline.
       --skip [branch]  Skip Chromatic tests, but mark the commit as passing. Avoids blocking PRs due to required merge checks. Only for [branch], if specified. Globs are supported via picomatch.
@@ -53,6 +54,7 @@ export default function parseArgs(argv) {
         exitZeroOnChanges: { type: 'string' },
         ignoreLastBuildOnBranch: { type: 'string' },
         only: { type: 'string' },
+        onlyChanged: { type: 'string' },
         branchName: { type: 'string' },
         patchBuild: { type: 'string' },
         preserveMissing: { type: 'boolean' },

bin/tasks/build.js

@@ -1,5 +1,5 @@
 import execa from 'execa';
-import fs from 'fs';
+import fs from 'fs-extra';
 import path from 'path';
 import semver from 'semver';
 import tmp from 'tmp-promise';

bin/tasks/gitInfo.js

@@ -1,7 +1,7 @@
 import picomatch from 'picomatch';
 
 import { getCommitAndBranch } from '../git/getCommitAndBranch';
-import { getBaselineCommits, getSlug, getVersion } from '../git/git';
+import { getBaselineCommits, getChangedFiles, getSlug, getVersion } from '../git/git';
 import { createTask, transitionTo } from '../lib/tasks';
 import {
   initial,
@@ -52,7 +52,8 @@ export const setGitInfo = async (ctx, task) => {
     // The SkipBuildMutation ensures the commit is tagged properly.
     if (await ctx.client.runQuery(TesterSkipBuildMutation, { commit })) {
       ctx.skip = true;
-      return transitionTo(skippedForCommit, true)(ctx, task);
+      transitionTo(skippedForCommit, true)(ctx, task);
+      return;
     }
     throw new Error(skipFailed(ctx).output);
   }
@@ -62,7 +63,7 @@ export const setGitInfo = async (ctx, task) => {
     ignoreLastBuildOnBranch: matchesBranch(ctx.options.ignoreLastBuildOnBranch),
   });
   ctx.git.baselineCommits = baselineCommits;
-  ctx.log.debug(`Found baselineCommits: ${baselineCommits}`);
+  ctx.log.debug(`Found baselineCommits: ${baselineCommits.join(', ')}`);
 
   // If the sole baseline is the most recent ancestor, then this is likely a rebuild (rerun of CI job).
   // If the MRA is all green, there's no need to rerun the build, we just want the CLI to exit 0 so the CI job succeeds.
@@ -72,11 +73,27 @@ export const setGitInfo = async (ctx, task) => {
     const mostRecentAncestor = await ctx.client.runQuery(TesterLastBuildQuery, { commit, branch });
     if (mostRecentAncestor && ['PASSED', 'ACCEPTED'].includes(mostRecentAncestor.status)) {
       ctx.skip = true;
-      return transitionTo(skippedRebuild, true)(ctx, task);
+      transitionTo(skippedRebuild, true)(ctx, task);
+      return;
     }
   }
 
-  return transitionTo(success, true)(ctx, task);
+  // Retrieve a list of changed file paths since the baseline commit(s), which will be used to
+  // determine affected story files later.
+  // In the unlikely scenario that this list is empty (and not a rebuild), we can skip the build
+  // completely, since we know for certain it wouldn't have any effect.
+  if (baselineCommits.length && matchesBranch(ctx.options.onlyChanged)) {
+    const results = await Promise.all(baselineCommits.map((c) => getChangedFiles(c)));
+    ctx.git.changedFiles = [...new Set(results.flat())].map((f) => `./${f}`);
+    ctx.log.debug(`Found changedFiles:\n${ctx.git.changedFiles.map((f) => `  ${f}`).join('\n')}`);
+    if (ctx.git.changedFiles.length === 0) {
+      ctx.skip = true;
+      transitionTo(skippedRebuild, true)(ctx, task);
+      return;
+    }
+  }
+
+  transitionTo(success, true)(ctx, task);
 };
 
 export default createTask({

bin/tasks/storybookInfo.js

@@ -3,8 +3,7 @@ import { createTask, transitionTo } from '../lib/tasks';
 import { initial, pending, success } from '../ui/tasks/storybookInfo';
 
 export const setStorybookInfo = async (ctx) => {
-  const { version, viewLayer, addons } = await getStorybookInfo(ctx);
-  ctx.storybook = { version, viewLayer, addons };
+  ctx.storybook = await getStorybookInfo(ctx);
 };
 
 export default createTask({