feat(storybook): interaction testing story generator React

docs/generated/packages/react/generators/component-story.json

@@ -30,6 +30,12 @@
         "type": "boolean",
         "default": false,
         "x-priority": "internal"
+      },
+      "interactionTests": {
+        "type": "boolean",
+        "description": "Set up Storybook interaction tests.",
+        "default": true,
+        "x-priority": "important"
       }
     },
     "required": ["project", "componentPath"],

docs/generated/packages/react/generators/stories.json

@@ -20,12 +20,19 @@
       "generateCypressSpecs": {
         "type": "boolean",
         "description": "Automatically generate `*.spec.ts` files in the cypress e2e app generated by the cypress-configure generator.",
-        "x-prompt": "Do you want to generate Cypress specs as well?",
-        "x-priority": "important"
+        "x-deprecated": "Please use Storybook Interaction Testing instead."
       },
       "cypressProject": {
         "type": "string",
-        "description": "The Cypress project to generate the stories under. This is inferred from `project` by default."
+        "description": "The Cypress project to generate the stories under. This is inferred from `project` by default.",
+        "x-deprecated": "Please use Storybook Interaction Testing instead."
+      },
+      "interactionTests": {
+        "type": "boolean",
+        "description": "Set up Storybook interaction tests.",
+        "x-prompt": "Do you want to set up Storybook Interaction Tests?",
+        "x-priority": "important",
+        "default": true
       },
       "js": {
         "type": "boolean",

packages/react/src/generators/component-story/component-story.spec.ts

@@ -27,6 +27,7 @@ describe('react:component-story', () => {
           await componentStoryGenerator(appTree, {
             componentPath: 'lib/test-ui-lib.tsx',
             project: 'test-ui-lib',
+            interactionTests: true,
           });
         } catch (e) {
           expect(e.message).toContain(

packages/react/src/generators/component-story/component-story.ts

@@ -20,12 +20,13 @@ let tsModule: typeof import('typescript');
 export interface CreateComponentStoriesFileSchema {
   project: string;
   componentPath: string;
+  interactionTests?: boolean;
   skipFormat?: boolean;
 }
 
 export function createComponentStoriesFile(
   host: Tree,
-  { project, componentPath }: CreateComponentStoriesFileSchema
+  { project, componentPath, interactionTests }: CreateComponentStoriesFileSchema
 ) {
   if (!tsModule) {
     tsModule = ensureTypescript();
@@ -42,12 +43,6 @@ export function createComponentStoriesFile(
 
   const isPlainJs =
     componentFilePath.endsWith('.jsx') || componentFilePath.endsWith('.js');
-  let fileExt = 'tsx';
-  if (componentFilePath.endsWith('.jsx')) {
-    fileExt = 'jsx';
-  } else if (componentFilePath.endsWith('.js')) {
-    fileExt = 'js';
-  }
 
   const componentFileName = componentFilePath
     .slice(componentFilePath.lastIndexOf('/') + 1)
@@ -81,8 +76,8 @@ export function createComponentStoriesFile(
           declaration,
           componentDirectory,
           name,
+          interactionTests,
           isPlainJs,
-          fileExt,
           componentNodes.length > 1
         );
       });
@@ -98,8 +93,8 @@ export function createComponentStoriesFile(
       cmpDeclaration,
       componentDirectory,
       name,
-      isPlainJs,
-      fileExt
+      interactionTests,
+      isPlainJs
     );
   }
 }
@@ -110,8 +105,8 @@ export function findPropsAndGenerateFile(
   cmpDeclaration: ts.Node,
   componentDirectory: string,
   name: string,
+  interactionTests: boolean,
   isPlainJs: boolean,
-  fileExt: string,
   fromNodeArray?: boolean
 ) {
   const { propsTypeName, props, argTypes } = getDefaultsForComponent(
@@ -121,7 +116,7 @@ export function findPropsAndGenerateFile(
 
   generateFiles(
     host,
-    joinPathFragments(__dirname, './files'),
+    joinPathFragments(__dirname, `${'./files' + isPlainJs ? '/jsx' : '/tsx'}`),
     normalizePath(componentDirectory),
     {
       componentFileName: fromNodeArray
@@ -132,8 +127,7 @@ export function findPropsAndGenerateFile(
       props,
       argTypes,
       componentName: (cmpDeclaration as any).name.text,
-      isPlainJs,
-      fileExt,
+      interactionTests,
     }
   );
 }

packages/react/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__

@@ -0,0 +1,29 @@
+import componentName from './<%= componentImportFileName %>';
+<% if ( interactionTests ) { %>
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+<% } %>
+
+export default {
+  component: <%= componentName %>,
+  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
+  argTypes: {<% for (let argType of argTypes) { %>
+    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
+}
+   <% } %> 
+};
+
+export const Primary = {
+  args: {<% for (let prop of props) { %>
+    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+  },
+};
+
+<% if ( interactionTests ) { %>
+export const Heading: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy();
+  },
+};
+<% } %>

packages/react/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { <%= componentName %>  } from './<%= componentImportFileName %>';
+<% if ( interactionTests ) { %>
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+<% } %>
+
+const meta: Meta<typeof <%= componentName %>> = {
+  component: <%= componentName %>,
+  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
+  argTypes: {<% for (let argType of argTypes) { %>
+    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
+}
+   <% } %> 
+};
+export default meta;
+type Story = StoryObj<typeof <%= componentName %>>;
+
+
+export const Primary = {
+  args: {<% for (let prop of props) { %>
+    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+  },
+};
+
+<% if ( interactionTests ) { %>
+export const Heading: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy();
+  },
+};
+<% } %>

packages/react/src/generators/component-story/schema.json

@@ -30,6 +30,12 @@
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
+    },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "default": true,
+      "x-priority": "important"
     }
   },
   "required": ["project", "componentPath"]

packages/react/src/generators/stories/schema.json

@@ -20,12 +20,19 @@
     "generateCypressSpecs": {
       "type": "boolean",
       "description": "Automatically generate `*.spec.ts` files in the cypress e2e app generated by the cypress-configure generator.",
-      "x-prompt": "Do you want to generate Cypress specs as well?",
-      "x-priority": "important"
+      "x-deprecated": "Please use Storybook Interaction Testing instead."
     },
     "cypressProject": {
       "type": "string",
-      "description": "The Cypress project to generate the stories under. This is inferred from `project` by default."
+      "description": "The Cypress project to generate the stories under. This is inferred from `project` by default.",
+      "x-deprecated": "Please use Storybook Interaction Testing instead."
+    },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "x-prompt": "Do you want to set up Storybook Interaction Tests?",
+      "x-priority": "important",
+      "default": true
     },
     "js": {
       "type": "boolean",

packages/react/src/generators/stories/stories.ts

@@ -22,9 +22,10 @@ let tsModule: typeof import('typescript');
 
 export interface StorybookStoriesSchema {
   project: string;
-  generateCypressSpecs: boolean;
+  interactionTests: boolean;
   js?: boolean;
   cypressProject?: string;
+  generateCypressSpecs?: boolean;
   ignorePaths?: string[];
   skipFormat?: boolean;
 }
@@ -84,8 +85,9 @@ export function containsComponentDeclaration(
 export async function createAllStories(
   tree: Tree,
   projectName: string,
-  generateCypressSpecs: boolean,
+  interactionTests: boolean,
   js: boolean,
+  generateCypressSpecs?: boolean,
   cypressProject?: string,
   ignorePaths?: string[]
 ) {
@@ -142,6 +144,7 @@ export async function createAllStories(
         componentPath: relativeCmpDir,
         project: projectName,
         skipFormat: true,
+        interactionTests,
       });
 
       if (generateCypressSpecs && e2eProject) {
@@ -164,8 +167,9 @@ export async function storiesGenerator(
   await createAllStories(
     host,
     schema.project,
-    schema.generateCypressSpecs,
+    schema.interactionTests,
     schema.js,
+    schema.generateCypressSpecs,
     schema.cypressProject,
     schema.ignorePaths
   );

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

@@ -29,6 +29,7 @@ async function generateStories(host: Tree, schema: StorybookConfigureSchema) {
     cypressProject,
     ignorePaths: schema.ignorePaths,
     skipFormat: true,
+    interactionTests: schema.interactionTests,
   });
 }