Angular: Testing and Debugging

Discover how to test and debug the code in your Angular applications. Learn how to analyze testing reports, prevent common errors with custom error handling, and more.

Introduction

• Angular: Testing and debugging
• What you should know
• Exercise files

1. Getting Started

• Application overview
• Installing project dependencies
• Installing Angular CLI

2. 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

3. 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

4. Common Async Errors

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

5. 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

6. 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

7. Static Code Linting in Angular

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

Conclusion

• Next steps