Skip to content

Commit 0f0e77a

Browse files
wthowtho
committed
Update Example App to angular v7, angular-redux v9
Updates * Dependency angular-redux v9 and angular v7 * Use Angular-cli v7 and angular.json instead of angular-cli.json * Refactor code to use rxjs v6 * Use Jest as Unit-Test Library with jest-preset-angular * Improve type safety complying to Strict Class Initialization and removing impicit any * Avoiding Circular Dependency by moving action strings to ticket-actions.ts * Update @angular/http to @angular/common/http (HttpClient) * Change mocky.io links to https
1 parent aced75c commit 0f0e77a

31 files changed

+388
-280
lines changed

‎packages/example-app/.angular-cli.json‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎packages/example-app/angular.json‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"example-app": {
7+
"root": "",
8+
"sourceRoot": "src",
9+
"projectType": "application",
10+
"prefix": "app",
11+
"schematics": {
12+
"@schematics/angular:component": {
13+
"styleext": "css"
14+
}
15+
},
16+
"architect": {
17+
"build": {
18+
"builder": "@angular-devkit/build-angular:browser",
19+
"options": {
20+
"outputPath": "dist/example-app",
21+
"index": "src/index.html",
22+
"main": "src/main.ts",
23+
"polyfills": "src/polyfills.ts",
24+
"tsConfig": "src/tsconfig.app.json",
25+
"assets": [
26+
"src/favicon.ico",
27+
"src/assets"
28+
],
29+
"styles": [
30+
"src/styles.css"
31+
],
32+
"scripts": []
33+
},
34+
"configurations": {
35+
"production": {
36+
"fileReplacements": [
37+
{
38+
"replace": "src/environments/environment.ts",
39+
"with": "src/environments/environment.prod.ts"
40+
}
41+
],
42+
"optimization": true,
43+
"outputHashing": "all",
44+
"sourceMap": false,
45+
"extractCss": true,
46+
"namedChunks": false,
47+
"aot": true,
48+
"extractLicenses": true,
49+
"vendorChunk": false,
50+
"buildOptimizer": true,
51+
"budgets": [
52+
{
53+
"type": "initial",
54+
"maximumWarning": "2mb",
55+
"maximumError": "5mb"
56+
}
57+
]
58+
}
59+
}
60+
},
61+
"serve": {
62+
"builder": "@angular-devkit/build-angular:dev-server",
63+
"options": {
64+
"browserTarget": "example-app:build"
65+
},
66+
"configurations": {
67+
"production": {
68+
"browserTarget": "example-app:build:production"
69+
}
70+
}
71+
},
72+
"extract-i18n": {
73+
"builder": "@angular-devkit/build-angular:extract-i18n",
74+
"options": {
75+
"browserTarget": "example-app:build"
76+
}
77+
},
78+
"lint": {
79+
"builder": "@angular-devkit/build-angular:tslint",
80+
"options": {
81+
"tsConfig": [
82+
"src/tsconfig.app.json",
83+
"src/tsconfig.spec.json"
84+
],
85+
"exclude": [
86+
"**/node_modules/**"
87+
]
88+
}
89+
}
90+
}
91+
},
92+
"example-app-e2e": {
93+
"root": "e2e/",
94+
"projectType": "application",
95+
"prefix": "",
96+
"architect": {
97+
"e2e": {
98+
"builder": "@angular-devkit/build-angular:protractor",
99+
"options": {
100+
"protractorConfig": "e2e/protractor.conf.js",
101+
"devServerTarget": "example-app:serve"
102+
},
103+
"configurations": {
104+
"production": {
105+
"devServerTarget": "example-app:serve:production"
106+
}
107+
}
108+
},
109+
"lint": {
110+
"builder": "@angular-devkit/build-angular:tslint",
111+
"options": {
112+
"tsConfig": "e2e/tsconfig.e2e.json",
113+
"exclude": [
114+
"**/node_modules/**"
115+
]
116+
}
117+
}
118+
}
119+
}
120+
},
121+
"defaultProject": "example-app"
122+
}

