O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

AngularJS Test-driven Development

Book Description

Implement the best practices to improve your AngularJS applications using test-driven development

In Detail

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.

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.

This book is a complete guide to testing techniques using Karma for unit testing and performing end-to-end testing with Protractor.

What You Will Learn

  • Implement unit and end-to-end testing with Karma and Protractor
  • Understand the workings of the file auto-watch feature and headless browser testing with Karma
  • Develop AngularJS controllers, services, and other components using the TDD approach
  • Implement the testing techniques with mocks, broadcast events, and asynchronous behavior
  • Integrate REST-based services and APIs into an application to extract data
  • Automate Karma unit tests with Travis CI
  • Get to know about TDD techniques, the TDD life cycle, and its power through clear examples to enhance your AngularJS applications

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. AngularJS Test-driven Development
    1. Table of Contents
    2. AngularJS Test-driven Development
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. Who this book is for
      3. Conventions
      4. Reader feedback
      5. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Introduction to Test-driven Development
      1. An overview of TDD
        1. Fundamentals of TDD
        2. Measuring success
          1. Breaking down the steps
          2. Measure twice cut once
        3. Diving in
          1. Setting up the test
          2. Creating a development to-do list
          3. Test first
          4. Making it run
          5. Making it better
      2. Testing techniques
        1. Testing with a framework
        2. Testing doubles with Jasmine spies
          1. Stubbing a return value
          2. Testing arguments
        3. Refactoring
        4. Building with a builder
      3. Self-test questions
      4. Summary
    9. 2. The Karma Way
      1. JavaScript testing tools
        1. Karma
        2. Protractor
      2. JavaScript testing frameworks
        1. Jasmine
        2. Selenium
        3. Mocha
      3. Birth of Karma
        1. The Karma difference
        2. Importance of combining Karma with AngularJS
      4. Installing Karma
        1. Installation prerequisites
        2. Configuring Karma
          1. Customizing Karma's configuration
          2. Confirming Karma's installation and configuration
          3. Common installation/configuration issues
        3. Testing with Karma
        4. Confirming the Karma installation
      5. Using Karma with AngularJS
        1. Getting AngularJS
          1. Bower
            1. Bower installation
          2. Installing AngularJS
          3. Installing Angular mocks
          4. Initializing Karma
        2. Testing with AngularJS and Karma
        3. A development to-do list
        4. Testing a list of items
          1. Test first
          2. Assemble, Act, and Assert (3 A's)
          3. Make it run
          4. Make it better
        5. Adding a function to the controller
          1. Test first
          2. Assemble, Act, and Assert (3 A's)
          3. Make it run
          4. Make it better
      6. Self-test questions
      7. Summary
    10. 3. End-to-end Testing with Protractor
      1. An overview of Protractor
      2. Origins of Protractor
        1. End of life
        2. The birth of Protractor
        3. Life without Protractor
      3. Protractor installation
        1. Installation prerequisites
        2. Installing Protractor
          1. Installing WebDriver for Chrome
        3. Customizing configuration
          1. Confirming installation and configuration
          2. Common installation/configuration issues
      4. Hello Protractor
        1. TDD end-to-end
          1. The pre-setup
        2. The setup
        3. Test first
          1. Installing the test web server
          2. Configuring Protractor
          3. Getting down to business
            1. Specification
            2. The development to-do list
            3. Test first
              1. Assemble, Act, Assert (3 A's)
              2. Running the test
            4. Make it run
            5. Make it better
      5. Cleaning up the gaps
        1. Async magic
          1. Loading a page before test execution
          2. Assertion on elements that get loaded in promises
        2. TDD with Protractor
      6. Self-test questions
      7. Summary
    11. 4. The First Step
      1. Preparing the application's specification
      2. Setting up the project
        1. Setting up the directory
        2. Setting up Protractor
        3. Setting up Karma
        4. Setting up http-server
      3. Top-down or bottom-up approach
      4. Testing a controller
        1. A simple controller test setup
        2. Initializing the scope
      5. Bring on the comments
        1. Test first
          1. Assemble
          2. Act
          3. Assert
        2. Make it run
          1. Adding the module
          2. Adding the input
          3. Controller
          4. Make it pass
      6. Make it better
        1. Implementing the Submit button
          1. Configuring Karma
          2. Test first
            1. Assemble
            2. Act
            3. Assert
          3. Make it run
          4. Make it better
          5. Back up the test chain
          6. Bind the input
      7. Onwards and upwards
        1. Test first
          1. Assemble
          2. Act
          3. Assert
        2. Make it run
          1. Fixing the unit tests
        3. Make it better
          1. Coupling of the test
      8. Self-test questions
      9. Summary
    12. 5. Flip Flop
      1. Fundamentals
        1. Protractor locators
          1. CSS locators
          2. Button and link locators
          3. Angular locators
          4. URL location references
      2. Creating a new project
        1. Setting up headless browser testing for Karma
          1. Preconfiguration
          2. Configuration
      3. Walk-through of Angular routes
        1. Setting up AngularJS routes
          1. Defining directions
            1. Configuring ngRoute
            2. Defining the route controllers
            3. Defining the route views
          2. Assembling the flip flop test
            1. Making the views flip
            2. Asserting a flip
          3. Making flip flop run
          4. Making flip flop better
      4. Searching the TDD way
        1. Deciding on the approach
        2. Walk-through of search query
        3. The search query test
        4. The search query HTML page
        5. The search application
      5. Show me some results!
        1. Creating the search result routes
        2. Testing the search results
          1. Assembling the search result test
          2. Selecting a search result
          3. Confirming a search result
        3. Making the search result test run
        4. Creating a location-aware test
        5. Making the search result better
          1. Confirming the route ID
            1. Setting up the route ID unit test
            2. Confirming the ID
            3. Making the route parameter's test run
      6. Self-test questions
      7. Summary
    13. 6. Telling the World
      1. Before the plunge
        1. Karma configuration
          1. File watching
        2. Using a bottom-up approach
        3. Services
        4. Publishing and subscribing messages
          1. Emitting
            1. Testing emit
          2. Testing broadcast
            1. Testing broadcast
        5. Publishing and subscribing – the good and bad
          1. The good
            1. Communicating through events
            2. Reducing coupling
      2. Harnessing the power of events
        1. The plan
        2. Rebranding
        3. Seeing recently viewed items
          1. Test first
            1. Assembling SearchController
            2. Selecting a product
            3. Expecting events to be published
          2. Making the search controller run
          3. Recently viewed unit test
            1. Test first
            2. Assembling RecentlyViewedController
            3. Invoking a recently viewed item
            4. Confirming RecentlyViewedController
          4. Making RecentlyViewedController run
          5. End-to-end testing
            1. Test first
              1. Assembling the recently viewed end-to-end test
              2. Selecting a search result
              3. Confirming recently viewed items
            2. Making the recentlyViewedItems test pass
            3. Making recently viewed items better
        4. Creating a product cart
          1. Publisher test first
            1. Assembling searchDetailController
            2. Invoking the saving of a product
            3. Confirming the save event
          2. Making the saveProduct test pass
          3. Test for the subscriber first
            1. Assembling the product cart test
            2. Invoking a saved cart event
            3. Confirming the saved cart
          4. Making the cart controller test run
          5. End-to-end testing
            1. Assembling the cart's end-to-end test
            2. Invoking a save to cart action
            3. Confirming products have been saved
          6. Making the cart's end-to-end test pass
      3. Self-test questions
      4. Summary
    14. 7. Give Me Some Data
      1. REST – the language of the Web
      2. Getting started with REST
      3. Testing asynchronous calls
        1. Creating asynchronous calls in Karma
        2. Creating asynchronous calls in Protractor
      4. Making REST requests using AngularJS
        1. Testing with AngularJS REST
          1. Testing the product service
          2. Testing $http with Karma
        2. Mocking requests with Protractor
      5. Displaying products with REST
        1. Unit testing product requests
          1. Setting up the project
          2. Karma configuration
          3. Using an API builder pattern
        2. The product data service
        3. The product data controller
          1. Assembling the product controller test
          2. Getting products
          3. Asserting product data results
        4. Making the product data tests run
      6. Testing middle-to-end
        1. Test first
          1. Assembling the product test
          2. Getting products
          3. Expecting product data results
        2. Making the product data run
      7. Testing end-to-end
        1. Getting the product data
      8. Self-test questions
      9. Summary
    15. A. Integrating Selenium Server with Protractor
      1. Installation
      2. Protractor configuration
      3. Running Selenium
      4. Let it run
        1. Test first
          1. Assemble
          2. Assert
      5. Make it run
      6. Summary
    16. B. Automating Karma Unit Testing on Commit
      1. GitHub
      2. Test setup
        1. Test scripts
      3. Setting the hook
        1. Creating the hook
        2. Adding a Travis configuration file
      4. References
    17. C. Answers
      1. Chapter 1, Introduction to Test-driven Development
      2. Chapter 2, The Karma Way
      3. Chapter 3, End-to-end Testing with Protractor
      4. Chapter 4, The First Step
      5. Chapter 5, Flip Flop
      6. Chapter 6, Telling the World
      7. Chapter 7, Give Me Some Data
    18. Index