Skip to content

Load Testing Blog

Angular2: hard time unit testing Http requests

To follow up on my article about TypeScript generics in Angular2, I would like to unit test my Stripe client.

It involves mocking the Angular2 Http service, and it's far more complicated than unit testing the Router service. I first tried to inject a mock of the Http service and return custom Observable responses but this led to strange errors and cumbersome code.

I quickly switched to the recommended way, using MockBackend.

The service to test

As a remainder, the service tested is a Stripe client. It makes recursive Http request to Stripe API in order to fetch customers and plans:

Angular2: using TypeScript generics

This post is an example of TypeScript generics usage, when writing an Angular2 application.

I'm working on a Stripe administration console. Stripe is a payment / subscription SaaS service that we use at OctoPerf.

I need to create pages that lists all our customers and plans. But Stripe returns paginated lists, and we need to do successive calls to their API to get the complete data. This mechanism is the same for both customers and plans lists. So we can factorise our code using generics in this particular case.

The generic model

The first step is to create a common interface for customers and plans. They share a String id.

export interface HasId {
  id:string;
}

Angular2: method callback type in TypeScript

It's my third post about Angular2 and TypeScript as I'm creating an admin console for OctoPerf load testing platform.

Intro

This article explains how to set a type for callbacks. If, like me, you are used to AngularJS you may often use callbacks for asynchronous calls, typically for HTTP requests.

I wrote a StripeClient service that can return the list of my Customers. In pure JavaScript it would be fairly simple as you don't need to give a type to your callback.

In Angular2 / TypeScript

In TypeScript it's a bit more complicated, but cleaner.

Unit testing in Angular2

Unit tests in Angular2 with Karma

To follow up on my first article about Angular2 I want to unit test our Login component:

import {Component} from 'angular2/core';
import {AuthenticationService} from '../services/authentication';
import {Router} from 'angular2/router';

@Component({
  selector: 'login',
  providers: [ ],
  directives: [ ],
  pipes: [ ],
  styles: [ require('./login.css') ],
  template: require('./login.html')
})
export class Login {
  private credentials: string = '';

  constructor(private authService: AuthenticationService, private router: Router) {
  }

  onSignIn(){
    this.authService.setCredentials(this.credentials);
    this.router.navigate(['Home']);
  }
}

Creating a singleton Service in Angular2

Motivation, building a licencing application

I already use AngularJS for the frontend of OctoPerf, a load testing solution. I will need to migrate my application from AngularJS to Angular2 in a few months.

To get ready for it I created a licenses management application. I started from the excellent angular2-webpack-starter.

The sample AuthenticationService

I quickly needed to create a singleton service and found out that it's not as straightforward as in AngularJS.

Let's say we need an AuthenticationService that holds the user credentials. It is used in the login page to store it, and in the home page to retrieve the information.