Forem: Victor Sandoval Valladolid

Angular Testing Library - Casos de Uso

Victor Sandoval Valladolid — Mon, 23 Jan 2023 21:07:40 +0000

Verificar que redireccione a una URL

it('...', async () => {
  const spyRouter = jest.spyOn(Router.prototype, 'navigate')
  await setupComponent()
  ...
  expect(spyRouter).toHaveBeenCalledWith(['/stores'])
})

Emular datos adquiridos por la URL

Para poder simular un id como dato ingresado por url (Ej. www.my-web.com/users/edit/1).

Debemos utilizar la clase stub ActivatedRouteStub que fué creado para simular datos de entrada por URL. Esta clase se le puede pasar lo siguiente:

new ActivatedRouteStub({
  initialParams: {
    id: '1', // Ej de URL: /user/edit/:id
  },
  initialQueryParams: {
    page: '1' // Ej de URL: /user/list?page=1
  }
})

Esta clase se puede poner al inicio del renderizado del componente setupComponent() o en la zona de test

// Opción 1: En el renderizado del componente
async function setupComponent() {
  return await render(UsersUpsertComponent, {
    declarations: [...],
    imports: [...],
    providers: [
      ...
      {
        provide: ActivatedRoute,
        useValue: new ActivatedRouteStub({
          initialParams: {
            id: '1',
          },
        }),
      },
    ],
  })
}

// Opción 2: En la zona de test
async function setupComponent(params: { id?: string; zoneId?: string } = {}) {
  const initialParams = {
    id: '3157',
    ...params,
  }
  return await render(DeliveryZoneUpsertComponent, {
    declarations: [...],
    imports: [...],
    providers: [
      ...
      {
        provide: ActivatedRoute,
        useValue: new ActivatedRouteStub({ initialParams }),
      },
    ],
  })
}

it('...', () => {
  const initialParams = {
    id: '3157',
    zoneId: '445',
  }
  const { fixture } = await setupComponent(initialParams)

  ... actions ...
  ... assertions ...
})

Captura de un elemento y ejecutar un evento

Mat-Toogle

Capturar el input dentro del mat-toggle

const toggle = screen.getByTestId('productList_productDisplay0Enabled0_toggle-input')

Ejecutar el evento change con fireEvent()

// Debemos capturar el input que está dentro del 'mat-toggle'
const toggle = screen.getByTestId('productList_productDisplay0Enabled0_toggle-input')
fireEvent.change(toggle, {
  target: { checked: false },
})

Ejecutar el evento click con userEvent()

const user = userEvent.setup()
// Debemos capturar el 'mat-toggle' como tal.
const toggleEnabled = screen.getByTestId('[ELEMENT_ID]')

await user.click(toggleEnabled)
expect(toggleEnabled).toHaveAttribute('ng-reflect-checked', 'false')

Mat-Select

Capturar el elemento

// Por su ID
const select = screen.getByTestId('[ELEMENT_ID]')

// Por su Rol
const select = screen.getByRole('combobox', { name: /List/i })

Ejecutar el evento select con userEvent()

const user = userEvent.setup()
const { fixture } = await setupComponent()
const select = screen.getByRole('combobox', { name: /List/i })

await user.click(select)
await user.click(screen.getByText(/Minimarket/i))

... assertions ...

Para este caso no se puede usar fireEvent() directamente ya que el mat-select no contiene un select nativo HTML

Mat-Input

Capturar el elemento

//Por su ID
const input = screen.getByTestId('[ELEMENT_ID]')

//Por su label
const input = screen.getByLabelText(/Minimum order amount/i)

Ejecutar el evento input usando fireEvent()

const input = screen.getByTestId('products_searchValue_input')
fireEvent.input(input, { target: { value: 'foo' } })

... assertions ...

Ejecutar el evento type usando userEvent()

const user = userEvent.setup()
const legalName = screen.getByTestId('[ELEMENT_ID]')
user.type(legalName, 'Kirby')

... assertions ...

Mat-Button

Capturar el elemento

//Por su ID
const button = screen.getByTestId('app_save_button')

//Por su label del button
const button = screen.getByText(/Save/i)

