docs(aio): Upgrade examples to Angular 6 (#23234)

PR Close #23234

aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,174 @@
+'use strict'; // necessary for node!
+
+import { browser, element, by, protractor, ElementFinder, ElementArrayFinder } from 'protractor';
+
+// THESE TESTS ARE INCOMPLETE
+describe('Form Validation Tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  describe('Template-driven form', () => {
+    beforeAll(() => {
+      getPage('app-hero-form-template');
+    });
+
+    tests('Template-Driven Form');
+    bobTests();
+  });
+
+  describe('Reactive form', () => {
+    beforeAll(() => {
+      getPage('app-hero-form-reactive');
+    });
+
+    tests('Reactive Form');
+    bobTests();
+  });
+});
+
+//////////
+
+const testName = 'Test Name';
+
+let page: {
+  section: ElementFinder,
+  form: ElementFinder,
+  title: ElementFinder,
+  nameInput: ElementFinder,
+  alterEgoInput: ElementFinder,
+  powerSelect: ElementFinder,
+  powerOption: ElementFinder,
+  errorMessages: ElementArrayFinder,
+  heroFormButtons: ElementArrayFinder,
+  heroSubmitted: ElementFinder
+};
+
+function getPage(sectionTag: string) {
+  let section = element(by.css(sectionTag));
+  let buttons = section.all(by.css('button'));
+
+  page = {
+    section: section,
+    form: section.element(by.css('form')),
+    title: section.element(by.css('h1')),
+    nameInput: section.element(by.css('#name')),
+    alterEgoInput: section.element(by.css('#alterEgo')),
+    powerSelect: section.element(by.css('#power')),
+    powerOption: section.element(by.css('#power option')),
+    errorMessages: section.all(by.css('div.alert')),
+    heroFormButtons: buttons,
+    heroSubmitted: section.element(by.css('.submitted-message'))
+  };
+}
+
+function tests(title: string) {
+
+  it('should display correct title', function () {
+    expect(page.title.getText()).toContain(title);
+  });
+
+  it('should not display submitted message before submit', function () {
+    expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(false);
+  });
+
+  it('should have form buttons', function () {
+    expect(page.heroFormButtons.count()).toEqual(2);
+  });
+
+  it('should have error at start', function () {
+    expectFormIsInvalid();
+  });
+
+  // it('showForm', function () {
+  //   page.form.getInnerHtml().then(html => console.log(html));
+  // });
+
+  it('should have disabled submit button', function () {
+    expect(page.heroFormButtons.get(0).isEnabled()).toBe(false);
+  });
+
+  it('resetting name to valid name should clear errors', function () {
+    const ele = page.nameInput;
+    expect(ele.isPresent()).toBe(true, 'nameInput should exist');
+    ele.clear();
+    ele.sendKeys(testName);
+    expectFormIsValid();
+  });
+
+  it('should produce "required" error after clearing name', function () {
+    page.nameInput.clear();
+    // page.alterEgoInput.click(); // to blur ... didn't work
+    page.nameInput.sendKeys('x', protractor.Key.BACK_SPACE); // ugh!
+    expect(page.form.getAttribute('class')).toMatch('ng-invalid');
+    expect(page.errorMessages.get(0).getText()).toContain('required');
+  });
+
+  it('should produce "at least 4 characters" error when name="x"', function () {
+    page.nameInput.clear();
+    page.nameInput.sendKeys('x'); // too short
+    expectFormIsInvalid();
+    expect(page.errorMessages.get(0).getText()).toContain('at least 4 characters');
+  });
+
+  it('resetting name to valid name again should clear errors', function () {
+    page.nameInput.sendKeys(testName);
+    expectFormIsValid();
+  });
+
+  it('should have enabled submit button', function () {
+    const submitBtn = page.heroFormButtons.get(0);
+    expect(submitBtn.isEnabled()).toBe(true);
+  });
+
+  it('should hide form after submit', function () {
+    page.heroFormButtons.get(0).click();
+    expect(page.heroFormButtons.get(0).isDisplayed()).toBe(false);
+  });
+
+  it('submitted form should be displayed', function () {
+    expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(true);
+  });
+
+  it('submitted form should have new hero name', function () {
+    expect(page.heroSubmitted.getText()).toContain(testName);
+  });
+
+  it('clicking edit button should reveal form again', function () {
+    const newFormBtn = page.heroSubmitted.element(by.css('button'));
+    newFormBtn.click();
+    expect(page.heroSubmitted.isElementPresent(by.css('p')))
+      .toBe(false, 'submitted hidden again');
+    expect(page.title.isDisplayed()).toBe(true, 'can see form title');
+  });
+}
+
+function expectFormIsValid() {
+    expect(page.form.getAttribute('class')).toMatch('ng-valid');
+}
+
+function expectFormIsInvalid() {
+    expect(page.form.getAttribute('class')).toMatch('ng-invalid');
+}
+
+function bobTests() {
+  const emsg = 'Name cannot be Bob.';
+
+  it('should produce "no bob" error after setting name to "Bobby"', function () {
+    // Re-populate select element
+    page.powerSelect.click();
+    page.powerOption.click();
+
+    page.nameInput.clear();
+    page.nameInput.sendKeys('Bobby');
+    expectFormIsInvalid();
+    expect(page.errorMessages.get(0).getText()).toBe(emsg);
+  });
+
+  it('should be ok again with valid name', function () {
+    page.nameInput.clear();
+    page.nameInput.sendKeys(testName);
+    expectFormIsValid();
+  });
+}