Testing Angular Applications
Jesse Palmer, Corinna Cohn, Michael Giambalvo, Craig Nishina
  • MEAP began March 2016
  • Publication in October 2018 (estimated)
  • ISBN 9781617293641
  • 235 pages (estimated)
  • printed in black & white

The subject matter is very approachable and well presented.

Jim Schmehil

The Angular framework is great for building large-scale web applications that can be maintained and extended. And when you're building enterprise-level apps, testing is vital to the development process. Testing improves the quality of code and reduces maintenance, saving both time and money. Even though testing is crucial, it's sometimes neglected since there are few established resources and standards when it comes to modern JavaScript web applications. Developers who know how to build and leverage tests are highly valued by their clients and companies.

Table of Contents detailed table of contents

1. Introduction to Testing Angular Applications

1.1. Angular Testing Overview

1.2. Getting friendly with TypeScript

1.3. Types of Tests

1.3.1. Unit Tests

1.3.2. End-to-End Tests

1.3.3. Unit Tests vs End-to-End Tests

1.4. Summary

Part 1: Unit Testing

2. Creating Your First Tests

2.1. Getting started with the sample project

2.1.1. Introducing the Angular CLI

2.1.2. Installing the Angular CLI

2.1.3. Installing the sample project

2.2. Writing basic tests using Jasmine

2.2.1. Writing basic tests

2.3. Testing Classes

2.4. Summary

3. Testing Components

3.1. Get to know Components

3.1.1. What is a Component

3.1.2. The differences between Components and Directives

3.2. Testing Components

3.2.1. Basic Tests

3.2.2. Additional Tests

3.3. Summary

4. Testing Directives

4.1. What are directives?

4.2. Testing Attribute Directives

4.2.1. Introducing the Favorite Icon Directive

4.2.2. Creating our tests for the Favorite Icon directive

4.3. Testing Structural Directives

4.3.1. Introducing the Show Contacts Directive

4.3.2. Creating our tests for the Show Contacts directive

4.4. Summary

5. Testing Pipes

5.1. How to use Pipes

5.2. How to Test Pipes

5.2.1. Getting Started

5.2.2. Testing the Default Usage for a Pipe

5.2.3. Testing Pipes with a Single Parameter

5.2.4. Pipes with Multiple Parameters

5.3. Summary

6. Testing services

6.1. What are services?

6.2. How do services work in Angular?

6.2.1. Dependency Injection

6.2.2. The @Injectable() class decorator

6.3. Creating services with angular-cli

6.4. Testing PreferencesService

6.4.1. Testing for failures

6.5. Testing services with promises

6.5.1. Testing for failures with asynchronous services

6.6. Testing HTTP services with observables

6.6.1. Mocking the 'Http' Client Backend

6.7. Summary

7. Testing router

7.1. What is the Angular router?

7.1.1. Configuring the router

7.2. Testing routed components

7.2.1. Testing router navigation with RouterTestingModule

7.2.2. Testing router parameters

7.3. Testing advanced routes

7.3.1. Route guards

7.3.2. Resolving data before loading a route

7.4. Summary

Part 2: end-to-end Testing

8. Getting Started with Protractor

8.1. Writing Your first Protractor test

8.1.1. File structure

8.1.2. Installing and running

8.2. Interacting with elements

8.2.1. Creating a new contact

8.2.2. Workflows that do not create a new contact

8.2.3. Locator strategies

8.2.4. element methods

8.3. Interacting with element arrays

8.3.1. Filter

8.3.2. Map

8.3.3. Reduce

8.4. Page Objects

8.5. Summary

9. Understanding Timeouts

9.1. How Protractor works

9.2. Testing Pages without Angular

9.2.1. Disabling waitForAngular

9.2.2. Enabling waitForAngular

9.2.3. Using browser.waitForAngularEnabled()

9.3. Waiting with Expected Conditions

