Angular: Testing and Debugging

Course details

Errors caused by missing dependencies, undefined variables, or poorly formatted data can cause your web application to stop working. In this course, learn how to track down and eliminate these types of errors in your Angular applications through the process of testing and debugging. Instructor Derek Peruo breaks down common error messages and goes over a variety of testing and debugging options. He also covers code linting, shares some tips and tricks for avoiding pitfalls during development, and goes into writing custom error handlers to make it easier to work with errors as your application grows.

Concepts

Introduction

Angular - Testing and debugging
What you should know
Exercise files

Getting Started

Application overview
Installing project dependencies
Installing Angular CLI

How Angular Reports Errors

Error handling in Angular
Understanding zones in Angular apps
Add a new file using Angular CLI
Writing a custom error handler class
Changes for Angular v16

Common Syntax Errors

Adding a local storage service
Fixing dependency injection errors
Getting and setting data in local storage
Adding a custom Angular pipe
Using regular expressions to find content
Using a pipe to change HTML content
Common pipe errors
Understanding Angular decorators
Challenge - Filter the array of users by locationId
Solution - Filter the array of users by locationId

Common Async Errors

Getting data using REST requests
Updating data using REST requests
Working with observables
Catching errors from an observable

Unit Testing in Angular

Testing overview
Basic Karma configuration
Testing services
Fixing injection dependency errors
Testing pipes
Testing components
Challenge - Custom test bed wrapper
Solution - Custom test bed wrapper

End-to-End Testing in Angular

Basic Protractor configuration
End-to-end testing without page objects
End-to-end testing with page objects
Changes for Angular v12
Challenge - Testing filter input
Solution - Testing filter input

Static Code Linting in Angular

Installing and running ESLint
Basic ESLint configuration
Fixing lint errors
Installing EditorConfig
Basic EditorConfig configuration

Conclusion

Next steps