Unit Test #1: doing a simple unit test with typescript + jest

Juan Eneque — Tue, 18 Jul 2023 23:34:45 +0000

Hello everyone 🙋‍♂️, in this post I'm going to explain how to do a simple unit test with typescript and jest.

First of all, I'll make a function that solves the problem known as fizzbuzz and then I'll unit test the solution.

Fizzbuzz problem: Write a code that prints numbers from 1 to 100 to the console. If the number is a multiple of 3, print the word “fizz”. If the number is a multiple of 5, print the word "buzz". If the number is a multiple of 3 and 5, print the word "fizzbuzz".

To solve the problem, let's create a main class and add a function called fizzbuzz that takes a parameter and evaluates it based on the given conditions.

// 01-basic.ts
export class Main {

  fizzbuzz(num: number): string {

    if ( num % 3 === 0 && num % 5 === 0 ) {
      return 'fizz buzz';
    }

    if ( num % 3 === 0 ) {
      return 'fizz';
    }

    if ( num % 5 === 0 ) {
      return 'buzz';
    }

    return `${num}`;
  }

}

Now, let's create a spec file and write the following code:

// 01-basic.spec.ts
import { Main } from "./01-basic";

describe('@MainTest', () => {
  let component: Main;

  beforeEach(() => {
    component = new Main();
  })
})

👨‍🏫 Explanation: We just create the container for unit tests. Describe function takes two parameters, the first ('@MainTest') is its name and you can name it whatever you want. The second is a jest function and inside it we create a variable of the type of our class and then initialize it in a structure called beforeEach. As its name says, inside it we put all the variables or functions that need to be initialized or executing before executing the unit test.

Before writing our first use case for testing, we need to read about a well-known pattern for writing tests: PATTERN ARRANGE-ACT-ASSERT

Following the pattern, let's write ✍️ the solution to our first use case:
Test #1: call function with a number multiple of 3 and 5 and return 'fizzbuzz'

Arrange => create a constant with the number to evaluate.
Act => evaluate the number in the fizzbuzz function.
Assert => compare the output of the fizzbuzz function and the expected result.

// Pattern Arrange-Act-Assert
it('should return fizz buzz if number es mod 3 and 5', () => {
  // arrange
  const numberToEvaluate = 30;
  // act
  const result = component.fizzbuzz(numberToEvaluate);
  // assert
  expect(result).toEqual('fizz buzz');
})

After running jest test command, we get the following output 👍:

Now, you need to create all the tests necessary to cover 💯 percent of the class.

I hope this post has helped you 👍. I'll make other posts with other examples that I know might be helpful 🤝.

Solution repository: https://github.com/JuanSW18/unit-test-examples/blob/master/01-basic.spec.ts

Angular +SheetJS: 3 formas para crear un excel

Juan Eneque — Wed, 19 Oct 2022 04:19:03 +0000

En este tutorial les mostrare 3 formas para generar un Excel con la ayuda de la librería SheetJS. También haré uso de la Pokemon API para trabajar con datos reales.

Paso 1: Crear proyecto angular e instalar dependencia

Abrimos una consola CMD y ejecutamos el siguiente comando:

ng new simple-excel-report

Nos ubicamos en la carpeta del proyecto con el comando cd e instalamos la librería SheetJS ejecutando el siguiente comando:

npm i xlsx

Paso 2: Integrando Pokemon API

Para este caso solo haré uso del siguiente endpoint:

https://pokeapi.co/api/v2/pokemon/?limit=5&offset=0

Módulo para servicios compartidos

Crearemos nuestro SharedModule y en el servicio para consultar el API. Ejecutamos los siguientes comandos en la consola:

ng g module shared

ng g service shared/services/pokemon

Importar módulo HTTP

Ahora, en el archivo shared.module.ts importamos el HttpClientModule para poder realizar peticiones http:

/* shared.module.ts */
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http'

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    HttpClientModule
  ]
})
export class SharedModule { }

Interfaces

Dentro de la carpeta shared, crearemos una subcarpeta llamada interfaces y dentro de ella, el archivo pokemon-response.interface.ts, el cual tendrá el siguiente contenido:

/* pokemon-response.interface.ts */
export interface IPokemonResponse {
  count: number;
  next: string;
  previous: string;
  results: IPokemonInfo[]
}

export interface IPokemonInfo {
  name: string;
  url: string;
}

Crear consulta http

Abrimos el archivo pokemon.service.ts y en el constructor inyectamos el HttpClient de la siguiente manera:

constructor(private network: HttpClient) { }

Luego, creamos nuestro método getPokemonList para hacer la petición GET que traerá la lista de pokemones:

readonly API_BASE = 'https://pokeapi.co/api/v2';

