Merge pull request #21 from chromaui/tom/fix-accepting

Show reviewing errors in browser console and improve dev setup

.storybook/main.ts

@@ -1,4 +1,29 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import { CHROMATIC_INDEX_URL } from "../src/constants";
+
+const prodConfig = {
+  projectToken: "chpt_5a1a378a1392c49",
+  projectId: "Project:6480e1b0042842f149cfd74c",
+};
+
+const stagingConfig = {
+  projectToken: "chpt_fdc053b44dc78f3",
+  projectId: "Project:64936c844fd570be8b75bdac",
+};
+
+// You probably want to tweak your dev database to have these values.
+// Otherwise run with env vars set
+const devConfig = {
+  projectToken: process.env.CHROMATIC_PROJECT_TOKEN || "chpt_a898d6d22bcc592",
+  projectId: process.env.CHROMATIC_PROJECT_ID || "Project:64c0b64ef4c47fe31e1262f5",
+};
+
+const addonOptionsMap = {
+  "https://www.chromatic.com": prodConfig,
+  "https://www.staging-chromatic.com": stagingConfig,
+  "https://www.dev-chromatic.com": devConfig,
+};
+
 const config: StorybookConfig = {
   addons: [
     {
@@ -12,10 +37,7 @@ const config: StorybookConfig = {
     "storybook-addon-designs",
     {
       name: "../dist/index.js",
-      options: {
-        projectToken: "chpt_5a1a378a1392c49",
-        projectId: "6480e1b0042842f149cfd74c",
-      },
+      options: CHROMATIC_INDEX_URL ? addonOptionsMap[CHROMATIC_INDEX_URL] : prodConfig,
     },
   ],
   docs: {

Development.md

@@ -0,0 +1,25 @@
+## Running against development/staging
+
+You can simply start the storybook with the `CHROMATIC_INDEX_URL` set, as you would with the chromatic CLI:
+
+```bash
+CHROMATIC_INDEX_URL=https://www.staging-chromatic.com yarn storybook
+```
+
+If running with the index URL set in against the addon's storybook, we'll also update the configured
+project id appropriately. If you are running in dev, you can either tweak your database to have
+the correct project id/token, or you can run with the extra env vars set:
+
+```bash
+CHROMATIC_PROJECT_ID=xyz CHROMATIC_PROJECT_TOKEN=abc CHROMATIC_INDEX_URL=https://www.dev-chromatic.com yarn storybook
+```
+
+## Running against an outside storybook
+
+If you want to test the addon with a real project, you can install from npm as usual -- we publish canaries for each PR. You can also link the addon in the usual ways.
+
+When running you can also connect the adon to staging/dev in the same way, although you'll need to manually configure the project id/token.
+
+```bash
+CHROMATIC_INDEX_URL=https://www.staging-chromatic.com yarn storybook
+```

README.md

@@ -34,4 +34,4 @@ In Yarn 1 starting up your Storybook after installation, you can [workaround wit
   }
 ```
 
-Alternatively, you could use a different package manager (yarn 3, npm, pnpm).
+Alternatively, you could use a different package manager (yarn 3, npm, pnpm).

src/constants.ts

@@ -1,4 +1,8 @@
-export const { CHROMATIC_BASE_URL } = process.env;
+export const {
+  CHROMATIC_INDEX_URL,
+  CHROMATIC_BASE_URL = CHROMATIC_INDEX_URL || "https://www.chromatic.com",
+  CHROMATIC_ADDON_NAME = "@chromaui/addon-visual-tests",
+} = process.env;
 
 export const ADDON_ID = "chromaui/addon-visual-tests";
 export const TOOL_ID = `${ADDON_ID}/tool`;

src/index.ts

@@ -5,14 +5,16 @@ import { exec } from "child_process";
 import { run } from "chromatic/node";
 import { promisify } from "util";
 
-import { BUILD_STARTED, START_BUILD, UPDATE_PROJECT, UpdateProjectPayload } from "./constants";
+import {
+  BUILD_STARTED,
+  CHROMATIC_ADDON_NAME,
+  CHROMATIC_BASE_URL,
+  START_BUILD,
+  UPDATE_PROJECT,
+  UpdateProjectPayload,
+} from "./constants";
 import { findConfig } from "./utils/storybook.config.utils";
 
-const {
-  CHROMATIC_BASE_URL = "https://www.chromatic.com",
-  CHROMATIC_ADDON_NAME = "@chromaui/addon-visual-tests",
-} = process.env;
-
 /**
  * to load the built addon in this test Storybook
  */

src/screens/VisualTests/VisualTests.tsx

@@ -186,8 +186,21 @@ export const VisualTests = ({
   const [{ fetching: isAccepting }, reviewTest] = useMutation(MutationReviewTest);
 
   const onAccept = useCallback(
-    (testId: string, batch: ReviewTestBatch) =>
-      reviewTest({ input: { testId, status: ReviewTestInputStatus.Accepted, batch } }),
+    async (testId: string, batch: ReviewTestBatch) => {
+      try {
+        const { error: reviewError } = await reviewTest({
+          input: { testId, status: ReviewTestInputStatus.Accepted, batch },
+        });
+
+        if (reviewError) throw reviewError;
+      } catch (err) {
+        // https://linear.app/chromaui/issue/AP-3279/error-handling
+        // eslint-disable-next-line no-console
+        console.log("Failed to accept changes:");
+        // eslint-disable-next-line no-console
+        console.log(err);
+      }
+    },
     [reviewTest]
   );
 

src/utils/useTests.ts

@@ -63,10 +63,10 @@ export function useTests(tests: TestFieldsFragment[]) {
       if (test.status === TestStatus.InProgress) {
         acc.isInProgress = true;
       }
-      if (test.result === TestResult.Changed) {
+      if ([TestResult.Changed, TestResult.Added].includes(test.result)) {
         acc.changeCount += 1;
       }
-      if (test.result === TestResult.CaptureError || test.result === TestResult.SystemError) {
+      if ([TestResult.CaptureError, TestResult.SystemError].includes(test.result)) {
         acc.brokenCount += 1;
       }
       test.comparisons?.forEach(({ browser, result }) => {

tsup.config.ts

@@ -1,7 +1,5 @@
 import { defineConfig } from "tsup";
 
-const CHROMATIC_BASE_URL = process.env.CHROMATIC_BASE_URL || "https://www.chromatic.com";
-
 export default defineConfig((options) => [
   {
     entry: ["src/index.ts"],
@@ -17,9 +15,6 @@ export default defineConfig((options) => [
     platform: "node",
     esbuildOptions(options) {
       options.conditions = ["module"];
-      options.define = {
-        "process.env.CHROMATIC_BASE_URL": JSON.stringify(CHROMATIC_BASE_URL),
-      };
     },
   },
   {
@@ -36,9 +31,6 @@ export default defineConfig((options) => [
     platform: "browser",
     esbuildOptions(options) {
       options.conditions = ["module"];
-      options.define = {
-        "process.env.CHROMATIC_BASE_URL": JSON.stringify(CHROMATIC_BASE_URL),
-      };
     },
   },
 ]);