New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
build(dev-infra): setup basic e2e structure #410
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,3 +5,4 @@ StripStylesTransformer.js | |
TransformUtils.js | ||
*.log | ||
.idea | ||
*.tgz |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,33 @@ | ||
/example | ||
/src | ||
circle.yml | ||
# Tests | ||
e2e | ||
example | ||
|
||
# sources are inlined | ||
src | ||
|
||
# Developement scripts | ||
scripts | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
|
||
# Dependency directories | ||
node_modules | ||
|
||
# Editor config | ||
.vscode | ||
.idea | ||
.editorconfig | ||
|
||
# CI | ||
.circleci | ||
|
||
# Others | ||
*.tgz | ||
.npmignore | ||
.npmrc | ||
greenkeeper.json | ||
jest.config.js | ||
tsconfig.json | ||
.github | ||
.gitattributes |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
# E2E tests | ||
|
||
|
||
## Directory structure | ||
|
||
- `test-app-v10`: example app using Angular v10 with basic setup with `jest` and `jest-preset-angular`. | ||
- `test-app-v9`: example app using Angular v9 with basic setup with `jest` and `jest-preset-angular`. | ||
|
||
|
||
## Running tests | ||
|
||
You run the tests on example apps with `yarn test:e2e` (or `npm run test:e2e)`. In `scripts/lib/paths.js`, | ||
`projectsToRun` must be modified if a new project is added to `e2e`. | ||
|
||
What will happen in order is as following: | ||
|
||
1. A bundle (we'll call it `[bundle]`) will be created for `jest-preset-angular` using `npm pack` (`yarn pack` is buggy). | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'd suggest running from the source, to simplify setup. But running |
||
|
||
The `prepare` script will be run, so `clean` and `build` (that is why e2e tests are launched before the others, since it's building as part of the process) | ||
|
||
2. `npm ci` and `npm install --save-dev [bundle]` will be run in each project directory in `e2e` directory. | ||
3. each test suite in each example project are run according to `jest` config of that project. | ||
|
||
|
||
## Why | ||
|
||
E2E tests being in a temporary folder of the operating system ensure none of the parents would be containing `node_modules`. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't see any reference to creating a temporary dir in the code. I can only see There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If there's no Yarn workspace in the project now, I'd consider adding it later, after this PR is merged, because now with e2e it makes sense to use it There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ok let's do it in a separate PR to setup yarn workspace + jest "project" There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The issue is that we have different behavior of the preset for a Angular v9 and v10 App, so we want to test both. If we use yarn workspaces and only install the dependencies once, we should not be able to install different Angular versions. Correct me if I'm wrong. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ok actually I think this will work with yarn workspaces, but we will see in the follow-up PR. |
||
|
||
Having the test cases outside of `[jest-preset-angular]` project's root ensures it won't fallback the resolution of node modules within dev dependencies of `jest-preset-angular` itself. | ||
|
||
Not to mention that using `npm pack` ensure those tests cases have the same version of `jest-preset-angular` as the one we would publish on NPM. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. | ||
# For additional information regarding the format and rule options, please see: | ||
# https://github.com/browserslist/browserslist#queries | ||
|
||
# For the full list of supported browsers by the Angular framework, please see: | ||
# https://angular.io/guide/browser-support | ||
|
||
# You can see what browsers were selected by your queries by running: | ||
# npx browserslist | ||
|
||
last 1 Chrome version | ||
last 1 Firefox version | ||
last 2 Edge major versions | ||
last 2 Safari major versions | ||
last 2 iOS major versions | ||
Firefox ESR | ||
not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line. | ||
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
# Editor configuration, see https://editorconfig.org | ||
root = true | ||
|
||
[*] | ||
charset = utf-8 | ||
indent_style = space | ||
indent_size = 2 | ||
insert_final_newline = true | ||
trim_trailing_whitespace = true | ||
|
||
[*.ts] | ||
quote_type = single | ||
|
||
[*.md] | ||
max_line_length = off | ||
trim_trailing_whitespace = false |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
# See http://help.github.com/ignore-files/ for more about ignoring files. | ||
|
||
# compiled output | ||
/dist | ||
/tmp | ||
/out-tsc | ||
# Only exists if Bazel was run | ||
/bazel-out | ||
|
||
# dependencies | ||
/node_modules | ||
|
||
# profiling files | ||
chrome-profiler-events*.json | ||
speed-measure-plugin*.json | ||
|
||
# IDEs and editors | ||
/.idea | ||
.project | ||
.classpath | ||
.c9/ | ||
*.launch | ||
.settings/ | ||
*.sublime-workspace | ||
|
||
# IDE - VSCode | ||
.vscode/* | ||
!.vscode/settings.json | ||
!.vscode/tasks.json | ||
!.vscode/launch.json | ||
!.vscode/extensions.json | ||
.history/* | ||
|
||
# misc | ||
/.sass-cache | ||
/connect.lock | ||
/coverage | ||
/libpeerconnection.log | ||
npm-debug.log | ||
yarn-error.log | ||
testem.log | ||
/typings | ||
|
||
# System Files | ||
.DS_Store | ||
Thumbs.db |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
# TestAppV10 | ||
|
||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.2. | ||
|
||
## Development server | ||
|
||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. | ||
|
||
## Code scaffolding | ||
|
||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. | ||
|
||
## Build | ||
|
||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. | ||
|
||
## Running unit tests | ||
|
||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). | ||
|
||
## Running end-to-end tests | ||
|
||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). | ||
|
||
## Further help | ||
|
||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
{ | ||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", | ||
"version": 1, | ||
"newProjectRoot": "projects", | ||
"projects": { | ||
"test-app-v10": { | ||
"projectType": "application", | ||
"schematics": { | ||
"@schematics/angular:component": { | ||
"style": "scss" | ||
} | ||
}, | ||
"root": "", | ||
"sourceRoot": "src", | ||
"prefix": "app", | ||
"architect": { | ||
"build": { | ||
"builder": "@angular-devkit/build-angular:browser", | ||
"options": { | ||
"outputPath": "dist/test-app-v10", | ||
"index": "src/index.html", | ||
"main": "src/main.ts", | ||
"polyfills": "src/polyfills.ts", | ||
"tsConfig": "tsconfig.app.json", | ||
"aot": true, | ||
"assets": [ | ||
"src/favicon.ico", | ||
"src/assets" | ||
], | ||
"styles": [ | ||
"src/styles.scss" | ||
], | ||
"scripts": [] | ||
}, | ||
"configurations": { | ||
"production": { | ||
"fileReplacements": [ | ||
{ | ||
"replace": "src/environments/environment.ts", | ||
"with": "src/environments/environment.prod.ts" | ||
} | ||
], | ||
"optimization": true, | ||
"outputHashing": "all", | ||
"sourceMap": false, | ||
"extractCss": true, | ||
"namedChunks": false, | ||
"extractLicenses": true, | ||
"vendorChunk": false, | ||
"buildOptimizer": true, | ||
"budgets": [ | ||
{ | ||
"type": "initial", | ||
"maximumWarning": "2mb", | ||
"maximumError": "5mb" | ||
}, | ||
{ | ||
"type": "anyComponentStyle", | ||
"maximumWarning": "6kb", | ||
"maximumError": "10kb" | ||
} | ||
] | ||
} | ||
} | ||
}, | ||
"serve": { | ||
"builder": "@angular-devkit/build-angular:dev-server", | ||
"options": { | ||
"browserTarget": "test-app-v10:build" | ||
}, | ||
"configurations": { | ||
"production": { | ||
"browserTarget": "test-app-v10:build:production" | ||
} | ||
} | ||
}, | ||
"extract-i18n": { | ||
"builder": "@angular-devkit/build-angular:extract-i18n", | ||
"options": { | ||
"browserTarget": "test-app-v10:build" | ||
} | ||
}, | ||
"lint": { | ||
"builder": "@angular-devkit/build-angular:tslint", | ||
"options": { | ||
"tsConfig": [ | ||
"tsconfig.app.json", | ||
"tsconfig.spec.json" | ||
], | ||
"exclude": [ | ||
"**/node_modules/**" | ||
] | ||
} | ||
} | ||
} | ||
}}, | ||
"defaultProject": "test-app-v10" | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
Object.defineProperty(window, 'CSS', {value: null}); | ||
Object.defineProperty(document, 'doctype', { | ||
value: '<!DOCTYPE html>' | ||
}); | ||
Object.defineProperty(window, 'getComputedStyle', { | ||
value: () => { | ||
return { | ||
display: 'none', | ||
appearance: ['-webkit-appearance'] | ||
}; | ||
} | ||
}); | ||
/** | ||
* ISSUE: https://github.com/angular/material2/issues/7101 | ||
* Workaround for JSDOM missing transform property | ||
*/ | ||
Object.defineProperty(document.body.style, 'transform', { | ||
value: () => { | ||
return { | ||
enumerable: true, | ||
configurable: true, | ||
}; | ||
}, | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
/** @type {import('@jest/types').Config.InitialOptions} */ | ||
module.exports = { | ||
preset: 'jest-preset-angular', | ||
setupFilesAfterEnv: [ | ||
'<rootDir>/setup-jest.ts', | ||
], | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
{ | ||
"name": "test-app-v10", | ||
"version": "0.0.0", | ||
"scripts": { | ||
"ng": "ng", | ||
"start": "ng serve", | ||
"build": "ng build", | ||
"test": "jest", | ||
"lint": "ng lint" | ||
}, | ||
"private": true, | ||
"dependencies": { | ||
"@angular/animations": "~10.0.3", | ||
"@angular/common": "~10.0.3", | ||
"@angular/compiler": "~10.0.3", | ||
"@angular/core": "~10.0.3", | ||
"@angular/forms": "~10.0.3", | ||
"@angular/platform-browser": "~10.0.3", | ||
"@angular/platform-browser-dynamic": "~10.0.3", | ||
"@angular/router": "~10.0.3", | ||
"rxjs": "~6.5.5", | ||
"tslib": "^2.0.0", | ||
"zone.js": "~0.10.3" | ||
}, | ||
"devDependencies": { | ||
"@angular-devkit/build-angular": "~0.1000.2", | ||
"@angular/cli": "~10.0.2", | ||
"@angular/compiler-cli": "~10.0.3", | ||
"@types/jest": "^26.0.4", | ||
"@types/node": "^12.11.1", | ||
"codelyzer": "^6.0.0", | ||
"jest": "^26.1.0", | ||
"jest-preset-angular": "file:../../", | ||
"ts-node": "~8.3.0", | ||
"tslint": "~6.1.0", | ||
"typescript": "~3.9.5" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
import 'jest-preset-angular'; | ||
import './jest-global-mocks'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
could be determined automatically using
glob
package one2e/
directory. However, I'd much prefer using Jest's "projects" to facilitate e2e testing, which would get rid of custom sync tests running scriptThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
will do in a separate PR to setup yarn workspace and use jest "projects"