docs(ngmodule): add chapter

Author: wardbell

public/docs/_examples/ngmodule/e2e-spec.ts

@@ -0,0 +1,220 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+describe('NgModule', function () {
+
+  // helpers
+  const gold = 'rgba(255, 215, 0, 1)';
+  const powderblue = 'rgba(176, 224, 230, 1)';
+  const lightgray = 'rgba(211, 211, 211, 1)';
+
+  function getCommonsSectionStruct() {
+    const buttons = element.all(by.css('nav a'));
+
+    return {
+      title: element.all(by.tagName('h1')).get(0),
+      subtitle: element.all(by.css('app-title p i')).get(0),
+      contactButton: buttons.get(0),
+      crisisButton: buttons.get(1),
+      heroesButton: buttons.get(2)
+    };
+  }
+
+  function getContactSectionStruct() {
+    const buttons = element.all(by.css('app-contact form button'));
+
+    return {
+      header: element.all(by.css('app-contact h2')).get(0),
+      popupMessage: element.all(by.css('app-contact div')).get(0),
+      contactNameHeader: element.all(by.css('app-contact form h3')).get(0),
+      input: element.all(by.css('app-contact form input')).get(0),
+      validationError: element.all(by.css('app-contact form .alert')).get(0),
+      saveButton: buttons.get(0), // can't be tested
+      nextContactButton: buttons.get(1),
+      newContactButton: buttons.get(2)
+    };
+  }
+
+  function getCrisisSectionStruct() {
+    return {
+      title: element.all(by.css('ng-component h3')).get(0),
+      items: element.all(by.css('ng-component a')),
+      itemId: element.all(by.css('ng-component div')).get(0),
+      listLink: element.all(by.css('ng-component a')).get(0),
+    };
+  }
+
+  function getHeroesSectionStruct() {
+    return {
+      header: element.all(by.css('ng-component h2')).get(0),
+      title: element.all(by.css('ng-component h3')).get(0),
+      items: element.all(by.css('ng-component a')),
+      itemId: element.all(by.css('ng-component ng-component div div')).get(0),
+      itemInput: element.all(by.css('ng-component ng-component input')).get(0),
+      listLink: element.all(by.css('ng-component ng-component a')).get(0),
+    };
+  }
+
+  // tests
+  function appTitleTests(color: string) {
+    return function() {
+      it('should have a gray header', function() {
+        const commons = getCommonsSectionStruct();
+        expect(commons.title.getCssValue('backgroundColor')).toBe(color);
+      });
+
+      it('should welcome us', function () {
+        const commons = getCommonsSectionStruct();
+        expect(commons.subtitle.getText()).toBe('Welcome, Sam Spade');
+      });
+    };
+  }
+
+  function contactTests(color: string) {
+    return function() {
+      it('shows the contact\'s owner', function() {
+        const contacts = getContactSectionStruct();
+        expect(contacts.header.getText()).toBe('Contact of Sam Spade');
+      });
+
+      it('can cycle between contacts', function () {
+        const contacts = getContactSectionStruct();
+        const nextButton = contacts.nextContactButton;
+        expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spade');
+        expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color);
+        nextButton.click().then(function () {
+          expect(contacts.contactNameHeader.getText()).toBe('Awesome Nick Danger');
+          return nextButton.click();
+        }).then(function () {
+          expect(contacts.contactNameHeader.getText()).toBe('Awesome Nancy Drew');
+        });
+      });
+
+      it('can change an existing contact', function () {
+        const contacts = getContactSectionStruct();
+        contacts.input.sendKeys('a');
+        expect(contacts.input.getCssValue('backgroundColor')).toBe(color);
+        expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spadea');
+      });
+
+      it('can create a new contact', function () {
+        const contacts = getContactSectionStruct();
+        const newContactButton = contacts.newContactButton;
+        newContactButton.click().then(function () {
+          expect(contacts.validationError.getText()).toBe('Name is required');
+          contacts.input.sendKeys('John Doe');
+          expect(contacts.contactNameHeader.getText()).toBe('Awesome John Doe');
+          expect(contacts.validationError.getText()).toBe('');
+        });
+      });
+    };
+  }
+
+  describe('index.html', function () {
+    beforeEach(function () {
+      browser.get('');
+    });
+
+    describe('app-title', appTitleTests(lightgray));
+
+    describe('contact', contactTests(lightgray));
+
+    describe('crisis center', function () {
+      beforeEach(function () {
+        getCommonsSectionStruct().crisisButton.click();
+      });
+
+      it('shows a list of crisis', function () {
+        const crisis = getCrisisSectionStruct();
+        expect(crisis.title.getText()).toBe('Crisis List');
+        expect(crisis.items.count()).toBe(4);
+        expect(crisis.items.get(0).getText()).toBe('1 - Dragon Burning Cities');
+      });
+
+      it('can navigate to one crisis details', function () {
+        const crisis = getCrisisSectionStruct();
+        crisis.items.get(0).click().then(function() {
+          expect(crisis.itemId.getText()).toBe('Crisis id: 1');
+          return crisis.listLink.click();
+        }).then(function () {
+          // We are back to the list
+          expect(crisis.items.count()).toBe(4);
+        });
+      });
+    });
+
+    describe('heroes', function () {
+      beforeEach(function () {
+        getCommonsSectionStruct().heroesButton.click();
+      });
+
+      it('shows a list of heroes', function() {
+        const heroes = getHeroesSectionStruct();
+        expect(heroes.header.getText()).toBe('Heroes of Sam Spade');
+        expect(heroes.title.getText()).toBe('Hero List');
+        expect(heroes.items.count()).toBe(6);
+        expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice');
+      });
+
+      it('can navigate and edit one hero details', function () {
+        const heroes = getHeroesSectionStruct();
+        heroes.items.get(0).click().then(function () {
+          expect(heroes.itemId.getText()).toBe('Id: 11');
+          heroes.itemInput.sendKeys(' try');
+          return heroes.listLink.click();
+        }).then(function () {
+          // We are back to the list
+          expect(heroes.items.count()).toBe(6);
+          expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice try');
+        });
+      });
+    });
+  });
+
+  describe('index.0.html', function() {
+    beforeEach(function () {
+      browser.get('index.0.html');
+    });
+
+    it('has a title', function () {
+      const title = element.all(by.tagName('h1')).get(0);
+      expect(title.getText()).toBe('Minimal NgModule');
+    });
+  });
+
+  describe('index.1.html', function () {
+    beforeEach(function () {
+      browser.get('index.1.html');
+    });
+
+    describe('app-title', appTitleTests(powderblue));
+  });
+
+  describe('index.1b.html', function () {
+    beforeEach(function () {
+      browser.get('index.1b.html');
+    });
+
+    describe('app-title', appTitleTests(powderblue));
+
+    describe('contact', contactTests(powderblue));
+  });
+
+  describe('index.2.html', function () {
+    beforeEach(function () {
+      browser.get('index.2.html');
+    });
+
+    describe('app-title', appTitleTests(gold));
+
+    describe('contact', contactTests(powderblue));
+  });
+
+  describe('index.3.html', function () {
+    beforeEach(function () {
+      browser.get('index.3.html');
+    });
+
+    describe('app-title', appTitleTests(gold));
+  });
+
+});

