Merge remote-tracking branch 'remotes/angular.io/master'

# Conflicts:
#	public/docs/ts/latest/cookbook/_data.json
#	public/docs/ts/latest/guide/_data.json
#	public/docs/ts/latest/guide/testing.jade
This commit is contained in:
rexebin 2016-09-23 23:22:42 +01:00
commit a59b1b60ee
13 changed files with 137 additions and 117 deletions

View File

@ -71,8 +71,8 @@ else
li <a href="https://angular.io/" target="_blank">English</a>
footer(class="background-midnight")
small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license" class="text-snow">MIT-style License</a>. Documentation licensed under <a class="text-snow" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow")
small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license">MIT-style License</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger")
span.icon-favorite
a(aria-label="查看风格指南" href="/docs/ts/latest/styleguide.html" title="风格指南" class="styleguide-trigger text-snow translated-cn" md-button)
span.icon-favorite

View File

@ -11,7 +11,8 @@ import { BannerComponent } from './banner.component';
// #docregion setup
let comp: BannerComponent;
let fixture: ComponentFixture<BannerComponent>;
let el: DebugElement;
let de: DebugElement;
let el: HTMLElement;
describe('BannerComponent', () => {
beforeEach(() => {
@ -23,25 +24,27 @@ describe('BannerComponent', () => {
comp = fixture.componentInstance; // BannerComponent test instance
// get title DebugElement by element name
el = fixture.debugElement.query(By.css('h1'));
// query for the title <h1> by CSS element selector
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
});
// #enddocregion setup
// #docregion tests
it('should display original title', () => {
fixture.detectChanges(); // trigger data binding
expect(el.nativeElement.textContent).toContain(comp.title);
fixture.detectChanges();
expect(el.textContent).toContain(comp.title);
});
it('should display a different test title', () => {
comp.title = 'Test Title';
fixture.detectChanges(); // trigger data binding
expect(el.nativeElement.textContent).toContain('Test Title');
fixture.detectChanges();
expect(el.textContent).toContain('Test Title');
});
// #enddocregion tests
// #docregion test-w-o-detect-changes
it('no title in the DOM until manually call `detectChanges`', () => {
expect(el.nativeElement.textContent).toEqual('');
expect(el.textContent).toEqual('');
});
// #enddocregion test-w-o-detect-changes
@ -59,8 +62,7 @@ describe('BannerComponent with AutoChangeDetect', () => {
fixture = TestBed.configureTestingModule({
declarations: [ BannerComponent ],
providers: [
{ provide: ComponentFixtureAutoDetect,
useValue: true }
{ provide: ComponentFixtureAutoDetect, useValue: true }
]
})
// #enddocregion auto-detect
@ -68,27 +70,28 @@ describe('BannerComponent with AutoChangeDetect', () => {
comp = fixture.componentInstance; // BannerComponent test instance
// find title DebugElement by element name
el = fixture.debugElement.query(By.css('h1'));
// query for the title <h1> by CSS element selector
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
});
// #docregion auto-detect-tests
it('should display original title', () => {
// Hooray! No `fixture.detectChanges()` needed
expect(el.nativeElement.textContent).toContain(comp.title);
expect(el.textContent).toContain(comp.title);
});
it('should still see original title after comp.title change', () => {
const oldTitle = comp.title;
comp.title = 'Test Title';
// Displayed title is old because Angular didn't hear the change :(
expect(el.nativeElement.textContent).toContain(oldTitle);
expect(el.textContent).toContain(oldTitle);
});
it('should display updated title after detectChanges', () => {
comp.title = 'Test Title';
fixture.detectChanges(); // detect changes explicitly
expect(el.nativeElement.textContent).toContain(comp.title);
expect(el.textContent).toContain(comp.title);
});
// #enddocregion auto-detect-tests
});
@ -114,14 +117,14 @@ describe('BannerComponent (simpified)', () => {
// #docregion simple-example-it
it('should display original title', () => {
// trigger data binding to update the view
// trigger change detection to update the view
fixture.detectChanges();
// find the title element in the DOM using a CSS selector
el = fixture.debugElement.query(By.css('h1'));
// query for the title <h1> by CSS element selector
de = fixture.debugElement.query(By.css('h1'));
// confirm the element's content
expect(el.nativeElement.textContent).toContain(comp.title);
expect(de.nativeElement.textContent).toContain(comp.title);
});
// #enddocregion simple-example-it
});

View File

@ -2,14 +2,15 @@
// #docregion
import { TitleCasePipe } from './title-case.pipe';
// #docregion excerpt
// #docregion excerpt, mini-excerpt
describe('TitleCasePipe', () => {
// This pipe is a pure function so no need for BeforeEach
// This pipe is a pure, stateless function so no need for BeforeEach
let pipe = new TitleCasePipe();
it('transforms "abc" to "Abc"', () => {
expect(pipe.transform('abc')).toBe('Abc');
});
// #enddocregion mini-excerpt
it('transforms "abc def" to "Abc Def"', () => {
expect(pipe.transform('abc def')).toBe('Abc Def');
@ -28,6 +29,6 @@ describe('TitleCasePipe', () => {
it('transforms " abc def" to " Abc Def" (preserves spaces) ', () => {
expect(pipe.transform(' abc def')).toBe(' Abc Def');
});
// #docregion excerpt
// #docregion excerpt, mini-excerpt
});
// #enddocregion excerpt
// #enddocregion excerpt, mini-excerpt

View File

@ -12,7 +12,8 @@ describe('TwainComponent', () => {
let fixture: ComponentFixture<TwainComponent>;
let spy: jasmine.Spy;
let twainEl: DebugElement; // the element with the Twain quote
let de: DebugElement;
let el: HTMLElement;
let twainService: TwainService; // the actually injected service
const testQuote = 'Test Quote';
@ -37,54 +38,53 @@ describe('TwainComponent', () => {
// #enddocregion spy
// Get the Twain quote element by CSS selector (e.g., by class name)
twainEl = fixture.debugElement.query(By.css('.twain'));
de = fixture.debugElement.query(By.css('.twain'));
el = de.nativeElement;
});
// #enddocregion setup
// #docregion tests
function getQuote() { return twainEl.nativeElement.textContent; }
it('should not show quote before OnInit', () => {
expect(getQuote()).toBe('', 'nothing displayed');
expect(el.textContent).toBe('', 'nothing displayed');
expect(spy.calls.any()).toBe(false, 'getQuote not yet called');
});
it('should still not show quote after component initialized', () => {
fixture.detectChanges(); // trigger data binding
fixture.detectChanges();
// getQuote service is async => still has not returned with quote
expect(getQuote()).toBe('...', 'no quote yet');
expect(el.textContent).toBe('...', 'no quote yet');
expect(spy.calls.any()).toBe(true, 'getQuote called');
});
// #docregion async-test
it('should show quote after getQuote promise (async)', async(() => {
fixture.detectChanges(); // trigger data binding
fixture.detectChanges();
fixture.whenStable().then(() => { // wait for async getQuote
fixture.detectChanges(); // update view with quote
expect(getQuote()).toBe(testQuote);
expect(el.textContent).toBe(testQuote);
});
}));
// #enddocregion async-test
// #docregion fake-async-test
it('should show quote after getQuote promise (fakeAsync)', fakeAsync(() => {
fixture.detectChanges(); // trigger data binding
fixture.detectChanges();
tick(); // wait for async getQuote
fixture.detectChanges(); // update view with quote
expect(getQuote()).toBe(testQuote);
expect(el.textContent).toBe(testQuote);
}));
// #enddocregion fake-async-test
// #enddocregion tests
// #docregion done-test
it('should show quote after getQuote promise (done)', done => {
fixture.detectChanges(); // trigger data binding
fixture.detectChanges();
// get the spy promise and wait for it to resolve
spy.calls.mostRecent().returnValue.then(() => {
fixture.detectChanges(); // update view with quote
expect(getQuote()).toBe(testQuote);
expect(el.textContent).toBe(testQuote);
done();
});
});

View File

@ -1,7 +1,7 @@
// #docplaster
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { UserService } from './model';
import { WelcomeComponent } from './welcome.component';
@ -10,8 +10,10 @@ describe('WelcomeComponent', () => {
let comp: WelcomeComponent;
let fixture: ComponentFixture<WelcomeComponent>;
let userService: UserService; // the actually injected service
let welcomeEl: DebugElement; // the element with the welcome message
let componentUserService: UserService; // the actually injected service
let userService: UserService; // the TestBed injected service
let de: DebugElement; // the DebugElement with the welcome message
let el: HTMLElement; // the DOM element with the welcome message
let userServiceStub: {
isLoggedIn: boolean;
@ -32,7 +34,8 @@ describe('WelcomeComponent', () => {
TestBed.configureTestingModule({
declarations: [ WelcomeComponent ],
// #enddocregion setup
// providers: [ UserService ] // a real service would be a problem!
// providers: [ UserService ] // NO! Don't provide the real service!
// Provide a test-double instead
// #docregion setup
providers: [ {provide: UserService, useValue: userServiceStub } ]
});
@ -42,51 +45,64 @@ describe('WelcomeComponent', () => {
comp = fixture.componentInstance;
// #enddocregion setup
// #docregion inject-from-testbed
// UserService provided to the TestBed
userService = TestBed.get(UserService);
// #enddocregion inject-from-testbed
// #docregion setup
// #docregion injected-service
// #docregion injected-service
// UserService actually injected into the component
userService = fixture.debugElement.injector.get(UserService);
// #enddocregion injected-service
componentUserService = userService;
// #docregion setup
// #docregion inject-from-testbed
// UserService from the root injector
userService = TestBed.get(UserService);
// #enddocregion inject-from-testbed
// get the "welcome" element by CSS selector (e.g., by class name)
welcomeEl = fixture.debugElement.query(By.css('.welcome'));
de = fixture.debugElement.query(By.css('.welcome'));
el = de.nativeElement;
});
// #enddocregion setup
// #docregion tests
it('should welcome the user', () => {
fixture.detectChanges(); // trigger data binding
let content = welcomeEl.nativeElement.textContent;
fixture.detectChanges();
const content = el.textContent;
expect(content).toContain('Welcome', '"Welcome ..."');
expect(content).toContain('Test User', 'expected name');
});
it('should welcome "Bubba"', () => {
userService.user.name = 'Bubba'; // welcome message hasn't been shown yet
fixture.detectChanges(); // trigger data binding
let content = welcomeEl.nativeElement.textContent;
expect(content).toContain('Bubba');
fixture.detectChanges();
expect(el.textContent).toContain('Bubba');
});
it('should request login if not logged in', () => {
userService.isLoggedIn = false; // welcome message hasn't been shown yet
fixture.detectChanges(); // trigger data binding
let content = welcomeEl.nativeElement.textContent;
fixture.detectChanges();
const content = el.textContent;
expect(content).not.toContain('Welcome', 'not welcomed');
expect(content).toMatch(/log in/i, '"log in"');
});
// #enddocregion tests
it('orig stub and injected UserService are not the same object', () => {
expect(userServiceStub === userService).toBe(false);
// #docregion inject-it
it('should inject the component\'s UserService instance',
inject([UserService], (service: UserService) => {
expect(service).toBe(componentUserService);
}));
// #enddocregion inject-it
it('TestBed and Component UserService should be the same', () => {
expect(userService === componentUserService).toBe(true);
});
// #docregion stub-not-injected
it('stub object and injected UserService should not be the same', () => {
expect(userServiceStub === userService).toBe(false);
// Changing the stub object has no effect on the injected service
userServiceStub.isLoggedIn = false;
expect(userService.isLoggedIn).toBe(true);
});
// #enddocregion stub-not-injected
});

View File

@ -60,7 +60,7 @@
"ts-to-js": {
"title": "TypeScript to JavaScript",
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript",
"intro": "Convert Angular TypeScript examples into ES5 JavaScript",
"hide": true
},

View File

@ -10,7 +10,7 @@
"architecture": {
"title": "Architecture Overview",
"navTitle": "Architecture",
"intro": "The basic building blocks of Angular 2 applications",
"intro": "The basic building blocks of Angular applications",
"nextable": true,
"basics": true
},
@ -59,7 +59,7 @@
"style-guide": {
"title": "Style Guide",
"intro": "Write Angular 2 with style.",
"intro": "Write Angular with style.",
"basics": true
},
@ -92,7 +92,7 @@
"glossary": {
"title": "Glossary",
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
"intro": "Brief definitions of the most important words in the Angular vocabulary",
"basics": true
},
@ -125,7 +125,7 @@
"router": {
"title": "Routing & Navigation",
"intro": "Discover the basics of screen navigation with the Angular 2 Component Router."
"intro": "Discover the basics of screen navigation with the Angular Component Router."
},
"security": {
@ -140,13 +140,13 @@
"testing": {
"title": "Testing",
"intro": "Techniques and practices for testing an Angular 2 app",
"intro": "Techniques and practices for testing an Angular app",
"hide": true
},
"typescript-configuration": {
"title": "TypeScript Configuration",
"intro": "TypeScript configuration for Angular 2 developers",
"intro": "TypeScript configuration for Angular developers",
"hide": true
},
@ -158,7 +158,7 @@
"webpack": {
"title": "Webpack: an introduction",
"intro": "Create your Angular 2 applications with a Webpack based tooling",
"intro": "Create your Angular applications with a Webpack based tooling",
"hide": true
}
}

View File

@ -55,7 +55,7 @@
"ts-to-js": {
"title": "TypeScript to JavaScript",
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
"intro": "Convert Angular TypeScript examples into ES5 JavaScript"
},
"visual-studio-2015": {

View File

@ -10,7 +10,7 @@
"architecture": {
"title": "Architecture Overview",
"navTitle": "Architecture",
"intro": "The basic building blocks of Angular 2 applications",
"intro": "The basic building blocks of Angular applications",
"nextable": true,
"basics": true
},
@ -59,7 +59,7 @@
"style-guide": {
"title": "Style Guide",
"intro": "Write Angular 2 with style.",
"intro": "Write Angular with style.",
"basics": true
},
@ -86,7 +86,7 @@
"glossary": {
"title": "Glossary",
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
"intro": "Brief definitions of the most important words in the Angular vocabulary",
"basics": true
},
@ -118,7 +118,7 @@
"router": {
"title": "Routing & Navigation",
"intro": "Discover the basics of screen navigation with the Angular 2 router."
"intro": "Discover the basics of screen navigation with the Angular router."
},
"security": {
@ -133,13 +133,13 @@
"testing": {
"title": "Testing",
"intro": "Techniques and practices for testing an Angular 2 app",
"intro": "Techniques and practices for testing an Angular app",
"hide": true
},
"typescript-configuration": {
"title": "TypeScript Configuration",
"intro": "TypeScript configuration for Angular 2 developers",
"intro": "TypeScript configuration for Angular developers",
"hide": true
},
@ -150,7 +150,7 @@
"webpack": {
"title": "Webpack: an introduction",
"intro": "Create your Angular 2 applications with a Webpack based tooling",
"intro": "Create your Angular applications with a Webpack based tooling",
"hide": true
}
}

View File

@ -65,7 +65,7 @@
"ts-to-js": {
"title": "从TypeScript到JavaScript",
"intro": "把Angular 2的TypeScript范例转换为ES5 JavaScript"
"intro": "把Angular的TypeScript范例转换为ES5 JavaScript"
},
"visual-studio-2015": {

View File

@ -10,7 +10,7 @@
"architecture": {
"title": "架构概览",
"navTitle": "架构",
"intro": "Angular 2应用的基本构造块",
"intro": "Angular应用的基本构造块",
"nextable": true,
"basics": true
},
@ -59,7 +59,7 @@
"style-guide": {
"title": "风格指南",
"intro": "如何写Angular2风格的程序",
"intro": "如何写Angular风格的程序",
"basics": true
},
@ -90,7 +90,7 @@
"glossary": {
"title": "词汇表",
"intro": "Angular 2重要词汇的简短定义。",
"intro": "Angular重要词汇的简短定义。",
"basics": true
},
@ -122,7 +122,7 @@
"router": {
"title": "路由与导航",
"intro": "揭示如何通过Angular 2路由进行基本的屏幕导航。"
"intro": "揭示如何通过Angular路由进行基本的屏幕导航。"
},
"security": {
@ -137,12 +137,12 @@
"testing": {
"title": "测试",
"intro": "Angular 2应用的测试技术与实践。"
"intro": "Angular应用的测试技术与实践。"
},
"typescript-configuration": {
"title": "TypeScript配置",
"intro": "Angular 2开发者的TypeScript配置"
"intro": "Angular开发者的TypeScript配置"
},
"upgrade": {
@ -152,6 +152,6 @@
"webpack": {
"title": "Webpack简介",
"intro": "使用基于Webpack的工具创建Angular 2应用"
"intro": "使用基于Webpack的工具创建Angular应用"
}
}

View File

@ -536,7 +536,8 @@ table(width="100%")
+makeExample('testing/ts/app/1st.spec.ts', '', 'app/1st.spec.ts')(format='.')
:marked
## Run karma
## 运行`Karma`
## 运行Karma
Compile and run it in karma from the command line with this command:
@ -621,14 +622,7 @@ code-example(format="." language="bash").
The console log can be quite long. Keep your eye on the last line.
It says `SUCCESS` when all is well.
控制台的日志可能会非常长。注意最后一样。当一切正常时,它会显示`SUCCESS`。
If it says `FAILED`, scroll up to look for the error or, if that's too painful,
pipe the console output to a file and inspect with your favorite editor.
如果它显示`FAILED`,往上翻查看错误。如果觉得这样太麻烦,你可以将控制台的输出内容导出到一个文件中,使用你最喜欢的编辑器查看。
code-example(format="." language="json").
npm test > spec-output.txt
控制台的日志可能会非常长。注意最后一样。当一切正常时,它会显示`SUCCESS`。
:marked
## Test debugging
@ -640,6 +634,7 @@ code-example(format="." language="bash").
在浏览器中,像调试应用一样调试测试配置。
- Reveal the karma browser window (hidden earlier).
- 显示`Karma`的浏览器窗口(之前被隐藏了)。
- Click the "DEBUG" button; it opens a new browser tab and re-runs the tests

View File

@ -25,9 +25,10 @@
}
.logo-inverse-large {
background: url('/resources/images/logos/inverse/shield/shield-large.png') 0px 0px no-repeat;
background: url('/resources/images/logos/inverse/shield/shield-large.png') 0px 0px / contain no-repeat;
height: 200px;
width: 200px;
max-width: 100%;
@include respond-to('mobile') {
display: none;
@ -79,31 +80,35 @@
footer {
text-align: left;
padding: ($unit * 2) ($unit * 6);
position: relative;
@include respond-to('mobile') {
text-align: center;
}
a {
color: $snow;
}
.styleguide-trigger {
box-sizing: border-box;
position: absolute;
display: inline-block;
bottom: $unit * 2;
right: $unit * 2;
font-size: 14px;
line-height: 24px;
height: 24px;
margin: 0;
padding: 0 ($unit * 3);
opacity: .24;
transition: all .3s;
color: $darkgrey;
text-decoration: none;
float: right;
transition: color .3s;
@include respond-to('mobile') {
display: block;
margin-top: $unit;
font-size: 18px;
float: none;
}
&:hover {
background: $blue-grey-700;
text-decoration: none;
color: $red-600;
}
.icon-favorite {
display: inline-block;
line-height: 24px;
line-height: 20px;
}
}
}
}
}