Emular retorno de datos en un Modal

Para este caso debemos usar el stub test/__stubs__/MatDialogStub que es un clase que emula el retorno de datos de un modal y se implementa llamando a la clase MatDialogStub en el archivo .spec donde se monta el componente a testear.

//component.spec.ts

async function setupComponent() {
  return await render(ApiIntegrationComponent, {
    declarations: [],
    imports: [],
    providers: [
      // Se implementa el Stub
      { provide: MatDialog, useValue: new MatDialogStub() },
      ...
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
  })
}

describe('...', () => {
  it('Should create component correctly', async () => {
    const { fixture } = await setupComponent()
    ...
  })
})

Por defecto la clase MatDialogStub() retorna true. Si queremos retornar otro valor, entonces sería de esta manera.

providers: [
  { provide: MatDialog, useValue: new MatDialogStub({
      name: 'Foo',
      age: 23
    })
  },
  ...
],

Angular Testing Library - Instalación en Angular

Victor Sandoval Valladolid — Mon, 23 Jan 2023 20:54:58 +0000

Teniendo la siguiente estructura de carpetas y archivos

my-app/
├─ src/
│  ├─ setup-jest.ts
│  ├─ app/
│  ├─ test/
│  │  ├─ index.d.ts
│  │  ├─ __mocks__/
│  │  │  ├─ jest-global-mock.ts
│  │  ├─ __stubs__/
│  │  │  ├─ ActivatedRouteStub.ts
│  │  │  ├─ MatDialogStub.ts
├─ jest.config.ts
├─ angular.json
├─ tsconfig.spec.json
├─ tsconfig.json

1.Instalar Jest, Angular Testing Library y Translate testing

npm install --save-dev @angular-builders/jest @testing-library/angular @testing-library/jest-dom @testing-library/user-event jest@28 jest-preset-angular ts-jest ts-node @types/jest ngx-translate-testing jest-environment-jsdom

2.Remover paquetes innecesarios

npm remove @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter karma-coverage protractor

3.Ejecutar lo siguiente

rm src/test.ts src/karma.conf.js
touch jest.config.ts src/setup-jest.ts
mkdir -p src/test/__mocks__ src/test/__stubs__
touch src/test/index.d.ts src/test/__mocks__/jest-global-mocks.ts src/test/__stubs__/ActivatedRouteStub.ts src/test/__stubs__/MatDialogStub.ts

4.En tsconfig.json, agregar lo siguiente

{
  compilerOptions: {
    "paths": {
      "@app/*": ["src/app/*"],
      "@test/*": ["src/app/test/*"]
    }
  }
}

5.Crear archivo jest.config.ts en la raiz y agregar lo siguiente:

import type { Config } from '@jest/types'
import { pathsToModuleNameMapper } from 'ts-jest'
import { compilerOptions } from './tsconfig.json'

const config: Config.InitialOptions = {
  preset: 'jest-preset-angular',
  globalSetup: 'jest-preset-angular/global-setup',
  modulePathIgnorePatterns: ['<rootDir>/dist/'],
  moduleNameMapper: {
    'src/(.*)': '<rootDir>/src/$1',
    ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>' }),
  },
  transformIgnorePatterns: ['/node_modules/(?!.*\\.mjs$|@braze)'],
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
}

export default config

6.Configurar archivo angular.json

...
"test": {
  "builder": "@angular-builders/jest:run",
  "options": {
    "no-cache": true
  }
},
...

7.Editar y mover archivo tsconfig.spec.json a la raiz

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
    "types": ["jest", "node"],
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "noImplicitAny": false
  },
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

8.Crear archivo src/setup-jest.ts

import 'jest-preset-angular/setup-jest'
import '@testing-library/jest-dom'
import './test/__mocks__/jest-global-mocks'
import { configure } from '@testing-library/angular'
import { TranslateTestingModule } from 'ngx-translate-testing'
import * as defaultTranslation from './assets/i18n/en.json'
import { LocaleModule } from '@app/locale/locale.module'

configure({
  defaultImports: [
    TranslateTestingModule.withTranslations('en', defaultTranslation),
    LocaleModule,
  ],
  dom: {
    testIdAttribute: 'id',
  },
})

