Aurelia CLI based project (0.13.6) - Add e2e tests [Typescript based]

aurelia.json

  "e2eTestRunner": {
    "id": "protractor",
    "displayName": "Protractor",
    "source": "test/e2e/src/**/*.ts",
    "dist": "test/e2e/dist/",
    "typingsSource": [
      "typings/**/*.d.ts",
      "custom_typings/**/*.d.ts"
    ]
  }

aurelia.protractor.js

/* Aurelia Protractor Plugin */
function addValueBindLocator() {
  by.addLocator('valueBind', function (bindingModel, opt_parentElement) {
    var using = opt_parentElement || document;
    var matches = using.querySelectorAll('*[value\\.bind="' + bindingModel +'"]');
    var result;

    if (matches.length === 0) {
      result = null;
    } else if (matches.length === 1) {
      result = matches[0];
    } else {
      result = matches;
    }

    return result;
  });
}

function loadAndWaitForAureliaPage(pageUrl) {
  browser.get(pageUrl);
  return browser.executeAsyncScript(
    'var cb = arguments[arguments.length - 1];' +
    'document.addEventListener("aurelia-composed", function (e) {' +
    '  cb("Aurelia App composed")' +
    '}, false);'
  ).then(function(result){
    console.log(result);
    return result;
  });
}

function waitForRouterComplete() {
  return browser.executeAsyncScript(
    'var cb = arguments[arguments.length - 1];' +
    'document.querySelector("[aurelia-app]")' +
    '.aurelia.subscribeOnce("router:navigation:complete", function() {' +
    '  cb(true)' +
    '});'
  ).then(function(result){
    return result;
  });
}

/* Plugin hooks */
exports.setup = function(config) {
  // Ignore the default Angular synchronization helpers
  browser.ignoreSynchronization = true;

  // add the aurelia specific valueBind locator
  addValueBindLocator();

  // attach a new way to browser.get a page and wait for Aurelia to complete loading
  browser.loadAndWaitForAureliaPage = loadAndWaitForAureliaPage;

  // wait for router navigations to complete
  browser.waitForRouterComplete = waitForRouterComplete;
};

exports.teardown = function(config) {};
exports.postResults = function(config) {};

e2e.json

{
  "name": "e2e",
  "description": "Runs all e2e tests and reports the results.",
  "flags": []
}

e2e.ts

/**
 * e2e task
 * 
 * You should have the server up and running before executing this task. e.g. run `au run`, otherwise the
 * protractor calls will fail.
 */
import * as project from '../aurelia.json';
import * as gulp from 'gulp';
import * as del from 'del';
import * as typescript from 'gulp-typescript';
import * as tsConfig from '../../tsconfig.json';
import {CLIOptions} from 'aurelia-cli';

import { webdriver_update, protractor } from 'gulp-protractor';

function clean() {
  
  return del(project.e2eTestRunner.dist + '*');
  
}

function build() {
  
  var typescriptCompiler = typescriptCompiler || null;
  
  if ( !typescriptCompiler ) {

    delete tsConfig.compilerOptions.lib;
    
    typescriptCompiler = typescript.createProject(Object.assign({}, tsConfig.compilerOptions, {
      // Add any special overrides for the compiler here
      module: 'commonjs'
    }));
    
  }

  return gulp.src(project.e2eTestRunner.typingsSource.concat(project.e2eTestRunner.source))
    .pipe(typescript(typescriptCompiler))
    .pipe(gulp.dest(project.e2eTestRunner.dist));
  
}

// runs build-e2e task
// then runs end to end tasks
// using Protractor: http://angular.github.io/protractor/
function e2e() {

  return gulp.src(project.e2eTestRunner.dist + '**/*.js')
    .pipe(protractor({
      configFile: 'protractor.conf.js',
      args: ['--baseUrl', 'http://127.0.0.1:9000']
    }))
    .on('end', function() { process.exit(); })
    .on('error', function(e) { throw e; });

}

export default gulp.series(
  webdriver_update,
  clean,
  build,
  e2e
);

GUIDE.md

Setting up Aurelia CLI based project with e2e tests

Disclaimer: This is a basic implementation, and much of the configuration files have been lifted from the aurelia skeleton.

##Install dependencies

npm i -D del gulp-protractor

Establish configurations

In repository root (same place your tslint.json and so on):

1. Create protractor.conf.js
2. Create aurelia.protractor.js

Expand the Aurelia CLI tool

1. Add an e2eTestRunner key to your aurelia_project/aurelia.json with the configuration given below (see file aurelia.json)
2. Add the e2e task by putting files e2e.ts and e2e.json into your aurelia_project/tasks folder.

Rejoice

You should now be able to put your e2e tests into test/e2e/src folder. Here's a basic one to get you going and make sure you're up and working:

describe('App', () => {

  beforeEach(() => {

    browser.loadAndWaitForAureliaPage('http://localhost:9000');

  });

  it('should show the home page', () => {

    const title = browser.getTitle();
    
    expect(title).toEqual('Home');

  });

});

It's up to you to make sure your server is accessible at http://localhost:9000 for the tests to pass. Luckily running au run in a separate terminal should get you this!

Further reference: Look at the PageObject approach for maintainable tests.

See also Protractor docs and A style guide - although the latter is 'one way' not the 'true way' necessarily.

protractor.conf.js

exports.config = {
  directConnect: true,

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome'
  },

  //seleniumAddress: 'http://0.0.0.0:4444',
  specs: ['test/e2e/dist/*.js'],

  plugins: [{
    path: 'aurelia.protractor.js'
  }],

  // Options to be passed to Jasmine-node.
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  }
};