Angular Test-Driven Development - Second Edition

Book description

Enhance your testing skills to build powerful and fault-free applications in Angular v4

About This Book

  • Learn test-driven development (TDD) for JavaScript
  • Improve your Karma and Protractor expertise by setting up an Angular test suite
  • A wide range of testing techniques for professional Angular applications accompanied by practical examples

Who This Book Is For

This book is for developers who have experience with Angular but want to understand the wider context of when, why, and how to apply testing techniques and best practices to create quality clean code. To get the most out of this book, you should have a good understanding of HTML and JavaScript and a basic understanding of Angular.

What You Will Learn

  • Get a clear overview of TDD in the context of JavaScript with a brief look at testing techniques, tools, and frameworks
  • Get an overview of Karma and create test suites for an Angular application
  • Install and configure Protractor for Angular and explore a few important Protractor APIs
  • Understand automated testing and implement headless automated tests with Karma
  • Implement 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

In Detail

This is a complete guide that shows you testing techniques with Karma that will help you perform unit testing and end-to-end testing with Protractor. It will show you how to optimize your Angular development process using TDD techniques and ensure your final project is free of bugs. All examples in this book are based on Angular v2 and are compatible with Angular v4.

We start by reviewing the TDD life cycle, TDD in the context of JavaScript, and various JavaScript test tools and frameworks. You will see how Karma and Protractor can make your life easier while running JavaScript unit tests. We will enable you to build a test suite for an Angular application and build a testable medium-to-large scale Angular application by handling REST API data.

Building on the initial foundational aspects, we move on to testing for multiple classes, partial views, location references, CSS, and the HTML element. In addition, we will explore how to use a headless browser with Karma. We will also configure a Karma file to automate the testing and tackle elements of Angular (components, services, classes, and broadcasting) using TDD.

Finally, you will find out how to pull data using an external API, set up and configure Protractor to use a standalone Selenium server, and set up Travis CI and Karma to test your application.

Style and approach

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

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 If you purchased this book elsewhere, you can visit and register to have the code file.

Publisher resources

Download Example Code