9.Crear archivo src/test/__mocks__/jest-global-mocks.ts

const createLocalStorageMock = (): {
  getItem(key: string): any | null
  setItem(key: string, value: any): void
  clear(): void
} => {
  let storage: {
    [prop: string]: any
  } = {}
  return {
    getItem: (key) => (storage[key] ? storage[key] : null),
    setItem: (key, value) => (storage[key] = value),
    clear: (): void => {
      storage = {}
    },
  }
}

Object.defineProperty(window, 'localStorage', {
  value: createLocalStorageMock(),
})

HTMLAnchorElement.prototype.click = jest.fn()

10.En package.json, modificar lo siguiente

{
  ...
  "scripts": {
    ...
    "test": "jest --no-cache --onlyChanged",
    "test:handle": "jest --no-cache --detectOpenHandles --forceExit --onlyChanged",
    "test:all": "jest --no-cache",
    "test:coverage": "jest --no-cache --coverage",
    ...
  },
  ...
}

Explicación:

npm run test: Ejecuta los test que solo se han modificado

npm run test:handle: Ejecuta los test que solo se han modificado y contienen código aíncrono por RxJs

npm run test:all: Ejecuta todos los test de la aplicación

npm run test:coverage: Ejecuta el coverage de la aplicación

11.Crear archivo src/test/index.d.ts

interface ClipboardItem {
  readonly types: ReadonlyArray<string>
  getType(type: string): Promise<Blob>
}

Carpeta Stubs

Archivo src/test/__stubs__/ActivatedRouteStub.ts

Se utiliza esta clase cuando queremos simular los queryParams o datos que se encuentran en la URL.

/* eslint-disable @typescript-eslint/member-ordering */
import { convertToParamMap, ParamMap, Params } from '@angular/router'
import { ReplaySubject } from 'rxjs'

export class ActivatedRouteStub {
  _params: Params
  _queryParam: Params
  private subjectParams = new ReplaySubject<Params>()
  private subjectParamMap = new ReplaySubject<ParamMap>()
  private subjectQueryParams = new ReplaySubject<ParamMap>()
  readonly params = this.subjectParams.asObservable()
  readonly paramMap = this.subjectParamMap.asObservable()
  readonly queryParamMap = this.subjectQueryParams.asObservable()

  constructor({ initialParams, initialQueryParams }: { initialParams?: Params; initialQueryParams?: Params } = {}) {
    this._params = initialParams || {}
    this._queryParam = initialQueryParams || {}
    this.setParams(initialParams)
    this.setQueryParams(initialQueryParams)
  }

  get snapshot(): {
    params: Params
    queryParams: Params
    paramMap: ParamMap
  } {
    return {
      params: this._params,
      queryParams: this._queryParam,
      paramMap: convertToParamMap(this._params),
    }
  }

  setParams(params: Params = {}): void {
    this.subjectParams.next(params)
    this.subjectParamMap.next(convertToParamMap(params))
  }

  setQueryParams(params: Params = {}): void {
    this.subjectQueryParams.next(convertToParamMap(params))
  }
}

Archivo src/test/stubs/MatDialogStub.ts

Se utiliza esta clase cuando queremos testear componentes administrados por el matDialog

import { Observable, of } from 'rxjs'

export class MatDialogStub {
  _result: boolean

  constructor(result = true) {
    this._result = result
  }

  setResult(val: boolean): void {
    this._result = val
  }

  open(): { afterClosed: () => Observable<boolean> } {
    return { afterClosed: () => of(this._result) }
  }
}

Base de una prueba a un componente

Configuración mínima:

import userEvent from '@testing-library/user-event'
import { fireEvent, render, screen } from '@testing-library/angular'
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
import { ButtonComponent } from './button.component'
import { fakeAsync, flush } from '@angular/core/testing'

async function setupComponent() {
  return await render(ButtonComponent, {
    declarations: [],
    imports: [],
    providers: [],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
  })
}

describe('ButtonComponent', () => {
  beforeEach(() => {
    jest.restoreAllMocks()
  })

  it('Should create component correctly', async () => {
    const { fixture } = await setupComponent()
    expect(fixture.componentInstance).toBeTruthy()
  })

  it('When I ...', async () => {
    await setupComponent()
  })
})

