Skip to content

Load Testing Blog

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.

Test mobile native applications with OctoPerf

As mobility has been the trend these past years, all the users coming to a website do so from many different devices. OctoPerf allows you to simulate traffic to your website, but it also allows to simulate this kind of multi-device traffic.

That being said, to take advantage of OctoPerf possibilities, you might need to import several different user journeys. Because a mobile user is very likely to deal with a different version of the application. Thus if you record only one user journey from a computer's browser and use it for your tests, they may not be realistic.

Browser based mobile apps

To record the traffic from a mobile application, you have several options. For browser based apps, you can record them from Chrome or firefox and just use the dev tools to switch the user agent:

Native apps are a bit more complex to get by.

Let's see what is required step by step to record such an application.