Testing.md

Testing Angular Applications

This is a walkthrough to setup a Windows environment to perform JavaScript unit testing and end-to-end testing of Angular (or web) applications using Protractor, Karma test runner, and Jasmine (spec).

Setup

node.js

Install node.js from Node.js Downloads (v0.12.2 x64). Verify the installation running node --version from the command prompt.

protractor

Install protractor using npm with npm install -g protractor from the command prompt. Verify the installation with protractor --version.

To build with the optional dependencies, node-gyp (Generate Your Projects) requires Python v2.x (v2.7.9). If you are installing Python v2.x with an existing Python v3.x installation make sure Add python.exe to Path is disabled.

A compiler is also required, and either the Windows SDK or VisualStudio for Desktop are recommended in the installation instructions on the GitHub repo.

Two issues were encountered getting the Windows SDK to work on Windows 7:

1. If the WinSDK fails to install there may be a conflict with an existing Visual C++ Redistributable. I blanket uninstalled the existing Redistributables to move onto the next issue.

2. There is a known issue that nodejs fails to find the Windows SDK path from the Registry. Specify this with: call "<Windows SDK Install Path>\bin\Setenv.cmd" /Release /x64

Rebuild protractor with the optional dependencies and specifying the Python version npm install -g protractor --python=python2.7 or configure npm to always use it with npm config set python python2.7.

Java

Despite having multiple language bindings, off the shelf protractor requires Java to be installed (SDK 8 update 45 x64) to use the Selenium webdriver API.

webdriver-manager

webdriver-manager was installed with protractor, but you may want to install or update the binaries. If you're not going to try testing with IE, skip the first command to install it:

webdriver-manager update --ie
webdriver-manager update

Verify that you can start each browser with webdriver-manager --(chrome|ie) start.

karma

To run unit tests, install the Karma test runner and some extra packages to help report code coverage and give us better notifications.

npm install -g karma karma-cli karma-jasmine
npm install -g karma-chrome-launcher karma-phantomjs-launcher
npm install -g karma-coverage growly karma-growl-reporter karma-clear-screen-reporter karma-spec-reporter

karma --version

Growl for Windows

To receive UI notifications as the Karma task runner completes, install Growl for Windows (v2.0.9). We'll configure karma to use the karma-growl-reporter to use it below. There are different display styles, with the Translucent Dark Display as a favourite.

Unit Tests with Karma and Jasmine

Configuration

Run the following to have Karma help setup your config:

karma init karma.conf.js

We'll have to manually configure the file to add code coverage reports. Add values to preprocessors: and reporters:, and adding a new coverageReporter: property.

To enable notifications using Growl, add 'growl' to the reporters: array. To reset the console between test runs, add add 'clear-screen' to the reporters: array.

Add 'clear-screen' and 'spec' to the reporters, remove progress, and you're now good to go.

Running Tests

Start the Karma test runner:

karma start karma.conf.js

And now you can dive into the TDD/BDD test cycle of:

1. Write a test that fails.
2. Make it pass.
3. Repeat.
4. Profit.

Check out the Jasmine docs.

---

TODO: End-to-End tests with Protractor

TODO: PhantomJS

For headless (windowless) testing, the JavaScript-based browser PhantomJS ([v2.0.0](https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.0.0-windows.zip v2.0.0)) can be used. Since it is not a full-feature browser, it should be used with an inherent degree of risk. PhantomJS has it's own browser automation implementation of webdriver, called GhostDriver, ported to JavaScript. To use it .... TODO.

---

Object Oriented Programming with JavaScript

Intelligently cloning the transition from JSON to a JSON Graph data structure is about as good a time as any to dive into proper object oriented programming with JavaScript. But first, there's the elephant in the room:

JavaScript uses prototype-based programming, with behaviour being reused or expanding upon existing prototypes.

The following is an intro article from the Mozilla Developer Network (MDN) reduced down to leave you with an impression of the nature of OO with JavaScript:

// object (class instance)
var Person = function (name) {
    // this is the "constructor"
    // every method here is called upon initialization

    // property:
    this.name = name;

    // method (1):
    this.methodExample1 = function () {};
};

// method (2):
Person.prototype.methodExample2 = function () {};

// namespace (container for functionality)
var APP = APP || {};
APP.default_user = new Person('anonymous') {};
APP.user = new Person('User') {};

// inheritance
function Superhero(name, superpower) {
    Person.call(this, name);
    this.superpower = superpower;
}
Superhero.prototype = Object.create(Person.prototype);
Superhero.prototype.constructor = Superhero;

// override method:
Superhero.prototype.methodExample1 = function () { /* better method */ };
var hero = new Superhero('Goku', '');

// instanceof?
hero instanceof Person === hero instanceof Superhero // true

Notice that JavaScript only supports single inheritance, but it doesn't detect the child class prototype.constructor so it must be stated manually. Brilliant, isn't it?

[Introduction to Object-Oriented JavaScript(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript) on MDN

---

Why don't we use $log in our angular apps?