Category Archives: Typescript

I would like to use TypeScript @Decorators in my unit tests

Before being almost exclusively a frontend developer who only uses JavaScript on a daily basis, I have done quite a bit of Java development on frontend as well as on the backend side. When writing unit tests in Java, our typical unit tests looked like this:

public class StatisticsContextControllerTest {

	private StatisticsContextController beanToTest;
	private StatisticsContextBusinessBean statisticsContextBusinessBean;
	private StatisticsContextFilter filterSpy = new StatisticsContextFilter();
	public void setup() {}
	public void testDenyStatisticsContext() {

This is a JUnit4 test class that is run with Mockito as a test runner. What makes Mockito so amazing is, that I as a developer don’t have to manually handle the mock classes anymore. Mockito does that for me.

In the above test class, Java annotations are used to mark certain properties in the test class as Mocks or Spies that are automatically used to be injected in the to be tested class. This class needs to be marked with the @InjectMocks annotation. Mockito automatically creates mock instances of all mocks, spies and the class that is to be tested. If the class that is to be tested has a property with a type that is the same as one of the mocks, the mock is assigned to this property upon creation of the class.

In the end I have clean code in the test class which doesn’t contain any boiler plate code to setup the test case. I only need to care about mock implementations or mock return values.

And I would really like to use something like this in my unit tests which I write in Typescript. But this is isn’t possible as far as I know unfortunately.


First, Typescript decorators are still marked as an experimental feature even if they are used extensively in an angular environment. You still have to manually activate them in tsconfig.json via “experimentalDecorators: true”.

Second, the current TypeScript decorators can ONLY be used in classes, such as class decorators or method decorators. But the major testing frameworks (Jasmine, Jest, Mocha) can’t be written as test classes as all of them use a functional approach to define test cases.

This is a typical Jest test case:

describe("MyService", () => {
  let service: myService;

  beforeEach(() => {
    service = new MyService();

  it("should do something", () => {


describe(), beforeEach() and it() are “just” functions which are used to define a test suite. Every test case is “only” a function that is called by the testing framework. This means, you can’t decorate any member, variable or function inside the test case with decorators.

I have created quite a few tests in the last weeks and quickly the most tedious and boring thing to do was to define and create the mocks and let them be injected into the class to be tested.

This often looked like something like this:

describe('MyService', () => {
  const errorServiceMock = {
    log: jest.fn().mockName("errorService.log"),
    logError: jest.fn().mockName("errorService.logError")
  let service: MyService;

  beforeEach(() => {
    service = new MyService(errorServiceMock as any);

This can get quite messy when you use the angular dependency injection extensively and have to declare and define every mock yourself … again and again in every test suite. My test suites often had more lines of code for initializing the mocks than the real test cases.

Jest (the testing framework) has a feature called “module mocking” which mocks a complete module that is imported into your production code, but this doesn’t work for the angular dependency injection as you need objects/class instances to inject into your production code.

After a while I had enough, I didn’t care about the implementation details of the injected classes in my test suite for “myService” and I didn’t want to declare the same mocks again and again. They have their own test suites, I just want to test “myService” and ideally only use mocks to inject into “myService” so I can only define mock implementations and mock return values which are specific to this single test suite.

So, I created a function which did most of the heavy lifting to initialize an object so that it had the same (mocked) public properties as a class that can be parametrized:

describe('MyService', () => {
  const errorServiceMock = mockClass<ErrorService>(ErrorService);

  let service: MyService;

  beforeEach(() => {
    service = new MyService(errorServiceMock);
    clearMocks();  // mocks are reused between test cases and suites and need to be cleared

This looked already much better and is type safe too as errorServiceMock has the same members as the ErrorService class. So it can be used as a (injection) parameter for the service class that I want to test.

But as I now had a pure function to define a mock “class” it would be neat to use this function as a decorator. A decorator is just this: a function that is called at a certain point in the lifetime of a class.

Possible solution

In the end I only came to this solution:

describe('MyService', () => {
  class Mocks extends MockHolder {
    errorService: ErrorService;

  const mocks = initMocks("mocks", Mocks);

  let service: MyService;

  beforeEach(() => {
    service = new MyService(mocks.errorService);
    clearMocks();  // mocks are reused between test cases and suites and need to be cleared

Its just an empty class with some properties that are marked as mocks. The class needs to be initialized at one point and just holds the mocks. The class itself is only a holder of instances of mocks.

This is not much better than using mockClass() directly (see above) and I have not introduced it in my test suites. I’m no real expert in the Javascript testing community and have no clues if any testing framework has discussed plans so that developers are able to use classes as test suites. But it would be nice.


My mockClass() function and the decorator can be found as a gist on github.

How to implement custom page transitions in an Ionic app

Ionic is a fantastic framework to write your own apps. It is based on Cordova and angular and enables you to quickly write good looking apps without too much effort.

Depending on the platform you use to start your app Ionic even comes with pre-defined page transitions to animate the navigation of one page to another. The standard page transition on iOS is a swipe from left or right. It looks like this:

The documentation for page transitions in Ionic however is quite confusing and as a beginner it took some time to understand what transitions are there and which should be used. The official documentation contains a page for the NativePageTransitions module, however I advise you not to use that. Not only that it hasn’t received any updates for a long time, but to do the animations the modules takes a screenshot of the starting and the landing page and is animating the two images. This seems a weird way to do that and the amount of open issues while not issues get closed speaks for itself.

What you should use, is an integrated feature of the Ionic NavController class which you already use to navigate between your pages. This feature is enabled by default (depending on the platform) but it can be configured with your navigation call too:

this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition"});  

With “animate: true” you turn on the animation (which is the standard setting) and “animation: transition” sets the animation to use to animate the page transition. Its a string and “transition” means to use the standard transition depending on the current platform. When you want to use the iOS transition on an android platform you can initiate the navigation like this:

this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition-ios"});  

There are no other built-in transitions you can use (like slide-down, slide-up or scale-out) and I could find absolutely no official documentation how to implement a custom transition. However, there is a quasi-official way to implement your own transitions. Continue reading How to implement custom page transitions in an Ionic app