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

Commit 8c1c9d8

Browse files
wardbellwardbell
committed
docs(testing): more section shuffling and simplification
Moved external template spec earlier because it is likely to be needed right away. Now have plunkers for both inline and external template versions of `BannerComponent`
1 parent 8898010 commit 8c1c9d8

16 files changed

+574
-470
lines changed

‎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/testing/ts/app-specs.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
'app/app.component.router.spec',
3636
'app/banner.component.spec',
3737
'app/banner.component.detect-changes.spec',
38-
'app/banner.component.simplified.spec',
38+
'app/banner-inline.component.spec',
3939
'app/dashboard/dashboard.component.spec',
4040
'app/dashboard/dashboard.component.no-testbed.spec',
4141
'app/dashboard/dashboard-hero.component.spec',

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

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

‎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: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,38 @@
11
// #docplaster
22
// #docregion
3-
import { ComponentFixtureAutoDetect, ComponentFixture, TestBed } from '@angular/core/testing';
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';
410
import { By } from '@angular/platform-browser';
511
import { DebugElement } from '@angular/core';
612

713
import { BannerComponent } from './banner.component';
814

9-
describe('BannerComponent with AutoChangeDetect', () => {
15+
describe('BannerComponent (AutoChangeDetect)', () => {
1016
let comp: BannerComponent;
1117
let fixture: ComponentFixture<BannerComponent>;
1218
let de: DebugElement;
1319
let el: HTMLElement;
1420

15-
beforeEach(() => {
21+
beforeEach(async(() => {
1622
// #docregion auto-detect
17-
fixture = TestBed.configureTestingModule({
23+
TestBed.configureTestingModule({
1824
declarations: [ BannerComponent ],
1925
providers: [
2026
{ provide: ComponentFixtureAutoDetect, useValue: true }
2127
]
2228
})
2329
// #enddocregion auto-detect
24-
.createComponent(BannerComponent);
25-
26-
comp = fixture.componentInstance; // BannerComponent test instance
30+
.compileComponents();
31+
}));
2732

28-
// query for the title <h1> by CSS element selector
33+
beforeEach(() => {
34+
fixture = TestBed.createComponent(BannerComponent);
35+
comp = fixture.componentInstance;
2936
de = fixture.debugElement.query(By.css('h1'));
3037
el = de.nativeElement;
3138
});

‎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>

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

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

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

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,44 @@
11
// #docplaster
2-
// #docregion imports
3-
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
43
import { By } from '@angular/platform-browser';
54
import { DebugElement } from '@angular/core';
65

76
import { BannerComponent } from './banner.component';
8-
// #enddocregion imports
97

10-
// #docregion setup
11-
describe('BannerComponent', () => {
8+
describe('BannerComponent (templateUrl)', () => {
129

1310
let comp: BannerComponent;
1411
let fixture: ComponentFixture<BannerComponent>;
1512
let de: DebugElement;
1613
let el: HTMLElement;
1714

18-
beforeEach(() => {
15+
// #docregion async-before-each
16+
// async beforeEach
17+
beforeEach(async(() => {
1918
TestBed.configureTestingModule({
2019
declarations: [ BannerComponent ], // declare the test component
21-
});
20+
})
21+
.compileComponents(); // compile template and css
22+
}));
23+
// #enddocregion async-before-each
2224

25+
// #docregion sync-before-each
26+
// synchronous beforeEach
27+
beforeEach(() => {
2328
fixture = TestBed.createComponent(BannerComponent);
2429

2530
comp = fixture.componentInstance; // BannerComponent test instance
2631

2732
// query for the title <h1> by CSS element selector
2833
de = fixture.debugElement.query(By.css('h1'));
2934
el = de.nativeElement;
30-
3135
});
32-
// #enddocregion setup
36+
// #enddocregion sync-before-each
3337

34-
// #docregion test-w-o-detect-changes
3538
it('no title in the DOM until manually call `detectChanges`', () => {
3639
expect(el.textContent).toEqual('');
3740
});
38-
// #enddocregion test-w-o-detect-changes
3941

40-
// #docregion tests
4142
it('should display original title', () => {
4243
fixture.detectChanges();
4344
expect(el.textContent).toContain(comp.title);
@@ -48,7 +49,5 @@ describe('BannerComponent', () => {
4849
fixture.detectChanges();
4950
expect(el.textContent).toContain('Test Title');
5051
});
51-
// #enddocregion tests
52-
// #docregion setup
52+
5353
});
54-
// #enddocregion setup

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
// #docregion
2-
import { Component } from '@angular/core';
2+
import { Component } from '@angular/core';
33

44
@Component({
5+
moduleId: module.id,
56
selector: 'app-banner',
6-
template: '<h1>{{title}}</h1>'
7+
templateUrl: 'banner.component.html',
8+
styleUrls: ['banner.component.css']
79
})
810
export class BannerComponent {
911
title = 'Test Tour of Heroes';

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

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

‎public/docs/_examples/testing/ts/banner-inline-specs.html

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

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

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

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
"browser-test-shim.js",
55
"systemjs.config.extras.js",
66

7+
"app/banner.component.css",
8+
"app/banner.component.html",
79
"app/banner.component.ts",
810
"app/banner.component.spec.ts",
911
"banner-specs.html"

0 commit comments

Comments
 (0)