DEV Community: J.D Nicholls

Testing with NestJS like a Pro

J.D Nicholls — Fri, 08 Apr 2022 02:29:12 +0000

Hello folks,

I've been using NestJS for the last few years and it's an amazing framework for NodeJS and ExpressJS. I personally love using TypeScript on the Backend and having a good Separation of concerns (SoC) while I'm creating my services, following a technology-agnostic approach for the win!

But sometimes it's difficult to do certain things, especially the tests for our code, which is something that's hardly mentioned (even in documentation). This is why when you want to use TypeORM to perform more advanced operations (revert SQL transactions if something fails, etc) it can become difficult to test our code.

Likewise, sometimes it's difficult to mock all these external dependencies of our services and it becomes somewhat tedious, so we stop enjoying working with these tools that should make our lives easier instead of wanting to change our entire development.

That is why in this post I want to show you an amazing library to create mocks of our dependencies using Jest and how to use a design pattern such as Singleton, which has helped me a lot when testing my code.

Imagine we have this strange microservice:

import { WRITE_CONNECTION } from '@my-api/common';
import { Injectable, Logger } from '@nestjs/common';
import { RpcException } from '@nestjs/microservices';
import { InjectEntityManager } from '@nestjs/typeorm';
import { EntityManager } from 'typeorm';

@Injectable()
export class MyService {
  private logger = new Logger(MyService.name);
  constructor(
    @InjectEntityManager(WRITE_CONNECTION) private entityManager: EntityManager,
  ) {}

  async saveSomething(data: string): Promise<void> {
    try {
      return await this.entityManager.transaction(async (entityManager) => {
        const firstRepository = entityManager.getCustomRepository(FirstRepository);
        const secondRepository = entityManager.getCustomRepository(SecondRepository);

        const firstRecord = firstRepository.create({ data });
        await firstRepository.save(firstRecord);

        const secondRecord = secondRepository.create({ data });
        await secondRepository.save(secondRecord);

        // Save entities directly
        await entityManager.save([...]);
      });
    } catch (error) {
      this.logger.error(`Failed saving something, error ${error.message}`, error.stack);
      throw new RpcException(error.message);
    }
  }
}

Now let's see what it would be like to test our code:

import { createMock } from '@golevelup/ts-jest';
import { Test, TestingModule } from '@nestjs/testing';
import { EntityManager } from 'typeorm';

describe('MyService', () => {
  let service: MyService;
  let entityManager: EntityManager;
  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [
        MyService,
        { provide: EntityManager, useValue: createMock<EntityManager>() },
      ],
    }).compile();

    service = module.get(CatalogsService);
    entityManager = module.get(EntityManager);
  });
});

As we can see, it's very easy to mock these external services such as the TypeORM EntityManager, etc. using the createMock function provided by Go Level Up, which automatically injects Jest mock functions to replace external implementations on which our code depends, which in a unit test should not matter.

import { createMock } from '@golevelup/ts-jest';
import { Test, TestingModule } from '@nestjs/testing';
import { EntityManager } from 'typeorm';

describe('MyService', () => {
  ...

  it('should call a transaction correctly', async () => {
    const mockEntityManager = {
      save: jest.fn(),
      getCustomRepository: jest.fn((fn) => mockEntityManager[fn] || (mockEntityManager[fn] = createMock<typeof fn>())),
    };
    const spyTransaction = (entityManager.transaction as jest.Mock).mockImplementation((cb) => cb(mockEntityManager));
    const firstRepo: FirstRepository = mockEntityManager.getCustomRepository(SubCatalogRepository);
    const secondRepo: SecondRepository = mockEntityManager.getCustomRepository(SecondRepository);
    await service.saveSomething('MOCK DATA');

    expect(spyTransaction).toHaveBeenCalled();
    expect(firstRepo.save).toHaveBeenCalled();
    expect(secondRepo.save).toHaveBeenCalled();
    expect(mockEntityManager.save).toHaveBeenCalled();
  });

Then we have the possibility of using the EntityManager to create transactions with several repositories that can execute a rollback automatically if any of these operations fail, and in the tests we use the Singleton pattern to define a mock of this entity that allows us to return the same instance of these repositories to test that all these read and write operations have been performed as expected.

Remember that in our tests it's also important to test not only the happy path, but all kinds of scenarios where our code can fail due to some invalid or not allowed operation. For this, with Jest we have utilities where we can easily test these asynchronous cases. e.g:

my-service.ts:

@Injectable()
export class MyService {
  private logger = new Logger(MyService.name);

  constructor(
    private myRepository: MyRepository,
  ) {}

  async donwloadReport(recordId: number): Promise<string> {
    try {
      const record = await this.myRepository.findOne(recordId);
      if (!record) {
        throw new Error('Record not found');
      }
      // TODO: generate CSV file or something like that
      return 'export';
    } catch (error) {
      this.logger.error(`Failed generating a report, error ${error.message}`, error.stack);
      throw new RpcException(error.message);
    }
  }
}

my-service.spec.ts:

describe('MyService', () => {
  let service: MyService;
  let repository: MyRepository;
  let logger: Logger;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [
        MyService,
        { provide: MyRepository, useValue: createMock<MyRepository>() },
      ],
    }).compile();

    service = module.get<ProductsService>(ProductsService);
    repository = module.get(BrandRepository);
    logger = service['logger'] = createMock<Logger>();
  });

  it('should throw an error when downloading a report of a record that does not exist', async () => {
    const errorMessage = 'Record not found';
    const spyFindOne = (repository.findOne as jest.Mock).mockImplementationOnce(() => Promise.resolve(null));
    const recordId = -1;
    await expect(service.downloadReport(recordId)).rejects.toThrow(new RpcException(errorMessage));
    expect(spyFindOne).toHaveBeenCalledWith(recordId);
    expect(logger.error).toHaveBeenCalled();
  });
});

