Add Modes Suffix to CLI Progress Indicator

node-src/main.test.ts

@@ -133,6 +133,7 @@ jest.mock('node-fetch', () =>
                   {
                     spec: { name: 'name', component: { displayName: 'component' } },
                     parameters: { viewport: 320, viewportIsDefault: false },
+                    mode: { name: '320px' },
                   },
                 ],
                 startedAt: Date.now(),

node-src/tasks/report.ts

@@ -31,6 +31,9 @@ const ReportQuery = `
             viewport
             viewportIsDefault
           }
+          mode {
+            name
+          }
         }
       }
     }
@@ -59,6 +62,9 @@ interface ReportQueryResult {
           viewport: number;
           viewportIsDefault: boolean;
         };
+        mode: {
+          name: string;
+        };
       }[];
     };
   };
@@ -91,12 +97,13 @@ export const generateReport = async (ctx: Context) => {
     .property('buildUrl', build.webUrl)
     .property('storybookUrl', baseStorybookUrl(build.cachedUrl));
 
-  build.tests.forEach(({ status, result, spec, parameters }) => {
-    const suffix = parameters.viewportIsDefault ? '' : ` [${parameters.viewport}px]`;
+  build.tests.forEach(({ status, result, spec, parameters, mode }) => {
+    const testSuffixName = mode.name || `[${parameters.viewport}px]`;
+    const suffix = parameters.viewportIsDefault ? '' : testSuffixName;
     const testCase = suite
       .testCase()
       .className(spec.component.name.replace(/[|/]/g, '.')) // transform story path to class path
-      .name(`${spec.name}${suffix}`);
+      .name(`${spec.name} ${suffix}`);
 
     switch (status) {
       case 'FAILED':

node-src/tasks/snapshot.ts

@@ -61,9 +61,10 @@ export const takeSnapshots = async (ctx: Context, task: Task) => {
   const testLabels =
     ctx.options.interactive &&
     testCount === actualTestCount &&
-    tests.map(({ spec, parameters }) => {
-      const suffix = parameters.viewportIsDefault ? '' : ` [${parameters.viewport}px]`;
-      return `${spec.component.displayName} › ${spec.name}${suffix}`;
+    tests.map(({ spec, parameters, mode }) => {
+      const testSuffixName = mode.name || `[${parameters.viewport}px]`;
+      const suffix = parameters.viewportIsDefault ? '' : testSuffixName;
+      return `${spec.component.displayName} › ${spec.name} ${suffix}`;
     });
 
   const updateProgress = throttle(

node-src/tasks/verify.ts

@@ -146,6 +146,9 @@ const VerifyBuildQuery = `
             viewport
             viewportIsDefault
           }
+          mode {
+            name
+          }
         }
       }
     }

node-src/types.ts

@@ -242,6 +242,10 @@ export interface Context {
         viewport: number;
         viewportIsDefault: boolean;
       };
+      mode: {
+        id: string;
+        name: string;
+      };
     }[];
   };
   sourceDir: string;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chromatic",
-  "version": "6.24.0",
+  "version": "6.24.1-next.1",
   "description": "Automate visual testing across browsers. Gather UI feedback. Versioned documentation.",
   "keywords": [
     "storybook-addon",