angular-cn/aio/content/examples/reactive-forms/e2e/app.e2e-spec.ts

'use strict'; // necessary for es6 output in node

import { browser, element, by } from 'protractor';

function finalDemoAddressForm(element: any, index: number) {
  let form = {
    street: element.all(by.css('input[formcontrolname=street]')).get(index).getAttribute('value'),
    city: element.all(by.css('input[formcontrolname=city]')).get(index).getAttribute('value'),
    state: element.all(by.css('select[formcontrolname=state]')).get(index).getAttribute('value'),
    zip: element.all(by.css('input[formcontrolname=zip]')).get(index).getAttribute('value')
  };
  return form;
}

describe('Reactive forms', function() {
  let select: any;

  beforeEach(function() {
    browser.get('');
    select = element(by.css('.container > h4 > select'));
  });

  describe('navigation', function() {
    it('should display the title', function() {
      let title = element(by.css('.container > h1'));
      expect(title.getText()).toBe('Reactive Forms');
    });

    it('should contain a dropdown with each example', function() {
      expect(select.isDisplayed()).toBe(true);
    });

    it('should have 9 options for different demos', function() {
      let options = select.all(by.tagName('option'));
      expect(options.count()).toBe(9);
    });

    it('should start with Final Demo', function() {
      select.getAttribute('value').then(function(demo: string) {
        expect(demo).toBe('Final Demo');
      });
    });
  });

// *************Begin Final Demo test*******************************

  describe('final demo', function() {
    it('does not select any hero by default', function() {
      let heroSection = element(by.css('app-hero-list > div'));
      expect(heroSection.isPresent()).toBe(false);
    });

    it('refreshes the page upon button click', function() {
      // We move to another page...
      let whirlwindButton = element.all(by.css('nav a')).get(0);
      whirlwindButton.click();
      let refresh = element(by.css('button'));
      refresh.click();
      let heroSection = element(by.css('app-hero-list > div'));
      expect(heroSection.isPresent()).toBe(false);
    });

    describe('Whirlwind form', function() {
      beforeEach(function() {
        let whirlwindButton = element.all(by.css('nav a')).get(0);
        whirlwindButton.click();
      });

      it('should show a hero information when the button is clicked', function() {
        let editMessage = element(by.css('app-hero-list > div > h3'));
        expect(editMessage.getText()).toBe('Editing: Whirlwind');
      });

      it('should show a form with the selected hero information', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        expect(nameInput.getAttribute('value')).toBe('Whirlwind');
        let address1 = finalDemoAddressForm(element, 0);
        expect(address1.street).toBe('123 Main');
        expect(address1.state).toBe('CA');
        expect(address1.zip).toBe('94801');
        expect(address1.city).toBe('Anywhere');
        let address2 = finalDemoAddressForm(element, 1);
        expect(address2.street).toBe('456 Maple');
        expect(address2.state).toBe('VA');
        expect(address2.zip).toBe('23226');
        expect(address2.city).toBe('Somewhere');
      });

      it('shows a json output from the form', function() {
        let json = element(by.css('app-hero-detail > p'));
        expect(json.getText()).toContain('Whirlwind');
        expect(json.getText()).toContain('Anywhere');
        expect(json.getText()).toContain('Somewhere');
        expect(json.getText()).toContain('VA');
      });

      it('has two disabled buttons by default', function() {
        let buttons = element.all(by.css('app-hero-detail > form > div > button'));
        expect(buttons.get(0).getAttribute('disabled')).toBe('true');
        expect(buttons.get(1).getAttribute('disabled')).toBe('true');
      });

      it('enables the buttons after we edit the form', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        nameInput.sendKeys('a');
        let buttons = element.all(by.css('app-hero-detail > form > div > button'));
        expect(buttons.get(0).getAttribute('disabled')).toBeNull();
        expect(buttons.get(1).getAttribute('disabled')).toBeNull();
      });

      it('saves the changes when the save button is clicked', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        nameInput.sendKeys('a');
        let save = element.all(by.css('app-hero-detail > form > div > button')).get(0);
        save.click();
        let editMessage = element(by.css('app-hero-list > div > h3'));
        expect(editMessage.getText()).toBe('Editing: Whirlwinda');
      });

      it('reverts the changes when the revert button is clicked', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        nameInput.sendKeys('a');
        let revert = element.all(by.css('app-hero-detail > form > div > button')).get(1);
        revert.click();
        let editMessage = element(by.css('app-hero-list > div > h3'));
        expect(editMessage.getText()).toBe('Editing: Whirlwind');
        expect(nameInput.getAttribute('value')).toBe('Whirlwind');
      });

      it('is able to add a new empty address', function() {
        let newLairButton = element.all(by.css('button')).get(3);
        newLairButton.click();
        let address3 = finalDemoAddressForm(element, 2);
        expect(address3.street).toBe('');
        expect(address3.state).toBe('');
        expect(address3.zip).toBe('');
        expect(address3.city).toBe('');
      });

      it('should show three radio buttons', function() {
        let radioButtons = element.all(by.css('input[formcontrolname=power]'));
        expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
        expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
        expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
      });

      it('should show a checkbox', function() {
        let checkbox = element(by.css('input[formcontrolname=sidekick]'));
        expect(checkbox.getAttribute('checked')).toBe(null);
      });
    });

    describe('Bombastic form', function() {
      beforeEach(function() {
        let bombastaButton = element.all(by.css('nav a')).get(1);
        bombastaButton.click();
      });

      it('should show a hero information when the button is clicked', function() {
        let editMessage = element(by.css('app-hero-list > div > h3'));
        expect(editMessage.getText()).toBe('Editing: Bombastic');
      });

      it('should show a form with the selected hero information', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        expect(nameInput.getAttribute('value')).toBe('Bombastic');
        let address1 = finalDemoAddressForm(element, 0);
        expect(address1.street).toBe('789 Elm');
        // expect(address1.state).toBe('OH');
        expect(address1.zip).toBe('04501');
        expect(address1.city).toBe('Smallville');
      });

      it('shows a json output from the form', function() {
        let json = element(by.css('app-hero-detail > p'));
        expect(json.getText()).toContain('Bombastic');
        expect(json.getText()).toContain('Smallville');
        expect(json.getText()).toContain('OH');
        expect(json.getText()).toContain('04501');
      });

      it('has two disabled buttons by default', function() {
        let buttons = element.all(by.css('app-hero-detail > form > div > button'));
        expect(buttons.get(0).getAttribute('disabled')).toBe('true');
        expect(buttons.get(1).getAttribute('disabled')).toBe('true');
      });

      it('enables the buttons after we edit the form', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        nameInput.sendKeys('a');
        let buttons = element.all(by.css('app-hero-detail > form > div > button'));
        expect(buttons.get(0).getAttribute('disabled')).toBeNull();
        expect(buttons.get(1).getAttribute('disabled')).toBeNull();
      });

      it('saves the changes when the save button is clicked', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        nameInput.sendKeys('a');
        let save = element.all(by.css('app-hero-detail > form > div > button')).get(0);
        save.click();
        let editMessage = element(by.css('app-hero-list > div > h3'));
        expect(editMessage.getText()).toBe('Editing: Bombastica');
      });

      it('reverts the changes when the revert button is clicked', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        nameInput.sendKeys('a');
        let revert = element.all(by.css('app-hero-detail > form > div > button')).get(1);
        revert.click();
        let editMessage = element(by.css('app-hero-list > div > h3'));
        expect(editMessage.getText()).toBe('Editing: Bombastic');
        expect(nameInput.getAttribute('value')).toBe('Bombastic');
      });

      it('is able to add a new empty address', function() {
        let newLairButton = element.all(by.css('button')).get(3);
        newLairButton.click();
        let address2 = finalDemoAddressForm(element, 1);
        expect(address2.street).toBe('');
        expect(address2.state).toBe('');
        expect(address2.zip).toBe('');
        expect(address2.city).toBe('');
      });

      it('should show three radio buttons', function() {
        let radioButtons = element.all(by.css('input[formcontrolname=power]'));
        expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
        expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
        expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
      });

      it('should show a checbox', function() {
        let checkbox = element(by.css('input[formcontrolname=sidekick]'));
        expect(checkbox.getAttribute('checked')).toBe(null);
      });
    });

    describe('Magneta form', function() {

      beforeEach(function() {
        let magnetaButton = element.all(by.css('nav a')).get(2);
        magnetaButton.click();
      });

      it('should show hero information when the button is clicked', function() {
        let editMessage = element(by.css('app-hero-list > div > h3'));
        expect(editMessage.getText()).toBe('Editing: Magneta');
      });

      it('should show a form with the selected hero information', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        expect(nameInput.getAttribute('value')).toBe('Magneta');
      });

      it('shows a json output from the form', function() {
        let json = element(by.css('app-hero-detail > p'));
        expect(json.getText()).toContain('Magneta');
      });

      it('has two disabled buttons by default', function() {
        let buttons = element.all(by.css('app-hero-detail > form > div > button'));
        expect(buttons.get(0).getAttribute('disabled')).toBe('true');
        expect(buttons.get(1).getAttribute('disabled')).toBe('true');
      });

      it('enables the buttons after we edit the form', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        nameInput.sendKeys('a');
        let buttons = element.all(by.css('app-hero-detail > form > div > button'));
        expect(buttons.get(0).getAttribute('disabled')).toBeNull();
        expect(buttons.get(1).getAttribute('disabled')).toBeNull();
      });

      it('saves the changes when the save button is clicked', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        nameInput.sendKeys('a');
        let save = element.all(by.css('app-hero-detail > form > div > button')).get(0);
        save.click();
        let editMessage = element(by.css('app-hero-list > div > h3'));
        expect(editMessage.getText()).toBe('Editing: Magnetaa');
      });

      it('reverts the changes when the revert button is clicked', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        nameInput.sendKeys('a');
        let revert = element.all(by.css('app-hero-detail > form > div > button')).get(1);
        revert.click();
        let editMessage = element(by.css('app-hero-list > div > h3'));
        expect(editMessage.getText()).toBe('Editing: Magneta');
        expect(nameInput.getAttribute('value')).toBe('Magneta');
      });

      it('is able to add a new empty address', function() {
        let newLairButton = element.all(by.css('button')).get(3);
        newLairButton.click();
        let address = finalDemoAddressForm(element, 0);
        expect(address.street).toBe('');
        expect(address.state).toBe('');
        expect(address.zip).toBe('');
        expect(address.city).toBe('');
      });

      it('should show three radio buttons', function() {
        let radioButtons = element.all(by.css('input[formcontrolname=power]'));
        expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
        expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
        expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
      });

      it('should show a checkbox', function() {
        let checkbox = element(by.css('input[formcontrolname=sidekick]'));
        expect(checkbox.getAttribute('checked')).toBe(null);
      });
    });
  }); // final demo

