Testing Angular 4 (previously Angular 2) Apps with Jasmine

Name: Testing Angular 4 (previously Angular 2) Apps with Jasmine
Rating: 4.6 (5923 reviews)

Learn to write unit and integration tests for your Angular apps and deploy them with confidence

Highest Rated

Created byMosh Hamedani

Last updated 4/2018

English

What you'll learn

Write clean and maintainable tests for your Angular apps
Examine how much of your code is covered by tests
Write tests for re-usable components
Write tests for component templates
Write tests for forms
Write tests for confirmation boxes
Write tests for the navigation
Write tests for attribute directives
Work with asynchronous operations
Provide fake dependencies to components under test
Use spies to track function calls or replace functions

Course content

3 sections • 28 lectures • 2h 11m total length

What is Automated Testing7:27
Learn what automated testing is, when to use it alongside manual testing, and how to decide when it fits your project for better quality and fewer production bugs.
Types of Tests6:04
Explore the three test types in Angular: unit, integration, and end-to-end tests. Understand unit tests isolate a component, integration tests cover the template, and end-to-end tests validate the full app.
Asking Questions0:33

Unit Testing Fundamentals7:44
Master the fundamentals of unit testing: write small, single-responsibility tests with Jasmine using describe and it, run via ng test and karma, and cover negative and positive paths.
Working with Strings and Arrays3:14
Practice testing strings and arrays in Angular Jasmine by verifying outputs without fragile exact matches; ensure the name appears in greetings and currency lists contain expected items regardless of order.
Setup and Tear Down6:05
Explore testing Angular components using the state-change pattern with a vote component featuring upvote and downvote methods that adjust total votes. Apply arrange-act-assert and beforeEach for isolated Jasmine tests.
Working with Forms3:30
Build and test a todo form with a form builder creating a form group containing name and email, and verify the name control is required.
Working with Event Emitters2:51
Learn how an Angular vote component uses an event emitter to raise a vote changed event with total votes, and how Jasmine tests subscribe to verify the emitted value.
Working with Spies6:56
Unit test an Angular todo component using Jasmine by isolating it from backend calls in ngOnInit with a fake service and spyOn to return a custom observable.
Interaction Testing6:26
Test the add interaction by spying on the service add method, ensure server call, successful addition to the todos array, and error message update.
Working with Confirmation Boxes3:09
Showcases testing the delete flow in an Angular 4 app by spying on window.confirm and the deletion service, returning an empty observable, and asserting calls on confirm or cancel.
Limitations of Unit Tests1:31
Highlight the limitations of unit tests for Angular components, especially router usage and template bindings, which require an Angular environment or integration tests.
Code Coverage3:30
Learn how to measure code coverage in Angular tests with ng test --code-coverage, read the coverage report, and balance ideal 100% coverage with prioritizing complex logic tests.
Exercises0:34

