Merge pull request #737 from chromaui/trace-diagnostics-update

.github/workflows/smoke-test-yarn-berry.yml

@@ -5,12 +5,12 @@ jobs:
   chromatic:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/setup-node@v1
-        with:
-          node-version: '16.x'
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+            node-version: '16'
       - run: yarn install
       - run: yarn set version berry
       - name: run chromatic

bin-src/trace.test.ts

@@ -1,18 +1,58 @@
-import mockfs from 'mock-fs';
+import chalk from 'chalk';
+import { execSync } from 'child_process';
 
-// eslint-disable-next-line jest/no-mocks-import
-import * as trimmedFile from './__mocks__/previewStatsJson/preview-stats.trimmed.json';
+import {
+  rootDirNote,
+  baseDirNote,
+  storybookDirNote,
+  traceSuggestions,
+} from './ui/messages/info/tracedAffectedFiles';
 
-mockfs({
-  './storybook-static/preview-stats.json': JSON.stringify(trimmedFile),
-});
+const scriptCommand = `$ ./bin/main.cjs trace ./bin-src/ui/messages/errors/invalidReportPath.ts`;
 
-afterEach(() => {
-  mockfs.restore();
-});
+describe('Test trace script from package.json', () => {
+  it('returns the default output successfully', () => {
+    const scriptName =
+      'chromatic trace ./bin-src/ui/messages/errors/invalidReportPath.ts -s bin-src/__mocks__/previewStatsJson/preview-stats.trimmed.json';
+
+    // Execute the script as a child process
+    const output = execSync(`yarn ${scriptName}`).toString().trim();
+
+    // Add your assertions based on the expected output or behavior of the script
+    expect(output).toContain(scriptCommand);
+
+    // Verify that the output does not contain the expanded output
+    expect(output).not.toContain(rootDirNote);
+  });
+  it('outputs directory info when -m expanded is passed', () => {
+    const scriptName =
+      'chromatic trace ./bin-src/ui/messages/errors/invalidReportPath.ts -s bin-src/__mocks__/previewStatsJson/preview-stats.trimmed.json -m expanded';
+
+    // Execute the script as a child process
+    const output = execSync(`yarn ${scriptName}`).toString().trim();
+
+    const expandedStoryModule = `bin-src/ui/messages/errors/invalidReportPath.stories.ts`;
+    const expandedFileModule = `bin-src/ui/messages/errors/invalidReportPath.ts`;
+
+    // Add your assertions based on the expected output or behavior of the script
+    expect(output).toContain(rootDirNote);
+    expect(output).toContain(baseDirNote);
+    expect(output).toContain(storybookDirNote);
+    expect(output).toContain(traceSuggestions);
+    expect(output).toContain(expandedStoryModule);
+    expect(output).toContain(expandedFileModule);
+  });
+  it('outputs untraced info when --mode expanded is passed with -u and an untraced file', () => {
+    const scriptName =
+      'chromatic trace ./bin-src/ui/messages/errors/invalidReportPath.ts -s bin-src/__mocks__/previewStatsJson/preview-stats.trimmed.json -m expanded -u ./bin-src/ui/messages/errors/invalidReportPath.ts';
+
+    // Execute the script as a child process
+    const output = execSync(`yarn ${scriptName}`).toString().trim();
+
+    const untracedFile = `./bin-src/ui/messages/errors/invalidReportPath.ts`;
+    const untracedFileNote = `We detected some untraced files`;
 
-describe('Trace', () => {
-  it('acts as a placeholder for a trace test', async () => {
-    expect(true).toBe(true);
+    expect(output).toContain(untracedFileNote);
+    expect(output).toContain(untracedFile);
   });
 });

bin-src/ui/messages/info/tracedAffectedFiles.stories.ts

@@ -4,6 +4,7 @@ export default {
   title: 'CLI/Messages/Info',
 };
 
+const rootPath = './chromatic-cli';
 const tracedPaths = [
   'src/app/dashboard/index.ts + 3 modules\nsrc/app/settings/Settings.stories.tsx + 2 modules',
   'src/app/dashboard/index.ts + 3 modules\nsrc/app/payment/Payment.stories.tsx',
@@ -74,7 +75,7 @@ export const TracedAffectedFilesExpanded = () =>
   tracedAffectedFiles(
     {
       options: { traceChanged: 'expanded' },
-      turboSnap: { tracedPaths: new Set(tracedPaths) },
+      turboSnap: { rootPath, tracedPaths: new Set(tracedPaths) },
     } as any,
     {
       changedFiles: ['src/app/dashboard/index.ts'],

bin-src/ui/messages/info/tracedAffectedFiles.ts

@@ -17,6 +17,15 @@ const printFilePath = (filepath: string, basedir: string, expanded: boolean) =>
     .join('/');
 };
 
+export const rootDirNote = `The root directory of your project:`;
+export const baseDirNote = `The base directory (The relative path from the root to the storybook config root):`;
+export const storybookDirNote = `The storybook directory (The directory can either be at the root or in a sub-directory):`;
+export const traceSuggestions = `If you are having trouble with tracing, please check the following:\n
+  1. Make sure you have the correct root path, base path, and storybook path.\n
+  2. Make sure you have the correct storybook config file.\n
+  3. Make sure you have the correct storybook config file path.\nYou can either set the flags storybook-base-dir or storybook-config-dir to help TurboSnap find the correct storybook config file.\n
+`;
+
 export default (
   ctx: Context,
   {
@@ -33,12 +42,35 @@ export default (
 ) => {
   const flag = ctx.log === (console as any) ? '--mode (-m)' : '--trace-changed';
   const basedir = ctx.options.storybookBaseDir || '.';
+  const storybookConfigDir = ctx.options.storybookConfigDir || '.storybook';
   const expanded = ctx.options.traceChanged === 'expanded';
   const printPath = (filepath: string) => printFilePath(filepath, basedir, expanded);
 
   const changed = pluralize('changed files', changedFiles.length, true);
   const affected = pluralize('affected story files', Object.keys(affectedModules).length, true);
-  const summary = chalk`${info} Traced {bold ${changed}} to {bold ${affected}}`;
+
+  let directoryDebug = null;
+
+  if (expanded) {
+    const bailReason = ctx.turboSnap?.bailReason
+      ? `${chalk.magenta('Bail Reason:')} ${ctx.turboSnap.bailReason}\n\n`
+      : '';
+    const rootPath = `${chalk.magenta(rootDirNote)} ${ctx.turboSnap.rootPath}\n\n`;
+    const basePath = `${chalk.magenta(baseDirNote)} ${basedir}\n\n`;
+    const storybookPath = `${chalk.magenta(storybookDirNote)} ${storybookConfigDir}\n\n`;
+    const untracedNotice =
+      ctx.untracedFiles && ctx.untracedFiles.length > 0
+        ? `${chalk.magenta(
+            `We detected some untraced files, this may affect your traced changes as 
+    the untraced flag instructs TurboSnap to not trace dependencies for the files:`
+          )} \n  ${ctx.untracedFiles.join(',')}\n\n\n`
+        : '';
+    directoryDebug = `${rootPath}${basePath}${storybookPath}${bailReason}${untracedNotice}${traceSuggestions}`;
+  }
+
+  const summary = chalk`${
+    ctx.options.traceChanged === 'expanded' ? directoryDebug : ''
+  }${info} Traced {bold ${changed}} to {bold ${affected}}`;
 
   if (ctx.options.traceChanged === 'compact') {
     let submodules = false;
@@ -74,7 +106,9 @@ export default (
           if (seen.has(part)) note = chalk` {yellow [duplicate]}`;
           else seen.add(part);
         }
-        return chalk`${acc}\n${indent}∟ ${printPath(part)}${note}${printModules(part, indent)}`;
+        return chalk`${
+          expanded ? `File Path: ${part}\n\nBase Directory: ${basedir}\n\n` : ''
+        }${acc}\n${indent}∟ ${printPath(part)}${note}${printModules(part, indent)}`;
       }, '')
       .concat(chalk`\n${'  '.repeat(parts.length)}∟ {cyan [story index]}`);
   });