diff --git a/node-src/types.ts b/node-src/types.ts index 53df87889..45b664319 100644 --- 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 index ce3d8f9fd..9a260a776 100644 --- 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 index e3959bebb..17b98042e 100644 --- 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 index 2140561cc..4ca33d2e1 100644 --- 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 index f0ce7df5f..9756e456e 100644 --- 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)} `); };