How to write unit testing static methods in a class of Angular and typescript

How to write unit testing static methods in a class of Angular and typescript

In this tutorial, You learned how to do unit test static methods of typescript classes. It includes an example of how to test a component using the static method in Angular.

Let’s declare an ES6 class in typescript with static methods.

export class StaticClass {
  static getMessage(name: string): String {
    return "Hi" + name + "Welcome to my blog";
  }
}

Here is a Unit test class for the ES6 class with a static method

  • jasmine API has a spyon to mock the methods with an instance of a class or a class itself.
  • It accepts arguments with withArgs.
  • The return value is returned with returnValue
  • and accepts arguments and return value
  • Unit testing a function is to pass different values
  • And assert the following
    • passed values to static function and compare expected and actual value
    • Check static function is called or not using the toHaveBeenCalled method
it("Calling getMessage", () => {
  let spyStaticClass = spyOn(StaticClass, "getMessage")
    .withArgs("John")
    .and.returnValue("welcome");
  StaticClass.getMessage("John");
  expect(StaticClass.getMessage).toHaveBeenCalled();
  expect(StaticClass.getMessage).toHaveBeenCalledWith("John");
  expect(StaticClass.getMessage("John")).toEqual("welcome");
});

Unit testing Angular component using the static method

Suppose you are using a static class in the Angular component, In this example, You are calling the static method inside the ngOnInit() method

import { Component } from '@angular/core';
import { StaticClass } from './StaticClass';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = '';

  constructor() { }

  ngOnInit() {
    this.title = StaticClass.getMessage('john');
  }
}
}

Following is a unit test for the given static function inside a component.

it("should call ngInit and call static methods ", () => {
  const fixture = TestBed.createComponent(AppComponent);
  const component = fixture.componentInstance;

  let spyStaticClass = spyOn(StaticClass, "getMessage").and.returnValue(
    "welcome",
  );
  StaticClass.getMessage("John");
  fixture.detectChanges();

  component.ngOnInit();
  expect(StaticClass.getMessage).toHaveBeenCalled();
  expect(StaticClass.getMessage).toHaveBeenCalledWith("John");
  expect(StaticClass.getMessage("John")).toEqual("welcome");
});

Mock Static method in Jest framework

There are a number of ways we can do mock

using the jest spyon method which works the same as the jasmine spyon method.

it("getMessage", () => {
  let spyStaticClass = jest
    .spyOn(StaticClass, "getMessage")
    .withArgs("John")
    .and.returnValue("welcome");
  StaticClass.getMessage("John");
  expect(StaticClass.getMessage).toHaveBeenCalled();
  expect(StaticClass.getMessage).toHaveBeenCalledWith("John");
  expect(StaticClass.getMessage("John")).toEqual("welcome");
});

Another way is using mock classes with jest implementation

  • Create a mock class for the class using jest. Mocked syntax
  • Write a mock implementation for the static method
  • Check for the assertion of whether the static class is called or not
it('getMessage with jest', () => {
        const MockStaticClass = StaticClass as jest.Mocked<typeof StaticClass>;
        MockStaticClass.getMessage.mockImplementation((item) => 'Welcome' + item);
        expect(MockStaticClass.getMessage).toHaveBeenCalled();

    })

Conclusion

You learned mocking unit testing for static methods inside es6 classes using jasmine and jest API.