getPokemonList(offset: number, limit: number): Observable<IPokemonResponse> {
    const endpoint = `${this.API_BASE}/pokemon/?offset=${offset}&limit=${limit}`;
    return this.network.get<IPokemonResponse>(endpoint);
  }

Como podrán notar, agregamos 2 parámetros (offset y limit) en el método:

offset: ID del pokemon inicial de la lista de respuesta
limit: cantidad de pokemones subsiguientes al offset.

Paso 3: Servicio para generar reporte

Desde la consola, ejecutamos el siguiente comando para generar el servicio:

ng g service shared/services/excel-report

Forma #1: Configuración por default

Abrimos el archivo excel-report.service.ts y definimos el método generateDefaultReport:

generateDefaultReport(data: IPokemonInfo[], filename: string) {
    let workbook = XLSX.utils.book_new();
    let worksheet = XLSX.utils.json_to_sheet(data);

    // first way to add a sheet
    workbook.SheetNames.push('Hoja 1');
    workbook.Sheets['Hoja 1'] = worksheet;

    // second way to add a sheet
    // XLSX.utils.book_append_sheet(workbook, worksheet, "Hoja 1")

    XLSX.writeFileXLSX(workbook, filename, {});
  }

Este método recibe 2 parámetros:

data: Arreglo de objectos de tipo IPokemonInfo.
filename: Nombre del archivo (Ej: mi_reporte.xlsx).

El problema con esta forma es que los headers (fila A1 del Excel) son asignados automáticamente y estos serán igual al nombre de los atributos del objeto. En otras palabras, nuestros headers serán name y url (atributos de IPokemonInfo).

Forma #2: Usando diccionario

Primero crearemos una interface con el nombre custom-header.interface.ts y con la siguiente estructura:

export interface ICustomHeader {
  name: string;
  key: string;
}

Esta interface nos ayudará a construir un diccionario relación, donde name es el nombre de la columna y key es el nombre del atributo de la interface IPokemonInfo. Ej:

name: "Info URL"
key: url Teniendo esta relación definida, podemos generar un excel con headers personalizados.

A continuación, abrimos el archivo excel-report.service.ts y definimos el método generateReportWithDict:

generateReportWithDict(customHeaders: ICustomHeader[], data: IPokemonInfo[], filename: string) {
    let worksheetData: any[] = [];

    Object(data).forEach( (item: any) => {
      let worksheetItem = Object();
      customHeaders.forEach( header => {
        worksheetItem[header.name] = item[header.key];
      })
      worksheetData.push(worksheetItem)
    })

    // excel file
    let workbook = XLSX.utils.book_new();
    let worksheet = XLSX.utils.json_to_sheet(worksheetData);
    XLSX.utils.book_append_sheet(workbook, worksheet, "Hoja 1")
    XLSX.writeFileXLSX(workbook, filename, {});
  }

Este método recibe 3 parámetros:

customHeaders: Arreglo de objectos ICustomHeader.
data: Arreglo de objectos de tipo IPokemonInfo.
filename: Nombre del archivo (Ej: mi_reporte.xlsx).

Una de las ventajas de trabajar de esta forma es que nosotros podemos definir el orden de las columnas gracias a la relación name-key.

Forma #3: Usando un adapter

Creamos una carpeta adapter y dentro de ella, añadimos el archivo pokemon-report.class.ts con el siguiente contenido:

import { IPokemonInfo } from "../interfaces/pokemon-response.interface";

export interface IPokemonReport {
  pokemonId: number;
  pokemonName: string;
  pokemonUrlInfo: string;
}


export class PokemonReportAdapter {
  data: IPokemonReport[] = [];

  constructor(pokemonList: IPokemonInfo[]) {
    pokemonList.forEach( (pokemon, index) => {
      const reportItem: IPokemonReport = {
        pokemonId: index + 1,
        pokemonName: pokemon.name,
        pokemonUrlInfo: pokemon.url
      }
      this.data.push(reportItem);
    })
  }
}

Una ventaja de usar un adapter, es que podemos realizar operaciones y/o procesar los datos de nuestro objeto para posteriormente asignarlos en un nuevo modelo. En este caso, definimos una interface IPokemonReport que usaremos para generar un nuevo arreglo de datos a partir de nuestra data (IPokemonInfo).

Finalmente, abrimos el archivo excel-report.service.ts y definimos el método generateReportWithAdapter:

generateReportWithAdapter(headers: string[], data: IPokemonReport[], filename: string) {
    let workbook = XLSX.utils.book_new();
    let worksheet = XLSX.utils.json_to_sheet([], { header: headers });

    XLSX.utils.sheet_add_json(worksheet, data, { origin: 'A2', skipHeader: true })

    XLSX.utils.book_append_sheet(workbook, worksheet, "Hoja 1")
    XLSX.writeFileXLSX(workbook, filename);
  }