Angular: Unit testing techniques
Published by O'Reilly Media, Inc.
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 live event 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)
Schedule
The time frames 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)
Your Instructor
Victor Mejia
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.