Introduction0:44
Dive into integration tests to verify component templates, navigation, and directives, and learn to handle asynchronous operations in Angular components.
The Setup Code4:41
Download the boilerplate zip and learn to set up integration tests for the voter component using TestBed, a dynamic testing module, and a component fixture.
Generating the Setup Code4:53
Learn how Angular CLI generates a ready-to-test component with a spec file for integration tests, and how to streamline setup by handling template compilation, async beforeEach, and Webpack inlining.
Testing Property and Class Bindings7:55
Demonstrate testing property and class bindings in an Angular 4 app with Jasmine by validating total votes rendering, highlighted class application, and upvote event handling in a voter component.
Testing Event Bindings4:59
Write a test that clicks the upvote button using fixture and verifies total votes increase via the component-template integration. Learn organizing unit and integration tests in separate spec files.
Providing the Dependencies2:37
Provide dependencies for an Angular component by registering the Todo service and Http module in the testing module, ensuring unit and integration tests pass.
Getting the Dependencies5:48
Test Angular apps with Jasmine by implementing integration tests for ngOnInit, accessing dependencies via TestBed, and using spies and observables to validate getTodos.
Providing Stubs7:11
Learn how to test a component that navigates with the Angular router by wiring a router stub and an activated route stub, ensuring interaction and route existence through Jasmine tests.
Testing the Navigation4:02
Test the navigation flow in Angular with Jasmine by spying on the router navigate method and verifying the /users route is configured, guarding navigation behavior with unit tests.
Dealing with Route Parameters6:33
Test route parameter handling in angular with jasmine by observing activated route params, pushing values via a rxjs subject, and asserting navigation to the not found page for invalid ids.
Testing RouterOutlet Components7:05
Test Angular apps with Jasmine by validating the router outlet and router link setup in a component, using RouterTestingModule to catch bugs early.
Shallow Component Tests4:54
Generate a separate nav component for bootstrap navigation and declare it in the app module to keep tests focused, using shallow component testing with router link and router testing module.
Testing Attribute Directives4:30
Learn how to test an Angular attribute directive using a host component, verify highlight colors with and without a value, and make tests robust by referencing the directive’s default color.
Dealing with Asynchronous Operations5:41
Demonstrates testing angular components using asynchronous operations with observables and promises, and shows how to use async, fakeAsync, fixture.whenStable, and tick to synchronize tests.

Requirements

Familiarity with the fundamentals of Angular (Angular 2+)

Description

As your application grows in complexity, the cost of manual testing increases exponentially. Adding a new feature or fixing a bug may break several other places in the application, and covering all those edge cases with manual testing ends up being extremely painful and nearly impossible.

Automated testing is a practice that has been adopted by a lot of successful software development teams over the past decade. You simply write code to test your application, and then run those tests in an automated fashion.

Initially, your development time increases a bit because you need to write extra code to test your production code. However, that is the cost that you pay only once. Once you have those tests in place, you can run several thousands of them in just a few seconds over and over. Compare that with the time required to manually test every bit of your application!

With automated testing, you spend less time fixing bugs and doing manual repetitive tests every time you add a new feature or fix a bug. Instead, you can spend your time doing more fun things.

In this course, Mosh, author of several best selling courses on Udemy, takes you from the ground and gives you a solid foundation to write automated tests for your Angular apps. Whether you're an absolute beginner or have some familiarity with automated testing, this course will give you all the necessary skills to write automated tests for your Angular apps.

You'll learn about:

Automated testing concepts and tools
What to test and how
Writing clean, maintainable and trustworthy tests that don't lie
Tracking how much of your code is covered by tests
Testing re-usable components
Testing templates
Testing forms
Testing confirmation boxes
Testing navigation
Testing attribute directives
Mocking dependencies
Working with asynchronous operations

If you've taken any of Mosh's courses before, you know what you get. High quality video and audio, outstanding delivery with no mocking around.

30-DAY FULL MONEY-BACK GUARANTEE

This course comes with a 30-day full money-back guarantee. Take the course, watch every lecture and if you feel like you haven't gained the confidence to write automated tests for your Angular apps, ask for a full refund within 30 days. All your money back, no questions asked.

ABOUT YOUR INSTRUCTOR

Mosh (Moshfegh) Hamedani is a software engineer with 15 years of professional experience. He is the author of several best-selling courses on Udemy and Pluralsight with over 74,000 students in 172 countries. His students describe him as a passionate, pragmatic and motivational instructor.

So, do you want to write automated tests for your Angular apps?

Enroll in the course now and you'll start writing your first test in 10 minutes!

Who this course is for:

Developers and QA engineers who want to write automated tests for their Angular apps

Testing Angular 4 (previously Angular 2) Apps with Jasmine

What you'll learn

Explore related topics

Course content

Introduction to Automated Testing3 lectures • 14min

Unit Testing Angular Apps11 lectures • 46min

Integration Testing14 lectures • 1hr 12min

Requirements

Description

Who this course is for: