Angular Protractor e2e Testing

Question

I am writing an end-to-end test using Protractor for my Angular application. I can mock httpBackend for unit test but I want to actually call the server and get the JSON re

Answer 1

Below is an example of how to automatically start and stop a separate node server only while the e2e tests run. A simple express mock server script is included as an example API.

protractor.conf.js

const {SpecReporter} = require('jasmine-spec-reporter');
const forever = require('forever-monitor');

const child = new (forever.Monitor)('index.js', {
  max: 10,
  silent: false,
  args: ["--port", "3001"],
  sourceDir: 'mock-server'
});

let startResolve;
let stopResolve;
const startPromise = new Promise((resolve) => startResolve = resolve);
const stopPromise = new Promise((resolve) => stopResolve = resolve);

child.on('start', function () {
  console.info('Forever started mocks.');
  startResolve();
});

child.on('restart', function () {
  console.info('Forever restarting mocks for ' + child.times + ' time');
});

child.on('exit:code', function (code) {
  if (code) {
    console.info('Forever exit mocks with code ' + code);
  } else {
    console.info('Forever exited mocks.');
  }
  stopResolve();
});

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function () {
    }
  },
  beforeLaunch: function () {
    child.start();

    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });

    return startPromise;
  },
  onPrepare() {
    jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
  },
  onCleanUp() {
    child.stop();

    return stopPromise;
  }
};

mock-server/index.js

// npm install --save express
// npm install --save body-parser
// npm install --save minimist

const express = require('express');
const bodyParser = require('body-parser');
const minimist = require('minimist');

const API_DELAY = 0;
const app = express();
app.use(bodyParser.json({limit: '50mb'}));

// Turn on CORS for browser testing.
app.use(function (req, res, next) {
  let accessHeaderInReq = false;
  if (req.headers.origin) {
    res.header('Access-Control-Allow-Origin', req.headers.origin);
    accessHeaderInReq = true;
  }
  if (req.headers['access-control-request-method']) {
    res.header('Access-Control-Allow-Methods', req.headers['access-control-request-method']);
    accessHeaderInReq = true;
  }
  if (req.headers['access-control-request-headers']) {
    res.header('Access-Control-Allow-Headers', req.headers['access-control-request-headers']);
    accessHeaderInReq = true;
  }
  if (accessHeaderInReq) {
    res.header('Access-Control-Max-Age', 60 * 60 * 24 * 365);
  }

  // Intercept OPTIONS method for angular preflight checks.
  if (accessHeaderInReq && req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  else {
    next();
  }
});

app.get('/api/foo', function (req, res, next) {
  console.info('GET - returning foo', req.body);
  setTimeout(() => {
    res.json({
      foo: "bar"
    });
  }, API_DELAY);
});

const argv = minimist(process.argv.slice(2));
const port = argv.port || 3000;
console.log("Starting express on port", port);
app.listen(port);

For continuous integration environments, you can install the mock server node_modules without changing directories like this:

npm --prefix ./mock-server install ./mock-server