7CC005 Workshop w6

Main Page >> Web Technologies >> Workbook >> Week 07 - Automated Web Testing

Official Google Angular testing guide

The main Angular testing guide is located here:

• https://angular.io/docs/ts/latest/guide/testing.html

You should probably read up to "Test a component with an async service". Please note that there are links to all live working examples near the beginning of the tutorial.

Adding PhantomJS into the mix

This is how to get the QuickStart project to work with Karma and PhantomJS.

Clone the repository

Before you start, you need to get the quickstart project:

$ git clone https://github.com/angular/quickstart.git
$ cd quickstart

Important: Obviously don't do this again if you already have it.

Install phantomjs and phantomjs launcher

First, you need to install PhantomJS, using a couple of npm commands:

$ npm install --save-dev phantomjs
$ npm install --save-dev karma-phantomjs-launcher

Change karma.conf.js

Once PhantomJS is installed, you need to tell Karma (the test runner) to use PhantomJS instead of Chrome (the default browser in the config file karma.conf.js):

// First change
// require('karma-chrome-launcher') 
require('karma-phantomjs-launcher')

// Second change
//browsers: ['Chrome'] 
browsers: ['PhantomJS']

Install Quickstart App

Then you need to install the quickstart app by running the usual command:

$ npm install

Important: again, you don't need to do this if your app is already up and running.

Run tests

And to run your tests, type this instead of "npm start":

$ npm test

TypeError: undefined is not a function error

If you get this error:

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
TypeError: undefined is not a function (evaluating 'System.config')
at karma-test-shim.js:30

Append system-polyfills.js to karma.conf.js, here:

files: [
  // System.js for module loading
  'node_modules/systemjs/dist/system.src.js',
  'node_modules/systemjs/dist/system-polyfills.js',

Web server 404 errors

If you get this error:

[1] 06 03 2017 14:57:03.905:WARN [web-server]: 404: /base/src/app/1st.spec.js.ts
[1] 06 03 2017 14:57:03.907:WARN [web-server]: 404: /base/src/app/app.component.spec.js.ts

Notice that the "base" folder shouldn't be there, as we haven't got it in our set-up.

You can remove it in the karma-test-shim.js file, here:

// builtPaths: root paths for output ("built") files
// get from karma.config.js, then prefix with '/base/' (default is 'src/')
var builtPaths = (__karma__.config.builtPaths || ['src/'])
                 //.map(function(p) { return '/base/'+p;});
                 .map(function(p) { return '/'+p;});

See bottom line.