Book Image

AngularJS Test-driven Development

By : Tim Chaplin
Book Image

AngularJS Test-driven Development

By: Tim Chaplin

Overview of this book

<p>Starting with reviewing the test-driven development (TDD) life cycle, you will learn how Karma and Protractor make your life easier while running JavaScript unit tests. You will learn how Protractor is different from Selenium and how to test it entirely. This book is a walk-through to using TDD to build an AngularJS application containing a controller, model, and scope.</p> <p>Building on the initial foundational aspects, you will expand to include testing for multiple controllers, partial views, location references, CSS, and the HTML element. In addition, you will explore using a headless browser with Karma. You will also configure Karma file watching to automate testing and tackle components of AngularJS (controller, service, model, and broadcasting) using TDD. At the end of this book, you will extend explore how to pull data using an external API, setting up and configuring Protractor to use a standalone Selenium server, and setting up Travis CI and Karma to test your application.</p> <p>This book is a complete guide to testing techniques using Karma for unit testing and performing end-to-end testing with Protractor.</p>
Table of Contents (17 chapters)
AngularJS Test-driven Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Protractor configuration


Luckily for us, we don't have to remember all the basic configurations for Protractor. Within npm_modules, there are examples that we can use. Here are the steps to copy the Selenium standalone configuration:

  1. Open up the example Protractor configuration file that is located in the following directory:

    ./node_modules/protractor/example/conf.js
    
  2. Copy the file to your local test folder:

    $ cp ./node_modules/protractor/example/conf.js
    

The configuration should look very similar to the chromeOnly configuration. Here is a snippet of the important configuration items:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',

  capabilities: {
    'browserName': 'chrome'
  },
…
};

The first important item is the seleniumAddress object. The address is the hostname, port, and location where the Selenium Server is running. The next important item is the capabilities object. Browser-specific capabilities give you the ability to define which browsers will be tested against. As we are not using the ChromeOnly configuration, you can now choose Internet Explorer (IE), Firefox, and so on. For more information on multiple browser support and capabilities, refer to the Protractor documentation at https://github.com/angular/protractor/blob/master/docs/browser-setup.md

In the next section, we will look at how to run Selenium.

Tip

The seleniumAddress object is meant to be configurable so that you can have a separate instance in a completely different location than your development machine. Visit the Selenium site for more information at http://www.seleniumhq.org/.