chore: Bump example project to Angular 8 (#311)

* remove e2e and linting from example project * make `core-js` a direct dependency instead of peer dependency * update configuration files as they are in a newly generated angular project
thymikee · Sep 28, 2019 · 24045bc · 24045bc
1 parent 03f14f2
commit 24045bc
Show file tree

Hide file tree

Showing 20 changed files with 2,449 additions and 1,930 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,15 +1,19 @@
 ## Changelog (master)
 
+#### Features
 * (**BREAKING**): Refine ast-transformer behavior: only transform `styles`-assignments inside @Component ([#261](https://github.com/thymikee/jest-preset-angular/pull/261)) and TypeScript v2.9 `createStringLiteral` is polyfilled if an older version is used ([#272](https://github.com/thymikee/jest-preset-angular/issues/272)).
-
 * (**BREAKING**): Restructure project with `src` and `build` folder ([#307](https://github.com/thymikee/jest-preset-angular/pull/307)). 
-
 * (**BREAKING**): Support `tsconfig.spec.json` in root folder by default ([#309](https://github.com/thymikee/jest-preset-angular/pull/309)). 
+* (**BREAKING**): Remove `core-js` peer dependency and instead add it as direct dependency ([#311](https://github.com/thymikee/jest-preset-angular/pull/309)). 
+
+#### Chore && Maintenance
+* Update example app to match Angular 8 Boilerplate ([#311](https://github.com/thymikee/jest-preset-angular/pull/309)).
 
 #### Migration Guide
 * If the `astTransformers` are referenced in a custom `jest` config, `[ 'jest-preset-angular/build/InlineFilesTransformer', 'jest-preset-angular/build/StripStylesTransformer']` have to be set instead.
 * Serializers, transformers and `setupJest` have to be referenced from the `jest-preset-angular/build/`-folder in a custom config. Existing references have to be aligned.
 * If your `tsconfig.spec.json` is located in `src`, move it to your root folder and adjust the referenced files and paths inside, or align your jest configuration as discussed in the [README.md](https://github.com/thymikee/jest-preset-angular/blob/master/README.md#custom-tsconfig).
+* In an Angular 8 project or higher, `core-js` should no longer be a dependency declared in `package.json`, unless it's imported manually in the code.
 
 ### v7.1.0
 

diff --git a/example/README.md b/example/README.md
@@ -1,27 +1,34 @@
 # Example
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
+This is an example app using `jest-preset-angular`. It is not supposed to be a boilerplate for an Angular app tested with jest, but could be used as a rough reference for configuration.
 
-## Development server
+The jest configuration itself is located in the `package.json`.
 
-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.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.4.
 
-## Code scaffolding
+## Running unit tests
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+Run `yarn test` or `npm test` to execute the unit tests via [Jest](https://jestjs.io).
 
-## Build
+## Running end-to-end tests
 
-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.
+End-to-end are not setup in this project.
 
-## Running unit tests
+## 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.
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## Development server
 
-## Running end-to-end tests
+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 e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
+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.
 
 ## Further help
 

diff --git a/example/angular.json b/example/angular.json
@@ -43,7 +43,19 @@
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": true
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
             }
           }
         },
@@ -63,57 +75,6 @@
           "options": {
             "browserTarget": "example:build"
           }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/karmaTest.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "styles.css"
-            ],
-            "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    },
-    "example-e2e": {
-      "root": "e2e/",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "example:serve"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }

diff --git a/example/e2e/app.e2e-spec.ts b/example/e2e/app.e2e-spec.ts
diff --git a/example/e2e/app.po.ts b/example/e2e/app.po.ts
diff --git a/example/e2e/tsconfig.e2e.json b/example/e2e/tsconfig.e2e.json
diff --git a/example/package.json b/example/package.json
@@ -15,32 +15,30 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "7.2.8",
-    "@angular/common": "7.2.8",
-    "@angular/compiler": "7.2.8",
-    "@angular/core": "7.2.8",
-    "@angular/forms": "7.2.8",
-    "@angular/http": "7.2.8",
-    "@angular/platform-browser": "7.2.8",
-    "@angular/platform-browser-dynamic": "7.2.8",
-    "@angular/router": "7.2.8",
-    "core-js": "^2.0.0",
-    "rxjs": "6.4.0",
-    "zone.js": "0.8.29"
+    "@angular/animations": "~8.2.5",
+    "@angular/common": "~8.2.5",
+    "@angular/compiler": "~8.2.5",
+    "@angular/core": "~8.2.5",
+    "@angular/forms": "~8.2.5",
+    "@angular/platform-browser": "~8.2.5",
+    "@angular/platform-browser-dynamic": "~8.2.5",
+    "@angular/router": "~8.2.5",
+    "rxjs": "~6.4.0",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.5",
-    "@angular/cli": "^7.3.5",
-    "@angular/compiler-cli": "7.2.8",
+    "@angular-devkit/build-angular": "~0.803.4",
+    "@angular/cli": "~8.3.4",
+    "@angular/compiler-cli": "~8.2.5",
+    "@angular/language-service": "~8.2.5",
     "@types/jest": "^24.0.0",
     "@types/node": "^11.0.0",
-    "codelyzer": "^4.4.3",
+    "codelyzer": "^5.0.0",
     "jest": "^24.0.0",
     "jest-preset-angular": "file:../",
-    "protractor": "^5.4.0",
     "ts-node": "^8.0.3",
-    "tslint": "^5.11.0",
-    "typescript": "3.3.3333"
+    "typescript": "~3.5.3"
   },
   "jest": {
     "preset": "jest-preset-angular",

diff --git a/example/protractor.conf.js b/example/protractor.conf.js
diff --git a/example/src/app/app.module.ts b/example/src/app/app.module.ts
@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
 import { CalcComponent } from './calc/calc.component';
@@ -10,6 +10,8 @@ import { OnPushComponent } from './on-push/on-push.component';
 import { HeroesComponent } from './heroes/heroes.component';
 import { SimpleWithStylesComponent } from './simple-with-styles/simple-with-styles.component';
 import { ChildComponent } from './medium/child.component';
+import { MediumComponent } from './medium/medium.component';
+import { NgReflectAsTextComponent } from './ng-reflect-as-text/ng-reflect-as-text.component';
 
 @NgModule({
   declarations: [
@@ -19,13 +21,15 @@ import { ChildComponent } from './medium/child.component';
     OnPushComponent,
     HeroesComponent,
     SimpleWithStylesComponent,
-    ChildComponent
+    ChildComponent,
+    MediumComponent,
+    NgReflectAsTextComponent,
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     FormsModule,
-    HttpModule
+    HttpClientModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/example/src/app/calc/calc.component.spec.ts b/example/src/app/calc/calc.component.spec.ts
@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { configureTests, ConfigureFn } from '@lib/testing';
 
-import { CalcComponent } from 'app/calc/calc.component';
+import { CalcComponent } from 'src/app/calc/calc.component';
 
 describe('CalcComponent', () => {
   let component: CalcComponent;

diff --git a/example/src/app/medium/medium.component.spec.ts b/example/src/app/medium/medium.component.spec.ts
@@ -1,4 +1,3 @@
-/* tslint:disable:no-unused-variable */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MediumComponent } from './medium.component';

diff --git a/example/src/app/simple-with-styles/simple-with-styles.component.ts b/example/src/app/simple-with-styles/simple-with-styles.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-simple-with-styles',
   templateUrl: './simple-with-styles.component.html',
   // we have to setup styles this way, since simple styles/styleUrs properties will be removed (jest does not unit test styles)
-  ['styles']: [`
+  styles: [`
     .some-class { color: red }
   `]
 })