docs(animations): use our heroes

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

@@ -29,7 +29,7 @@ describe('Animation Tests', () => {
     });
 
     it('animates between active and inactive', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
 
@@ -58,7 +58,7 @@ describe('Animation Tests', () => {
     });
 
     it('are not kept after animation', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
 
@@ -79,7 +79,7 @@ describe('Animation Tests', () => {
     });
 
     it('animates between active and inactive', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
 
@@ -108,7 +108,7 @@ describe('Animation Tests', () => {
     });
 
     it('animates between active and inactive', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
 
@@ -137,7 +137,7 @@ describe('Animation Tests', () => {
     });
 
     it('adds and removes element', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
       expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
@@ -157,7 +157,7 @@ describe('Animation Tests', () => {
     });
 
     it('adds and removes and animates between active and inactive', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
 
@@ -186,7 +186,7 @@ describe('Animation Tests', () => {
     });
 
     it('adds and removes element', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
       expect(li.getCssValue('height')).toBe('50px');
@@ -206,7 +206,7 @@ describe('Animation Tests', () => {
     });
 
     it('adds and removes element', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
       expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
@@ -227,7 +227,7 @@ describe('Animation Tests', () => {
     });
 
     it('adds and removes element', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
       expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
@@ -248,7 +248,7 @@ describe('Animation Tests', () => {
     });
 
     it('adds and removes element', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
       expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
@@ -260,8 +260,41 @@ describe('Animation Tests', () => {
 
   });
 
-  function addHero() {
+  describe('adding active heroes', () => {
-    element(by.buttonText('Add hero')).click();
+
+    let host: protractor.ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-basic'));
+    });
+
+    it('animates between active and inactive', () => {
+      addActiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+    });
+  });
+
+  function addActiveHero() {
+    element(by.buttonText('Add active hero')).click();
+    browser.driver.sleep(500);
+  }
+
+  function addInactiveHero() {
+    element(by.buttonText('Add inactive hero')).click();
     browser.driver.sleep(500);
   }
 

public/docs/_examples/animations/ts/app/hero-team-builder.component.ts

@@ -16,7 +16,8 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
   selector: 'hero-team-builder',
   template: `
     <div class="buttons">
-      <button [disabled]="!heroes.canAdd()" (click)="heroes.add()">Add hero</button>
+      <button [disabled]="!heroes.canAdd()" (click)="heroes.addInactive()">Add inactive hero</button>
+      <button [disabled]="!heroes.canAdd()" (click)="heroes.addActive()">Add active hero</button>
       <button [disabled]="!heroes.canRemove()" (click)="heroes.remove()">Remove hero</button>
     </div>
     <div class="columns">

public/docs/_examples/animations/ts/app/hero.service.ts

@@ -11,19 +11,17 @@ class Hero {
 }
 
 let ALL_HEROES = [
-  'Wolverine',
+  'Windstorm',
-  'Magneto',
+  'RubberMan',
-  'Emma Frost',
+  'Bombasto',
-  'Thing',
+  'Magneta',
-  'Kitty Pryde',
+  'Dynama',
-  'Nightcrawler',
+  'Narco',
-  'Juggernaut',
+  'Celeritas',
-  'Beast',
+  'Dr IQ',
-  'Captain America',
+  'Magma',
-  'Spider-Man',
+  'Tornado',
-  'Puck',
+  'Mr. Nice'
-  'Alex Wilder',
-  'Doctor Strange'
 ].map(name => new Hero(name));
 
 @Injectable()
@@ -43,8 +41,16 @@ export class Heroes implements Iterable<Hero> {
     return this.currentHeroes.length > 0;
   }
 
-  add() {
+  addActive() {
-    this.currentHeroes.push(ALL_HEROES[this.currentHeroes.length]);
+    let hero = ALL_HEROES[this.currentHeroes.length];
+    hero.state = 'active';
+    this.currentHeroes.push(hero);
+  }
+
+  addInactive() {
+    let hero = ALL_HEROES[this.currentHeroes.length];
+    hero.state = 'inactive';
+    this.currentHeroes.push(hero);
   }
 
   remove() {