We are going to write e2e specs testing the UI from Displaying confirmation dialog with guarded routes of Chapter 9, Miscellaneous Use Cases and Best Practices. Just to recap: the first view has an input field (username) with a submit button. The button triggers a navigation to the second view. Whenever the user changes the username, a confirmation dialog with the text You have unsaved changes. Are you sure you want to leave this page? will appear. The user can click on Yes or No. We want to write five test cases that verify:

• Whether the first page has a proper title displayed within the h1 tag
• Whether the navigation happens when no input exists
• Whether a confirmation dialog gets displayed when an input exists
• Whether the user leaves the current view when clicking on Yes
• Whether the user stays on the current view when clicking on No

Before writing specs, we need a Page Object called FirstViewPage:

import {browser, element, by, ElementFinder} from 'protractor';
import {promise} from 'selenium-webdriver';

export class FirstViewPage {
  nameInput: ElementFinder;
  submitButton: ElementFinder;

  constructor() {
    this.nameInput = element(by.css('input[name="username"]'));
    this.submitButton = element(by.css('button[type="submit"]'));
  }

  navigateTo() {
    browser.get('http://localhost:3000/chapter9/first-view');
  };

  typeUsername(name: string) {
    this.nameInput.sendKeys(name);
  };

  confirm() {
    this.submitButton.click();
  };

  getTitle(): promise.Promise<string> {
    return element(by.css('h1')).getText();
  }
}

The Page Element ConfirmDialogPageElement encapsulates the internal structure details of the confirmation dialog. It offers three methods to ask for the dialog's visibility and to interact with the Yes and No buttons:

export class ConfirmDialogPageElement {
  element: ElementFinder;

  constructor(by: By) {
    this.element = element(by);
  }

  isDisplayed(): promise.Promise<boolean> {
    return this.element.isDisplayed();
  }

  confirm() {
    this.clickButton('fa-check');
  }

  cancel() {
    this.clickButton('fa-close');
  }

  private clickButton(icon: string) {
    let button = this.element.$('button .' + 
      icon).element(by.xpath('..'));
    button.click();
  }
}

The specs themselves are clean--they invoke public APIs from FirstViewPage and ConfirmDialogPageElement:

describe('FirstView', () => {
  let page: FirstViewPage;

  beforeEach(() => {
    page = new FirstViewPage();
    page.navigateTo();
  });
 
  it('should contain proper title', () => { 
    expect(page.getTitle()).toContain('first view');
  });
 
  it('should change the view when no input exists', () => { 
    page.confirm();
    expect(browser.getCurrentUrl()).not.toMatch(//first-view$/);
  });

  it('should display confirmation dialog when input exists', () => {
    page.typeUsername('Admin');
    page.confirm();
 
    let confirmDialog = new ConfirmDialogPageElement(
        by.css('p-confirmdialog')); 
    expect(confirmDialog.isDisplayed()).toBeTruthy();
  });
 
  it('should navigate to another view on confirm', () => {
    page.typeUsername('Admin');
    page.confirm();
 
    let confirmDialog = new ConfirmDialogPageElement(
        by.css('p-confirmdialog'));
    confirmDialog.confirm(); 
    expect(browser.getCurrentUrl()).not.toMatch(//first-view$/);
  });
 
  it('should stay on the same view on cancel', () => {
    page.typeUsername('Admin');
    page.confirm();
 
    let confirmDialog = new ConfirmDialogPageElement(
        by.css('p-confirmdialog'));
    confirmDialog.cancel(); 
    expect(browser.getCurrentUrl()).toMatch(//first-view$/);
  });
});

The next screenshot shows spec reports in IntelliJ/WebStorm: