Nothing specific is required for this recipe except your usual text editor and browser. Alternatively, you can use an online editor such as http://jsfiddle.net or http://plnkr.co.

By this point, you may have created your application. You can see this by opening index.html in a browser. Also, Kool G Rap will be displayed as you can see in the following screenshot:

The preceding process demonstrates the basic steps to configure a simple AngularJS application and should be familiar to you. The view component is automatically synchronized with the model data using AngularJS data binding. AngularJS takes data binding one step further by offering two-way data binding, resulting in changes to the model propagated to the view and vice versa.

In this recipe, we will build upon the basic project created in this chapter's first recipe. To get ready, perform the following steps to install Jasmine and prepare your project for testing:

In step 1, we use the SpecRunner.html file that Jasmine provides as a basis to build on for our test. Once we move the file into our directory structure, we need to ensure that all the paths correlate to the Jasmine files correctly; this we do in step 2.

The idea behind unit testing is to test the functionality of a piece of code in isolation. The AngularJS team helps to ease this process by offering replicas of objects called mocks that make unit testing easier by decoupling the components. The angular-mocks.js file loads the ngMock module (https://docs.angularjs.org/api/ngMock) so we can inject and mock AngularJS services. In step 3, we ensure that the AngularJS library is loaded in addition to the angular-mocks.js file.

In step 4, we ensure that our main cookbook.js application code is loaded and ready to test. Then, in step 5, we define a context based on our MainCtrl controller and a beforeEach() function. The beforeEach() function is passed a string alias cookbook as an argument to the mock module function that configures information ready for the Angular injector.

In step 6, we define our test starting with the it() function that requires a string detailing our test intention, plus a second argument that makes use of the mock module's inject function. The mock inject function basically creates an injectable wrapper around this second argument creating a new instance of $injector for each test. The $injector instance is used to resolve all references for this recipe; this includes the $controller service function, which instantiates controllers and $rootScope. We use the injected $rootScope service to create a new child scope using the $new() method (https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$new). This new child scope object is then passed to our newly instantiated controller that's constructed using the $controller service. Please refer to the introduction part of Chapter 2, Getting Started with Testing and AngularJS for further explanation about the Jasmine API.

Our expectation in step 7 is that when our MainCtrl controller is created, the scope's emcee property is expected to match the value of Kool G Rap (https://github.com/pivotal/jasmine/wiki/Matchers). This is asserted in step 7 by comparing the $scope.emcee property to Kool G Rap.

For a more in-depth overview of each of the steps involved in writing a test, including expectations and matchers, please read Chapter 2, Getting Started with Testing and AngularJS.

An alternative approach to injecting the controller reference within the spec would be to move this logic and assign it to a variable reference outside of the spec. We can do this in another beforeEach() function with the refactored code looking like this:

describe('MainCtrl', function () {
  var mainCtrl, $scope;
  beforeEach(module('cookbook'));
  beforeEach(inject(function ($controller, $rootScope) {
    $scope = $rootScope.$new();
    $controller('MainCtrl', {
      $scope: $scope
    });
  }));
  it('should assign the correct rapper to scope', function () {
    expect($scope.emcee).toEqual('Kool G Rap');
  });
});

You will need to have Node.js (http://nodejs.org/) installed on your machine. For the purpose of this recipe, we use the Chrome browser that you can download at http://www.google.co.uk/chrome/. Alternative browsers can be configured and I recommend that you read the Protractor browser setup guide at https://github.com/angular/protractor/blob/master/docs/browser-setup.md.

Protractor can start an instance of the Selenium standalone server if you provide the path to the Selenium server standalone JAR as follows. This will slow down the overall time it takes to run your tests due to Protractor having to start the server as opposed to an instance already running:

seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.41.0.jar'

Protractor will connect to a browser to run its tests. Preferably, we would want to run our application against an HTTP server and the quickest way to do this is using Python's (Version 2.4 or greater) SimpleHTTPServer by visiting https://docs.python.org/2/library/simplehttpserver.html.

In step 1, we create an HTML file, which is a basic AngularJS binding example. Step 3 shows the addition of a specs option that expects an array of relative filenames or a glob pattern. Step 4 executes the following sequence of events:

The final steps run the local HTTP server and the Protractor tests displaying the results.

A baseUrl option is available within the Protractor configuration, for example baseUrl (http://0.0.0.0:8000). This enables the use of relative paths using the get ()method that's available on Protractor's browser function, for example browser.get();. Please read the Protractor API documentation for more information on available functions (http://angular.github.io/protractor/#/api?view=Protractor).

There are some additional Chrome-specific options that can prove quite useful within your development toolkit. These can be added using a chromeOptions object; using this object will display the frame rate within your browser. Monitoring frame rate for consistency and a value between 30 to 60 frames per second (fps) can ensure that your application doesn't appear jerky and animations are smoothly run, for example:

capabilities: {
    'browserName': 'chrome',
    'chromeOptions': {
        'args': ['show-fps-counter=true']
    }
}

To target multiple spec files within your Protractor configuration, you can use a regular expression as opposed to an array of file names:

specs: ['test/*_spec.js']

All you need is Node.js (http://nodejs.org/; ideally version 0.10.* or above) installed on your machine.

The following screenshot shows you the steps discussed earlier:

If you prefer not to install karma-cli globally, allowing for different versions and different projects, you can remove the –g syntax. This will install the package to a node_modules folder within the root directory of the project:

npm install karma-cli

You can then run the commands from node_modules, as shown here:

./node_modules/.bin/karma init

You can either implement this as an initial step to an existing project, or build upon the basic project created in the first recipe. You can do this as follows:

Firstly, you need to create a Karma configuration file named karma.conf.js with the following code:

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    files: [
        "lib/angular/angular.js",
        "lib/angular/angular-mocks.js",
        "src/cookbook.js",
        "test/cookbookSpec.js"
    ],
    autoWatch: true,
    browsers: ['Chrome']
  });
};

Once this has been created, you can run the following command:

karma start

As a result of this, you should see that Karma launches the Chrome browser and produces the following in the console window:

Karma requires a configuration file for it to run our AngularJS application tests. Let's step through the configuration options:

The angular.js file is a dependency for angular-mocks.js, therefore angular.js must be declared before angular-mocks.js.

For a more comprehensive list of configuration options, please refer to Karma's configuration file documents at http://karma-runner.github.io/0.12/config/configuration-file.html.

Use a glob pattern for files, as opposed to declaring each file explicitly, by inserting the following code:

files: [
  "lib/angular/angular.js",
  "lib/angular/angular-mocks.js",
  "src/**/*.js",
  "test/**/*.js"
]

You will need to have Node.js (http://nodejs.org/, version 0.10.* or greater) installed on your machine.

All you need to do is install Testem using the following command:

npm install testem --save-dev

You can then run the following command:

testem

You will see that Testem produces the following:

To begin using Testem in this recipe you can either perform the following steps within an existing AngularJS project or build upon the basic project created in the first recipe:

To start with, create a Testem configuration file named testem.json with the following JSON:

{
  "framework": "jasmine",
  "src_files": [
    "lib/angular/angular.js",
    "lib/angular/angular-mocks.js",
    "src/cookbook.js",
    "test/cookbookSpec.js"
  ],
  "launch_in_dev" : ["Chrome"]
}

Next, you need to run the testem command. As a result, you'll see that Testem launches the Chrome browser and our single test passing as shown in the following screenshot.

A Testem configuration file allows finer control over what is included by the test runner. Let's step through the configuration options:

The angular.js file is a dependency for angular-mocks.js, therefore angular.js must be declared before angular-mocks.js. Testem will automatically detect our files and changes made to the application or tests and rerun the tests.

For a more comprehensive list of configuration options, please refer to Testem's configuration file documents by visiting https://github.com/airportyh/testem/blob/master/docs/config_file.md.

Use a glob pattern for files, as opposed to declaring each file explicitly, by inserting this:

"src_files": [
  "lib/angular/angular.js",
  "lib/angular/angular-mocks.js",
  "src/**/*.js",
  "test/**/*.js"
]

You can either perform the following steps within an existing AngularJS project, or build upon the basic project created in the first recipe:

Once Protractor and the Selenium server have both been installed, you are now ready to begin.

Step 1 simply runs the global installation for grunt-cli (which you can download at https://github.com/gruntjs/grunt-cli). This enables us to access the Grunt command anywhere on our system. Step 2 and step 3 install all of the dependencies required to successfully run all the Grunt tasks.

After this, step 4 and step 5 show how to set up the configuration files for both Karma and Protractor defining our unit and end-to-end specs.

In step 6, we see the Gruntfile.js file where we define all the necessary tasks to automate the unit and end-to-end tests. Both work by:

Finally, to run all of these tasks, we call either the test or e2e task.

You can either implement this as an initial step to an existing project or build upon the basic project created in the first recipe. If integrating into an existing project, ensure that you have specified the correct source and test files with their corresponding paths. Once configured, Gulp will run your tests as expected. If using the cookbook example project, then follow these steps:

Step 1 and step 2 install all the dependencies required to successfully run all of the Gulp tasks. Step 3 and step 4 show how we can set up the configuration files for both Karma and Protractor defining our unit and end-to-end specifications.

Step 5 has the gulpfile.js file where we define all the necessary tasks to automate the unit and end-to-end tests:

Finally, to run these tasks, we call either the test task or the e2e target.