// *************Begin FormArray Demo test*******************************


 describe('formArray demo', function() {
    beforeEach(function() {
        let FormArrayOption = element.all(by.css('select option')).get(7);
        FormArrayOption.click();
    });

    it('should show FormArray Demo', function() {
      select.getAttribute('value').then(function(demo: string) {
        expect(demo).toBe('FormArray Demo');
      });
     });

    it('does not select any hero by default', function() {
      let heroSection = element(by.css('app-hero-list > div'));
      expect(heroSection.isPresent()).toBe(false);
    });

    it('refreshes the page upon button click', function() {
      // We move to another page...
      let whirlwindButton = element.all(by.css('nav a')).get(0);
      whirlwindButton.click();
      let refresh = element(by.css('button'));
      refresh.click();
      let heroSection = element(by.css('app-hero-list > div'));
      expect(heroSection.isPresent()).toBe(false);
    });

    describe('Whirlwind form', function() {
      beforeEach(function() {
        let whirlwindButton = element.all(by.css('nav a')).get(0);
        whirlwindButton.click();
      });

      it('should show hero information when the button is clicked', function() {
          let editMessage = element(by.css('div.demo > div > div > h3'));
          expect(editMessage.getText()).toBe('Editing: Whirlwind');
      });

      it('should show a form with the selected hero information', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        expect(nameInput.getAttribute('value')).toBe('Whirlwind');
        let address1 = finalDemoAddressForm(element, 0);
        expect(address1.street).toBe('123 Main');
        expect(address1.state).toBe('CA');
        expect(address1.zip).toBe('94801');
        expect(address1.city).toBe('Anywhere');
        let address2 = finalDemoAddressForm(element, 1);
        expect(address2.street).toBe('456 Maple');
        expect(address2.state).toBe('VA');
        expect(address2.zip).toBe('23226');
        expect(address2.city).toBe('Somewhere');
      });
      it('shows a json output from the form', function() {
        let json = element(by.css('app-hero-detail-8 > p'));
        expect(json.getText()).toContain('Whirlwind');
        expect(json.getText()).toContain('Anywhere');
        expect(json.getText()).toContain('Somewhere');
        expect(json.getText()).toContain('VA');
      });

      it('is able to add a new empty address', function() {
        let newLairButton = element.all(by.css('button')).get(1);
        newLairButton.click();
        let address2 = finalDemoAddressForm(element, 2);
        expect(address2.street).toBe('');
        expect(address2.state).toBe('');
        expect(address2.zip).toBe('');
        expect(address2.city).toBe('');
      });

      it('should show three radio buttons', function() {
        let radioButtons = element.all(by.css('input[formcontrolname=power]'));
        expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
        expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
        expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
      });

      it('should show a checkbox', function() {
        let checkbox = element(by.css('input[formcontrolname=sidekick]'));
        expect(checkbox.getAttribute('checked')).toBe(null);
      });

    }); // Whirlwind form

    describe('Bombastic FormArray form', function() {
      beforeEach(function() {
        let bombasticButton = element.all(by.css('nav a')).get(1);
        bombasticButton.click();
      });

      it('should show a hero information when the button is clicked', function() {
          let editMessage = element(by.css('div.demo > div > div > h3'));
          expect(editMessage.getText()).toBe('Editing: Bombastic');
      });

      it('should show a form with the selected hero information', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        // nameInput.getAttribute('value').then(function(name: string) {
        //   expect(name).toBe('Whirlwind');
        // });
        expect(nameInput.getAttribute('value')).toBe('Bombastic');
        let address1 = finalDemoAddressForm(element, 0);
        expect(address1.street).toBe('789 Elm');
        // expect(address1.state).toBe('OH');
        // This select should be OH not CA, which it shows in the UI, the JSON shows OH.
        expect(address1.zip).toBe('04501');
        expect(address1.city).toBe('Smallville');
      });

      it('shows a json output from the form', function() {
          let json = element(by.css('app-hero-detail-8 > p'));
          expect(json.getText()).toContain('Bombastic');
          expect(json.getText()).toContain('Smallville');
          expect(json.getText()).toContain('04501');
          expect(json.getText()).toContain('789 Elm');
        });

      it('is able to add a new empty address', function() {
        let newLairButton = element.all(by.css('button')).get(1);
        newLairButton.click();
        let address1 = finalDemoAddressForm(element, 1);
        expect(address1.street).toBe('');
        expect(address1.state).toBe('');
        expect(address1.zip).toBe('');
        expect(address1.city).toBe('');
      });

      it('should show three radio buttons', function() {
        let radioButtons = element.all(by.css('input[formcontrolname=power]'));
        expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
        expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
        expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
      });

      it('should show a checkbox', function() {
        let checkbox = element(by.css('input[formcontrolname=sidekick]'));
        expect(checkbox.getAttribute('checked')).toBe(null);
      });

    }); // Bombastic FormArray form

    describe('Magneta FormArray form', function() {
      beforeEach(function() {
        let magnetaButton = element.all(by.css('nav a')).get(2);
        magnetaButton.click();
      });

      it('should show a hero information when the button is clicked', function() {
          let editMessage = element(by.css('div.demo > div > div > h3'));
          expect(editMessage.getText()).toBe('Editing: Magneta');
      });

      it('should show a form with the selected hero information', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        expect(nameInput.getAttribute('value')).toBe('Magneta');
      });

      it('shows a json output from the form', function() {
          let json = element(by.css('app-hero-detail-8 > p'));
          expect(json.getText()).toContain('Magneta');
        });

      it('is able to add a new empty address', function() {
        let newLairButton = element.all(by.css('button')).get(1);
        newLairButton.click();
        let address1 = finalDemoAddressForm(element, 0);
        expect(address1.street).toBe('');
        expect(address1.state).toBe('');
        expect(address1.zip).toBe('');
        expect(address1.city).toBe('');
      });

      it('should show three radio buttons', function() {
        let radioButtons = element.all(by.css('input[formcontrolname=power]'));
        expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
        expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
        expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
      });

      it('should show a checkbox', function() {
        let checkbox = element(by.css('input[formcontrolname=sidekick]'));
        expect(checkbox.getAttribute('checked')).toBe(null);
      });

    }); // Magneta FormArray form

  }); // formArray demo