Configuración extendida:

import userEvent from '@testing-library/user-event'
import { fireEvent, render, screen } from '@testing-library/angular'
import { fakeAsync, flush } from '@angular/core/testing'
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
import { SnackbarNotifierComponent } from '@app/shared/components/notifier/snackbar_notifier.component'
import { NOTIFIER_TOKEN } from '@app/shared/components/notifier/notifier.interface'
import { BottlersListComponent } from './bottlers-list.component'
import { BottlersService } from '../bottlers.service'
import { BottlersServiceMock } from '@app/test/__mocks__/bottler/bottler.service.mock'
import { MatSnackBarModule } from '@angular/material/snack-bar'

async function setupComponent() {
  return await render(BottlersListComponent, {
    declarations: [],
    imports: [MatSnackBarModule],
    providers: [
      { provide: NOTIFIER_TOKEN, useClass: SnackbarNotifierComponent },
      { provide: BottlersService, useValue: new BottlersServiceMock() },
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
  })
}

describe('BottlersListComponent', () => {
  beforeEach(() => {
    jest.restoreAllMocks()
  })

  it('Should create component correctly', async () => {
    const { fixture } = await setupComponent()
    expect(fixture.componentInstance).toBeTruthy()
  })

  it('When I ...', fakeAsync(async () => {
    await setupComponent()

    flush()
  }))
})

Angular Testing Library - Fundamentos

Victor Sandoval Valladolid — Mon, 23 Jan 2023 20:16:19 +0000

Para realizar pruebas en Angular es necesario saber lo siguiente:

Jest
Como framework
Obtenemos las funciones necesarias para ejecutar nuestras pruebas.

Testing Library
Como utilidades para las pruebas
Envuelve al componente en nodos DOM para consultar e interactuar con él.

Gherkin Reference - Cucumber Documentation
Como referencia para el nombramiento de las pruebas
Nos da una estructura de nombramiento basado en BDD (Desarrollo orientado al comportamiento)

Testing Library

El principio detrás de Testing Library es:

"Cuanto más se parezcan sus pruebas a la forma en que se usa su software, más confianza le pueden brindar"

Testing Library también lo empuja a escribir más pruebas de integración y menos pruebas unitarias. Esto es importante porque una aplicación Angular puede estar compuesta por muchos componentes. Probar un componente individual es importante, pero podría decirse que probar cómo funcionan todos estos componentes juntos es más importante.

A sus usuarios no les importa cómo está estructurada su aplicación o qué tecnología está utilizando. Les importa que puedan interactuar con su aplicación y que funcione sin problemas.

Creación de un conjunto de pruebas

Una prueba consta de una o más suites. Una suite se declara con un bloque describe:

describe('Suite description', () => {
  /* … */
});

Los bloques describe se pueden anidar para estructurar grandes conjuntos y dividirlos en secciones lógicas:

describe('Suite description', () => {
  describe('One aspect', () => {
    /* … */
  });
  describe('Another aspect', () => {
    /* … */
  });
});

Especificaciones

Cada suit consta de una o más especificaciones llamadas it (independent test)

describe('Suite description', () => {
  it('Spec description', () => {
    /* … */
  });
  /* … more specs …  */
});

El nombre que se le debe dar al it debe afirmar el comportamiento del código bajo prueba en lenguaje humano.

Se recomienda que el nombre de la prueba esté bajo esta estructura: When the orders are loaded, then it should display the data correctly

it('When the orders are loaded, then it should display the data correctly', () => {
  /* … */
});

Donde:

1.When: Se trata de las condiciones de las acciones que se van a ejecutar
2.Then: Se trata del resultado esperado de las acciones ejecutadas

Este formato se inspira en el lenguaje Gherkin. Ver más sobre lenguaje Gherkin

Estructura de un test

Dentro del bloque it se encuentra el código de prueba real. El código de prueba generalmente consta de tres fases: Organizar (Arrange), Actuar (Act) y Afirmar (Asserts).

Ejemplo:

Organizar:
a. Crear una instancia de ExampleComponent.
b. Rederizar el Componente en el documento.
Actuar:
a. Busque y enfoque el campo de entrada .
b. Introduzca el texto "5".
c. Busque y haga clic en el botón "Aceptar".
Afirmar:
a. Espere que el numero mostrado ahora lea "5".

import '@testing-library/jest-dom'
import userEvent from '@testing-library/user-event'
import { render } from '@testing-library/angular'
import { MatInputModule } from '@angular/material/input'
import { MatButtonModule } from '@angular/material/button'
import { MatFormFieldModule } from '@angular/material/form-field'

it('Example title', async () => {
  // Arrange
  const user = userEvent.setup()
  const { fixture } = await render(ExampleComponent, { 
    declarations: [ReactiveFormsModule, MatFormFieldModule, MatButtonModule, MatInputModule],
    imports: [],
    providers: []
  })

  //Act
  const priceControl = screen.getByLabelText(/Price/i)
  await user.type(priceControl, '5')
  await user.click(screen.getByText(/Save/i))

  //Assert
  const content = screen.getByTestId('example_message_label'))
  expect(content).toHaveTextContent('Hi 5!')
})

