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

Setting the hook


GitHub provides several hooks into other applications. A hook allows you to chain actions when a commit occurs. A hook is an extremely useful feature from a continuous integration standpoint because we can set up the code to be tested on every commit. Travis CI has a GitHub hook that can be easily set up on any GitHub repository. The following is a walk-through on how to create a Travis CI hook on your open source repository.

Creating the hook

Here are the steps to create the hook:

  1. Create a Travis CI account by going to the Travis CI page at https://travis-ci.org and click on Sign in with GitHub. Confirm the questions it asks and continue.

  2. Activate a GitHub Webhook to Travis CI. You can set up the Webhook in Travis CI through your profile URL at https://travis-ci.org/profile

  3. Turn the switch on. In the profile, you should see your repository.

    • Here is a before view of Webhook (Switch off):

    • Here is a view of the Webhook after it is enabled(Switch on):

Adding a Travis configuration file

Travis requires a configuration file to be at the root of your repository named .travis.yml. The configuration file contains the source code language, language versioning, metadata, and other information. The template configuration will look as follows:

language: node_js
node_js:
  - "0.10"

Besides the basic configuration in the preceding code, additional setup is needed to run Karma tests. The before_script configuration will be used to install Karma and Bower prior to running any tests. Here is what the configuration needs to look like in order to install Karma and Bower before any tests run:

language: node_js
node_js:
  - "0.10"
before_script:
  - npm install -g karma-cli
  - npm install -g bower
  - bower install

Now the tests are ready to be run. Add the preceding contents to a new file named travis.yml. By default, the Node.js project will execute the npm test command in Travis. This is why you don't need to specify the actual command to test your application.

Note

Please note that Travis CI is case sensitive.

The following screenshot is an example of what the preceding code looks like:

If you have any issues, go to the Travis CI Getting started guide at http://docs.travis-ci.com/user/getting-started/.