Skip to content

End to End Testing

Jump to bottom
Christopher Haugen edited this page Nov 7, 2017 · 9 revisions

Quick Overview of E2E testing

Our Implementation of E2E Testing

Technology used

Why we chose it

  • Protractor is an end-to-end testing framework that works in a real browser. Using a Selenium-webserver it emulates real user interaction with the web application. It's simple to implement and easy to use and is the only real robust JS e2e testing framework which makes the only practical solution.

For e2e testing all layers are taken into consideration. Components are indirectly responsible for what is reflected in the DOM through the html template, but they are served with data from the server. The idea is to test all possible click events and reactions on the web application.

Examples

app.e2e-spec.ts

describe('App E2E Tests', function () {

  var EC = protractor.ExpectedConditions;
  var defaultConfig = eval(require('typescript')
    .transpile(require('graceful-fs')
      .readFileSync('./config/env/default/default.ts')
      .toString()));

  beforeAll(function () {
    // Important to have this line
    browser.ignoreSynchronization = true;
    browser.get('');
  });

  it('should contain correct title tag', function () {
    expect(browser.getTitle()).toEqual(defaultConfig.app.title);
  });

  it('should contain correct favicon', function () {
    expect(element(by.id('favicon')).getAttribute('href'))
      .toEqual('http://localhost:7001/' + defaultConfig.app.favicon);
  });

  it('should contain correct meta description', function () {
    expect(element(by.name('description')).getAttribute('content')).toEqual(defaultConfig.app.description);
  });

  it('should contain correct meta keywords', function () {
    expect(element(by.name('keywords')).getAttribute('content'))
      .toEqual(defaultConfig.app.keywords);
  });

});

signinout.e2e-spec.ts

