feat(storybook): interaction testing init generator

nrwl · Jul 12, 2023 · e0efda9 · e0efda9
1 parent cf9f5cb
commit e0efda9
Show file tree

Hide file tree

Showing 24 changed files with 256 additions and 115 deletions.
diff --git a/docs/generated/packages/angular/generators/storybook-configuration.json b/docs/generated/packages/angular/generators/storybook-configuration.json
@@ -18,12 +18,18 @@
         "x-dropdown": "projects",
         "x-priority": "important"
       },
+      "interactionTests": {
+        "type": "boolean",
+        "description": "Set up Storybook interaction tests.",
+        "x-prompt": "Do you want to set up Storybook Interaction Tests?",
+        "alias": ["configureTestRunner"],
+        "x-priority": "important",
+        "default": true
+      },
       "configureCypress": {
         "type": "boolean",
         "description": "Specifies whether to configure Cypress or not.",
-        "x-prompt": "Configure a Cypress e2e app to run against the storybook instance?",
-        "default": true,
-        "x-priority": "important"
+        "x-deprecated": "Please use Storybook Interaction Testing instead."
       },
       "generateStories": {
         "type": "boolean",
@@ -35,9 +41,7 @@
       "generateCypressSpecs": {
         "type": "boolean",
         "description": "Specifies whether to automatically generate test files in the generated Cypress e2e app.",
-        "x-prompt": "Automatically generate test files in the generated Cypress e2e app?",
-        "default": true,
-        "x-priority": "important"
+        "x-deprecated": "Please use Storybook Interaction Testing instead."
       },
       "configureStaticServe": {
         "type": "boolean",
@@ -48,7 +52,8 @@
       },
       "cypressDirectory": {
         "type": "string",
-        "description": "A directory where the Cypress project will be placed. Placed at the root by default."
+        "description": "A directory where the Cypress project will be placed. Placed at the root by default.",
+        "x-deprecated": "Please use Storybook Interaction Testing instead."
       },
       "linter": {
         "description": "The tool to use for running lint checks.",
@@ -59,7 +64,7 @@
       "tsConfiguration": {
         "type": "boolean",
         "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
-        "default": false,
+        "default": true,
         "x-priority": "important"
       },
       "skipFormat": {
@@ -79,10 +84,6 @@
           "**/**/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."
       }
     },
     "additionalProperties": false,

diff --git a/docs/generated/packages/react-native/generators/storybook-configuration.json b/docs/generated/packages/react-native/generators/storybook-configuration.json
@@ -32,7 +32,7 @@
       "tsConfiguration": {
         "type": "boolean",
         "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
-        "default": false
+        "default": true
       },
       "linter": {
         "description": "The tool to use for running lint checks.",

diff --git a/docs/generated/packages/react/generators/storybook-configuration.json b/docs/generated/packages/react/generators/storybook-configuration.json
@@ -18,12 +18,18 @@
         "x-dropdown": "projects",
         "x-priority": "important"
       },
+      "interactionTests": {
+        "type": "boolean",
+        "description": "Set up Storybook interaction tests.",
+        "x-prompt": "Do you want to set up Storybook Interaction Tests?",
+        "x-priority": "important",
+        "alias": ["configureTestRunner"],
+        "default": true
+      },
       "configureCypress": {
         "type": "boolean",
         "description": "Run the cypress-configure generator.",
-        "x-prompt": "Configure a cypress e2e app to run against the storybook instance?",
-        "default": true,
-        "x-priority": "important"
+        "x-deprecated": "Please use Storybook Interaction Testing instead."
       },
       "generateStories": {
         "type": "boolean",
@@ -35,9 +41,7 @@
       "generateCypressSpecs": {
         "type": "boolean",
         "description": "Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator.",
-        "x-prompt": "Automatically generate test files in the Cypress E2E app generated by the cypress-configure generator?",
-        "default": true,
-        "x-priority": "important"
+        "x-deprecated": "Please use Storybook Interaction Testing instead."
       },
       "configureStaticServe": {
         "type": "boolean",
@@ -48,7 +52,8 @@
       },
       "cypressDirectory": {
         "type": "string",
-        "description": "A directory where the Cypress project will be placed. Placed at the root by default."
+        "description": "A directory where the Cypress project will be placed. Placed at the root by default.",
+        "x-deprecated": "Please use Storybook Interaction Testing instead."
       },
       "js": {
         "type": "boolean",
@@ -58,7 +63,7 @@
       "tsConfiguration": {
         "type": "boolean",
         "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
-        "default": false
+        "default": true
       },
       "linter": {
         "description": "The tool to use for running lint checks.",
@@ -77,10 +82,6 @@
           "**/**/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."
       }
     },
     "required": ["name"],

diff --git a/docs/generated/packages/storybook/generators/configuration.json b/docs/generated/packages/storybook/generators/configuration.json
@@ -18,15 +18,22 @@
         "x-dropdown": "projects",
         "x-priority": "important"
       },
+      "interactionTests": {
+        "type": "boolean",
+        "description": "Set up Storybook interaction tests.",
+        "x-prompt": "Do you want to set up Storybook Interaction Tests?",
+        "alias": ["configureTestRunner"],
+        "default": true
+      },
       "configureCypress": {
         "type": "boolean",
         "description": "Run the cypress-configure generator.",
-        "x-prompt": "Configure a cypress e2e app to run against the storybook instance?",
-        "x-priority": "important"
+        "x-deprecated": "Please use Storybook Interaction Testing instead."
       },
       "cypressDirectory": {
         "type": "string",
-        "description": "A directory where the Cypress project will be placed. Added at root by default."
+        "description": "A directory where the Cypress project will be placed. Added at root by default.",
+        "x-deprecated": "Please use Storybook Interaction Testing instead."
       },
       "linter": {
         "description": "The tool to use for running lint checks.",
@@ -56,10 +63,6 @@
         "description": "Add a static-storybook to serve the static storybook built files.",
         "default": false
       },
-      "configureTestRunner": {
-        "type": "boolean",
-        "description": "Add a Storybook Test-Runner target."
-      },
       "bundler": {
         "description": "The Storybook builder to use.",
         "type": "string",

diff --git a/e2e/storybook/src/storybook-nested.test.ts b/e2e/storybook/src/storybook-nested.test.ts
@@ -40,8 +40,8 @@ describe('Storybook generators and executors for standalone workspaces - using R
   describe('Storybook generated files', () => {
     it('should generate storybook files', () => {
       checkFilesExist(
-        '.storybook/main.js',
-        '.storybook/preview.js',
+        '.storybook/main.ts',
+        '.storybook/preview.ts',
         'tsconfig.storybook.json'
       );
     });

diff --git a/...es/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts b/...es/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts
@@ -14,7 +14,7 @@ export async function generateStorybookConfiguration(
     linter: options.linter,
     cypressDirectory: options.cypressDirectory,
     tsConfiguration: options.tsConfiguration,
-    configureTestRunner: options.configureTestRunner,
+    interactionTests: options.interactionTests,
     configureStaticServe: options.configureStaticServe,
     skipFormat: true,
   });

diff --git a/packages/angular/src/generators/storybook-configuration/schema.d.ts b/packages/angular/src/generators/storybook-configuration/schema.d.ts
@@ -11,5 +11,5 @@ export interface StorybookConfigurationOptions {
   tsConfiguration?: boolean;
   skipFormat?: boolean;
   ignorePaths?: string[];
-  configureTestRunner?: boolean;
+  interactionTests?: boolean;
 }
diff --git a/packages/angular/src/generators/storybook-configuration/schema.json b/packages/angular/src/generators/storybook-configuration/schema.json
@@ -18,12 +18,18 @@
       "x-dropdown": "projects",
       "x-priority": "important"
     },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "x-prompt": "Do you want to set up Storybook Interaction Tests?",
+      "alias": ["configureTestRunner"],
+      "x-priority": "important",
+      "default": true
+    },
     "configureCypress": {
       "type": "boolean",
       "description": "Specifies whether to configure Cypress or not.",
-      "x-prompt": "Configure a Cypress e2e app to run against the storybook instance?",
-      "default": true,
-      "x-priority": "important"
+      "x-deprecated": "Please use Storybook Interaction Testing instead."
     },
     "generateStories": {
       "type": "boolean",
@@ -35,9 +41,7 @@
     "generateCypressSpecs": {
       "type": "boolean",
       "description": "Specifies whether to automatically generate test files in the generated Cypress e2e app.",
-      "x-prompt": "Automatically generate test files in the generated Cypress e2e app?",
-      "default": true,
-      "x-priority": "important"
+      "x-deprecated": "Please use Storybook Interaction Testing instead."
     },
     "configureStaticServe": {
       "type": "boolean",
@@ -48,7 +52,8 @@
     },
     "cypressDirectory": {
       "type": "string",
-      "description": "A directory where the Cypress project will be placed. Placed at the root by default."
+      "description": "A directory where the Cypress project will be placed. Placed at the root by default.",
+      "x-deprecated": "Please use Storybook Interaction Testing instead."
     },
     "linter": {
       "description": "The tool to use for running lint checks.",
@@ -59,7 +64,7 @@
     "tsConfiguration": {
       "type": "boolean",
       "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
-      "default": false,
+      "default": true,
       "x-priority": "important"
     },
     "skipFormat": {
@@ -82,10 +87,6 @@
         "**/**/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."
     }
   },
   "additionalProperties": false,

diff --git a/packages/react-native/src/generators/storybook-configuration/schema.json b/packages/react-native/src/generators/storybook-configuration/schema.json
@@ -32,7 +32,7 @@
     "tsConfiguration": {
       "type": "boolean",
       "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
-      "default": false
+      "default": true
     },
     "linter": {
       "description": "The tool to use for running lint checks.",

diff --git a/packages/react/src/generators/storybook-configuration/configuration.ts b/packages/react/src/generators/storybook-configuration/configuration.ts
@@ -10,6 +10,7 @@ import {
 import { nxVersion } from '../../utils/versions';
 
 async function generateStories(host: Tree, schema: StorybookConfigureSchema) {
+  // TODO(katerina): Remove cypress stuff for Nx 17?
   ensurePackage('@nx/cypress', nxVersion);
   const { getE2eProjectName } = await import(
     '@nx/cypress/src/utils/project-name'
@@ -57,7 +58,7 @@ export async function storybookConfigurationGenerator(
     linter: schema.linter,
     cypressDirectory: schema.cypressDirectory,
     tsConfiguration: schema.tsConfiguration,
-    configureTestRunner: schema.configureTestRunner,
+    interactionTests: schema.interactionTests,
     configureStaticServe: schema.configureStaticServe,
     uiFramework:
       bundler === 'vite'

diff --git a/packages/react/src/generators/storybook-configuration/schema.d.ts b/packages/react/src/generators/storybook-configuration/schema.d.ts
@@ -10,6 +10,6 @@ export interface StorybookConfigureSchema {
   linter?: Linter;
   cypressDirectory?: string;
   ignorePaths?: string[];
-  configureTestRunner?: boolean;
+  interactionTests?: boolean;
   configureStaticServe?: boolean;
 }
diff --git a/packages/react/src/generators/storybook-configuration/schema.json b/packages/react/src/generators/storybook-configuration/schema.json
@@ -18,12 +18,18 @@
       "x-dropdown": "projects",
       "x-priority": "important"
     },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "x-prompt": "Do you want to set up Storybook Interaction Tests?",
+      "x-priority": "important",
+      "alias": ["configureTestRunner"],
+      "default": true
+    },
     "configureCypress": {
       "type": "boolean",
       "description": "Run the cypress-configure generator.",
-      "x-prompt": "Configure a cypress e2e app to run against the storybook instance?",
-      "default": true,
-      "x-priority": "important"
+      "x-deprecated": "Please use Storybook Interaction Testing instead."
     },
     "generateStories": {
       "type": "boolean",
@@ -35,9 +41,7 @@
     "generateCypressSpecs": {
       "type": "boolean",
       "description": "Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator.",
-      "x-prompt": "Automatically generate test files in the Cypress E2E app generated by the cypress-configure generator?",
-      "default": true,
-      "x-priority": "important"
+      "x-deprecated": "Please use Storybook Interaction Testing instead."
     },
     "configureStaticServe": {
       "type": "boolean",
@@ -48,7 +52,8 @@
     },
     "cypressDirectory": {
       "type": "string",
-      "description": "A directory where the Cypress project will be placed. Placed at the root by default."
+      "description": "A directory where the Cypress project will be placed. Placed at the root by default.",
+      "x-deprecated": "Please use Storybook Interaction Testing instead."
     },
     "js": {
       "type": "boolean",
@@ -58,7 +63,7 @@
     "tsConfiguration": {
       "type": "boolean",
       "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
-      "default": false
+      "default": true
     },
     "linter": {
       "description": "The tool to use for running lint checks.",
@@ -80,10 +85,6 @@
         "**/**/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."
     }
   },
   "required": ["name"],

diff --git a/...es/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap b/...es/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`@nx/storybook:configuration for workspaces with Root project basic func
 
 const config: StorybookConfig = {
   stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: ['@storybook/addon-essentials'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {
@@ -66,7 +66,11 @@ exports[`@nx/storybook:configuration for workspaces with Root project basic func
 
 const config: StorybookConfig = {
   stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: ['@storybook/addon-essentials', '@nx/react/plugins/storybook'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@nx/react/plugins/storybook',
+  ],
   framework: {
     name: '@storybook/react-webpack5',
     options: {},