O'Reilly logo
live online training icon Live Online training

Angular: Unit testing techniques

Victor Mejia

Angular is a modern framework for building high-quality, large-scale web applications. When building such applications, testing plays a very important role in the development and success of the project. Angular was made to be testable; building a robust suite of tests, obtaining amazing code coverage, and creating maintainable components and UI architecture with Angular is relatively straightforward.

In two three-hour sessions, Victor Mejia walks you through framework-agnostic testing strategies before leading a deep dive into unit testing Angular applications. Through a combination of lectures and hands-on exercises, you’ll explore available Angular tools and learn how you can use Angular testing utilities to test your own applications.

What you'll learn-and how you can apply it

By the end of this live online course, you’ll understand:

  • Proper unit testing strategies
  • Available Angular testing utilities
  • The differences between isolated and shallow testing components
  • When and how to mock dependencies
  • How to test async using the Angular async testing utilities

And you’ll be able to:

  • Properly test-drive an Angular component
  • Introduce a continuous integration workflow into your projects

This training course is for you because...

  • You're a developer using Angular, and you need to learn how to properly unit test your applications.
  • You're a lead on a team that's using Angular, and you want to introduce unit testing into your development workflow.

Prerequisites

  • A working knowledge of JavaScript (ES6+), npm, and building Angular applications (components, services, directives, and the Angular CLI)

Required materials and setup:

  • A machine with Git, Node.js (8.x), npm (5.x), and the latest version of Google Chrome
  • The official Angular CLI: npm install -g @angular/cli
  • A GitHub account
  • Highly recommend downloading Visual Studio Code: https://code.visualstudio.com/
  • Follow the setup instructions on the course GitHub repository

Recommended preparation:

Jasmine Introduction (website)

"Three Ways to Test Angular Components" (article)

JavaScript Unit Testing Essentials (Learning Path)

Testing Angular Components (video)

Recommended follow-up:

Turbocharged Testing with Angular: Part 1 (video)

Turbocharged Testing with Angular: Part 2 (video)

"Test-Driven Development with JavaScript" (chapter in Enterprise Web Development)

About your instructor

  • Victor Mejia is Senior UI Engineer and Instructor. He specializes in building great user experiences and teaching others the art of software development. He holds a Bachelor’s degree in Applied Mathematics from UCLA, and a Master’s degree in Computer Science from Cal State Los Angeles. He has worked at companies like NASA, Western Digital, and most recently, McGraw-Hill Education, where he is currently building web applications using cutting edge technologies (Angular, React, ES6, TypeScript, Redux, Webpack). He advocates and teaches modern JavaScript development practices with test-driven and performance-driven approaches. Victor is also the organizer of the Angular Orange County Meetup, and he’s a happy husband and dad of two beautiful children.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Day 1: Deep dive into testing component and services

  • Unit testing with Jasmine (20 minutes)

  • Configuring terminal reporting (10 minutes)

  • Basic component testing (20 minutes)

Break (10 minutes)

  • Hands-on exercise: Testing a basic Angular component (10 minutes)

  • Testing components with I/O and change detection (20 minutes)

  • Hands-on exercise: Testing components with inputs and output events (15 minutes

Break (10 minutes)

  • Testing components with (async) service dependencies (15 minutes)

  • Hands-on exercise: Testing a component with initial async actions (10 minutes)

  • Testing services (15 minutes)

  • Hands-on exercise: Unit testing a service with http calls (10 minutes)

  • Wrap-up and Q&A (15 minutes)


Day 2: Pipes, directives, and continuous integration

  • Testing directives (15 minutes)

  • Hands-on exercise: Complete tests that allow regular text input but don't allow numerical input (15 minutes)

  • Testing pipes (10 minutes)

  • Hands-on exercise: Test-drive the implementation of the ShortDatePipe, which transforms an input ISO date string and returns a "short date" format (25 minutes)

Break (10 minutes)

  • Testing routed components (15 minutes)

  • Hands-on exercise: Testing routed components (15 minutes)

  • Workflows: npm scripts, reporting, enforcing coverage thresholds, git hooks, wallaby.js (25 minutes)

Break (10 minutes)

  • Continuous integration with TravisCI and Codecov (20 minutes)

  • Wrap-up and Q&A (20 minutes)