Using expect().rejects we can wait for our asynchronous code to fail and throw an exception handled by our code, thus avoiding undesirable scenarios where the client is responded with an Internal Server Error which was not anticipated by a noob developer.

Bonus:

If you want to learn more about design patterns, don't forget to take a look at Design Patterns for Humans, it's an incredible repository with many interesting examples that you can apply when you want to use a design pattern to solve a specific problem.

I hope you find this example useful for your projects, and let's continue improving our services with NestJS! 😊

Supporting 🍻

I believe in Unicorns 🦄 Support me, if you do too.

Made with ❤️

J.D. Nicholls

Resume / CV Template created with Bootstrap 5

J.D Nicholls — Tue, 07 Sep 2021 21:00:16 +0000

Resume/CV template created with Bootstrap 5 by @vmoratog and @jdnichollsc

Supporting 🍻

Our goal is to work on our open source projects full time, thanks a lot for your support!
With your help We know we can change the world together! 🤝

Donate Ethereum, ADA, BNB, SHIBA, USDT, DOGE:

Wallet address: 0x3F9fA8021B43ACe578C2352861Cf335449F33427

Happy coding 💯

Made with ❤️

Happy International Astronomy Day 2020!

J.D Nicholls — Sun, 03 May 2020 00:27:24 +0000

Hello folks! 👩‍🚀👨‍🚀

Today, to celebrate our International Astronomy Day, I created a Codepen example here about our Solar System using Web Animations API (WAAPI) and Web Components with StencilJS. ☄️

With this is possible to create any other solar system easily! 🚀

Remember to check the repository of this Web Component here. 📡🛸

I hope you enjoy this day with your family staying at home while we're contemplating the vastness of the Universe! 🌌🛰️

Enjoy the heavens together! 🔭💫

Supporting 🍻

I believe in Unicorns 🦄 Support me, if you do too.

Made with ❤️

Juan D. Nicholls

Meet Animatable, a tiny Web Component to use WAAPI as a Component 💫

J.D Nicholls — Wed, 27 Nov 2019 05:43:55 +0000

Web Animations API is the other way to animate any HTML element using JS instead of CSS, if Animate.css is familiar for you, Animatable is the sequence of the animation series you’re looking for! 🌟

<animatable-component
  autoplay
  easing="ease-in-out"
  duration="800"
  delay="300"
  animation="zoomIn"
  iterations="Infinity"
  direction="alternate"
>
  <h1>Hello World</h1>
</animatable-component>

As you can see we’re using Web Animations API in a declarative way (Using an HTML element like any other), we can say that Animate.css is to CSS as Animatable is to JS 💅

If you are using VanillaJS (No Framework Integration), you only need to import the scripts before:

As we can see it’s like Animate.css but with superpowers because we can keep the last state (opacity, transform, etc) of a previous animation before to create another one, without adding and removing classes to the elements.

There’re default animations instead of using keyFrames directly here 👋

And if you want to include other amazing animations you can submit a Pull Request from the repository or create an issue with the keyFrames of the new animation, we're always happy to be more animated! 🆒

We can set the animation property to none to clear the keyFrames of a previous animation.

Also there is a list of the most common easing functions here 📈

We can set the easing property to a custom function like cubic-bezier(0.25, 0.1, 0.25, 1), that value is equal to ease.

The Magic here is you can customize the duration, delay, number of iterations and any other configuration of Web Animations API of each animation of your elements by using attributes/properties, and we’re opened to add new cool animations because is so easy and sexy, thanks to TypeScript!

Framework Integration

Ok, It looks great working with HTML elements, but… How can I use it from Angular, React, Vue, etc as another component? 🤔

This Web component was created with StencilJS, therefore integrating the component is very easy:

Angular

Enable Web Components from your Modules, check here.
Import Web Components globally, check here.
Using the component

<animatable-component autoplay [animation]="myAnimation" [duration]="300">
  <h1>Animate it</h1>
</animatable-component>

React

Import Web Components globally, check here.
Using the component

<animatable-component autoplay animation={myAnimation} duration={300}>
  <h1>Animate it</h1>
</animatable-component>

Vue

Import Web Components globally, check here.
Using the component

<animatable-component autoplay v-bind:animation.prop="myAnimation" duration="300">
  <h1>Animate it</h1>
</animatable-component>

As you can see we have Universal Components here, yay! 👏

Bonus: Using Higher-Order Components (HOC) from StencilJS

One of the best strategies to reuse logic from React is by using HOCs, in this way we can extend behaviors, reuse components and improve the maintenance of our code ✍️.

With StencilJS is also possible to use this concept working with Functional Components! 🙌

function createAnimatableComponent (
  WrappedComponent: FunctionalComponent
) {
  return (props) => {
    const { keyFrames, options, onFinish, ...rest } = props
    return (
      <animatable-component
        keyFrames={keyFrames}
        options={options}
        onFinish={onFinish}
      >
        <WrappedComponent {...rest} />
      </animatable-component>
    )
  }
};

Do you want to see an example using Types? Check the utility function we have in Animatable here! By using createAnimatableComponent HOC you can create your own components and simply wrap them with Animatable to share your common logic and animate multiple components! 👽

Check other good example here.

I hope you find this component useful for your projects, and let’s continue improving our Universal Components with StencilJS, check more resources here! 😊

Supporting 🍻

I believe in Unicorns 🦄 Support me, if you do too.

Made with ❤️

Juan D. Nicholls