public/docs/_examples/ngmodule/ts/app/app.component.0.ts

@@ -0,0 +1,10 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: '<h1>{{title}}</h1>',
+})
+export class AppComponent {
+  title = 'Minimal NgModule';
+}

public/docs/_examples/ngmodule/ts/app/app.component.1.ts

@@ -0,0 +1,19 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+// #enddocregion
+  /*
+  // #docregion template
+  template: '<h1 highlight>{{title}}</h1>'
+  // #enddocregion template
+  */
+// #docregion
+  template: '<app-title [subtitle]="subtitle"></app-title>'
+})
+export class AppComponent {
+  subtitle = '(v1)';
+}
+// #enddocregion

public/docs/_examples/ngmodule/ts/app/app.component.1b.ts

@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  // #docregion template
+  template: `
+    <app-title [subtitle]="subtitle"></app-title>
+    <app-contact></app-contact>
+  `
+  // #enddocregion template
+})
+export class AppComponent {
+  subtitle = '(v1)';
+}

public/docs/_examples/ngmodule/ts/app/app.component.2.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <app-title [subtitle]="subtitle"></app-title>
+    <app-contact></app-contact>
+  `
+})
+export class AppComponent {
+  subtitle = '(v2)';
+}

public/docs/_examples/ngmodule/ts/app/app.component.3.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  // #docregion template
+  template: `
+    <app-title [subtitle]="subtitle"></app-title>
+    <nav>
+      <a routerLink="contact" routerLinkActive="active">Contact</a>
+      <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
+      <a routerLink="heroes"  routerLinkActive="active">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `
+  // #enddocregion template
+})
+export class AppComponent {
+  subtitle = '(v3)';
+}

public/docs/_examples/ngmodule/ts/app/app.component.ts

@@ -0,0 +1,19 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <app-title [subtitle]="subtitle"></app-title>
+    <nav>
+      <a routerLink="contact" routerLinkActive="active">Contact</a>
+      <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
+      <a routerLink="heroes"  routerLinkActive="active">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `
+})
+export class AppComponent {
+  subtitle = '(Final)';
+}

public/docs/_examples/ngmodule/ts/app/app.module.0.ts

@@ -0,0 +1,23 @@
+// #docplaster
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import
+// #enddocregion
+       { AppComponent }  from './app.component.0';
+/*
+// #docregion
+       { AppComponent }  from './app.component';
+// #enddocregion
+*/
+// #docregion
+
+@NgModule({
+// #docregion imports
+  imports: [ BrowserModule ],
+// #enddocregion imports
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/ngmodule/ts/app/app.module.1.ts

@@ -0,0 +1,54 @@
+// #docplaster
+// #docregion
+import { NgModule }           from '@angular/core';
+import { BrowserModule }      from '@angular/platform-browser';
+
+import
+// #enddocregion
+       { AppComponent }       from './app.component.1';
+/*
+// #docregion
+       { AppComponent }       from './app.component';
+// #enddocregion
+*/
+// #docregion
+import { HighlightDirective } from './highlight.directive';
+import { TitleComponent }     from './title.component';
+import { UserService }        from './user.service';
+
+/* Contact Related Imports */
+import { FormsModule }        from '@angular/forms';
+
+import { AwesomePipe }        from './contact/awesome.pipe';
+import { ContactComponent }   from './contact/contact.component.3';
+
+// #docregion import-contact-directive
+import {
+  HighlightDirective as ContactHighlightDirective
+} from './contact/highlight.directive';
+// #enddocregion import-contact-directive
+
+@NgModule({
+// #docregion imports
+  imports: [ BrowserModule, FormsModule ],
+// #enddocregion imports
+// #docregion declarations, directive, component
+  declarations: [
+    AppComponent,
+    HighlightDirective,
+// #enddocregion directive
+    TitleComponent,
+// #enddocregion component
+
+    AwesomePipe,
+    ContactComponent,
+    ContactHighlightDirective
+// #docregion declarations, directive, component
+  ],
+// #enddocregion declarations, directive, component
+// #docregion providers
+  providers: [ UserService ],
+// #enddocregion providers
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }