Loading deck

Unit Testing in Angular

In ~15 minutes, you will be able to...

  • Use basic testing terminology

  • Identify parts of an Angular app

  • Discuss the differences between isolated tests and integrated tests and when to use each

  • Discuss deep vs. shallow testing

  • Write a unit test in Angular

Foundations

  • Unit Test
  • ​Testing Tools
  • Parts of a Test
  • Triple A
  • Mocking and Spies

Unit Test

An isolated test of the smallest unit of code

 

It should be fast, cheap to write, cover a single state change, assert one thing, avoid crossing process boundaries, and be reliable.

Jasmine

A behavior-driven development framework

Angular

Has many built-in utilities for testing

Karma

A lightweight server that loads and runs tests in browsers

Testing Tools

Suite 

Assertion

Spec

Matcher

Anatomy of a Test

Triple A

Arrange - Act - Assert

Arrange

Act

Assert

Mocking and Spies

Mocking is the mechanism of replacing a dependency with a fake piece of code that does less than the original.

 

Spies are test doubles. A spy can stub any function and tracks calls to it and all arguments.

An Angular App

Angular is made up of one or more Modules

=
Module
Module
Module

A Module is made up of Components and Services

Component
Services
Component
=
+
+ ...
Module

A Component is made up of a Template, a Class and Metadata

Component
Class
=
+
Template
Metadata
+
app.module.ts
speaker-list.component.ts
meetup.service.ts

Isolated vs Integrated Tests

Isolated Test

  • Class only - no template

  • Constructed in test

  • Simple

  • Best for Services and Pipes

  • Appropriate for components and directives too

Integrated Test

  • Test class with template

  • Constructed by framework

  • More complex

  • Mainly used for components and directives

  • Two types: deep and shallow

Isolated Tests

Class

Testing a Service with an Isolated Test

Integrated Tests

Class
+
Template

Deep vs Shallow Integrated Tests

Deep Tests

  • Test a component and all of its nested components, directives

  • Gives a better idea of how your app will actually run

  • Can be big and complicated and therefore more brittle

Shallow Tests

  • Test component class and template only
  • Mock or ignore related components and directives
  • More realistic than isolated unit tests, but less complex than deep integrated tests

Testing a Component with an Integrated Test

  • Use TestBed.configureTestingModule() to create a module like the one you create with @ngModule()
  • Use ComponentFixture to create a wrapper around component
  • Use native Element or DebugElement (and By utility) to test the DOM 

TestBed

Testing utility​ that creates an Angular testing module—an @NgModule class—that you configure with the...

 configureTestingModule() 

...method to produce the module environment for the class you want to test

Class
Template
Metadata
Module
TestBed

Testing a Component with a Deep Integrated Test

1. Import a bunch of stuff

Testing a Component with a Deep Integrated Test

2. Create a Fixture and Element

Testing a Component with a Deep Integrated Test

3. Mock Services

Testing a Component with a Deep Integrated Test

4. Configure the TestBed

Testing a Component with a Deep Integrated Test

5. Test

Testing a Component with a Shallow Integrated Test

  • Test a component (with its template) in isolation
  • Like a deep test without all the dependencies
  • Sometimes it makes sense to leave pipes in - they're pretty small and generally don't add complexity
  • Two approaches:
    • Fake all referenced components
    • Use NO_ERRORS_SCHEMA

More about Integrated Tests

  • Large, complicated, potentially brittle
  • Integrated tests require a lot more configuration
  • Second layer in the test pyramid

E2E

Integration

Unit

Review

 

  • Use isolated tests primarily for services and pipes
  • Use integrated tests for complete component testing
  • Deep integrated tests test all connected components
  • Shallow integrated tests test just the component in isolation and are better for when related tests add too much complexity
  • Write the fewest E2E tests, more integrated tests and the most unit tests

Where to find me...

@elana

@elanalynn

ekopelevich@gmail.com