chore(storybook): refactor e2e tests (#10811)

.circleci/config.yml

@@ -191,7 +191,7 @@ jobs:
       - run:
           name: Run E2E Tests
           command: |
-            npx nx affected --target=e2e --base=$NX_BASE --head=$NX_HEAD --exclude=e2e-storybook,e2e-react-native,e2e-detox --parallel=1
+            npx nx affected --target=e2e --base=$NX_BASE --head=$NX_HEAD --exclude=e2e-storybook,e2e-storybook-angular,e2e-react-native,e2e-detox --parallel=1
           no_output_timeout: 45m
       - run:
           name: Stop All Running Agents for This CI Run
@@ -217,7 +217,7 @@ jobs:
       - run:
           name: Run E2E Tests
           command: |
-            npx nx affected --target=e2e --base=$NX_BASE --head=$NX_HEAD --exclude=e2e-detox,e2e-js,e2e-next,e2e-workspace-create,e2e-nx-misc,e2e-react,e2e-web,e2e-angular-extensions,e2e-angular-core,e2e-nx-plugin,e2e-cypress,e2e-node,e2e-linter,e2e-jest,e2e-add-nx-to-monorepo,nx-dev-e2e,e2e-nx-init --parallel=1
+            npx nx affected --target=e2e --base=$NX_BASE --head=$NX_HEAD --exclude=e2e-detox,e2e-js,e2e-next,e2e-workspace-create,e2e-nx-run,e2e-nx-misc,e2e-react,e2e-web,e2e-angular-extensions,e2e-angular-core,e2e-nx-plugin,e2e-cypress,e2e-node,e2e-linter,e2e-jest,e2e-add-nx-to-monorepo,nx-dev-e2e,e2e-nx-init --parallel=1
           no_output_timeout: 45m
       - run:
           name: Stop All Running Agents for This CI Run

.github/workflows/e2e-matrix.yml

@@ -40,6 +40,7 @@ jobs:
           - e2e-node
           - e2e-web
           - e2e-storybook
+          - e2e-storybook-angular
           - e2e-workspace-create
           - e2e-react-native
           # - e2e-detox
@@ -71,7 +72,7 @@ jobs:
           - os: macos-latest
             packages: e2e-web
           - os: macos-latest
-            packages: e2e-storybook
+            packages: e2e-storybook,e2e-storybook-angular
           - os: macos-latest
             packages: e2e-workspace-create
           - os: macos-latest

.github/workflows/e2e-windows.yml

@@ -27,7 +27,7 @@ jobs:
           - e2e-next
           - e2e-node
           - e2e-web
-          - e2e-storybook
+          - e2e-storybook,e2e-storybook-angular
           - e2e-workspace-create
           - e2e-add-nx-to-monorepo
       fail-fast: false

e2e/storybook-angular/jest.config.ts

@@ -0,0 +1,10 @@
+export default {
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  maxWorkers: 1,
+  globals: { 'ts-jest': { tsconfig: '<rootDir>/tsconfig.spec.json' } },
+  displayName: 'e2e-storybook-angular',
+  preset: '../../jest.preset.js',
+};

e2e/storybook-angular/project.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "e2e/storybook-angular",
+  "projectType": "application",
+  "targets": {
+    "e2e": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "yarn e2e-start-local-registry"
+          },
+          {
+            "command": "yarn e2e-build-package-publish"
+          },
+          {
+            "command": "nx run-e2e-tests e2e-storybook-angular"
+          }
+        ],
+        "parallel": false
+      }
+    },
+    "run-e2e-tests": {
+      "executor": "@nrwl/jest:jest",
+      "options": {
+        "jestConfig": "e2e/storybook/jest.config.ts",
+        "passWithNoTests": true,
+        "runInBand": true
+      },
+      "outputs": ["coverage/e2e/storybook-angular"]
+    }
+  },
+  "implicitDependencies": ["storybook"]
+}

e2e/storybook-angular/src/storybook-angular.test.ts