Table of contents

  1. Angular Test-Driven Development
    1. Angular Test-Driven Development
    2. Credits
    3. About the Author
    4. About the Reviewers
      1. Why subscribe?
    6. Customer Feedback
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Introduction to Test-Driven Development
      1. An overview of TDD
        1. Fundamentals of TDD
        2. Measuring the success with different eyes
          1. Breaking down the steps
          2. Measure twice, cut once
      2. Practical TDD with JavaScript
        1. Point out the development to-do list
        2. Setting up the test suite
        3. Test first
        4. Make the test run
        5. Make the project better
      3. Mechanism of testing
        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
      4. Self-test questions
      5. Summary
    9. 2. Details of JavaScript Testing
      1. The craft of JavaScript testing
        1. Automated testing
      2. Types of testing
        1. Unit testing
        2. End-to-end testing
      3. Testing tools and frameworks
        1. Karma
        2. Protractor
        3. Jasmine
        4. Mocha
        5. QUnit
        6. Selenium
        7. PhantomJS
      4. The choice is ours
      5. Say hello to Jasmine test suite
        1. Suites
        2. Spec
        3. Expectation
        4. Setup and teardown
        5. Spies
        6. The test suite of Jasmine
      6. The Jasmine test suite for Angular
      7. Self-test questions
      8. Summary
    10. 3. The Karma Way
      1. The birth of Karma
        1. The Karma difference
        2. The importance of combining Karma and Angular
      2. Installing Karma
        1. Installation prerequisites
      3. Configuring Karma
        1. Customizing Karma's configuration
        2. Confirming Karma's installation and configuration
        3. Common installation/configuration issues
      4. Testing with Karma
      5. Confirming the Karma installation
      6. Using Karma with Angular
        1. Getting Angular
          1. Angular project
          2. Getting ready
        2. Setting up Karma
          1. Testing the Karma runner
          2. Missing dependencies
      7. Testing with Angular and Karma
        1. A development to-do list
        2. Testing a list of items
          1. Test first
          2. The three As - Assemble, Act, and Assert
          3. Make it run
          4. Make it better
        3. Adding a function to the component class
          1. Test first
          2. The three As - Assemble, Act, and Assert
          3. Make it run
          4. Make it better
      8. Configuring Karma with Travis CI
        1. Travis CI
        2. Configuring Travis
        3. Setting up the test with Karma
      9. Self-test questions
      10. Summary
    11. 4. End-to-End Testing with Protractor
      1. An overview of Protractor
        1. Core of Protractor
        2. A quick example
      2. Origins of Protractor
        1. The birth of Protractor
        2. Life without Protractor
      3. Getting ready with Protractor
        1. Installation prerequisites
        2. Installing Protractor
        3. Installing WebDriver for Chrome
        4. Customizing configuration
        5. Confirming the installation and configuration
        6. Common installation and configuration issues
      4. Integrating Protractor with Angular
        1. Getting the existing project
        2. The Protractor setup flow
        3. Installing Protractor
        4. Updating WebDriver
        5. Getting ready
        6. Setting up the core configuration
        7. Diving into the test specifics
        8. Running the test via NPM
      5. Making the test better
        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
    12. 5. Protractor, a Step Ahead
      1. Advanced setup and configuration
        1. Installing Protractor globally
        2. Advanced configuration
      2. Protractor APIs
        1. Browser
        2. Elements
          1. element.all
          2. element
        3. Actions
        4. Locators
      3. Protractor tests - postmortem
        1. Types of failure
        2. Loading an existing project
        3. Including the debugger in the project
      4. Pausing and debugging
        1. Using pause
          1. A quick example
          2. Debugging with interactive mode
        2. Using the debugger
      5. Self-test questions
      6. Summary
    13. 6. The First Step
      1. Preparing the application's specifications
      2. Setting up the Angular project
        1. Loading an existing project
        2. Setting up the directory
        3. Setting up Karma
        4. Test directory updated
        5. Setting up Protractor
      3. Top-down versus bottom-up approach - which one do we use?
      4. Testing a component
        1. Getting ready to go
        2. Setting up a simple component test
        3. Initializing the component
        4. End-to-end versus unit test for components
      5. Diving into our comment application
        1. Test first
          1. Assemble
          2. Act
          3. Assert
        2. Make it run
          1. Recap the present application
          2. Adding the input
          3. Component
        3. Make it pass
        4. Make it better
          1. Implementing the Submit button
            1. Configuring Karma
            2. Test first
            3. Make it run
            4. Make it better
          2. Backing up the test chain
        5. Binding the input
      6. Onward and upward
        1. Test first
          1. Assemble
          2. Act
          3. Assert
        2. Make it run
          1. Fixing the unit tests
        3. Make it better
        4. Coupling the test
      7. Self-test questions
      8. Summary
    14. 7. Flip Flop
      1. Fundamentals of TDD
        1. Protractor locators
          1. CSS locators
          2. Button and link locators
          3. URL location references
      2. Preparing an Angular project
        1. Loading the existing project
        2. Preparing the project
        3. Running the project
        4. Restructuring the project
      3. Setting up headless browser testing for Karma
        1. Preconfiguration
        2. Configuration
      4. Walk-through of Angular routes and navigation
        1. Setting up Angular routes
          1. Defining directions
          2. The router module
          3. Configuring routes
          4. Routers in the application
          5. Routes in the config
        2. Hands-on routes
          1. Defining the router outlet
          2. Preparing the navigation
          3. Preparing the components
        3. Assembling the flip/flop test
          1. Flipping to the next view
          2. Asserting a flip
        4. Running the flip/flop test
        5. Opening the app in a browser
      5. Searching the TDD way
        1. Walk-through of the search query
        2. The search query test
        3. The search application
        4. The search component
        5. Show me the search results!
          1. Testing the search results
          2. Assembling the search result test
          3. Selecting a search result
          4. Confirming a search result
        6. The search result component
        7. Search results in the route
      6. Running the search wheel
        1. App structure
        2. Let's run
        3. How's e2e now!
      7. Self-test questions
      8. Summary
    15. 8. Telling the World
      1. Getting ready to communicate
        1. Loading the existing project
      2. Unit testing
        1. Testing a component
          1. Isolated testing
          2. Shallow testing
          3. Integration testing
      3. Karma configuration
        1. File watching
      4. Testing routers and navigation
        1. Testing the app component
        2. Testing router
          1. Router stubs
          2. The router-outlet and navigation test
        3. Implementing an integration test
        4. More tests...
      5. Recap of the application behavior
      6. Updating the application behavior
        1. Identifying the problem
        2. Finding a solution
      7. Angular services
        1. We have service now?
        2. Injectable services
        3. Services will serve you more
        4. Testing the service
          1. Testing service injection
          2. Testing HTTP requests
        5. Service stubs
          1. Service test with stubbed data
        6. Combining and running the service's tests
      8. Communicating through the power of events
        1. Angular events
        2. Custom events in Angular
        3. The Output and EventEmitter APIs
      9. Planning further improvements
        1. The search component
        2. Enabling sharing between components
        3. Communicating with the parent component
        4. Check output after refactoring
      10. Moving ahead
        1. Observables
        2. Publishing and subscribing
      11. Self-test questions
      12. Summary

Product information

  • Title: Angular Test-Driven Development - Second Edition
  • Author(s): Md. Ziaul Haq
  • Release date: February 2017
  • Publisher(s): Packt Publishing
  • ISBN: 9781786465474