Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 695df67

Browse files
wardbellwardbell
authored
docs(testing): simplify and accelerate path to Angular component testing (#2879)
Rob Wormald recognized that we had no plunker for a simple component test. Inspired improved learning path for testing including: * Add plunkers for both inline and external template versions of the simplest `BannerComponent` * Added the banner-specs for that purpose and also a quickstart-specs in the setup folder * Adjusted prose in testing and setup-systemjs-anatomy to call these out * Moved testing of external template spec earlier in the guide because it is likely to be needed right away. * Add comments on the optional "testing" folder and corrects var names to match * Leaves Jasmine Spec Runner output visible when tests finish
1 parent caec707 commit 695df67

28 files changed

+783
-492
lines changed

‎gulpfile.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ var _exampleBoilerplateFiles = [
104104
var _exampleDartWebBoilerPlateFiles = ['a2docs.css', 'styles.css'];
105105

106106
var _exampleUnitTestingBoilerplateFiles = [
107+
'browser-test-shim.js',
107108
'karma-test-shim.js',
108109
'karma.conf.js'
109110
];
@@ -587,10 +588,14 @@ function deleteExampleBoilerPlate() {
587588
gutil.log('Deleting example boilerplate files');
588589
var examplePaths = getExamplePaths(EXAMPLES_PATH);
589590
var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH);
591+
var unittestPaths = getUnitTestingPaths(EXAMPLES_PATH);
590592

591593
return deleteFiles(_exampleBoilerplateFiles, examplePaths)
592594
.then(function() {
593595
return deleteFiles(_exampleDartWebBoilerPlateFiles, dartExampleWebPaths);
596+
})
597+
.then(function() {
598+
return deleteFiles(_exampleUnitTestingBoilerplateFiles, unittestPaths);
594599
});
595600
}
596601

‎public/docs/_examples/_boilerplate/styles.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ button:disabled {
4545
nav a {
4646
padding: 5px 10px;
4747
text-decoration: none;
48+
margin-right: 10px;
4849
margin-top: 10px;
4950
display: inline-block;
5051
background-color: #eee;

‎public/docs/_examples/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@
6363
"karma": "^1.3.0",
6464
"karma-chrome-launcher": "^2.0.0",
6565
"karma-cli": "^1.0.1",
66-
"karma-htmlfile-reporter": "^0.3.4",
6766
"karma-jasmine": "^1.0.2",
6867
"karma-jasmine-html-reporter": "^0.2.2",
6968
"karma-phantomjs-launcher": "^1.0.2",

‎public/docs/_examples/setup/ts/app/app.component.spec.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
/* tslint:disable:no-unused-variable */
21
import { AppComponent } from './app.component';
32

43
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
54
import { By } from '@angular/platform-browser';
65
import { DebugElement } from '@angular/core';
76

8-
//////// SPECS /////////////
97
describe('AppComponent', function () {
108
let de: DebugElement;
119
let comp: AppComponent;
1210
let fixture: ComponentFixture<AppComponent>;
1311

1412
beforeEach(async(() => {
15-
TestBed.configureTestingModule({
13+
TestBed.configureTestingModule({
1614
declarations: [ AppComponent ]
1715
})
1816
.compileComponents();

‎public/docs/_examples/setup/ts/example-config.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"unittesting": true
3+
}

‎public/docs/_examples/setup/ts/quickstart-specs.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!-- Run application specs in a browser -->
2+
<!-- #docregion -->
3+
<!DOCTYPE html>
4+
<html>
5+
<head>
6+
<base href="/">
7+
<title>1st Specs</title>
8+
<meta charset="UTF-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
<link rel="stylesheet" href="styles.css">
11+
<link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
12+
</head>
13+
<body>
14+
<script src="node_modules/systemjs/dist/system.src.js"></script>
15+
16+
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
17+
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
18+
<script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
19+
20+
<script src="node_modules/reflect-metadata/Reflect.js"></script>
21+
22+
<script src="node_modules/zone.js/dist/zone.js"></script>
23+
<script src="node_modules/zone.js/dist/long-stack-trace-zone.js"></script>
24+
<script src="node_modules/zone.js/dist/proxy.js"></script>
25+
<script src="node_modules/zone.js/dist/sync-test.js"></script>
26+
<script src="node_modules/zone.js/dist/jasmine-patch.js"></script>
27+
<script src="node_modules/zone.js/dist/async-test.js"></script>
28+
<script src="node_modules/zone.js/dist/fake-async-test.js"></script>
29+
30+
<!-- #docregion files -->
31+
<script>
32+
var __spec_files__ = [
33+
'app/app.component.spec'
34+
];
35+
</script>
36+
<!-- #enddocregion files-->
37+
<script src="browser-test-shim.js"></script>
38+
</body>
39+
40+
</html>

‎public/docs/_examples/setup/ts/quickstart-specs.plnkr.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"description": "Quickstart AppComponent Testing",
3+
"files":[
4+
"browser-test-shim.js",
5+
"systemjs.config.extras.js",
6+
7+
"app/app.component.ts",
8+
"app/app.component.spec.ts",
9+
"quickstart-specs.html"
10+
],
11+
"main": "quickstart-specs.html",
12+
"open": "app/app.component.spec.ts",
13+
"tags": ["quickstart", "setup", "testing"],
14+
"includeSystemConfig": true
15+
}

‎public/docs/_examples/setup/ts/systemjs.config.extras.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Add barrels and stuff
3+
* Adjust as necessary for your application needs.
4+
*/
5+
// (function (global) {
6+
// System.config({
7+
// packages: {
8+
// // add packages here
9+
// }
10+
// });
11+
// })(this);

‎public/docs/_examples/testing/ts/1st-specs.plnkr.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"1st-specs.html"
99
],
1010
"main": "1st-specs.html",
11+
"open": "app/1st.spec.ts",
1112
"tags": ["testing"],
1213
"includeSystemConfig": true
1314
}

‎public/docs/_examples/testing/ts/app-specs.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@
3434
'app/app.component.spec',
3535
'app/app.component.router.spec',
3636
'app/banner.component.spec',
37+
'app/banner.component.detect-changes.spec',
38+
'app/banner-inline.component.spec',
3739
'app/dashboard/dashboard.component.spec',
3840
'app/dashboard/dashboard.component.no-testbed.spec',
3941
'app/dashboard/dashboard-hero.component.spec',

‎public/docs/_examples/testing/ts/app/banner-inline.component.spec.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
// #docplaster
2+
// #docregion imports
3+
import { ComponentFixture, TestBed } from '@angular/core/testing';
4+
import { By } from '@angular/platform-browser';
5+
import { DebugElement } from '@angular/core';
6+
7+
import { BannerComponent } from './banner-inline.component';
8+
// #enddocregion imports
9+
10+
// #docregion setup
11+
describe('BannerComponent (inline template)', () => {
12+
13+
let comp: BannerComponent;
14+
let fixture: ComponentFixture<BannerComponent>;
15+
let de: DebugElement;
16+
let el: HTMLElement;
17+
18+
// #docregion before-each
19+
beforeEach(() => {
20+
TestBed.configureTestingModule({
21+
declarations: [ BannerComponent ], // declare the test component
22+
});
23+
24+
fixture = TestBed.createComponent(BannerComponent);
25+
26+
comp = fixture.componentInstance; // BannerComponent test instance
27+
28+
// query for the title <h1> by CSS element selector
29+
de = fixture.debugElement.query(By.css('h1'));
30+
el = de.nativeElement;
31+
});
32+
// #enddocregion before-each
33+
// #enddocregion setup
34+
35+
// #docregion test-w-o-detect-changes
36+
it('no title in the DOM until manually call `detectChanges`', () => {
37+
expect(el.textContent).toEqual('');
38+
});
39+
// #enddocregion test-w-o-detect-changes
40+
41+
// #docregion tests
42+
it('should display original title', () => {
43+
fixture.detectChanges();
44+
expect(el.textContent).toContain(comp.title);
45+
});
46+
47+
it('should display a different test title', () => {
48+
comp.title = 'Test Title';
49+
fixture.detectChanges();
50+
expect(el.textContent).toContain('Test Title');
51+
});
52+
// #enddocregion tests
53+
// #docregion setup
54+
});
55+
// #enddocregion setup

‎public/docs/_examples/testing/ts/app/banner-inline.component.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-banner',
6+
template: '<h1>{{title}}</h1>'
7+
})
8+
export class BannerComponent {
9+
title = 'Test Tour of Heroes';
10+
}
11+

‎public/docs/_examples/testing/ts/app/banner.component.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
h1 { color: green; font-size: 350%}

‎public/docs/_examples/testing/ts/app/banner.component.detect-changes.spec.ts

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion import-async
4+
import { async } from '@angular/core/testing';
5+
// #enddocregion import-async
6+
// #docregion import-ComponentFixtureAutoDetect
7+
import { ComponentFixtureAutoDetect } from '@angular/core/testing';
8+
// #enddocregion import-ComponentFixtureAutoDetect
9+
import { ComponentFixture, TestBed } from '@angular/core/testing';
10+
import { By } from '@angular/platform-browser';
11+
import { DebugElement } from '@angular/core';
12+
13+
import { BannerComponent } from './banner.component';
14+
15+
describe('BannerComponent (AutoChangeDetect)', () => {
16+
let comp: BannerComponent;
17+
let fixture: ComponentFixture<BannerComponent>;
18+
let de: DebugElement;
19+
let el: HTMLElement;
20+
21+
beforeEach(async(() => {
22+
// #docregion auto-detect
23+
TestBed.configureTestingModule({
24+
declarations: [ BannerComponent ],
25+
providers: [
26+
{ provide: ComponentFixtureAutoDetect, useValue: true }
27+
]
28+
})
29+
// #enddocregion auto-detect
30+
.compileComponents();
31+
}));
32+
33+
beforeEach(() => {
34+
fixture = TestBed.createComponent(BannerComponent);
35+
comp = fixture.componentInstance;
36+
de = fixture.debugElement.query(By.css('h1'));
37+
el = de.nativeElement;
38+
});
39+
40+
// #docregion auto-detect-tests
41+
it('should display original title', () => {
42+
// Hooray! No `fixture.detectChanges()` needed
43+
expect(el.textContent).toContain(comp.title);
44+
});
45+
46+
it('should still see original title after comp.title change', () => {
47+
const oldTitle = comp.title;
48+
comp.title = 'Test Title';
49+
// Displayed title is old because Angular didn't hear the change :(
50+
expect(el.textContent).toContain(oldTitle);
51+
});
52+
53+
it('should display updated title after detectChanges', () => {
54+
comp.title = 'Test Title';
55+
fixture.detectChanges(); // detect changes explicitly
56+
expect(el.textContent).toContain(comp.title);
57+
});
58+
// #enddocregion auto-detect-tests
59+
});

‎public/docs/_examples/testing/ts/app/banner.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<h1>{{title}}</h1>

0 commit comments

Comments
 (0)