@@ -57,6 +57,16 @@ describe('Storybook for Angular', () => {
   });
 
   describe('build storybook', () => {
+    let angularStorybookLib;
+
+    beforeAll(() => {
+      angularStorybookLib = uniq('test-ui-lib');
+      createTestUILib(angularStorybookLib);
+      runCLI(
+        `generate @nrwl/angular:storybook-configuration ${angularStorybookLib} --generateStories --no-interactive`
+      );
+    });
+
     xit('should execute e2e tests using Cypress running against Storybook', async () => {
       if (isNotWindows()) {
         const myapp = uniq('myapp');
@@ -193,25 +203,7 @@ describe('Storybook for Angular', () => {
       }
     }, 1000000);
 
-    it('should build an Angular based storybook', () => {
-      const angularStorybookLib = uniq('test-ui-lib');
-      createTestUILib(angularStorybookLib);
-      runCLI(
-        `generate @nrwl/angular:storybook-configuration ${angularStorybookLib} --generateStories --no-interactive`
-      );
-
-      // build Angular lib
-      runCLI(`run ${angularStorybookLib}:build-storybook`);
-      checkFilesExist(`dist/storybook/${angularStorybookLib}/index.html`);
-    }, 1000000);
-
     it('should build an Angular based storybook that references another lib', () => {
-      const angularStorybookLib = uniq('test-ui-lib');
-      createTestUILib(angularStorybookLib);
-      runCLI(
-        `generate @nrwl/angular:storybook-configuration ${angularStorybookLib} --generateStories --no-interactive`
-      );
-
       // create another lib with a component
       const anotherTestLib = uniq('test-another-lib');
       runCLI(

e2e/storybook-angular/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node", "jest"]
+  },
+  "include": [],
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

e2e/storybook-angular/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "**/*.d.ts",
+    "jest.config.ts"
+  ]
+}

e2e/storybook/src/storybook.test.ts

@@ -47,12 +47,12 @@ describe('Storybook schematics', () => {
   });
 
   describe('build storybook', () => {
-    it('should build a React based storybook', () => {
+    it('should build and lint a React based storybook', () => {
+      // build
       runCLI(`run ${reactStorybookLib}:build-storybook --verbose`);
       checkFilesExist(`dist/storybook/${reactStorybookLib}/index.html`);
-    }, 1000000);
 
-    it('should lint a React based storybook without errors', () => {
+      // lint
       const output = runCLI(`run ${reactStorybookLib}:lint`);
       expect(output).toContain('All files pass linting.');
     }, 1000000);
@@ -118,50 +118,3 @@ describe('Storybook schematics', () => {
     }, 1000000);
   });
 });
-
-export function createTestUILib(libName: string): void {
-  runCLI(`g @nrwl/angular:library ${libName} --no-interactive`);
-  runCLI(
-    `g @nrwl/angular:component test-button --project=${libName} --no-interactive`
-  );
-
-  writeFileSync(
-    tmpProjPath(`libs/${libName}/src/lib/test-button/test-button.component.ts`),
-    `
-      import { Component, OnInit, Input } from '@angular/core';
-
-      export type ButtonStyle = 'default' | 'primary' | 'accent';
-
-      @Component({
-        selector: 'proj-test-button',
-        templateUrl: './test-button.component.html',
-        styleUrls: ['./test-button.component.css']
-      })
-      export class TestButtonComponent implements OnInit {
-        @Input('buttonType') type = 'button';
-        @Input() style: ButtonStyle = 'default';
-        @Input() age: number;
-        @Input() isDisabled = false;
-
-        constructor() { }
-
-        ngOnInit() {
-        }
-
-      }
-      `
-  );
-
-  writeFileSync(
-    tmpProjPath(
-      `libs/${libName}/src/lib/test-button/test-button.component.html`
-    ),
-    `
-    <button [disabled]="isDisabled" [attr.type]="type" [ngClass]="style">Click me</button>
-    <p>You are {{age}} years old.</p>
-    `
-  );
-  runCLI(
-    `g @nrwl/angular:component test-other --project=${libName} --no-interactive`
-  );
-}

workspace.json

@@ -30,6 +30,7 @@
     "e2e-react": "e2e/react",
     "e2e-react-native": "e2e/react-native",
     "e2e-storybook": "e2e/storybook",
+    "e2e-storybook-angular": "e2e/storybook-angular",
     "e2e-utils": "e2e/utils",
     "e2e-web": "e2e/web",
     "e2e-workspace-create": "e2e/workspace-create",