Angular Testing Masterclass (Angular 17)

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

4.48 (4896 reviews)
Udemy
platform
English
language
Web Development
category
24,415
students
5 hours
content
Mar 2024
last update
$89.99
regular price

What you will 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

Description

This Course in a Nutshell

This 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 Overview

Starting 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 Contents

This course will go over the following topics:

  • Introduction to the Jasmine testing framework

  • Introduction to Jasmine spies

  • Unit Testing of simple Angular Services

  • Jasmine testing best practices

  • Introduction to Angular testing utilities

  • Testing of complex Angular services

  • Mocking of Angular HTTP requests

  • Unit Testing of Angular Components

  • Asynchronous Angular Testing with fakeAsync and async

  • Mocking of Observable-based Services

  • Unit Testing of Presentational Components

  • Unit Testing of Smart or Container Components

  • Simulation of user interaction in unit tests

  • End to End Angular Testing with Cypress

  • Continuous Integration with Travis CI

  • Angular CLI Test Coverage Reports

What 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

Content

Course Kickoff - Development Environment Setup

Angular Testing Course - Helicopter View
Recommended Software Versions
Angular Testing Course - Development Environment Setup
The Typescript Jumpstart Ebook
Quick Introduction to Jasmine - Test Suites and Specifications
Step-by-Step Implementation of our First Jasmine Specification
Unit Testing with Jasmine - Introduction to Jasmine Spies
Structuring Angular Unit Tests - Test Setup using beforeEach
Using Dependency Injection in Angular Testing - The Angular TestBed
Angular Unit Testing Best Practices and commonly used Test Utilities

Angular Service Testing In Depth

Testing Angular HTTP Services - Test Setup with the HttpClientTestingModule
Angular HTTP Service Testing - Step-by-Step Implementation
Preventing Unintended HTTP Requests using the HTTP Testing Controller
Testing Angular HTTP Data Modification Services
Angular HTTP Services - Testing Error Handling
Angular HTTP Testing - Checking HTTP Request Parameters

Angular Component Testing In Depth

Introduction to Angular Component Testing - Presentational Components
Angular Component Testing - Test Setup with the async Test Utility
Angular Component Testing - DOM Interaction
Angular Test Debugging - How to Trigger Change Detection?
Angular Component Testing - Course Card List Test Suite Conclusion
Testing Angular Smart or Container Components - Test Setup
Mocking Observable-based Services - Testing the Home Component
Container Component Test Suite - The Home Component
Simulating User DOM Interaction in Angular Unit Tests

Asynchronous Angular Testing In Depth

Introduction to Asynchronous Angular Testing - Understanding Jasmine done()
Understanding Asynchronous Testing - a Simple Example
Understanding the Angular fakeAsync Testing Zone
Testing Promised-based code - Introduction to Microtasks
Testing Promise-based code with fakeAsync - Understanding flushMicrotasks
Testing Asynchronous Code with fakeAsync - Full Example
Using fakeAsync to test Asynchronous Observables
fakeAsync in Practice - Fixing the Home component tests
Understanding the Angular async() Test Zone

Angular E2E (End to End) Testing with Cypress

Angular (E2E) End to End Testing - Getting Started with Cypress
Angular E2E (End To End Test) Hello World with Cypress
How to Mock an HTTP Backend using Cypress
Simulating User Interaction in Cypress End to End Tests

Preparing an Angular Application for Continuous Integration (CI)

Angular CLI Code Coverage and Deployment in Production Mode
Preparing an Angular Application for Continuous Integration (CI)
Running Cypress E2E Tests using Travis CI

Conclusion

Other Courses
Bonus Lecture
Angular Testing Course - Conclusions and Key Takeaways

Screenshots

Angular Testing Masterclass (Angular 17) - Screenshot_01Angular Testing Masterclass (Angular 17) - Screenshot_02Angular Testing Masterclass (Angular 17) - Screenshot_03Angular Testing Masterclass (Angular 17) - Screenshot_04

Reviews

Kari
November 11, 2023
Covers the basics, but could've included Angular Material component harnesses in the testing. Also, there are some parts in the code that Vasco left as any-type. This is bad practice. Cypress has Typescript support so it would've been nice to write the Cypress tests with it. Also, Cypress section could've included more practical examples and also Cypress Cloud could've had short introduction. Lastly, even though the project base is pretty much the same in every AU-course, it causes issues every time when starting a new course because there is code that is deprecated or not even relevant. When I started this course, there was an error with CSS-file that had " >>> body" selector and also the old Angular E2E test runner, Protractor, was still present in the code even though it's been replaced by Cypress.
Vladislav
November 2, 2023
The course is great if you have never done any unit or e2e tests in Angular and you are a complete beginner, but I wouldn't call it a Masterclass. I'm giving it 3 stars because of the following reasons: 1. Very basic concepts and examples. It would have been nice to have more complex unit test examples to explore the framework more in depth. 2. Many deprecations. The videos should be updated to take into account these deprecations, instead of pointing it out between videos as text. Some Cypress deprecations are not even mentioned. 3. The Cypress section felt very rushed and like an introduction only. The examples are very basic and simple. Overall, a very good course for beginners, but it should be expanded quite a lot in order to become a "Masterclass".
Michael
April 11, 2023
The course really goes in depth which is great, you just have to get used to the app being finished already. For a course it makes sense but in a real dev environment you would usually write a test and then the app.
Andy
April 8, 2023
all the topics I wanted to know to be a better unit testing developer was here. I amazing course. I totally. recommend it.
Bhamidipati
March 30, 2023
The course covered a great deal about angular unit testing with jasmine and karma, but for someone starting with unit testing the amount of content to be consumed is huge.
Utkarsh
March 28, 2023
I would very much like to know the test cases we wrote using jasmine contained aysnc and fakeAsync functions used in it. Are they also available for use on cypress. Cypress section was quite brief and i would i liked it very much if topics like async and fakeAysnc were covered in relation to cypress ! Overall nice course and learned a lot!!
Kerllos
March 21, 2023
This is my first time learning to test and I got a fantastic experience implementing these concepts in my work as a front-end developer.
Sandip
March 18, 2023
Very detailed and hands-on oriented course. And every concept has been explained from the very layman term. Anyone wants to start working on Unit Test and E2E test, this is a perfect course to start with.
Gringo
March 16, 2023
Nice course, extending my knowledge about asynchronous unit testing and about e2e tests. Could be nice to extend it about TDD. And maybe not only CI but CD too. Thanks for the content.
Raphael
March 14, 2023
Good course, very detailed but to just too easy in general. I would have liked some more difficult examples
Shashank
March 14, 2023
Thank you for us through detailed way of angular testing frameworks such as karma, jasmine and cypress tools
Ashish
March 13, 2023
The course is good but it's missing advanced information about the tests, for example how to test angular forms, authorization etc.
Patrick
March 12, 2023
I was expecting more depth into end-to-end testing. However, the coverage on the unit testing was very detailed and good.
Aaron
March 10, 2023
Perfect course. Covers everything you'd need to know about Angular Testing very clearly and easy to understand.
Bruno
March 2, 2023
Nice course, but it's not really updated, the code on github is, yet partially. Linting is not on the latest which causes a lot of problems. Cypress (E2E) module is totally outdated and short.

Charts

Price

Angular Testing Masterclass (Angular 17) - Price chart

Rating

Angular Testing Masterclass (Angular 17) - Ratings chart

Enrollment distribution

Angular Testing Masterclass (Angular 17) - Distribution chart

Related Topics

2308032
udemy ID
4/5/2019
course created date
11/20/2019
course indexed date
Bot
course submited by