diff --git a/.circleci/config.yml b/.circleci/config.yml index 14f7c7574b..907a0a3d78 100644 --- a/.circleci/config.yml +++ b/.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 diff --git a/.github/workflows/e2e-matrix.yml b/.github/workflows/e2e-matrix.yml index b8980a5463..267fc84069 100644 --- a/.github/workflows/e2e-matrix.yml +++ b/.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 diff --git a/.github/workflows/e2e-windows.yml b/.github/workflows/e2e-windows.yml index c777b8faae..8e1cd783cc 100644 --- a/.github/workflows/e2e-windows.yml +++ b/.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 diff --git a/e2e/storybook-angular/jest.config.ts b/e2e/storybook-angular/jest.config.ts new file mode 100644 index 0000000000..f29da5f0b7 --- /dev/null +++ b/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: '/tsconfig.spec.json' } }, + displayName: 'e2e-storybook-angular', + preset: '../../jest.preset.js', +}; diff --git a/e2e/storybook-angular/project.json b/e2e/storybook-angular/project.json new file mode 100644 index 0000000000..345482e1e5 --- /dev/null +++ b/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"] +} diff --git a/e2e/storybook/src/storybook-angular.test.ts b/e2e/storybook-angular/src/storybook-angular.test.ts similarity index 94% rename from e2e/storybook/src/storybook-angular.test.ts rename to e2e/storybook-angular/src/storybook-angular.test.ts index 80ae62f4cb..95535ddd50 100644 --- a/e2e/storybook/src/storybook-angular.test.ts +++ b/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( diff --git a/e2e/storybook-angular/tsconfig.json b/e2e/storybook-angular/tsconfig.json new file mode 100644 index 0000000000..6d5abf8483 --- /dev/null +++ b/e2e/storybook-angular/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "types": ["node", "jest"] + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/e2e/storybook-angular/tsconfig.spec.json b/e2e/storybook-angular/tsconfig.spec.json new file mode 100644 index 0000000000..1a24bfb0a1 --- /dev/null +++ b/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" + ] +} diff --git a/e2e/storybook/src/storybook.test.ts b/e2e/storybook/src/storybook.test.ts index ac8df4b315..7ddf3a70d5 100644 --- a/e2e/storybook/src/storybook.test.ts +++ b/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` - ), - ` - -

You are {{age}} years old.

- ` - ); - runCLI( - `g @nrwl/angular:component test-other --project=${libName} --no-interactive` - ); -} diff --git a/workspace.json b/workspace.json index 8b5cffcf02..3b78799075 100644 --- a/workspace.json +++ b/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",