Added Chromatic task

.circleci/config.yml

@@ -542,7 +542,7 @@ jobs:
           at: .
       - run:
           name: Running Chromatic
-          command: yarn chromatic-sandboxes --cadence ci --junit test-results/chromatic.xml
+          command: yarn task --task chromatic --template $(yarn get-template ci) --force --no-before --junit
           working_directory: code
       - store_test_results:
           path: code/test-results

scripts/task.ts

@@ -10,6 +10,7 @@ import { create } from './tasks/create';
 import { smokeTest } from './tasks/smoke-test';
 import { build } from './tasks/build';
 import { testRunner } from './tasks/test-runner';
+import { chromatic } from './tasks/chromatic';
 
 import TEMPLATES from '../code/lib/cli/src/repro-templates';
 
@@ -19,7 +20,12 @@ const junitDir = resolve(__dirname, '../code/test-results');
 export type TemplateKey = keyof typeof TEMPLATES;
 export type Template = typeof TEMPLATES[TemplateKey];
 export type Path = string;
-export type TemplateDetails = { template: Template; sandboxDir: Path; junitFilename: Path };
+export type TemplateDetails = {
+  template: Template;
+  sandboxDir: Path;
+  builtSandboxDir: Path;
+  junitFilename: Path;
+};
 
 type MaybePromise<T> = T | Promise<T>;
 
@@ -49,6 +55,7 @@ export const tasks = {
   'smoke-test': smokeTest,
   build,
   'test-runner': testRunner,
+  chromatic,
 };
 
 type TaskKey = keyof typeof tasks;
@@ -114,6 +121,7 @@ async function runTask(
   const details = {
     template,
     sandboxDir: templateSandboxDir,
+    builtSandboxDir: join(templateSandboxDir, 'storybook-static'),
     junitFilename: junit && getJunitFilename(taskKey),
   };
 

scripts/tasks/build.ts

@@ -5,8 +5,8 @@ import { exec } from '../utils/exec';
 
 export const build: Task = {
   before: ['create'],
-  async ready(_, { sandboxDir }) {
-    return pathExists(join(sandboxDir, 'storybook-static'));
+  async ready(_, { builtSandboxDir }) {
+    return pathExists(builtSandboxDir);
   },
   async run(_, { sandboxDir }) {
     return exec(`yarn build-storybook --quiet`, { cwd: sandboxDir });

scripts/tasks/chromatic.ts

@@ -0,0 +1,20 @@
+import type { Task } from '../task';
+import { exec } from '../utils/exec';
+
+export const chromatic: Task = {
+  before: ['build'],
+  junit: true,
+  async ready() {
+    return false;
+  },
+  async run(templateKey, { sandboxDir, builtSandboxDir, junitFilename }) {
+    const tokenEnvVarName = `CHROMATIC_TOKEN_${templateKey.toUpperCase().replace(/\/|-/g, '_')}`;
+    const token = process.env[tokenEnvVarName];
+    return exec(
+      `npx chromatic --storybook-build-dir=${builtSandboxDir} \
+        --junit-report=${junitFilename} \
+        --projectToken=${token}`,
+      { cwd: sandboxDir }
+    );
+  },
+};

scripts/tasks/test-runner.ts

@@ -12,7 +12,7 @@ export const testRunner: Task = {
   async ready() {
     return false;
   },
-  async run(_, { sandboxDir, junitFilename }) {
+  async run(_, { sandboxDir, builtSandboxDir, junitFilename }) {
     const execOptions = { cwd: sandboxDir };
 
     // We could split this out into a separate task if it became annoying
@@ -39,7 +39,7 @@ export const testRunner: Task = {
       await writeFile(testFilePathname, newTestFile);
     }
 
-    const storybookController = await serveSandbox(join(sandboxDir, 'storybook-static'), {});
+    const storybookController = await serveSandbox(builtSandboxDir, {});
 
     await new Promise((r) => setTimeout(r, 10000));
     await exec(`yarn test-storybook --url http://localhost:8001`, execOptions);