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

Commit e14a131

Browse files
wardbellwardbell
committed
docs(testing): add plunker for simple component testing
Rob Wormald recognized that we had no plunker for a simple component test. 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 Supporting adjustments to plunker builder and gulpfile Test plunkers now open on a spec instead of on index.html
1 parent f2406ef commit e14a131

20 files changed

+290
-103
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/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.component.simplified.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-specs.plnkr.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"app-specs.html"
2020
],
2121
"main": "app-specs.html",
22+
"open": "app/about.component.spec.ts",
2223
"tags": ["testing"],
2324
"includeSystemConfig": true
2425
}

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// #docplaster
2+
// #docregion
3+
import { ComponentFixtureAutoDetect, 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.component';
8+
9+
describe('BannerComponent with AutoChangeDetect', () => {
10+
let comp: BannerComponent;
11+
let fixture: ComponentFixture<BannerComponent>;
12+
let de: DebugElement;
13+
let el: HTMLElement;
14+
15+
beforeEach(() => {
16+
// #docregion auto-detect
17+
fixture = TestBed.configureTestingModule({
18+
declarations: [ BannerComponent ],
19+
providers: [
20+
{ provide: ComponentFixtureAutoDetect, useValue: true }
21+
]
22+
})
23+
// #enddocregion auto-detect
24+
.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+
33+
// #docregion auto-detect-tests
34+
it('should display original title', () => {
35+
// Hooray! No `fixture.detectChanges()` needed
36+
expect(el.textContent).toContain(comp.title);
37+
});
38+
39+
it('should still see original title after comp.title change', () => {
40+
const oldTitle = comp.title;
41+
comp.title = 'Test Title';
42+
// Displayed title is old because Angular didn't hear the change :(
43+
expect(el.textContent).toContain(oldTitle);
44+
});
45+
46+
it('should display updated title after detectChanges', () => {
47+
comp.title = 'Test Title';
48+
fixture.detectChanges(); // detect changes explicitly
49+
expect(el.textContent).toContain(comp.title);
50+
});
51+
// #enddocregion auto-detect-tests
52+
});

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// #docplaster
2+
// #docregion
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.component';
8+
9+
describe('BannerComponent (simpified)', () => {
10+
11+
let comp: BannerComponent;
12+
let fixture: ComponentFixture<BannerComponent>;
13+
let de: DebugElement;
14+
15+
// #docregion simple-example-before-each
16+
beforeEach(() => {
17+
18+
// refine the test module by declaring the test component
19+
TestBed.configureTestingModule({
20+
declarations: [ BannerComponent ],
21+
});
22+
23+
// create component and test fixture
24+
fixture = TestBed.createComponent(BannerComponent);
25+
26+
// get test component from the fixture
27+
comp = fixture.componentInstance;
28+
});
29+
// #enddocregion simple-example-before-each
30+
31+
// #docregion simple-example-it
32+
it('should display original title', () => {
33+
34+
// trigger change detection to update the view
35+
fixture.detectChanges();
36+
37+
// query for the title <h1> by CSS element selector
38+
de = fixture.debugElement.query(By.css('h1'));
39+
40+
// confirm the element's content
41+
expect(de.nativeElement.textContent).toContain(comp.title);
42+
});
43+
// #enddocregion simple-example-it
44+
});

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

Lines changed: 13 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
// #docplaster
2-
// #docregion
32
// #docregion imports
43
import { ComponentFixture, TestBed } from '@angular/core/testing';
54
import { By } from '@angular/platform-browser';
@@ -9,12 +8,13 @@ import { BannerComponent } from './banner.component';
98
// #enddocregion imports
109

1110
// #docregion setup
12-
let comp: BannerComponent;
13-
let fixture: ComponentFixture<BannerComponent>;
14-
let de: DebugElement;
15-
let el: HTMLElement;
16-
1711
describe('BannerComponent', () => {
12+
13+
let comp: BannerComponent;
14+
let fixture: ComponentFixture<BannerComponent>;
15+
let de: DebugElement;
16+
let el: HTMLElement;
17+
1818
beforeEach(() => {
1919
TestBed.configureTestingModule({
2020
declarations: [ BannerComponent ], // declare the test component
@@ -30,101 +30,25 @@ describe('BannerComponent', () => {
3030

3131
});
3232
// #enddocregion setup
33-
// #docregion tests
34-
it('should display original title', () => {
35-
fixture.detectChanges();
36-
expect(el.textContent).toContain(comp.title);
37-
});
3833

39-
it('should display a different test title', () => {
40-
comp.title = 'Test Title';
41-
fixture.detectChanges();
42-
expect(el.textContent).toContain('Test Title');
43-
});
44-
// #enddocregion tests
4534
// #docregion test-w-o-detect-changes
4635
it('no title in the DOM until manually call `detectChanges`', () => {
4736
expect(el.textContent).toEqual('');
4837
});
4938
// #enddocregion test-w-o-detect-changes
5039

51-
// #docregion setup
52-
});
53-
// #enddocregion setup
54-
55-
///////// With AutoChangeDetect /////
56-
import { ComponentFixtureAutoDetect } from '@angular/core/testing';
57-
58-
describe('BannerComponent with AutoChangeDetect', () => {
59-
60-
beforeEach(() => {
61-
// #docregion auto-detect
62-
fixture = TestBed.configureTestingModule({
63-
declarations: [ BannerComponent ],
64-
providers: [
65-
{ provide: ComponentFixtureAutoDetect, useValue: true }
66-
]
67-
})
68-
// #enddocregion auto-detect
69-
.createComponent(BannerComponent);
70-
71-
comp = fixture.componentInstance; // BannerComponent test instance
72-
73-
// query for the title <h1> by CSS element selector
74-
de = fixture.debugElement.query(By.css('h1'));
75-
el = de.nativeElement;
76-
});
77-
78-
// #docregion auto-detect-tests
40+
// #docregion tests
7941
it('should display original title', () => {
80-
// Hooray! No `fixture.detectChanges()` needed
42+
fixture.detectChanges();
8143
expect(el.textContent).toContain(comp.title);
8244
});
8345

84-
it('should still see original title after comp.title change', () => {
85-
const oldTitle = comp.title;
86-
comp.title = 'Test Title';
87-
// Displayed title is old because Angular didn't hear the change :(
88-
expect(el.textContent).toContain(oldTitle);
89-
});
90-
91-
it('should display updated title after detectChanges', () => {
46+
it('should display a different test title', () => {
9247
comp.title = 'Test Title';
93-
fixture.detectChanges(); // detect changes explicitly
94-
expect(el.textContent).toContain(comp.title);
95-
});
96-
// #enddocregion auto-detect-tests
97-
});
98-
99-
100-
describe('BannerComponent (simpified)', () => {
101-
// #docregion simple-example-before-each
102-
beforeEach(() => {
103-
104-
// refine the test module by declaring the test component
105-
TestBed.configureTestingModule({
106-
declarations: [ BannerComponent ],
107-
});
108-
109-
// create component and test fixture
110-
fixture = TestBed.createComponent(BannerComponent);
111-
112-
// get test component from the fixture
113-
comp = fixture.componentInstance;
114-
});
115-
// #enddocregion simple-example-before-each
116-
117-
// #docregion simple-example-it
118-
it('should display original title', () => {
119-
120-
// trigger change detection to update the view
12148
fixture.detectChanges();
122-
123-
// query for the title <h1> by CSS element selector
124-
de = fixture.debugElement.query(By.css('h1'));
125-
126-
// confirm the element's content
127-
expect(de.nativeElement.textContent).toContain(comp.title);
49+
expect(el.textContent).toContain('Test Title');
12850
});
129-
// #enddocregion simple-example-it
51+
// #enddocregion tests
52+
// #docregion setup
13053
});
54+
// #enddocregion setup

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"bag-specs.html"
1717
],
1818
"main": "bag-specs.html",
19+
"open": "app/bag/bag.spec.ts",
1920
"tags": ["testing"],
2021
"includeSystemConfig": true
2122
}

0 commit comments

Comments
 (0)