diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade index 479bef42db..efccce5223 100644 --- a/public/_includes/_footer.jade +++ b/public/_includes/_footer.jade @@ -71,8 +71,8 @@ else li English footer(class="background-midnight") - small.text-caption Powered by Google ©2010-2016. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0. - 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 MIT-style License. Documentation licensed under CC BY 4.0. + 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 diff --git a/public/docs/_examples/testing/ts/app/banner.component.spec.ts b/public/docs/_examples/testing/ts/app/banner.component.spec.ts index c9af53a805..3e7f967b82 100644 --- a/public/docs/_examples/testing/ts/app/banner.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/banner.component.spec.ts @@ -11,7 +11,8 @@ import { BannerComponent } from './banner.component'; // #docregion setup let comp: BannerComponent; let fixture: ComponentFixture; -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

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

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

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 }); diff --git a/public/docs/_examples/testing/ts/app/shared/title-case.pipe.spec.ts b/public/docs/_examples/testing/ts/app/shared/title-case.pipe.spec.ts index 7481537c10..5dfc5d91b0 100644 --- a/public/docs/_examples/testing/ts/app/shared/title-case.pipe.spec.ts +++ b/public/docs/_examples/testing/ts/app/shared/title-case.pipe.spec.ts @@ -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 diff --git a/public/docs/_examples/testing/ts/app/shared/twain.component.spec.ts b/public/docs/_examples/testing/ts/app/shared/twain.component.spec.ts index 767e1ec2ca..b80993cc0b 100644 --- a/public/docs/_examples/testing/ts/app/shared/twain.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/shared/twain.component.spec.ts @@ -12,7 +12,8 @@ describe('TwainComponent', () => { let fixture: ComponentFixture; 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(); }); }); diff --git a/public/docs/_examples/testing/ts/app/welcome.component.spec.ts b/public/docs/_examples/testing/ts/app/welcome.component.spec.ts index f99687148f..e506dda396 100644 --- a/public/docs/_examples/testing/ts/app/welcome.component.spec.ts +++ b/public/docs/_examples/testing/ts/app/welcome.component.spec.ts @@ -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; - 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 }); diff --git a/public/docs/dart/latest/cookbook/_data.json b/public/docs/dart/latest/cookbook/_data.json index 931857b846..f0c0dad0d4 100644 --- a/public/docs/dart/latest/cookbook/_data.json +++ b/public/docs/dart/latest/cookbook/_data.json @@ -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 }, diff --git a/public/docs/dart/latest/guide/_data.json b/public/docs/dart/latest/guide/_data.json index f13c3c42c8..68717b46ce 100644 --- a/public/docs/dart/latest/guide/_data.json +++ b/public/docs/dart/latest/guide/_data.json @@ -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 } } diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json index 7443923155..a5e0ca3011 100644 --- a/public/docs/js/latest/cookbook/_data.json +++ b/public/docs/js/latest/cookbook/_data.json @@ -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": { diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index 724711f666..72977625c0 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -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 } } diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json index 7b942c56dd..57a598e7b5 100644 --- a/public/docs/ts/latest/cookbook/_data.json +++ b/public/docs/ts/latest/cookbook/_data.json @@ -65,7 +65,7 @@ "ts-to-js": { "title": "从TypeScript到JavaScript", - "intro": "把Angular 2的TypeScript范例转换为ES5 JavaScript" + "intro": "把Angular的TypeScript范例转换为ES5 JavaScript" }, "visual-studio-2015": { diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index e8834115d9..ca40213185 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/public/docs/ts/latest/guide/_data.json @@ -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应用" } } diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade index 62ab22ea8b..ae018e2a64 100644 --- a/public/docs/ts/latest/guide/testing.jade +++ b/public/docs/ts/latest/guide/testing.jade @@ -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 diff --git a/public/resources/css/module/_footer.scss b/public/resources/css/module/_footer.scss index 14ab30a64c..9ef33deaef 100644 --- a/public/resources/css/module/_footer.scss +++ b/public/resources/css/module/_footer.scss @@ -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; } } } -} \ No newline at end of file +}