Conjunto de pruebas

Al escribir una suit podrá haber casos donde hay código que se repite por cada it. Para ello existen otras funciones que se ejecutan antes o despues de cada it

describe('Suite description', () => {
  beforeAll(() => {
    console.log('Called before all specs are run');
  });
  afterAll(() => {
    console.log('Called after all specs are run');
  });

  beforeEach(() => {
    console.log('Called before each spec is run');
  });
  afterEach(() => {
    console.log('Called after each spec is run');
  });

  it('Spec 1', () => {
    console.log('Spec 1');
  });
  it('Spec 2', () => {
    console.log('Spec 2');
  });
});

Para más información, ver la documenación de Jest

Mocking

La idea detrás del mock es la siguiente: Cuando queremos probar una función, muchas veces su resultado dependen de la respuesta de otras funciones, entonces podemos hacer mock a esas otras funciones para simular su respuesta.

En el siguiente ejemplo tenemos la función thumbWar() que simula un juego al azar donde una de las 2 personas gana después de 2 intentos y la función getWinner() que aleatoriamente trae 1 ganador.

En este caso se usa jest.spyOn() para hacer “mock" a la función getWinner() y que siempre traiga la primera persona.

Lo bueno de usar jest.spyOn() es que podemos recuperar la implementación anterior, usando [nom-var].mockRestore() que servirá para no entrar en conflicto con otros tests en un mismo archivo.

También se puede usar jest.fn(), pero no se podrá recuperar la implementación original

Adicionalmente con la implementación de jest.spyOn() o jest.fn() podemos hacer rastreo de llamadas del método. Ejm:

const spy = jest.spyOn(...)

// Saber si el metodo ha sido llamado con determinados parametros de entrada
expect(spy).toHaveBeenCalledWith(arg1, arg2)

// Saber si ha sido llamado
expect(spy).toHaveBeenCalled()

// Saber si ha sido llamado determinadas veces
expect(spy).toHaveBeenCalledTimes(number)

// Saber si ha retornado alguna variable
expect(spy).toHaveReturnedWith(value)

// Etc...

Para mas información ver el siguiente LINK

Métodos más usados para las aserciones

// Saber si valor es igual a otro valor
expect(form.valid).toEqual(false)

// Saber si un elemento tiene un atributo
expect(toggleEnabled).toHaveAttribute('ng-reflect-checked', true)

// Saber si un objecto tiene una determinada propiedad
expect(form.clientCode?.errors).toHaveProperty('clientCodeExist', true)

// Saber si un elemento tiene un determinado texto como contenido
expect(screen.getByTestId('orderTable_status_label')).toHaveTextContent('CANCELATION REQUESTED')

// Saber si un texto o elemento está en el documento
expect(screen.getByText('Distributor reason:')).toBeInTheDocument()

Si queremos negar las aserciones le antepodemos .not

// Saber si un texto o elemento NO está en el documento
expect(screen.getByText('Distributor reason:')).not.toBeInTheDocument()