‎packages/example-app/jest.config.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
3+
4+
module.exports = {
5+
preset: 'jest-preset-angular',
6+
setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts',
7+
testMatch: [
8+
"**/*.spec.ts",
9+
],
10+
// moduleFileExtensions: ["ts", "js", "json"],
11+
// collectCoverage: true,
12+
// mapCoverage: true,
13+
}

‎packages/example-app/package.json‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
"scripts": {
77
"ng": "ng",
88
"start": "ng serve",
9-
"build": "ng build"
9+
"build": "ng build",
10+
"test": "jest",
11+
"test:watch": "node --inspect=9229 node_modules/jest/bin/jest.js --watch --no-cache",
12+
"test:ci": "jest --runInBand"
1013
},
1114
"engines": {
1215
"node": ">=6.9.5"
@@ -15,30 +18,35 @@
1518
"@angular-redux/form": "latest",
1619
"@angular-redux/router": "latest",
1720
"@angular-redux/store": "latest",
18-
"@angular/common": "^4.1.0",
19-
"@angular/compiler": "^4.1.0",
20-
"@angular/core": "^4.1.0",
21-
"@angular/forms": "^4.1.0",
22-
"@angular/http": "^4.1.0",
23-
"@angular/platform-browser": "^4.1.0",
24-
"@angular/platform-browser-dynamic": "^4.1.0",
25-
"@angular/router": "^4.1.0",
21+
"@angular/common": "^7.1.0",
22+
"@angular/compiler": "^7.1.0",
23+
"@angular/core": "^7.1.0",
24+
"@angular/forms": "^7.1.0",
25+
"@angular/http": "^7.1.0",
26+
"@angular/platform-browser": "^7.1.0",
27+
"@angular/platform-browser-dynamic": "^7.1.0",
28+
"@angular/router": "^7.1.0",
2629
"core-js": "^2.4.1",
27-
"flux-standard-action": "^1.2.0",
28-
"ramda": "^0.23.0",
29-
"redux": "^3.6.0",
30+
"flux-standard-action": "^2.0.3",
31+
"ramda": "^0.26.0",
32+
"redux": "^4.0.1",
3033
"redux-logger": "^3.0.1",
31-
"redux-observable": "^0.14.1",
32-
"rxjs": "^5.3.0",
34+
"redux-observable": "^1.0.0",
35+
"rxjs": "^6.3.3",
3336
"zone.js": "^0.8.9"
3437
},
3538
"devDependencies": {
36-
"@angular/cli": "1.7.3",
37-
"@angular/compiler-cli": "^4.1.0",
38-
"@types/node": "~6.0.71",
39+
"@angular-devkit/build-angular": "^0.10.6",
40+
"@angular/cli": "^7.0.6",
41+
"@angular/compiler-cli": "^7.1.0",
42+
"@types/jest": "^23.3.9",
43+
"@types/node": "^10.12.10",
44+
"@types/ramda": "^0.25.42",
3945
"@types/redux-logger": "^3.0.0",
40-
"protractor": "~5.1.1",
41-
"ts-node": "~3.0.2",
42-
"typescript": "^2.4.1"
46+
"jest": "^23.6.0",
47+
"jest-preset-angular": "^6.0.1",
48+
"protractor": "^5.4.1",
49+
"ts-node": "^7.0.1",
50+
"typescript": "^3.1.6"
4351
}
4452
}

‎packages/example-app/src/app/animals/animal-list/component.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import { AnimalListComponent } from './component';
77

88
@Component({ selector: 'zoo-animal', template: '' })
99
class MockAnimalComponent {
10-
@Input() key: string;
11-
@Input() animalType: AnimalType;
10+
@Input() key!: string;
11+
@Input() animalType!: AnimalType;
1212
}
1313

