Testing Angular Applications

**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 applications## PART 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 9. Getting started with Protractor 10. Understanding timeouts 11. Advanced Protractor topics ## PART 3 - Continuous integration 13. Continuous integration * Appendix A - Setting up the sample project * Appendix B - Additional resources Testing Angular Applications contents foreword preface acknowledgments about this book about the authors about the cover illustration 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 E2E tests 1.3.3 Unit tests vs. E2E tests part 1 Unit testing 2 Creating your first tests 2.1 Writing tests using Jasmine 2.1.1 Writing basic tests 2.2 Testing classes 2.2.1 Adding the rest of the tests 3 Testing components 3.1 Basic component tests 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 Testing the default usage for a pipe 5.2.2 Testing a pipe with a single parameter 5.2.3 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 the router 7.1 What is the Angular router? 7.1.1 Configuring the router 7.1.2 Route guards: the router?s lifecycle hooks 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 logs 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 CircleCI appendix A Setting up the sample project appendix B Additional resources index "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. "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. This book is for readers with intermediate JavaScript skills."--Publisher's description Testing is vital to the development process. It improves the quality of code and reduces maintenance, saving both time and money. But testing is sometimes neglected since there are few established resources and standards when it comes to testing modern Angular web applications. 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.