Merge pull request #1145 from chromaui/jmhobbs/cap-2647-update-cli-me…

…ssaging-for-accessibility-diff Account for accessibility change counts in UI
chromaui · Jan 27, 2025 · 71abbcc · 71abbcc
2 parents 035a1bf + 7af2d57
commit 71abbcc
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 9 deletions.
diff --git a/node-src/types.ts b/node-src/types.ts
@@ -287,6 +287,7 @@ export interface Context {
     testCount: number;
     changeCount: number;
     errorCount: number;
+    accessibilityChangeCount: number;
     interactionTestFailuresCount: number;
     inProgressCount?: number;
     autoAcceptChanges: boolean;

diff --git a/node-src/ui/messages/errors/buildHasChanges.stories.ts b/node-src/ui/messages/errors/buildHasChanges.stories.ts
@@ -8,6 +8,7 @@ const context = {
   build: {
     number: 42,
     changeCount: 2,
+    accessibilityChangeCount: 1,
     webUrl: 'https://www.chromatic.com/build?appId=59c59bd0183bd100364e1d57&number=42',
     app: {
       setupUrl: 'https://www.chromatic.com/setup?appId=59c59bd0183bd100364e1d57',
@@ -19,5 +20,17 @@ const context = {
 
 export const BuildHasChangesNotOnboarding = () => buildHasChanges(context);
 
+export const BuildHasChangesVisualOnly = () =>
+  buildHasChanges({
+    ...context,
+    build: { ...context.build, accessibilityChangeCount: 0 },
+  });
+
+export const BuildHasChangesAccessibilityOnly = () =>
+  buildHasChanges({
+    ...context,
+    build: { ...context.build, changeCount: 0 },
+  });
+
 export const BuildHasChangesIsOnboarding = () =>
   buildHasChanges({ ...context, isOnboarding: true });
diff --git a/node-src/ui/messages/errors/buildHasChanges.ts b/node-src/ui/messages/errors/buildHasChanges.ts
@@ -6,11 +6,24 @@ import { error, info } from '../../components/icons';
 import link from '../../components/link';
 
 export default ({ build, exitCode, isOnboarding }) => {
-  const changes = pluralize('visual changes', build.changeCount, true);
+  const url = isOnboarding ? build.app.setupUrl : build.webUrl;
+
+  const changes: any[] = [];
+  if (build.changeCount > 0) {
+    changes.push(
+      chalk`${error} {bold Found ${pluralize('visual changes', build.changeCount, true)}}`
+    );
+  }
+  if (build.accessibilityChangeCount > 0) {
+    changes.push(
+      chalk`${error} {bold Found ${pluralize('accessibility changes', build.accessibilityChangeCount, true)}}`
+    );
+  }
+
   return dedent(chalk`
-    ${error} {bold Found ${changes}}: Review the changes at ${link(
-      isOnboarding ? build.app.setupUrl : build.webUrl
-    )}
+    ${changes.join('\n')}
+
+    Review the changes at ${link(url)}
     
     ${info} For CI/CD use cases, this command failed with exit code ${exitCode}
     Pass {bold --exit-zero-on-changes} to succeed this command regardless of changes.

diff --git a/node-src/ui/messages/info/buildPassed.stories.ts b/node-src/ui/messages/info/buildPassed.stories.ts
@@ -23,6 +23,27 @@ export const BuildPassedWithChanges = () =>
       number: 42,
       webUrl: 'https://www.chromatic.com/build?appId=59c59bd0183bd100364e1d57&number=42',
       changeCount: 2,
+      accessibilityChangeCount: 1,
+    },
+  } as any);
+
+export const BuildPassedWithVisualChanges = () =>
+  buildPassed({
+    ...ctx,
+    build: {
+      number: 42,
+      webUrl: 'https://www.chromatic.com/build?appId=59c59bd0183bd100364e1d57&number=42',
+      changeCount: 2,
+    },
+  } as any);
+
+export const BuildPassedWithAccessibilityChanges = () =>
+  buildPassed({
+    ...ctx,
+    build: {
+      number: 42,
+      webUrl: 'https://www.chromatic.com/build?appId=59c59bd0183bd100364e1d57&number=42',
+      accessibilityChangeCount: 1,
     },
   } as any);
 

diff --git a/node-src/ui/messages/info/buildPassed.ts b/node-src/ui/messages/info/buildPassed.ts
@@ -9,8 +9,9 @@ import link from '../../components/link';
 import { stats } from '../../tasks/snapshot';
 
 export default (ctx: Context) => {
-  const { changes, snapshots, components, stories, e2eTests } = stats({ build: ctx.build });
-  const visualChanges = pluralize('visual changes', ctx.build.changeCount, true);
+  const { snapshots, components, stories, e2eTests } = stats({ build: ctx.build });
+
+  const totalChanges = (ctx.build.changeCount || 0) + (ctx.build.accessibilityChangeCount || 0);
 
   if (ctx.isOnboarding) {
     const foundString = isE2EBuild(ctx.options)
@@ -23,15 +24,24 @@ export default (ctx: Context) => {
       ${info} Please continue setup at ${link(ctx.build.app.setupUrl)}
     `);
   }
-  return ctx.build.autoAcceptChanges && ctx.build.changeCount
+
+  const changes: any[] = [];
+  if (ctx.build.changeCount > 0) {
+    changes.push(pluralize('visual changes', ctx.build.changeCount, true));
+  }
+  if (ctx.build.accessibilityChangeCount > 0) {
+    changes.push(pluralize('accessibility changes', ctx.build.accessibilityChangeCount, true));
+  }
+
+  return ctx.build.autoAcceptChanges && totalChanges > 0
     ? dedent(chalk`
       ${success} {bold Build ${ctx.build.number} passed!}
-      Auto-accepted ${changes}.
+      Auto-accepted ${pluralize('changes', totalChanges, true)}.
       ${info} View build details at ${link(ctx.build.webUrl)}
     `)
     : dedent(chalk`
       ${success} {bold Build ${ctx.build.number} passed!}
-      ${ctx.build.changeCount > 0 ? visualChanges : 'No visual changes'} were found in this build.
+      ${totalChanges > 0 ? changes.join(' and ') : 'No changes'} ${pluralize('was', totalChanges, false)} found in this build.
       ${info} View build details at ${link(ctx.build.webUrl)}
     `);
 };