9.3.1. Waiting for the contact list to load

9.3.2. Testing a dialog

9.3.3. Waiting for elements to become stale

9.4. Creating custom conditions

9.4.1. Using browser.wait

9.4.2. Getting elements from the browser

9.5. Handling long-running tasks

9.5.1. What happened to $timeout?

9.5.2. The browser event loop

9.5.3. Highway to the Angular Zone

9.5.4. Fixing the test

9.6. Summary

10. Advanced Protractor topics

10.1. Configuration file in depth

10.1.1. Driver Provider Options

10.1.2. Desired capabilities

10.1.3. Plugins

10.1.4. Environment variables

10.2. Screenshot testing

10.2.1. Taking screenshots

10.2.2. Taking screenshots on test failure

10.2.3. Comparing screenshots

10.3. Experimental debugging features

10.3.1. WebDriver Log

10.3.2. Highlight Delay

10.3.3. Blocking Proxy

10.4. Debugging with Chrome Devtools

10.4.1. Asynchronous functions and promises

10.4.2. WebDriver Control Flow

10.4.3. The future: async/await

10.4.4. Using Chrome DevTools

10.5. Summary

Part 3: Continuous integration

11. Continuous integration

11.1. Jenkins

11.1.1. Setting up Jenkins

11.1.2. Unit tests

11.1.3. E2E tests

11.2. Circle CI

11.3. Summary


Appendix A: Setting up the sample project

A.1. Introducing the Angular CLI

A.2. Installing prerequisites

A.2.1. Installing the Angular CLI the first time

A.2.2. Updating an old version of the Angular CLI

A.3. Installing the sample project

A.4. Configuring dependencies

A.5. Running the application

Appendix B: Additional resources

B.1. Angular testing

B.2. General testing

About the book

Testing Angular Applications is an example-rich, hands-on guide that gives you the real-world techniques you need to thoroughly test all parts of your Angular applications. You'll start with an introduction to Angular, TypeScript, testing fundamentals, and the testing frameworks and tools used in the book and begin writing your first tests. Next, you'll learn how to set-up your Angular environment, including TypeScript and the Angular dependencies and you'll create your first component. The second part of the book focuses on the most important concepts of Angular, such as testing components, directives, pipes, services, and routing. By the end of this book, you'll be able to confidently write unit and end-to-end tests for Angular applications in TypeScript.

What's inside

  • Getting to know TypeScript
  • Writing and debugging tests
  • Testing components, directives, services and pipes
  • Unit testing
  • End-to-end testing

About the reader

This book is for readers with intermediate JavaScript skills and some experience with JavaScript frameworks. No experience with testing or Angular required.

About the authors

Jesse Palmer has been a contributor and part of the Angular community since 2013. He works at a Handshake in San Francisco as a Senior Engineering Manager where he leads the Student Engineering organization.

Corinna Cohn has been creating websites since 1995 and has written enterprise web apps for radio stations, scientific publishing, education, and business-to-business, with a focus on single-page applications since 2013. Corinna has written ugly, cryptic software in the past, but has committed to writing human-readable, unit-tested, and maintainable code from now on.

Mike Giambalvo is a developer at Google working on the UI for Google Cloud Platform. He contributes to Angular and Protractor, the end to end test framework for Angular applications. In his copious free time, he enjoys hiking and building robots.

Craig Nishina is a developer at Google working on Ads. In a previous career, Craig worked as a civil engineer designing buildings, but he much prefers writing code over building structures. When he is not contributing to Protractor and webdriver-manager, he enjoys playing golf and traveling.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
MEAP combo $44.99 pBook + eBook + liveBook
MEAP eBook $35.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks

If you're not a Angular fan but need a super quick intro to it and a how to test apps, this material is for you. Such a good intro to testing Angular apps.

Rafael Avila Martinez

Excellent book to get started in Angular testing, even a good book to get started in Angular!

Desmond Horsley