feat(storybook): add support for basic test-runner configuration (#11101

)

Closes #11047

docs/generated/packages/angular.json

@@ -2163,6 +2163,11 @@
               "**/**/src/**/*.other.*",
               "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
             ]
+          },
+          "configureTestRunner": {
+            "type": "boolean",
+            "description": "Add a Storybook Test-Runner target.",
+            "x-prompt": "Add a Storybook Test-Runner target?"
           }
         },
         "additionalProperties": false,

docs/generated/packages/react.json

@@ -663,6 +663,11 @@
               "**/**/src/**/*.other.*",
               "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
             ]
+          },
+          "configureTestRunner": {
+            "type": "boolean",
+            "description": "Add a Storybook Test-Runner target.",
+            "x-prompt": "Add a Storybook Test-Runner target?"
           }
         },
         "required": ["name"],

docs/generated/packages/storybook.json

@@ -177,6 +177,11 @@
           "standaloneConfig": {
             "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
             "type": "boolean"
+          },
+          "configureTestRunner": {
+            "type": "boolean",
+            "description": "Add a Storybook Test-Runner target.",
+            "x-prompt": "Add a Storybook Test-Runner target?"
           }
         },
         "required": ["name"],

packages/angular/src/generators/storybook-configuration/schema.d.ts

@@ -10,4 +10,5 @@ export interface StorybookConfigurationOptions {
   tsConfiguration?: boolean;
   skipFormat?: boolean;
   ignorePaths?: string[];
+  configureTestRunner?: boolean;
 }

packages/angular/src/generators/storybook-configuration/schema.json

@@ -69,6 +69,11 @@
         "**/**/src/**/*.other.*",
         "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
       ]
+    },
+    "configureTestRunner": {
+      "type": "boolean",
+      "description": "Add a Storybook Test-Runner target.",
+      "x-prompt": "Add a Storybook Test-Runner target?"
     }
   },
   "additionalProperties": false,

packages/react/src/generators/storybook-configuration/schema.d.ts

@@ -11,4 +11,5 @@ export interface StorybookConfigureSchema {
   cypressDirectory?: string;
   standaloneConfig?: boolean;
   ignorePaths?: string[];
+  configureTestRunner?: boolean;
 }

packages/react/src/generators/storybook-configuration/schema.json

@@ -73,6 +73,11 @@
         "**/**/src/**/*.other.*",
         "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
       ]
+    },
+    "configureTestRunner": {
+      "type": "boolean",
+      "description": "Add a Storybook Test-Runner target.",
+      "x-prompt": "Add a Storybook Test-Runner target?"
     }
   },
   "required": ["name"]

packages/storybook/src/generators/configuration/configuration.spec.ts

@@ -426,6 +426,27 @@ describe('@nrwl/storybook:configuration', () => {
         tree.exists('libs/test-ui-lib-2/.storybook/preview.js')
       ).toBeFalsy();
     });
+
+    it.only('should add test-storybook target', async () => {
+      await configurationGenerator(tree, {
+        name: 'test-ui-lib',
+        uiFramework: '@storybook/react',
+        configureTestRunner: true,
+      });
+
+      expect(
+        readJson(tree, 'package.json').devDependencies['@storybook/test-runner']
+      ).toBeTruthy();
+
+      const project = readProjectConfiguration(tree, 'test-ui-lib');
+      expect(project.targets['test-storybook']).toEqual({
+        executor: 'nx:run-commands',
+        options: {
+          command:
+            'test-storybook -c libs/test-ui-lib/.storybook --url=http://localhost:4400',
+        },
+      });
+    });
   });
 
   describe('for other types of projects - Next.js and the swc compiler', () => {

packages/storybook/src/generators/configuration/configuration.ts

@@ -28,6 +28,7 @@ import { findStorybookAndBuildTargetsAndCompiler } from '../../utils/utilities';
 import {
   storybookNextAddonVersion,
   storybookSwcAddonVersion,
+  storybookTestRunnerVersion,
 } from '../../utils/versions';
 
 export async function configurationGenerator(
@@ -64,9 +65,14 @@ export async function configurationGenerator(
   addBuildStorybookToCacheableOperations(tree);
 
   if (schema.uiFramework === '@storybook/angular') {
-    addAngularStorybookTask(tree, schema.name);
+    addAngularStorybookTask(tree, schema.name, schema.configureTestRunner);
   } else {
-    addStorybookTask(tree, schema.name, schema.uiFramework);
+    addStorybookTask(
+      tree,
+      schema.name,
+      schema.uiFramework,
+      schema.configureTestRunner
+    );
   }
 
   if (schema.configureCypress) {
@@ -107,6 +113,18 @@ export async function configurationGenerator(
     );
   }
 
+  if (schema.configureTestRunner === true) {
+    tasks.push(
+      addDependenciesToPackageJson(
+        tree,
+        {},
+        {
+          '@storybook/test-runner': storybookTestRunnerVersion,
+        }
+      )
+    );
+  }
+
   await formatFiles(tree);
 
   return runTasksInSerial(...tasks);

packages/storybook/src/generators/configuration/schema.d.ts

@@ -12,4 +12,5 @@ export interface StorybookConfigureSchema {
   tsConfiguration?: boolean;
   cypressDirectory?: string;
   standaloneConfig?: boolean;
+  configureTestRunner?: boolean;
 }

packages/storybook/src/generators/configuration/schema.json

@@ -60,6 +60,11 @@
     "standaloneConfig": {
       "description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
       "type": "boolean"
+    },
+    "configureTestRunner": {
+      "type": "boolean",
+      "description": "Add a Storybook Test-Runner target.",
+      "x-prompt": "Add a Storybook Test-Runner target?"
     }
   },
   "required": ["name"]

packages/storybook/src/generators/configuration/util-functions.ts

@@ -24,10 +24,13 @@ import {
 import { StorybookConfigureSchema } from './schema';
 import { getRootTsConfigPathInTree } from '@nrwl/workspace/src/utilities/typescript';
 
+const DEFAULT_PORT = 4400;
+
 export function addStorybookTask(
   tree: Tree,
   projectName: string,
-  uiFramework: string
+  uiFramework: string,
+  configureTestRunner: boolean
 ) {
   if (uiFramework === '@storybook/react-native') {
     return;
@@ -37,7 +40,7 @@ export function addStorybookTask(
     executor: '@nrwl/storybook:storybook',
     options: {
       uiFramework,
-      port: 4400,
+      port: DEFAULT_PORT,
       config: {
         configFolder: `${projectConfig.root}/.storybook`,
       },
@@ -48,6 +51,7 @@ export function addStorybookTask(
       },
     },
   };
+
   projectConfig.targets['build-storybook'] = {
     executor: '@nrwl/storybook:build',
     outputs: ['{options.outputPath}'],
@@ -65,10 +69,23 @@ export function addStorybookTask(
     },
   };
 
+  if (configureTestRunner === true) {
+    projectConfig.targets['test-storybook'] = {
+      executor: 'nx:run-commands',
+      options: {
+        command: `test-storybook -c ${projectConfig.root}/.storybook --url=http://localhost:${DEFAULT_PORT}`,
+      },
+    };
+  }
+
   updateProjectConfiguration(tree, projectName, projectConfig);
 }
 
-export function addAngularStorybookTask(tree: Tree, projectName: string) {
+export function addAngularStorybookTask(
+  tree: Tree,
+  projectName: string,
+  configureTestRunner: boolean
+) {
   const projectConfig = readProjectConfiguration(tree, projectName);
   const { ngBuildTarget } = findStorybookAndBuildTargetsAndCompiler(
     projectConfig.targets
@@ -89,6 +106,7 @@ export function addAngularStorybookTask(tree: Tree, projectName: string) {
       },
     },
   };
+
   projectConfig.targets['build-storybook'] = {
     executor: '@storybook/angular:build-storybook',
     outputs: ['{options.outputDir}'],
@@ -107,6 +125,15 @@ export function addAngularStorybookTask(tree: Tree, projectName: string) {
     },
   };
 
+  if (configureTestRunner === true) {
+    projectConfig.targets['test-storybook'] = {
+      executor: 'nx:run-commands',
+      options: {
+        command: `test-storybook -c ${projectConfig.root}/.storybook --url=http://localhost:${DEFAULT_PORT}`,
+      },
+    };
+  }
+
   updateProjectConfiguration(tree, projectName, projectConfig);
 }
 

packages/storybook/src/utils/versions.ts

@@ -10,4 +10,5 @@ export const storybookReactNativeVersion = '^6.0.1-beta.5';
 export const reactNativeStorybookLoader = '^2.0.5';
 export const storybookSwcAddonVersion = '^1.1.7';
 export const storybookNextAddonVersion = '^1.6.6';
+export const storybookTestRunnerVersion = '^0.7.2';
 export const litHtmlVersion = '^2.3.1';