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

Make it run


Now that the test is prepared, we can start running the Protractor test through the standalone Selenium Server. Here are the steps to run the Protractor test:

  1. Add the test file to the Protractor configuration:

    specs: ['scenario.js'],
  2. Create an empty HTML page that will be used to make the test run:

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
    </head>
    <body>
    
    </body>
    </html>
  3. Add the index page to the Protractor configuration:

    specs: ['scenario.js','index.html'],
  4. Run the test:

    $ ./node-modules/protractor/bin/protractor conf.js
    
  5. The first error is Angular could not be found on the page http://localhost:8080/index.html : retries looking for angular exceeded. To rectify this, perform the following steps:

    1. AngularJS has not been added to the page. Install angular through bower:

      $ bower install angular
    2. Add the AngularJS reference to the index.html page:

      <script type="text/javascript" src="bower_components/angular/angular.js"></script>
    3. Rerun the test.

  6. The next error is Angular could not be found on the page http://localhost:8080/index.html : angular never provided resumeBootstrap. This error means that AngularJS couldn't load the main module of your application. To rectify this, perform the following steps:

    1. Add a simple module into the body tag:

      <body ng-app='test'>
    2. Initialize the module in the last tag:

      <script type="text/javascript" src="bower_components/angular/angular.js"></script>
      <script type="text/javascript">
        angular.module('test',[]);
      </script>
    3. Rerun the test.

  7. The next error has hit the expectation: Expected 'http://localhost:8080/index.html' to be 'seleniumTestTitle'. Here are the steps to rectify this error:

    1. Set the title of the web page to the expectation:

      <title>seleniumTestTitle</title>
    2. Rerun the test.

  8. The Protractor output now reports 1 test, 1 assertion, 0 failures. With the success of the test, we have now successfully shown you how to use the Selenium standalone server.