// *************Begin SetValue Demo test*******************************

 describe('SetValue demo', function() {
    beforeEach(function() {
      let SetValueOption = element.all(by.css('select option')).get(6);
      SetValueOption.click();
    });

    it('should show SetValue Demo', function() {
      select.getAttribute('value').then(function(demo: string) {
        expect(demo).toBe('SetValue Demo');
      });
     });

    it('does not select any hero by default', function() {
      let heroSection = element(by.css('app-hero-list > div'));
      expect(heroSection.isPresent()).toBe(false);
    });

    it('refreshes the page upon button click', function() {
      // We move to another page...
      let whirlwindButton = element.all(by.css('nav a')).get(0);
      whirlwindButton.click();
      let refresh = element(by.css('button'));
      refresh.click();
      let heroSection = element(by.css('app-hero-list > div'));
      expect(heroSection.isPresent()).toBe(false);
    });

    describe('Whirlwind setValue form', function() {
      beforeEach(function() {
        let whirlwindButton = element.all(by.css('nav a')).get(0);
        whirlwindButton.click();
      });

      it('should show a hero information when the button is clicked', function() {
          let editMessage = element(by.css('.demo > div > div > h3'));
          expect(editMessage.getText()).toBe('Editing: Whirlwind');
      });

      it('should show a form with the selected hero information', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        expect(nameInput.getAttribute('value')).toBe('Whirlwind');
        let address1 = finalDemoAddressForm(element, 0);
        expect(address1.street).toBe('123 Main');
        expect(address1.state).toBe('CA');
        expect(address1.zip).toBe('94801');
        expect(address1.city).toBe('Anywhere');
      });

      it('shows a json output from the form', function() {
        let json = element(by.css('app-hero-detail-7 > p'));
        expect(json.getText()).toContain('Whirlwind');
        expect(json.getText()).toContain('Anywhere');
        let nameOutput = element(by.css('app-hero-detail-7 > p ~ p'));
        expect(nameOutput.getText()).toContain('Name value: Whirlwind');
        let streetOutput = element(by.css('app-hero-detail-7 > p ~ p ~ p'));
        expect(streetOutput.getText()).toContain('Street value: 123 Main');
      });

      it('should show three radio buttons', function() {
        let radioButtons = element.all(by.css('input[formcontrolname=power]'));
        expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
        expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
        expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
      });

      it('should show a checkbox', function() {
        let checkbox = element(by.css('input[formcontrolname=sidekick]'));
        expect(checkbox.getAttribute('checked')).toBe(null);
      });

    }); // Whirlwind setValue form

    describe('Bombastic setValue form', function() {
      beforeEach(function() {
        let bombasticButton = element.all(by.css('nav a')).get(1);
        bombasticButton.click();
      });

      it('should show a hero information when the button is clicked', function() {
          let editMessage = element(by.css('.demo > div > div > h3'));
          expect(editMessage.getText()).toBe('Editing: Bombastic');
      });

      it('should show a form with the selected hero information', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        expect(nameInput.getAttribute('value')).toBe('Bombastic');
        let address1 = finalDemoAddressForm(element, 0);
        expect(address1.street).toBe('789 Elm');
        expect(address1.state).toBe('OH');
        expect(address1.zip).toBe('04501');
        expect(address1.city).toBe('Smallville');
      });

      it('shows a json output from the form', function() {
          let json = element(by.css('app-hero-detail-7 > p'));
          expect(json.getText()).toContain('Bombastic');
          expect(json.getText()).toContain('Smallville');
          expect(json.getText()).toContain('04501');
          expect(json.getText()).toContain('789 Elm');
          let nameOutput = element(by.css('app-hero-detail-7 > p ~ p'));
          expect(nameOutput.getText()).toContain('Name value: Bombastic');
          let streetOutput = element(by.css('app-hero-detail-7 > p ~ p ~ p'));
          expect(streetOutput.getText()).toContain('Street value: 789 Elm');
        });

      it('should show three radio buttons', function() {
        let radioButtons = element.all(by.css('input[formcontrolname=power]'));
        expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
        expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
        expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
      });

      it('should show a checkbox', function() {
        let checkbox = element(by.css('input[formcontrolname=sidekick]'));
        expect(checkbox.getAttribute('checked')).toBe(null);
      });

    }); // Bombastic setValue form

    describe('Magneta setValue form', function() {
      beforeEach(function() {
        let magnetaButton = element.all(by.css('nav a')).get(2);
        magnetaButton.click();
      });

      it('should show a hero information when the button is clicked', function() {
          let editMessage = element(by.css('.demo > div > div > h3'));
          expect(editMessage.getText()).toBe('Editing: Magneta');
      });

      it('should show a form with the selected hero information', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        expect(nameInput.getAttribute('value')).toBe('Magneta');
      });

      it('should show three radio buttons', function() {
        let radioButtons = element.all(by.css('input[formcontrolname=power]'));
        expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
        expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
        expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
      });

      it('should show a checkbox', function() {
        let checkbox = element(by.css('input[formcontrolname=sidekick]'));
        expect(checkbox.getAttribute('checked')).toBe(null);
      });

      it('shows a json output from the form', function() {
          let json = element(by.css('app-hero-detail-7 > p'));
          expect(json.getText()).toContain('Magneta');
          let nameOutput = element(by.css('app-hero-detail-7 > p ~ p'));
          expect(nameOutput.getText()).toContain('Name value: Magneta');
          let streetOutput = element(by.css('app-hero-detail-7 > p ~ p ~ p'));
          expect(streetOutput.getText()).toContain('Street value:');
        });

    }); // Magneta setValue form
  }); // SetValue demo

// *************Begin patchValue Demo test*******************************

 describe('patchValue demo', function() {
    beforeEach(function() {
      let SetValueOption = element.all(by.css('select option')).get(5);
      SetValueOption.click();
    });

    it('should show patchValue Demo', function() {
      select.getAttribute('value').then(function(demo: string) {
        expect(demo).toBe('PatchValue Demo');
      });
     });

    it('does not select any hero by default', function() {
      let heroSection = element(by.css('.demo > div > div'));
      expect(heroSection.isPresent()).toBe(false);
    });

    it('refreshes the page upon button click', function() {
      // We move to another page...
      let whirlwindButton = element.all(by.css('nav a')).get(0);
      whirlwindButton.click();
      let refresh = element(by.css('button'));
      refresh.click();
      let heroSection = element(by.css('.demo > div > div'));
      expect(heroSection.isPresent()).toBe(false);
    });

    describe('Whirlwind patchValue form', function() {
      beforeEach(function() {
        let whirlwindButton = element.all(by.css('nav a')).get(0);
        whirlwindButton.click();
      });

      it('should show a hero information when the button is clicked', function() {
          let editMessage = element(by.css('h2 ~ h3'));
          expect(editMessage.getText()).toBe('Editing: Whirlwind');
      });

      it('should show a form with the selected hero information', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        expect(nameInput.getAttribute('value')).toBe('Whirlwind');
        let address1 = finalDemoAddressForm(element, 0);
        expect(address1.street).toBe('');
        expect(address1.state).toBe('');
        expect(address1.zip).toBe('');
        expect(address1.city).toBe('');
      });

      it('should show three radio buttons', function() {
        let radioButtons = element.all(by.css('input[formcontrolname=power]'));
        expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
        expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
        expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
      });

      it('should show a checkbox', function() {
        let checkbox = element(by.css('input[formcontrolname=sidekick]'));
        expect(checkbox.getAttribute('checked')).toBe(null);
      });

      it('shows a json output from the form', function() {
        let json = element(by.css('app-hero-detail-6 > p'));
        expect(json.getText()).toContain('Whirlwind');
        let nameOutput = element(by.css('app-hero-detail-6 > p ~ p'));
        expect(nameOutput.getText()).toContain('Name value: Whirlwind');
        let streetOutput = element(by.css('app-hero-detail-6 > p ~ p ~ p'));
        expect(streetOutput.getText()).toContain('Street value:');
      });


    }); // Bombastic patchValue form
    describe('Bombastic patchValue form', function() {
      beforeEach(function() {
        let bombasticButton = element.all(by.css('nav a')).get(1);
        bombasticButton.click();
      });

      it('should show a hero information when the button is clicked', function() {
          let editMessage = element(by.css('h2 ~ h3'));
          expect(editMessage.getText()).toBe('Editing: Bombastic');
      });

      it('should show a form with the selected hero information', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        expect(nameInput.getAttribute('value')).toBe('Bombastic');
        let address1 = finalDemoAddressForm(element, 0);
        expect(address1.street).toBe('');
        expect(address1.state).toBe('');
        expect(address1.zip).toBe('');
        expect(address1.city).toBe('');
      });

      it('should show three radio buttons', function() {
        let radioButtons = element.all(by.css('input[formcontrolname=power]'));
        expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
        expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
        expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
      });

      it('should show a checkbox', function() {
        let checkbox = element(by.css('input[formcontrolname=sidekick]'));
        expect(checkbox.getAttribute('checked')).toBe(null);
      });

      it('shows a json output from the form', function() {
        let json = element(by.css('app-hero-detail-6 > p'));
        expect(json.getText()).toContain('Bombastic');
        let nameOutput = element(by.css('app-hero-detail-6 > p ~ p'));
        expect(nameOutput.getText()).toContain('Name value: Bombastic');
        let streetOutput = element(by.css('app-hero-detail-6 > p ~ p ~ p'));
        expect(streetOutput.getText()).toContain('Street value:');
      });
    }); // Bombastic patchValue form

    describe('Magneta patchValue form', function() {
      beforeEach(function() {
        let magnetaButton = element.all(by.css('nav a')).get(2);
        magnetaButton.click();
      });

      it('should show a hero information when the button is clicked', function() {
          let editMessage = element(by.css('h2 ~ h3'));
          expect(editMessage.getText()).toBe('Editing: Magneta');
      });

      it('should show a form with the selected hero information', function() {
        let nameInput = element(by.css('input[formcontrolname=name]'));
        expect(nameInput.getAttribute('value')).toBe('Magneta');
        let address1 = finalDemoAddressForm(element, 0);
        expect(address1.street).toBe('');
        expect(address1.state).toBe('');
        expect(address1.zip).toBe('');
        expect(address1.city).toBe('');
      });

      it('should show three radio buttons', function() {
        let radioButtons = element.all(by.css('input[formcontrolname=power]'));
        expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
        expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
        expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
      });

      it('should show a checkbox', function() {
        let checkbox = element(by.css('input[formcontrolname=sidekick]'));
        expect(checkbox.getAttribute('checked')).toBe(null);
      });

      it('shows a json output from the form', function() {
        let json = element(by.css('app-hero-detail-6 > p'));
        expect(json.getText()).toContain('Magneta');
        let nameOutput = element(by.css('app-hero-detail-6 > p ~ p'));
        expect(nameOutput.getText()).toContain('Name value: Magneta');
        let streetOutput = element(by.css('app-hero-detail-6 > p ~ p ~ p'));
        expect(streetOutput.getText()).toContain('Street value:');
      });

    }); // Magneta patchValue form
  }); // PatchValue demo



// *************Begin Nested FormBuilder Demo test*******************************

 describe('Nested FormBuilder demo', function() {
    beforeEach(function() {
      let NestedFormBuilderOption = element.all(by.css('select option')).get(4);
      NestedFormBuilderOption.click();
    });

    it('should show Nested FormBuilder Demo', function() {
      select.getAttribute('value').then(function(demo: string) {
        expect(demo).toBe('Nested FormBuilder group Demo');
      });
     });

    it('should show a form for hero information', function() {
      let nameInput = element(by.css('input[formcontrolname=name]'));
      expect(nameInput.getAttribute('value')).toBe('');
      let address1 = finalDemoAddressForm(element, 0);
      expect(address1.street).toBe('');
      expect(address1.state).toBe('');
      expect(address1.zip).toBe('');
      expect(address1.city).toBe('');
    });

    it('should show three radio buttons', function() {
      let radioButtons = element.all(by.css('input[formcontrolname=power]'));
      expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
      expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
      expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
    });

    it('should show a checkbox', function() {
      let checkbox = element(by.css('input[formcontrolname=sidekick]'));
      expect(checkbox.getAttribute('checked')).toBe(null);
    });

    it('shows a json output from the form', function() {
      let json = element(by.css('app-hero-detail-5 > p'));
      expect(json.getText()).toContain('address');
      let nameOutput = element(by.css('app-hero-detail-5 > p ~ p'));
      expect(nameOutput.getText()).toContain('Name value:');
      let streetOutput = element(by.css('app-hero-detail-5 > p ~ p ~ p'));
      expect(streetOutput.getText()).toContain('Street value:');
    });

  }); // Nested FormBuilder demo

