Testing Angular Applications

Corinna Cohn, Michael Giambalvo, Jesse Palmer, Craig Nishina

• Publisher: Manning
• Year: 2018
• ISBN:
  9781638355403
• Topic: Informatik
• Subtopic: Webprogrammierung

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

• Introduction to testing Angular applications

PART 1 - Unit testing

• Creating your first tests
• Testing components
• Testing directives
• Testing pipes
• Testing services
• Testing the router

PART 2 - End-to-end testing

• Getting started with Protractor
• Understanding timeouts
• Advanced Protractor topics

PART 3 - Continuous integration

• Continuous integration

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

1
Introduction to testing Angular applications

This chapter covers

• Understanding Angular testing
• Getting a first look at TypeScript
• Understanding the basics of unit and end-to-end tests
• Introducing Jasmine, Karma, and Protractor

Poorly written code, buggy functionality, and bad refactoring practices can lead to unreliable applications. Writing good tests will help detect these types of problems and prevent them from negatively affecting your application. It’s vital that you thoroughly test your application if you want to make it sustainable and supportable for years to come. A core purpose of writing tests is to help guard against breaking application functionality when you have to add new features or make bug fixes later on.

If you’ve developed an Angular application, you may know that Angular is a great framework for building testable web and mobile web applications. One of the goals in writing Angular was to make it a testable framework, and it shows.

Although testing Angular applications is of utmost importance, figuring out how to do that has been challenging until now. You may have been able to find a blog post or two, perhaps a video, but generally materials have been lacking to help guide you through all the different aspects of testing in one place. Well, you’re in luck! In your hands (or on your screen), you hold the key to getting started with testing Angular applications.

This book will help you build a foundation for testing the most important parts of Angular applications with confidence. We assume that you have some familiarity with the Angular framework, TypeScript, and command-line tools. If you haven’t written a test, this book will teach you enough fundamentals to get you started.

If you don’t have experience with Angular, now is a great time to learn about the Angular applications. For newbies, we would encourage you to walk through the tutorials and introductory information you can find at https://angular.io.

In this first chapter, you’ll get an overview of testing Angular applications, take a brief look at TypeScript, learn about the testing tools you’ll use, and be introduced to unit and end-to-end (E2E) tests. Let's get started!

1.1 Angular testing overview

Most Angular testing you’ll find out there involves two types of tests: unit tests and E2E tests. The bulk of this book will revolve around those two types.

This book is separated into two parts. The first part covers unit testing, which tests units of code. You’ll learn how to create unit tests for components, directives, pipes, services, and routing—using testing tools like Karma and Jasmine—and run those tests using the Angular command-line interface (CLI). The following list breaks down each of the testable concepts we’ll cover in part 1 of the book:

• Components —Chunks of code that you can use to encapsulate certain functionality that you can then reuse throughout the application. Components are types of directives (see next bullet), except they include a view or HTML template.
• Directives —Used to manipulate elements that exist in the DOM or can add elements to or remove them from the DOM. Examples of directives included with Angular are ngFor, ngIf, and ngShow.
• Pipes —Used to transform data. For example, say you want to turn an integer into currency. You would use a currency filter pipe to turn 15 into $15.00.
• Services —Although services technically don’t exist in Angular, the concept is still important. You’ll use services to fetch data and then inject it into your components.
• Routing —Allows users to navigate from one view to the next as they perform tasks in the web application.

In the second part of the book, we’ll dive into E2E testing using the Protractor framework. You’ll get practice writing tests that behave as if the interactions were coming from the user in a browser.

As for which version of Angular you’ll be using, this book is written to be compatible with versions of Angular 2 and later. Angular 2 was a complete rewrite from AngularJS 1.x, so that’s the base for the current version.

---

NOTE It's just Angular now. In the past, people have referred to Angular as AngularJS, Angular 1, Angular 2, Angular 4, and so on. From here on out, we’ll use AngularJS when we mean Angular 1.x, and Angular when we’re talking about versions 2 and higher. To read more about the decision, check out this blog post: http://angularjs.blogspot.com/2016/12/ok-let-me-explain-its-going-to-be.html.

---

In the next section, we’ll look at TypeScript, which is ...