[ng] ng.io sync for misc minor updates (#312)

* config file sync

* e2e test update

* s/falsey/falsy

* src/resources/js/util.js fix for IE11 - angular.io/pull/3095

angular/angular.io#3095

* cache.sh: exclude files that we no longer sync

Author: chalin

gulp/ngio-get.js

@@ -230,7 +230,7 @@ module.exports = function (gulp, plugins, config) {
       // Patch live-example.js
       .pipe(replace(/target: '_blank/g, '$&" rel="noopener'))
       // Patch resources/js/util.js
-      .pipe(replace("loc.includes('/docs/' + lang + '/')", "loc.includes('/angular/')"))
+      .pipe(replace("loc.indexOf('/docs/' + lang + '/')", "loc.indexOf('/angular/')"))
       .pipe(gulp.dest('src'));
   });
 

public/docs/_examples/_boilerplate/tsconfig.json

@@ -6,7 +6,7 @@
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": ["es2015", "dom"],
+    "lib": [ "es2015", "dom" ],
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "typeRoots": [

public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts

@@ -1,56 +1,103 @@
-import { browser, element, by } from 'protractor';
+'use strict'; // necessary for es6 output in node
 
-describe('Hierarchical dependency injection', function () {
+import { browser, by, element } from 'protractor';
 
-  beforeEach(function () {
+describe('Hierarchical dependency injection', () => {
+
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should open with a card view', function () {
-    expect(element.all(by.cssContainingText('button', 'edit')).get(0).isDisplayed()).toBe(true,
-      'edit button should be displayed');
-  });
+  describe('Heroes Scenario', () => {
+    let page = {
+      heroName: '',
+      income: '',
 
-  it('should have multiple heroes listed', function () {
-    expect(element.all(by.css('heroes-list li')).count()).toBeGreaterThan(1);
-  });
+      // queries
+      heroEl: element.all(by.css('heroes-list li')).get(0), // first hero
+      heroCardEl: element(by.css('heroes-list hero-tax-return')), // first hero tax-return
+      taxReturnNameEl: element.all(by.css('heroes-list hero-tax-return #name')).get(0),
+      incomeInputEl: element.all(by.css('heroes-list hero-tax-return input')).get(0),
+      cancelButtonEl: element(by.cssContainingText('heroes-list hero-tax-return button', 'Cancel')),
+      closeButtonEl: element(by.cssContainingText('heroes-list hero-tax-return button', 'Close')),
+      saveButtonEl: element(by.cssContainingText('heroes-list hero-tax-return button', 'Save'))
+    };
 
-  it('should change to editor view after selection', function () {
-    let editButtonEle = element.all(by.cssContainingText('button', 'edit')).get(0);
-    editButtonEle.click().then(function() {
-      expect(editButtonEle.isDisplayed()).toBe(false, 'edit button should be hidden after selection');
+    it('should list multiple heroes', () => {
+      expect(element.all(by.css('heroes-list li')).count()).toBeGreaterThan(1);
+    });
+
+    it('should show no hero tax-returns at the start', () => {
+      expect(element.all(by.css('heroes-list li hero-tax-return')).count()).toBe(0);
+    });
+
+    it('should open first hero in hero-tax-return view after click', () => {
+      page.heroEl.getText()
+        .then(val => {
+          page.heroName = val;
+        })
+        .then(() => page.heroEl.click())
+        .then(() => {
+          expect(page.heroCardEl.isDisplayed()).toBe(true);
+        });
+    });
+
+    it('hero tax-return should have first hero\'s name', () => {
+      // Not `page.tax-returnNameInputEl.getAttribute('value')` although later that is essential
+      expect(page.taxReturnNameEl.getText()).toEqual(page.heroName);
+    });
+
+    it('should be able to cancel change', () => {
+      page.incomeInputEl.clear()
+        .then(() => page.incomeInputEl.sendKeys('777'))
+        .then(() => {
+          expect(page.incomeInputEl.getAttribute('value')).toBe('777', 'income should be 777');
+          return page.cancelButtonEl.click();
+        })
+        .then(() => {
+          expect(page.incomeInputEl.getAttribute('value')).not.toBe('777', 'income should not be 777');
+        });
+    });
+
+    it('should be able to save change', () => {
+      page.incomeInputEl.clear()
+        .then(() => page.incomeInputEl.sendKeys('999'))
+        .then(() => {
+          expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should be 999');
+          return page.saveButtonEl.click();
+        })
+        .then(() => {
+          expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should still be 999');
+        });
+    });
+
+    it('should be able to close tax-return', () => {
+      page.saveButtonEl.click()
+        .then(() => {
+          expect(element.all(by.css('heroes-list li hero-tax-return')).count()).toBe(0);
+        });
     });
-  });
 
-  it('should be able to save editor change', function () {
-    testEdit(true);
   });
 
-  it('should be able to cancel editor change', function () {
-    testEdit(false);
+  describe('Villains Scenario', () => {
+    it('should list multiple villains', () => {
+      expect(element.all(by.css('villains-list li')).count()).toBeGreaterThan(1);
+    });
   });
 
-  function testEdit(shouldSave: boolean) {
-    // select 2nd ele
-    let heroEle = element.all(by.css('heroes-list li')).get(1);
-    // get the 2nd span which is the name of the hero
-    let heroNameEle = heroEle.all(by.css('hero-card span')).get(1);
-    let editButtonEle = heroEle.element(by.cssContainingText('button', 'edit'));
-    editButtonEle.click().then(function() {
-      let inputEle = heroEle.element(by.css('hero-editor input'));
-      return inputEle.sendKeys('foo');
-    }).then(function() {
-      let buttonName = shouldSave ? 'save' : 'cancel';
-      let buttonEle = heroEle.element(by.cssContainingText('button', buttonName));
-      return buttonEle.click();
-    }).then(function() {
-      if (shouldSave) {
-        expect(heroNameEle.getText()).toContain('foo');
-      } else {
-        expect(heroNameEle.getText()).not.toContain('foo');
-      }
-    });
-  }
+  describe('Cars Scenario', () => {
 
+    it('A-component should use expected services', () => {
+      expect(element(by.css('a-car')).getText()).toContain('C1-E1-T1');
+    });
+
+    it('B-component should use expected services', () => {
+      expect(element(by.css('b-car')).getText()).toContain('C2-E2-T1');
+    });
 
+    it('C-component should use expected services', () => {
+      expect(element(by.css('c-car')).getText()).toContain('C3-E2-T1');
+    });
+  });
 });

public/docs/_examples/package.json

@@ -24,9 +24,8 @@
     "@angular/router": "~3.4.0",
     "@angular/tsc-wrapped": "^0.5.0",
     "@angular/upgrade": "~2.4.0",
-    "angular-in-memory-web-api": "~0.2.2",
+    "angular-in-memory-web-api": "~0.2.4",
     "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.1",
     "systemjs": "0.19.39",
     "zone.js": "^0.7.4"

scripts/cache.sh

@@ -15,24 +15,26 @@ CACHE="$BASE/_cache"
 FILES="
 guide/architecture.jade
 guide/attribute-directives.jade
-guide/component-styles.jade
 guide/dependency-injection.jade
 guide/displaying-data.jade
 guide/hierarchical-dependency-injection.jade
 guide/index.jade
 guide/learning-angular.jade
 guide/lifecycle-hooks.jade
-guide/pipes.jade
 guide/security.jade
 guide/server-communication.jade
-guide/structural-directives.jade
-guide/template-syntax.jade
 glossary.jade
 quickstart.jade
 _quickstart_repo.jade
 tutorial/index.jade
 tutorial/toh-pt5.jade
 tutorial/toh-pt6.jade"
+FILES_NO_LONGER_SYNCED="
+guide/component-styles.jade
+guide/pipes.jade
+guide/structural-directives.jade
+guide/template-syntax.jade
+"
 
 function cacheRefresh() {
     local FILE_PATTERN="*"

src/angular/_jade/_util-fns.jade

@@ -57,7 +57,7 @@
 
 //- Other
 - var _truthy = 'truthy';
-- var _falsey = 'falsey';
+- var _falsy = 'falsy';
 
 //- Used to prefix identifiers that are private. In Dart this will be '_'.
 - var _priv = '';

src/angular/_util-fns.jade

@@ -15,7 +15,7 @@ include /_jade/_util-fns
 - var _Observable = 'Stream';
 - var _liveLink = 'sample repo';
 - var _truthy = 'true';
-- var _falsey = 'false';
+- var _falsy = 'false';
 - var _appDir = 'lib';
 - var _indexHtmlDir = 'web';
 - var _mainDir = 'web';

src/angular/guide/template-syntax.jade

@@ -695,7 +695,7 @@ code-example(format="nocode").
 :marked
   Finally, we can bind to a specific class name.
   Angular adds the class when the template expression evaluates to #{_truthy}.
-  It removes the class when the expression is #{_falsey}.
+  It removes the class when the expression is #{_falsy}.
 +makeExample('template-syntax/ts/app/app.component.html', 'class-binding-3')(format=".")
 
 .l-sub-section
@@ -1075,7 +1075,7 @@ figure.image-display
     Don't forget the asterisk (`*`) in front of `ngIf`.
     For more information, see [\* and <template>](#star-template).
 :marked
-  Binding to a #{_falsey} expression removes the element subtree from the DOM.
+  Binding to a #{_falsy} expression removes the element subtree from the DOM.
 +makeExample('template-syntax/ts/app/app.component.html', 'NgIf-2')(format=".")
 
 .callout.is-helpful

src/resources/js/util.js

@@ -6,7 +6,7 @@ var NgIoUtil = (function () {
 
     NgIoUtil.isDoc = function ($location, lang) {
         var loc = $location.absUrl();
-        return loc.includes('/angular/');
+        return loc.indexOf('/angular/') >= 0;
     };
 
     // The following util functions are adapted from _utils-fn.jade.
@@ -19,7 +19,7 @@ var NgIoUtil = (function () {
          *
          * - app/main.ts -> web/main.dart
          * - displaying-data/ts/app/app.component.2.ts -> displaying-data/dart/lib/app_component.dart
-         * 
+         *
          * Notice that the '.2' is dropped from the name.
          */
         if (!_path) return _path;