// *************Begin Group with multiple controls Demo test*******************************

 describe('Group with multiple controls demo', function() {
    beforeEach(function() {
      let NestedFormBuilderOption = element.all(by.css('select option')).get(3);
      NestedFormBuilderOption.click();
    });

    it('should show Group with multiple controls Demo', function() {
      select.getAttribute('value').then(function(demo: string) {
        expect(demo).toBe('Group with multiple controls Demo');
      });
     });

    it('should show header', function() {
        let header = element(by.css('app-hero-detail-4 > h3'));
        expect(header.getText()).toBe('A FormGroup with multiple FormControls');
    });

    it('should show a form for hero information', function() {
      let nameInput = element(by.css('input[formcontrolname=name]'));
      expect(nameInput.getAttribute('value')).toBe('');
      let address1 = finalDemoAddressForm(element, 0);
      expect(address1.street).toBe('');
      expect(address1.state).toBe('');
      expect(address1.zip).toBe('');
      expect(address1.city).toBe('');
    });

    it('should show three radio buttons', function() {
      let radioButtons = element.all(by.css('input[formcontrolname=power]'));
      expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
      expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
      expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
    });
    it('should show a checkbox', function() {
      let checkbox = element(by.css('input[formcontrolname=sidekick]'));
      expect(checkbox.getAttribute('checked')).toBe(null);
    });
    it('shows a json output from the form', function() {
      let json = element(by.css('app-hero-detail-4 > p'));
      expect(json.getText()).toContain('power');
    });

}); // Group with multiple controls demo



