A few e2e tests to start

Author: Foxandxss

public/docs/_examples/reactive-forms/e2e-spec.ts

@@ -0,0 +1,150 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ExpectedConditions } 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 8 options for different demos', function() {
+      let options = select.all(by.tagName('option'));
+      expect(options.count()).toBe(8);
+    });
+
+    it('should start with Final Demo', function() {
+      select.getAttribute('value').then(function(demo: string) {
+        expect(demo).toBe('Final Demo');
+      });
+    });
+  });
+
+  describe('final demo', function() {
+    it('does not select any hero by default', function() {
+      let heroSection = element(by.css('hero-list > div'));
+      expect(heroSection.isPresent()).toBe(false);
+    });
+
+    it('refresh 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('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 click', function() {
+        let editMessage = element(by.css('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]'));
+        // nameInput.getAttribute('value').then(function(name: string) {
+        //   expect(name).toBe('Whirlwind');
+        // });
+        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('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('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('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 click', function() {
+        let nameInput = element(by.css('input[formcontrolname=name]'));
+        nameInput.sendKeys('a');
+        let save = element.all(by.css('hero-detail > form > div > button')).get(0);
+        save.click();
+        let editMessage = element(by.css('hero-list > div > h3'));
+        expect(editMessage.getText()).toBe('Editing: Whirlwinda');
+      });
+
+      it('reverts the changes when the revert button is click', function() {
+        let nameInput = element(by.css('input[formcontrolname=name]'));
+        nameInput.sendKeys('a');
+        let revert = element.all(by.css('hero-detail > form > div > button')).get(1);
+        revert.click();
+        let editMessage = element(by.css('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('CA');
+        expect(address3.zip).toBe('');
+        expect(address3.city).toBe('');
+      });
+    });
+
+    describe('Bombasta form', function() {
+
+    });
+
+    describe('Magneta form', function() {
+
+    });
+  });
+});