miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Colum Ferry 2022-06-20 16:21:12 +01:00 committed by GitHub
parent fd98c505e0
commit 1e6b19b5c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 96 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.circleci/config.yml
View File

@ -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

3
.github/workflows/e2e-matrix.yml vendored
View File

@ -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

2
.github/workflows/e2e-windows.yml vendored
View File

@ -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

10
e2e/storybook-angular/jest.config.ts Normal file
View File

@ -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',
};

34
e2e/storybook-angular/project.json Normal file
View File

@ -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"]
}

28
e2e/storybook/src/storybook-angular.test.ts → e2e/storybook-angular/src/storybook-angular.test.ts
View File

@ -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(

13
e2e/storybook-angular/tsconfig.json Normal file
View File

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

20
e2e/storybook-angular/tsconfig.spec.json Normal file
View File

@ -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"
]
}

53
e2e/storybook/src/storybook.test.ts
View File

@ -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`
);
}

1
workspace.json
View File

@ -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",