// *************Begin Group with multiple controls Demo test*******************************

 describe('Simple FormBuilder Group demo', function() {
    beforeEach(function() {
      let SimpleFormBuilderOption = element.all(by.css('select option')).get(2);
      SimpleFormBuilderOption.click();
    });

    it('should show Simple FormBuilder group Demo', function() {
      select.getAttribute('value').then(function(demo: string) {
        expect(demo).toBe('Simple FormBuilder group Demo');
      });
     });

    it('should show header', function() {
        let header = element(by.css('app-hero-detail-3 > h3'));
        expect(header.getText()).toBe('A FormGroup with a single FormControl using FormBuilder');
    });

    it('should show a form for hero information', function() {
      let nameInput = element(by.css('input[formcontrolname=name]'));
      expect(nameInput.getAttribute('value')).toBe('');
    });

    it('shows a json output from the form', function() {
      let json = element(by.css('app-hero-detail-3 > p'));
      expect(json.getText()).toContain('name');
      let validStatus = element(by.css('app-hero-detail-3 > p ~ p'));
      expect(validStatus.getText()).toContain('INVALID');
    });

}); // Group with multiple controls demo


// *************Begin FormControl in a FormGroup Demo test*******************************

 describe('FormControl in a FormGroup demo', function() {
    beforeEach(function() {
      let SimpleFormBuilderOption = element.all(by.css('select option')).get(1);
      SimpleFormBuilderOption.click();
    });

    it('should show FormControl in a FormGroup Demo', function() {
      select.getAttribute('value').then(function(demo: string) {
        expect(demo).toBe('FormControl in a FormGroup Demo');
      });
     });

    it('should show header', function() {
        let header = element(by.css('app-hero-detail-2 > h3'));
        expect(header.getText()).toBe('FormControl in a FormGroup');
    });

    it('should show a form for hero information', function() {
      let nameInput = element(by.css('input[formcontrolname=name]'));
      expect(nameInput.getAttribute('value')).toBe('');
    });

    it('shows a json output from the form', function() {
      let json = element(by.css('app-hero-detail-2 > p'));
      expect(json.getText()).toContain('name');
    });

}); // Group with multiple controls demo

// *************Begin Just A FormControl Demo test*******************************

 describe('Just a FormControl demo', function() {
    beforeEach(function() {
      let FormControlOption = element.all(by.css('select option')).get(0);
      FormControlOption.click();
    });

    it('should show Just a FormControl demo', function() {
      select.getAttribute('value').then(function(demo: string) {
        expect(demo).toBe('Just a FormControl Demo');
      });
     });

    it('should show header', function() {
        let header = element(by.css('app-hero-detail-1 > h3'));
        expect(header.getText()).toBe('Just a FormControl');
    });

    it('should show a form for hero information', function() {
      let nameInput = element(by.css('input'));
      expect(nameInput.getAttribute('value')).toBe('');
    });

  }); // Just a FormControl demo test


}); // reactive forms