describe('Signinout E2E Tests', function () {

  var EC = protractor.ExpectedConditions;

  it('should not display: Welcome, "userName"', function (done) {
    expect(element(by.css('.user-sign>h3')).isPresent()).toBeFalsy();
    done();
  });

  it('should display: SIGN UP/IN button', function (done) {
    expect(element(by.cssContainingText('button', 'SIGN UP')).isPresent()).toBeTruthy();
    expect(element(by.cssContainingText('button', 'SIGN IN')).isPresent()).toBeTruthy();
    done();
  });

  it('should not display: SIGN OUT', function (done) {
    expect(element(by.cssContainingText('button', 'SIGN OUT')).isPresent()).toBeFalsy();
    done();
  });

  it('should display login form on click', function (done) {
    element(by.cssContainingText('button', 'SIGN IN')).click();
    expect(element(by.cssContainingText('button', 'SIGN IN')).isPresent()).toBeFalsy();
    expect(element(by.cssContainingText('button', 'SIGN UP')).isPresent()).toBeTruthy();
    expect(element(by.cssContainingText('button', 'BACK')).isPresent()).toBeTruthy();
    done();
  });

  it('should throw "email is not registered" login error', function (done) {
    element(by.id('login_email-input')).sendKeys('test@test.co');
    element(by.id('login_password-input')).sendKeys('test');

    element(by.cssContainingText('button', 'LOGIN')).click();
    browser.wait(EC.presenceOf(element(by.id('errorText'))), 2000);
    expect(element(by.id('errorText')).getText()).toEqual('This email is not registered!');
    done();
  });

  it('should throw "password is not correct" login error', function (done) {
    element(by.cssContainingText('button', 'SIGN IN')).click();
    element(by.id('login_email-input')).sendKeys('test@test.com');
    element(by.id('login_password-input')).sendKeys('test1234');

    element(by.cssContainingText('button', 'LOGIN')).click();
    browser.wait(EC.presenceOf(element(by.id('errorText'))), 2000);
    expect(element(by.id('errorText')).getText()).toEqual('This password is not correct!');
    done();
  });

  it('should login without errors', function (done) {
    element(by.cssContainingText('button', 'SIGN IN')).click();
    element(by.id('login_email-input')).sendKeys('test@test.com');
    element(by.id('login_password-input')).sendKeys('test');
    element(by.cssContainingText('button', 'LOGIN')).click();

    browser.wait(EC.presenceOf(element(by.id('welcomeUser'))), 2000);

    expect(element(by.id('welcomeUser')).isPresent()).toBeTruthy();
    expect(element(by.id('welcomeUser')).getText()).toEqual('Welcome, test');
    element(by.cssContainingText('button', 'SIGN OUT')).click();
    done();
  });

  it('should display register form when clicked', function (done) {
    element(by.cssContainingText('button', 'SIGN UP')).click();
    expect(element(by.cssContainingText('button', 'SIGN UP')).isPresent()).toBeFalsy();
    expect(element(by.cssContainingText('button', 'REGISTER')).isPresent()).toBeTruthy();
    expect(element(by.cssContainingText('button', 'BACK')).isPresent()).toBeTruthy();

    expect(element(by.id('signup_username')).isPresent()).toBeTruthy();
    expect(element(by.id('signup_email')).isPresent()).toBeTruthy();
    expect(element(by.id('signup_password')).isPresent()).toBeTruthy();
    expect(element(by.id('signup_re_password')).isPresent()).toBeTruthy();
    done();
  });

  it('should display "username is already in use" register error', function (done) {
    element(by.id('signup_username-input')).sendKeys('test');
    element(by.id('signup_email-input')).sendKeys('thisisatest@test.com');
    element(by.id('signup_password-input')).sendKeys('password');
    element(by.id('signup_re_password-input')).sendKeys('password');

    element(by.cssContainingText('button', 'REGISTER')).click();
    browser.wait(EC.presenceOf(element(by.id('errorText'))), 2000);
    expect(element(by.id('errorText')).getText()).toEqual('This username is already in use!');
    done();
  });

  it('should display "email address is already in use" register error', function (done) {
    element(by.cssContainingText('button', 'SIGN UP')).click();
    element(by.id('signup_username-input')).sendKeys('testUserName');
    element(by.id('signup_email-input')).sendKeys('test@test.com');
    element(by.id('signup_password-input')).sendKeys('password');
    element(by.id('signup_re_password-input')).sendKeys('password');

    element(by.cssContainingText('button', 'REGISTER')).click();
    browser.wait(EC.presenceOf(element(by.id('errorText'))), 2000);
    expect(element(by.id('errorText')).getText()).toEqual('This email address is already in use!');
    done();
  });

  it('should display "passwords are not the same" register error', function (done) {
    element(by.cssContainingText('button', 'SIGN UP')).click();
    element(by.id('signup_username-input')).sendKeys('testUserName');
    element(by.id('signup_email-input')).sendKeys('thisisatest@test.com');
    element(by.id('signup_password-input')).sendKeys('password');
    element(by.id('signup_re_password-input')).sendKeys('password123');

    element(by.cssContainingText('button', 'REGISTER')).click();
    browser.wait(EC.presenceOf(element(by.id('errorText'))), 2000);
    expect(element(by.id('errorText')).getText()).toEqual('Inputted passwords are not the same!');
    done();
  });

  it('should login as newly registered user', function (done) {
    element(by.cssContainingText('button', 'SIGN UP')).click();
    element(by.id('signup_username-input')).sendKeys('testUserName');
    element(by.id('signup_email-input')).sendKeys('thisisatest@test.com');
    element(by.id('signup_password-input')).sendKeys('password');
    element(by.id('signup_re_password-input')).sendKeys('password');

    element(by.cssContainingText('button', 'REGISTER')).click();
    browser.wait(EC.presenceOf(element(by.id('welcomeUser'))), 2000);

    expect(element(by.id('welcomeUser')).isPresent()).toBeTruthy();
    expect(element(by.id('welcomeUser')).getText()).toEqual('Welcome, testUserName');
    element(by.cssContainingText('button', 'SIGN OUT')).click();
    done();
  });

});
Clone this wiki locally