Skip to content

Load Testing Blog

Angular2: filtering ngFor using pipes

Angular2 / Bootstrap4 table

I'm still working on a Stripe administration console for OctoPerf, a SaaS performance testing tool. Stripe lets us manage our customers and their subscriptions.

I have a table that lists all of our customers (Customers.html):

<table class="table table-striped">
  <thead class="thead-default">
  <tr>
    <th>#</th>
    <th>Id</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="#customer of customers; #i = index">
    <th scope="row">{{i}}</th>
    <td>{{customer.id}}</td>
    <td>{{customer.email}}</td>
  </tr>
  </tbody>
</table>

It's an Angular2 application build using this excellent starter with BootStrap 4.

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']);
  }
}