Testing

This tutorial explains how to implement the webdriver testing utility to your Vue.js application.

Getting Started

If you don't have a Vue.js, then clone the vue-example.

Installation

Install the required packages.

$ npm install --save-dev webdriverio

Generate a configuration file.

$ ./node_modules/.bin/wdio config
* Where do you want to execute your tests?
> On my local machine
* Which framework do you want to use?
> mocha
* Shall I install the framework adapter for you? 
> Yes
* Where are your test specs located?
> ./tests/**/*.js
* Which reporter do you want to use spec?
> spec
* Shall I install the reporter library for you?
> Yes
* Do you want to add a service to your test setup sauce?
> selenium-standalone
* Shall I install the services for you?
> Yes
* Level of logging verbosity?
> silent
* In which directory should screenshots gets saved if a command fails?
> ./wdio/shots/
* What is the base url?
> http://localhost:3000

Add the wdio and hs_err_pid* keys to your .gitignore. If you are using nodemon.json then also add these keys under ignore.

Open the ./package.json file and add the npm test command.

{
  "scripts": {
    "test": "wdio wdio.conf.js"
  },
}

Create a new file ./tests/index.js and write your first test.

const assert = require('assert');

describe('foo', () => {
  it('should be true', () => {
    assert.equal(true, true);
  });
});

You can now run your test by executing the npm test command.

Linting Support

If you are using eslint, you'll need to register a plugin tu support mocha which we selected while generating the configuration file.

First install the plugin.

$ npm install --save-dev eslint-plugin-mocha

Then open the .eslintrc and reconfigure the file as shown below.

module.exports = {
  plugins: ['mocha'],
  env: {
    mocha: true
  },
  globals: {
    browser: false
  },
  rules: {
    'mocha/no-exclusive-tests': 'error'
  }
}

Testing Application

Our first test doesn't do much so let's replace it with something useful. The code below navigates to the home page and checks for a valid page title.

const assert = require('assert');

describe('/', () => {
  it('should have title', () => {
    browser.url('/');
    assert.equal(browser.getTitle(), 'Example');
  });
});

If we execute the npm test command, the test will fail because the application is not started. We can start the application manually, we can also use concurrently for starting the npm command but even better solution is to create a custom script for that.

Create a new file ./scripts/test.js and write a script which starts the application first and then runs the tests.

process.env.NODE_ENV = 'production';

const {spawn} = require('child_process');

(async () => {
  // starting your application
  ...
  // running tests
  spawn('./node_modules/.bin/wdio', ['./wdio.conf.js'], {stdio: 'inherit'})
  .on('close', (code) => app.close())
  .on('close', (code) => process.exit(code));
})()
.catch((error) => {
  throw error;
});

Open the ./package.json and change the npm test script.

{
  "scripts": {
    "test": "node --harmony ./scripts/test.js"
  },
}

Using Sauce Service

Install the dependencies.

$ npm install --save-dev wdio-sauce-service

Open the ./wdio.conf.js file and the code below at the bottom of the configuration file.

const {version} = require('./package');

exports.config = Object.assign(exports.config, {
  user: '{saucelabs-username}',
  key: '{saucelabs-access-key}',
  capabilities: [
    {browserName: 'firefox', build: version},
    {browserName: 'chrome', build: version},
  ],
  services: ['sauce'],
  sauceConnect: true,
  protocol: 'http',
  port: 80
});

The npm test command will now run tests using sauce service. Use the Platform Configurator for generating additional capabilities. Don't forget to adding the build option to each capability to group tests and display them under the Automated Builds tab in your Sauselabs account.

Continuous Deployment

If the test process works on your local machine, then it will work in cloud.

CircleCI is one of the popular continuous integration platforms which we will use here.

First, create a new file ./circle.yml.

machine:
  node:
    version: 6 # until https://github.com/laverdet/node-fibers/issues/321 is resolved
dependencies:
  override:
    - NODE_ENV=development npm install

Push your code to Github or Bitbucket repository then navigate to circleci.com and connect your repository. Tests will now be automatically run every time you push an update to that repository.

Note that you can use the process.env.CI variable to check if tests are run in cloud.