diff --git a/node-src/ui/messages/info/buildPassed.stories.ts b/node-src/ui/messages/info/buildPassed.stories.ts index 843fd42dd..2140561cc 100644 --- a/node-src/ui/messages/info/buildPassed.stories.ts +++ b/node-src/ui/messages/info/buildPassed.stories.ts @@ -4,8 +4,11 @@ export default { title: 'CLI/Messages/Info', }; +const ctx = { options: {} } as any; + export const BuildPassed = () => buildPassed({ + ...ctx, build: { number: 42, webUrl: 'https://www.chromatic.com/build?appId=59c59bd0183bd100364e1d57&number=42', @@ -15,6 +18,7 @@ export const BuildPassed = () => export const BuildPassedWithChanges = () => buildPassed({ + ...ctx, build: { number: 42, webUrl: 'https://www.chromatic.com/build?appId=59c59bd0183bd100364e1d57&number=42', @@ -24,6 +28,7 @@ export const BuildPassedWithChanges = () => export const FirstBuildPassed = () => buildPassed({ + ...ctx, isOnboarding: true, build: { number: 1, diff --git a/node-src/ui/messages/info/buildPassed.ts b/node-src/ui/messages/info/buildPassed.ts index 93463cf6d..f0ce7df5f 100644 --- a/node-src/ui/messages/info/buildPassed.ts +++ b/node-src/ui/messages/info/buildPassed.ts @@ -2,30 +2,36 @@ import chalk from 'chalk'; import pluralize from 'pluralize'; import { dedent } from 'ts-dedent'; +import { isE2EBuild } from '../../../lib/e2eUtils'; import { Context } from '../../../types'; import { info, success } from '../../components/icons'; import link from '../../components/link'; import { stats } from '../../tasks/snapshot'; -export default ({ build, isOnboarding }: Context) => { - const { changes, snapshots, components, stories } = stats({ build }); - const visualChanges = pluralize('visual changes', build.changeCount, true); - if (isOnboarding) { +export default (ctx: Context) => { + const { changes, snapshots, components, stories, e2eTests } = stats({ build: ctx.build }); + const visualChanges = pluralize('visual changes', ctx.build.changeCount, true); + + if (ctx.isOnboarding) { + const foundString = isE2EBuild(ctx.options) + ? `We found ${e2eTests} and took ${snapshots}.` + : `We found ${components} with ${stories} and took ${snapshots}.`; + return dedent(chalk` ${success} {bold Build passed. Welcome to Chromatic!} - We found ${components} with ${stories} and took ${snapshots}. - ${info} Please continue setup at ${link(build.app.setupUrl)} + ${foundString} + ${info} Please continue setup at ${link(ctx.build.app.setupUrl)} `); } - return build.autoAcceptChanges && build.changeCount + return ctx.build.autoAcceptChanges && ctx.build.changeCount ? dedent(chalk` - ${success} {bold Build ${build.number} passed!} + ${success} {bold Build ${ctx.build.number} passed!} Auto-accepted ${changes}. - ${info} View build details at ${link(build.webUrl)} + ${info} View build details at ${link(ctx.build.webUrl)} `) : dedent(chalk` - ${success} {bold Build ${build.number} passed!} - ${build.changeCount > 0 ? visualChanges : 'No visual changes'} were found in this build. - ${info} View build details at ${link(build.webUrl)} + ${success} {bold Build ${ctx.build.number} passed!} + ${ctx.build.changeCount > 0 ? visualChanges : 'No visual changes'} were found in this build. + ${info} View build details at ${link(ctx.build.webUrl)} `); }; diff --git a/node-src/ui/messages/info/buildPassedE2E.stories.ts b/node-src/ui/messages/info/buildPassedE2E.stories.ts new file mode 100644 index 000000000..0f2571126 --- /dev/null +++ b/node-src/ui/messages/info/buildPassedE2E.stories.ts @@ -0,0 +1,41 @@ +import buildPassed from './buildPassed'; + +export default { + title: 'CLI/Messages/Info/E2E', +}; + +const ctx = { options: { playwright: true } } as any; + +export const BuildPassed = () => + buildPassed({ + ...ctx, + build: { + number: 42, + webUrl: 'https://www.chromatic.com/build?appId=59c59bd0183bd100364e1d57&number=42', + changeCount: 0, + }, + } as any); + +export const BuildPassedWithChanges = () => + buildPassed({ + ...ctx, + build: { + number: 42, + webUrl: 'https://www.chromatic.com/build?appId=59c59bd0183bd100364e1d57&number=42', + changeCount: 2, + }, + } as any); + +export const FirstBuildPassed = () => + buildPassed({ + ...ctx, + isOnboarding: true, + build: { + number: 1, + testCount: 10, + componentCount: 5, + specCount: 8, + actualCaptureCount: 20, + app: { setupUrl: 'https://www.chromatic.com/setup?appId=59c59bd0183bd100364e1d57' }, + }, + } as any); diff --git a/node-src/ui/messages/info/storybookPublished.ts b/node-src/ui/messages/info/storybookPublished.ts index d2fac5b32..9dd3c81fb 100644 --- a/node-src/ui/messages/info/storybookPublished.ts +++ b/node-src/ui/messages/info/storybookPublished.ts @@ -1,6 +1,7 @@ import chalk from 'chalk'; import { dedent } from 'ts-dedent'; +import { isE2EBuild } from '../../../lib/e2eUtils'; import { Context } from '../../../types'; import { info, success } from '../../components/icons'; import link from '../../components/link'; @@ -12,20 +13,20 @@ export default (ctx: Context) => { throw new Error('No Storybook URL provided'); } + const result = [chalk`${success} {bold ${capitalize(buildType(ctx))} published}`]; + // `ctx.build` is initialized and overwritten in many ways, which means that // this can be any kind of build without component and stories information, // like PASSED builds, for example if (ctx.build.componentCount && ctx.build.specCount) { - const { components, stories } = stats({ build: ctx.build }); - return dedent(chalk` - ${success} {bold ${capitalize(buildType(ctx))} published} - We found ${components} with ${stories}. - ${info} View your ${buildType(ctx)} at ${link(ctx.storybookUrl)} - `); + const { components, stories, e2eTests } = stats({ build: ctx.build }); + + result.push( + isE2EBuild(ctx.options) ? `We found ${e2eTests}.` : `We found ${components} with ${stories}.` + ); } - return dedent(chalk` - ${success} {bold ${capitalize(buildType(ctx))} published} - ${info} View your ${buildType(ctx)} at ${link(ctx.storybookUrl)} - `); + result.push(`${info} View your ${buildType(ctx)} at ${link(ctx.storybookUrl)}`); + + return dedent(chalk`${result.join('\n')}`); };