14-
xdescribe('AnimalListComponent', () => {
14+
describe('AnimalListComponent', () => {
1515
beforeEach(async(() => {
1616
TestBed.configureTestingModule({
1717
declarations: [AnimalListComponent, MockAnimalComponent],
@@ -21,7 +21,7 @@ xdescribe('AnimalListComponent', () => {
2121

2222
it("should have as title 'Welcome to the Zoo'", async(() => {
2323
const fixture = TestBed.createComponent(AnimalListComponent);
24-
const animalList = fixture.debugElement.componentInstance;
24+
const animalList = fixture.componentInstance;
2525

2626
animalList.animalsName = 'Wallabies';
2727
animalList.animalType = 'WALLABIES';

‎packages/example-app/src/app/animals/animal-list/component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
2-
import { Observable } from 'rxjs/Observable';
2+
import { Observable } from 'rxjs';
33
import { Animal } from '../model';
44

55
@Component({
@@ -9,16 +9,16 @@ import { Animal } from '../model';
99
changeDetection: ChangeDetectionStrategy.OnPush,
1010
})
1111
export class AnimalListComponent {
12-
@Input() animalsName: string;
13-
@Input() animalType: string;
14-
@Input() animals: Observable<Animal[]>;
15-
@Input() loading: Observable<boolean>;
16-
@Input() error: Observable<any>;
12+
@Input() animalsName!: string;
13+
@Input() animalType!: string;
14+
@Input() animals!: Observable<Animal[]>;
15+
@Input() loading!: Observable<boolean>;
16+
@Input() error!: Observable<any>;
1717

1818
// Since we're observing an array of items, we need to set up a 'trackBy'
1919
// parameter so Angular doesn't tear down and rebuild the list's DOM every
2020
// time there's an update.
21-
getKey(_, animal: Animal) {
21+
getKey(_: any, animal: Animal) {
2222
return animal.id;
2323
}
2424
}

‎packages/example-app/src/app/animals/animal/component.spec.ts‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
import {
22
MockNgRedux,
33
NgReduxTestingModule,
4+
MockObservableStore,
45
} from '@angular-redux/store/testing';
56
import { async, TestBed } from '@angular/core/testing';
6-
import 'rxjs/add/operator/toArray';
77
import { CoreModule } from '../../core/module';
88
import { AnimalComponent } from './component';
9+
import { toArray } from 'rxjs/operators';
10+
import { Reducer, AnyAction } from 'redux';
911

10-
xdescribe('AnimalComponent', () => {
12+
type ConfigureSubStoreFn = (basePath: (string | number)[], _: Reducer<any, AnyAction>) => MockObservableStore<any>
13+
14+
describe('AnimalComponent', () => {
1115
let fixture;
12-
let animalComponent;
13-
let spyConfigureSubStore;
16+
let animalComponent: AnimalComponent;
17+
let spyConfigureSubStore: ConfigureSubStoreFn;
1418

1519
beforeEach(async(() => {
1620
spyConfigureSubStore = spyOn(
17-
MockNgRedux.mockInstance,
21+
MockNgRedux.mockInstance!,
1822
'configureSubStore',
1923
).and.callThrough();
2024

@@ -25,7 +29,7 @@ xdescribe('AnimalComponent', () => {
2529
}).compileComponents();
2630

2731
fixture = TestBed.createComponent(AnimalComponent);
28-
animalComponent = fixture.debugElement.componentInstance;
32+
animalComponent = fixture.componentInstance;
2933

3034
animalComponent.key = 'id1';
3135
animalComponent.animalType = 'WALLABIES';
@@ -36,7 +40,7 @@ xdescribe('AnimalComponent', () => {
3640
it('should use the key to create a subStore', () =>
3741
expect(spyConfigureSubStore).toHaveBeenCalledWith(
3842
['WALLABIES', 'items', 'id1'],
39-
jasmine.any(Function),
43+
expect.any(Function)
4044
));
4145

4246
it('select name data from the substore', async(() => {
@@ -98,8 +102,7 @@ xdescribe('AnimalComponent', () => {
98102
quantityStub.next(5);
99103
quantityStub.complete();
100104

101-
animalComponent.subTotal$
102-
.toArray()
105+
animalComponent.subTotal$.pipe(toArray())
103106
.subscribe(subTotals => expect(subTotals).toEqual([5, 10, 15]));
104107
}));
105108
});

0 commit comments

Comments
 (0)