Testing Angular Applications
Jesse Palmer, Corinna Cohn, Michael Giambalvo, Craig Nishina
Foreword by Brad Green, Google
  • November 2018
  • ISBN 9781617293641
  • 240 pages
  • printed in black & white
ePub + Kindle available Nov 23, 2018

Provides guidance on the overall strategy for how to think about testing on your projects to get the best return on your investment.

From the Foreword by Brad Green, Engineering Director for Angular at Google

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. By the end of this book, you'll be able to confidently write unit and end-to-end tests for Angular applications in TypeScript.

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. A closer look at test types

1.3.1. Unit Tests

1.3.2. End-to-End Tests

1.3.3. Unit Tests vs End-to-End Tests

Part 1: Unit testing

2. Creating Your First Tests

2.1. Writing basic tests using Jasmine

2.1.1. Writing basic tests

2.2. Testing Classes

3. Testing components

3.1. What are directives?

3.1.1. Components vs. directives

3.1.2. Different directives

3.2. Real-world component testing

3.2.1. Importing the dependencies

3.2.2. Setting up the tests

3.2.3. Adding the tests

4. Testing directives

4.1. What are directives?

4.1.1. Components vs. directives

4.1.2. Different directives

4.2. Testing attribute directives

4.2.1. Introducing the favorite icon directive

4.2.2. Creating tests for FavoriteIconDirective

4.2.3. Setting up the FavoriteIconDirective test suite

4.2.4. Creating the FavoriteIconDirective tests

4.3. Testing structural directives

4.3.1. Introducing ShowContactsDirective

4.3.2. Creating your tests for ShowContactsDirective

4.3.3. Setting up the ShowContactsDirective test suite

4.3.4. Creating the ShowContactsDirective tests

5. Testing Pipes

5.1. Introducing PhoneNumberPipe

5.2. Testing PhoneNumberPipe

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

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. How asynchronous changes testing

6.5.2. Testing for failures with asynchronous services

6.6. Testing HTTP services with observables

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

Part 2: End-to-end Testing

8. Getting Started

8.1. How Protractor works

8.2. Writing your first Protractor test

8.2.1. File structure

8.3. Installing and running

8.4. Interacting with elements

8.4.1. Test scenario: creating a new contact

8.4.2. Test scenario: workflows that don’t create a new contact

8.5. by and element methods

8.6. Interacting with a list of elements

8.6.1. Filtering web elements

8.6.2. Mapping the contact list to an array

8.6.3. Reduce

8.7. Page Objects

9. Understanding timeouts

9.1. Kinds of timeouts

9.2. Testing pages without Angular

9.2.1. Disabling waitForAngular

9.2.2. Automatically waiting for Angular

9.2.3. When to use browser.waitForAngularEnabled()

9.3. Waiting with ExpectedConditions

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. Using expected conditions

9.5.2. The browser event loop

9.5.3. What happened to $timeout?

9.5.4. Highway to the Angular zone

9.5.5. Fixing the test

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. The control flow and debugging with Chrome DevTools

10.4.1. Asynchronous functions and promises

10.4.2. The WebDriver Control Flow

10.4.3. The future: async/await

10.4.4. Using Chrome DevTools

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


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. Installing dependencies

A.5. Running the application

Appendix B: Additional resources

B.1. Angular testing

B.2. General testing

About the Technology

Don't leave the success of your mission-critical Angular apps to chance. Proper testing improves code quality, reduces maintenance costs, and rewards you with happy users. New tools and best practices can streamline and automate all aspects of testing web apps, both in development and in production. This book gets you started.

About the book

Testing Angular Applications teaches you how to make testing an essential part of your development and production processes. You'll start by setting up a simple unit testing system as you learn the fundamental practices. Then, you'll fine-tune it as you discover the best tests for Angular components, directives, pipes, services, and routing. Finally, you'll explore end-to-end testing, mastering the Protractor framework, and inserting Angular apps into your continuous integration pipeline.

What's inside

  • Getting to know TypeScript
  • Writing and debugging unit tests
  • End-to-end tests with Protractor
  • Building continuous integration for your entire test suite

About the reader

This book is for readers with intermediate JavaScript skills.

About the authors

Jesse Palmer is a senior engineering manager at Handshake. Corinna Cohn is a single-page web application specialist. Mike Giambalvo and Craig Nishina are engineers at Google.

FREE domestic shipping on three or more pBooks

A must-have if you want to learn how to test your Angular applications correctly.

Rafael Avila Martinez, Intersys Consulting

Essential to development shops delivering products built on the popular Angular framework.

Jason Pike, Atlas RFID Solutions

Developers of all levels will benefit from the material covered in this book.

Jim Schmehil, National Heritage Academies