feat(storybook): updated tests and snapshots

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

@@ -507,12 +507,13 @@ describe('react:component-story', () => {
     });
   });
 
-  describe('using eslint', () => {
+  describe('using eslint - not using interaction tests', () => {
     beforeEach(async () => {
       appTree = await createTestUILib('test-ui-lib');
       await componentStoryGenerator(appTree, {
         componentPath: 'lib/test-ui-lib.tsx',
         project: 'test-ui-lib',
+        interactionTests: false,
       });
     });
 

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

@@ -116,9 +116,10 @@ export function findPropsAndGenerateFile(
 
   generateFiles(
     host,
-    joinPathFragments(__dirname, `${'./files' + isPlainJs ? '/jsx' : '/tsx'}`),
+    joinPathFragments(__dirname, `./files${isPlainJs ? '/jsx' : '/tsx'}`),
     normalizePath(componentDirectory),
     {
+      tmpl: '',
       componentFileName: fromNodeArray
         ? `${name}--${(cmpDeclaration as any).name.text}`
         : name,
@@ -136,7 +137,10 @@ export async function componentStoryGenerator(
   host: Tree,
   schema: CreateComponentStoriesFileSchema
 ) {
-  createComponentStoriesFile(host, schema);
+  createComponentStoriesFile(host, {
+    ...schema,
+    interactionTests: schema.interactionTests ?? true,
+  });
 
   if (!schema.skipFormat) {
     await formatFiles(host);

packages/react/src/generators/stories/__snapshots__/stories.app.spec.ts.snap

@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react:stories for applications should create the stories with interaction tests 1`] = `
+"import type { Meta, StoryObj } from '@storybook/react';
+import { NxWelcome } from './nx-welcome';
+
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+const meta: Meta<typeof NxWelcome> = {
+  component: NxWelcome,
+  title: 'NxWelcome',
+};
+export default meta;
+type Story = StoryObj<typeof NxWelcome>;
+
+export const Primary = {
+  args: {},
+};
+
+export const Heading: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to NxWelcome!/gi)).toBeTruthy();
+  },
+};
+"
+`;
+
+exports[`react:stories for applications should create the stories with interaction tests 2`] = `
+"import type { Meta, StoryObj } from '@storybook/react';
+import { Test } from './another-cmp';
+
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+const meta: Meta<typeof Test> = {
+  component: Test,
+  title: 'Test',
+};
+export default meta;
+type Story = StoryObj<typeof Test>;
+
+export const Primary = {
+  args: {
+    name: '',
+    displayAge: false,
+  },
+};
+
+export const Heading: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy();
+  },
+};
+"
+`;
+
+exports[`react:stories for applications should create the stories without interaction tests 1`] = `
+"import type { Meta, StoryObj } from '@storybook/react';
+import { NxWelcome } from './nx-welcome';
+
+const meta: Meta<typeof NxWelcome> = {
+  component: NxWelcome,
+  title: 'NxWelcome',
+};
+export default meta;
+type Story = StoryObj<typeof NxWelcome>;
+
+export const Primary = {
+  args: {},
+};
+"
+`;
+
+exports[`react:stories for applications should create the stories without interaction tests 2`] = `
+"import type { Meta, StoryObj } from '@storybook/react';
+import { Test } from './another-cmp';
+
+const meta: Meta<typeof Test> = {
+  component: Test,
+  title: 'Test',
+};
+export default meta;
+type Story = StoryObj<typeof Test>;
+
+export const Primary = {
+  args: {
+    name: '',
+    displayAge: false,
+  },
+};
+"
+`;
+
+exports[`react:stories for applications should not update existing stories 1`] = `
+"import { ComponentStory, ComponentMeta } from '@storybook/react';
+"
+`;

packages/react/src/generators/stories/__snapshots__/stories.lib.spec.ts.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react:stories for libraries should create the stories with interaction tests 1`] = `
+"import type { Meta, StoryObj } from '@storybook/react';
+import { TestUiLib } from './test-ui-lib';
+
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+const meta: Meta<typeof TestUiLib> = {
+  component: TestUiLib,
+  title: 'TestUiLib',
+};
+export default meta;
+type Story = StoryObj<typeof TestUiLib>;
+
+export const Primary = {
+  args: {},
+};
+
+export const Heading: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to TestUiLib!/gi)).toBeTruthy();
+  },
+};
+"
+`;
+
+exports[`react:stories for libraries should create the stories with interaction tests 2`] = `
+"import type { Meta, StoryObj } from '@storybook/react';
+import { Test } from './another-cmp';
+
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+const meta: Meta<typeof Test> = {
+  component: Test,
+  title: 'Test',
+};
+export default meta;
+type Story = StoryObj<typeof Test>;
+
+export const Primary = {
+  args: {
+    name: '',
+    displayAge: false,
+  },
+};
+
+export const Heading: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to Test!/gi)).toBeTruthy();
+  },
+};
+"
+`;
+
+exports[`react:stories for libraries should create the stories without interaction tests 1`] = `
+"import type { Meta, StoryObj } from '@storybook/react';
+import { TestUiLib } from './test-ui-lib';
+
+const meta: Meta<typeof TestUiLib> = {
+  component: TestUiLib,
+  title: 'TestUiLib',
+};
+export default meta;
+type Story = StoryObj<typeof TestUiLib>;
+
+export const Primary = {
+  args: {},
+};
+"
+`;
+
+exports[`react:stories for libraries should create the stories without interaction tests 2`] = `
+"import type { Meta, StoryObj } from '@storybook/react';
+import { Test } from './another-cmp';
+
+const meta: Meta<typeof Test> = {
+  component: Test,
+  title: 'Test',
+};
+export default meta;
+type Story = StoryObj<typeof Test>;
+
+export const Primary = {
+  args: {
+    name: '',
+    displayAge: false,
+  },
+};
+"
+`;

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

@@ -41,34 +41,37 @@ describe('react:stories for applications', () => {
     );
   });
 
-  it('should create the stories', async () => {
+  it('should create the stories with interaction tests', async () => {
     await storiesGenerator(appTree, {
       project: 'test-ui-app',
     });
 
     expect(
-      appTree.exists('apps/test-ui-app/src/app/nx-welcome.stories.tsx')
-    ).toBeTruthy();
+      appTree.read('apps/test-ui-app/src/app/nx-welcome.stories.tsx', 'utf-8')
+    ).toMatchSnapshot();
     expect(
-      appTree.exists(
-        'apps/test-ui-app/src/app/anothercmp/another-cmp.stories.tsx'
+      appTree.read(
+        'apps/test-ui-app/src/app/anothercmp/another-cmp.stories.tsx',
+        'utf-8'
       )
-    ).toBeTruthy();
+    ).toMatchSnapshot();
   });
 
-  it('should generate Cypress specs', async () => {
+  it('should create the stories without interaction tests', async () => {
     await storiesGenerator(appTree, {
       project: 'test-ui-app',
+      interactionTests: false,
     });
 
     expect(
-      appTree.exists('apps/test-ui-app-e2e/src/e2e/app.cy.ts')
-    ).toBeTruthy();
+      appTree.read('apps/test-ui-app/src/app/nx-welcome.stories.tsx', 'utf-8')
+    ).toMatchSnapshot();
     expect(
-      appTree.exists(
-        'apps/test-ui-app-e2e/src/e2e/another-cmp/another-cmp.cy.ts'
+      appTree.read(
+        'apps/test-ui-app/src/app/anothercmp/another-cmp.stories.tsx',
+        'utf-8'
       )
-    ).toBeTruthy();
+    ).toMatchSnapshot();
   });
 
   it('should ignore files that do not contain components', async () => {
@@ -90,23 +93,18 @@ describe('react:stories for applications', () => {
   });
 
   it('should not update existing stories', async () => {
-    // ARRANGE
     appTree.write(
       'apps/test-ui-app/src/app/nx-welcome.stories.tsx',
       `import { ComponentStory, ComponentMeta } from '@storybook/react'`
     );
 
-    // ACT
     await storiesGenerator(appTree, {
       project: 'test-ui-app',
     });
 
-    // ASSERT
     expect(
       appTree.read('apps/test-ui-app/src/app/nx-welcome.stories.tsx', 'utf-8')
-    ).toEqual(
-      `import { ComponentStory, ComponentMeta } from '@storybook/react';\n`
-    );
+    ).toMatchSnapshot();
   });
 
   describe('ignore paths', () => {

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

@@ -36,40 +36,38 @@ describe('react:stories for libraries', () => {
     );
   });
 
-  it('should create the stories', async () => {
+  it('should create the stories with interaction tests', async () => {
     await storiesGenerator(appTree, {
       project: 'test-ui-lib',
     });
 
     expect(
-      appTree.exists('libs/test-ui-lib/src/lib/test-ui-lib.stories.tsx')
-    ).toBeTruthy();
+      appTree.read('libs/test-ui-lib/src/lib/test-ui-lib.stories.tsx', 'utf-8')
+    ).toMatchSnapshot();
     expect(
-      appTree.exists(
-        'libs/test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx'
+      appTree.read(
+        'libs/test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx',
+        'utf-8'
       )
-    ).toBeTruthy();
+    ).toMatchSnapshot();
   });
 
-  it('should generate Cypress specs', async () => {
+  it('should create the stories without interaction tests', async () => {
     await storiesGenerator(appTree, {
       project: 'test-ui-lib',
+      interactionTests: false,
     });
-
     expect(
-      appTree.exists(
-        'apps/test-ui-lib-e2e/src/integration/test-ui-lib/test-ui-lib.spec.ts'
-      )
-    ).toBeTruthy();
+      appTree.read('libs/test-ui-lib/src/lib/test-ui-lib.stories.tsx', 'utf-8')
+    ).toMatchSnapshot();
     expect(
-      appTree.exists(
-        'apps/test-ui-lib-e2e/src/integration/another-cmp/another-cmp.spec.ts'
+      appTree.read(
+        'libs/test-ui-lib/src/lib/anothercmp/another-cmp.stories.tsx',
+        'utf-8'
       )
-    ).toBeTruthy();
+    ).toMatchSnapshot();
   });
 
-  it('should not overwrite existing stories', () => {});
-
   describe('ignore paths', () => {
     beforeEach(() => {
       appTree.write(

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

@@ -32,7 +32,7 @@ describe('nextjs:stories for applications', () => {
     );
   });
 
-  it('should create the stories', async () => {
+  it('should create the stories with interaction tests', async () => {
     await storiesGenerator(tree, {
       project: 'test-ui-app',
     });
@@ -42,6 +42,17 @@ describe('nextjs:stories for applications', () => {
     ).toBeTruthy();
   });
 
+  it('should create the stories without interaction tests', async () => {
+    await storiesGenerator(tree, {
+      project: 'test-ui-app',
+      interactionTests: false,
+    });
+
+    expect(
+      tree.exists('apps/test-ui-app/components/test.stories.tsx')
+    ).toBeTruthy();
+  });
+
   it('should ignore paths', async () => {
     await storiesGenerator(tree, {
       project: 'test-ui-app',