Angular Testing Masterclass (Angular 15)

A complete guide to Angular 15 Unit Testing and End to End (E2E) Testing, including Testing best practices and CI

What you'll learn

Code in Github repository with downloadable ZIP files per section

Testing Fundamentals

Angular Unit Testing Best Practices

Angular E2E Testing with Cypress

Angular Component and Service Testing

Asynchronous Angular Testing with fakeAsync and Async

Continuous Integration with Travis CI

Requirements

No prior knowledge of Testing is needed

Prior knowledge of Angular is important

Description

This Course in a NutshellThis video course, complete with a running Github repository is a complete step-by-step guide to Angular Testing in general. We are going to take a small sample application that is already completed, but that has no tests yet.We are then going to discuss the best approach to test each part of the application, and we are going to write the tests step-by-step, explaining every decision along the way.We are going to start by writing Unit Tests for the multiple parts of the application, and then on a later stage, we are going to learn how to perform End to End (E2E) tests.More than talking about how to test, this course will also cover when to test and why, as well as all sorts of testing best practices.Course OverviewStarting from scratch, we are going to introduce behavior-driven testing concepts, by quickly introducing the main concepts and utilities of the Jasmine Testing framework.We are then going to introduce some testing best practices, and we are going to talk about mocks and Jasmine spies. We will then introduce some of the Angular Testing utilities such as the Angular TestBed, which we will be using to test a couple of simple Angular services.We are then going to move on to test a more complex Angular service and talk about Angular HTTP request mocking, after which we will cover the testing of Angular components.We are going to learn how to test Angular components with and without the DOM, what parts of the component to test, and we are going to cover in detail asynchronous tests using the fakeAsync and async utilities.We will cover how to test several types of typical Angular components, such as for example presentational components and smart or container components, and we will learn how to mock Angular Observable-based services.After unit testing the multiple components of our application, we are going to then create a test suite of End to End tests using Cypress.Once we have the tests written for our application, we are then going to deploy them to Travis CI, and make sure that the tests are triggered with every commit.At the end the course, we are going to generate a test coverage report, and discuss some of the metrics.Table of ContentsThis course will go over the following topics:Introduction to the Jasmine testing frameworkIntroduction to Jasmine spiesUnit Testing of simple Angular ServicesJasmine testing best practicesIntroduction to Angular testing utilitiesTesting of complex Angular servicesMocking of Angular HTTP requestsUnit Testing of Angular ComponentsAsynchronous Angular Testing with fakeAsync and asyncMocking of Observable-based ServicesUnit Testing of Presentational ComponentsUnit Testing of Smart or Container ComponentsSimulation of user interaction in unit testsEnd to End Angular Testing with CypressContinuous Integration with Travis CIAngular CLI Test Coverage ReportsWhat Will You Learn In this Course?With this course, you will feel comfortable writing Angular tests for multiple types of services and components. You will know not only the multiple Jasmine and Angular testing utilities available, but you will also know when to use them and why.You will be familiar with Angular testing best practices, and you will know how to write useful tests that don't take a lot of time to write and that contribute a lot for the long term health of your project.Have a look at the course free lessons, and please enjoy the course!

Overview

Section 1: Course Kickoff - Development Environment Setup

Lecture 1 Angular Testing Course - Helicopter View

Lecture 2 IMPORTANT - Recommended Software Versions

Lecture 3 Angular Testing Course - Development Environment Setup

Lecture 4 The Typescript Jumpstart Ebook

Lecture 5 Quick Introduction to Jasmine - Test Suites and Specifications

Lecture 6 Step-by-Step Implementation of our First Jasmine Specification

Lecture 7 Unit Testing with Jasmine - Introduction to Jasmine Spies

Lecture 8 Structuring Angular Unit Tests - Test Setup using beforeEach

Lecture 9 Using Dependency Injection in Angular Testing - The Angular TestBed

Lecture 10 Angular Unit Testing Best Practices and commonly used Test Utilities

Section 2: Angular Service Testing In Depth

Lecture 11 Testing Angular HTTP Services - Test Setup with the HttpClientTestingModule

Lecture 12 Angular HTTP Service Testing - Step-by-Step Implementation

Lecture 13 Preventing Unintended HTTP Requests using the HTTP Testing Controller

Lecture 14 Testing Angular HTTP Data Modification Services

Lecture 15 Angular HTTP Services - Testing Error Handling

Lecture 16 Angular HTTP Testing - Checking HTTP Request Parameters

Section 3: Angular Component Testing In Depth

Lecture 17 WARNING (Read This)

Lecture 18 Introduction to Angular Component Testing - Presentational Components

Lecture 19 Angular Component Testing - Test Setup with the async Test Utility

Lecture 20 Angular Component Testing - DOM Interaction

Lecture 21 Angular Test Debugging - How to Trigger Change Detection?

Lecture 22 Angular Component Testing - Course Card List Test Suite Conclusion

Lecture 23 Testing Angular Smart or Container Components - Test Setup

Lecture 24 Mocking Observable-based Services - Testing the Home Component

Lecture 25 Container Component Test Suite - The Home Component

Lecture 26 Simulating User DOM Interaction in Angular Unit Tests

Section 4: Asynchronous Angular Testing In Depth

Lecture 27 Introduction to Asynchronous Angular Testing - Understanding Jasmine done()

Lecture 28 Understanding Asynchronous Testing - a Simple Example

Lecture 29 Understanding the Angular fakeAsync Testing Zone

Lecture 30 Testing Promised-based code - Introduction to Microtasks

Lecture 31 Testing Promise-based code with fakeAsync - Understanding flushMicrotasks

Lecture 32 Testing Asynchronous Code with fakeAsync - Full Example

Lecture 33 Using fakeAsync to test Asynchronous Observables

Lecture 34 fakeAsync in Practice - Fixing the Home component tests

Lecture 35 IMPORTANT - async() renamed to waitForAsync()

Lecture 36 Understanding the Angular waitForAsync() Test Zone

Section 5: Angular E2E (End to End) Testing with Cypress

Lecture 37 Angular (E2E) End to End Testing - Getting Started with Cypress

Lecture 38 Angular E2E (End To End Test) Hello World with Cypress

Lecture 39 How to Mock an HTTP Backend using Cypress

Lecture 40 Simulating User Interaction in Cypress End to End Tests

Section 6: Preparing an Angular Application for Continuous Integration (CI)

Lecture 41 Angular CLI Code Coverage and Deployment in Production Mode

Lecture 42 Preparing an Angular Application for Continuous Integration (CI)

Lecture 43 Running Cypress E2E Tests using Travis CI

Section 7: Conclusion

Lecture 44 Bonus Lecture

Lecture 45 Angular Testing Course - Conclusions and Key Takeaways

Angular Developers, looking for a detailed guide to Angular Unit Testing and End to End Testing