Testing Angular Applications

by Jesse Palmer, Corinna Cohn, Mike Giambalvo, Craig Nishina

Overview

Summary

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.

Foreword by Brad Green, Google.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

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
• Writing and debugging 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 Author

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.

Table of Contents

1. Introduction to testing Angular applicationsPART 1 - Unit testing
2. Creating your first tests
3. Testing components
4. Testing directives
5. Testing pipes
6. Testing services
7. Testing the router
PART 2 - End-to-end testing
8. Getting started with Protractor
9. Understanding timeouts
10. Advanced Protractor topics
PART 3 - Continuous integration
11. Continuous integration

• Appendix A - Setting up the sample project
• Appendix B - Additional resources

Product Details

ISBN-13:	9781617293641
Publisher:	Manning
Publication date:	11/19/2018
Edition description:	1st Edition
Pages:	240
Product dimensions:	7.30(w) x 9.10(h) x 0.60(d)

About the Author

Jesse Palmer has more than 15 years of web development experience with Fortune 500 companies, the Federal Government, and small businesses. He is a Master Software Engineer at Capital One in Retail & Direct Technology Group who also contributes to Angular.

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.

Table of Contents

Foreword ix

Preface xi

Acknowledgments xiii

About this book xv

About the authors xviii

About the cover illustration xx

1 Introduction to testing Angular applications 1

1.1 Angular testing overview 2

1.2 Getting friendly with TypeScript 3

1.3 A closer look at test types 5

Unit tests 5

E2E tests 6

Unit tests vs. E2E tests 7

Part 1 Unit Testing 11

2 Creating your first tests 13

2.1 Writing tests using jasmine 14

Writing basic tests 14

2.2 Testing classes 17

Adding the rest of the tests 21

3 Testing components 25

3.1 Basic component tests 26

3.2 Real-world component testing 29

Importing the dependencies 30

Setting up the tests 33

Adding the tests 37

4 Testing directives 43

4.1 What are directives? 44

Components vs. directives 44

Different directives 45

4.2 Testing attribute directives 45

Introducing the favorite icon directive 45

Creating tests for FavoriteIconDirective 48

Setting up the FavoriteIconDirective test suite 50

Creating the FavoriteIconDirective tests 51

4.3 Testing structural directives 54

Introducing ShowContactsDirective 54

Creating your tests for ShowContactsDirective 55

Setting up the ShowContactsDirective test, suite 56

Creating the ShowContactsDirective tests 57

5 Testing pipes 59

5.1 Introducing PhoneNumberPipe 60

5.2 Testing PhoneNumberPipe 61

Testing the default usage for a pipe 61

Testing a pipe with a single parameter 65

Pipes with multiple parameters 67

6 Testing services 71

6.1 What are services? 72

6.2 How do services work in Angular? 73

Dependency injection 74

The @Injectable class decorator 76

6.3 Creating services with Angular CLI 76

6.4 Testing PreferencesService 77

Testing for failures 82

6.5 Testing services with promises 83

How asynchronous changes testing 86

Testing for failures with asynchronous services 88

6.6 Testing HTTP services with observables 89

7 Testing the router 93

7.1 What is the Angular router? 94

Configuring the router 95

Route guards: the router's lifecycle hooks 96

7.2 Testing routed components 97

Testing router-navigation with RouterTestingModule 97

Testing router parameters 101

7.3 Testing advanced routes 105

Route guards 105

Resolving data before loading a route 107

Part 2 End-to-End Testing 109

8 Getting started with Protractor 111

8.1 How Protractor works 112

8.2 Writing your first Protractor test 114

File structure 114

8.3 Installing and running 117

8.4 Interacting with elements 118

Test scenario: creating a new contact 119

Test scenario: workflows that don't create a new contact 123

8.5 By and element methods 125

8.6 Interacting with a list of elements 130

Filtering web elements 130

Mapping the contact list to an array 133

Reduce 135

8.7 Page objects 137

9 Understanding timeouts 141

9.1 Kinds of timeouts 142

9.2 Testing pages without Angular 142

Disabling waitForAngular 143

Automatically waiting for Angular 144

When to use browser. waitForAngularEnabled() 145

9.3 Waiting with ExpectedConditions 145

Waiting for the contact list to load 146

Testing a dialog 147

Waiting for elements to become stale 148

9.4 Creating custom conditions 150

Using browser wait 150

Getting elements from the browser 151

9.5 Handling long-running tasks 152

Using expected conditions 154

The browser event loop 155

What happened to $timeout? 155

Highway to the Angular zone 156

Fixing the test 157

10 Advanced Protractor topics 161

10.1 Configuration file in depth 161

Driver provider options 162

Desired capabilities 163

Plugins 166

Environment variables 168

10.2 Screenshot testing 170

Taking screenshots 170

Taking screenshots on test failure 171

Comparing screenshots 172

10.3 Experimental debugging features 176

WebDriver logs 176

Highlight delay 178

Blocking proxy 179

10.4 The control flow and debugging with Chrome DevTools 180

Asynchronous functions and promises 180

The WebDriver control flow 181

The future: async/await 183

Using Chrome DevTools 184

Part 3 Continuous Integration 189

11 Continuous Integration 191

11.1 Jenkins 192

Setting up Jenkins 192

Unit tests 194

E2E tests 197

11.2 Circled 200

Appendix A Setting up the sample project 203

Appendix B Additional resources 209

Index 211