Angular: cómo agregar marcadores personalizados de jazmín en pruebas unitarias

Tanto en Javascript como en mecanografiado

Foto de Hosea Georgeson en Unsplash

Jasmine es un marco BDD que proporciona muchos emparejadores integrados para pruebas unitarias. Pero, a veces tenemos que crear nuestros propios indicadores personalizados para facilitar todos los escenarios de prueba o para hacer casos de prueba más legibles.

En esta publicación, revisaremos los comparadores de jazmín y su uso tanto en Javascript como en Script mecanografiado.

  • ¿Qué son los matchers?
  • Matchers incorporados y cómo usarlos
  • Mathers personalizados y cómo definirlos
  • Proyecto de ejemplo en Javascript
  • Proyecto de ejemplo en mecanografiado
  • Cómo definir Matchers personalizados en angular
  • Resumen

¿Qué son los matchers?

Los comparadores no son más que funciones de comparación para comparar realmente el resultado esperado y el real en las especificaciones de prueba.

Aquí hay un ejemplo de uno de los Matchers. Si nos fijamos en la línea número 4, toBe es la coincidencia y siempre se utiliza con la expectativa. Simplemente compara el resultado real con el resultado esperado y devuelve un valor booleano.

Matchers incorporados y cómo usarlos

Jasmine proporciona muchos matizadores integrados y veamos algunos de ellos aquí.

sugerencias de matcher por VSCode

Así es como debemos usarlos.

Mathers personalizados y cómo definirlos

La mayoría de las veces, estos emparejadores integrados de jazmín son suficientes. Pero, a veces necesitamos crear nuestros emparejadores personalizados.

Jasmine proporciona una función llamada addMatchers para que podamos extender los matchers con nuestras funciones personalizadas o definidas por el usuario. Debemos poner esto en la función beforeEach.

Veamos cómo definimos el emparejador personalizado aquí. Como podemos ver a continuación, estamos definiendo toBeOlderThan que devuelve la función de comparación con el objeto de resultado con los campos pass y message. Si la prueba falla, cualquier mensaje que le demos aquí se mostrará en la consola.

Proyecto de ejemplo en Javascript

Escribí un repositorio para esta publicación que puedes usar para seguir. Para usarlo, vaya al enlace de arriba, clone e instale.

// clonar el repositorio
git clone https://github.com/bbachi/jasmine-tests.git
// instala las dependencias y prueba
npm install
prueba npm

Tenemos una persona con los métodos getName, getAge, setName y setAge

Queremos probar la clase anterior con los comparadores personalizados toBeOlderThan, toBeLastNameEqualTo, toBeFirstNameEqualTo. Definamos estos emparejadores personalizados en un objeto separado como el siguiente y agreguemos este objeto en la función beforeEach

Aquí está el resto del archivo donde agregamos el objeto de coincidencia personalizado anterior a addMatchers y probamos el proyecto.

Aquí está la salida cuando ejecutamos la prueba npm.

prueba de salida

Proyecto de ejemplo en mecanografiado

Escribí un repositorio para el proyecto mecanografiado que puedes usar para seguir. Para usarlo, vaya al enlace de arriba, clone e instale.

// clonar el proyecto
git clone https://github.com/bbachi/jasmine-tests-typescript.git
// instala dependencias y ejecuta test
npm install
prueba npm

Tenemos una clase de persona en mecanografiado con los métodos getName, getAge, setName y setAge

Necesitamos instalar las siguientes definiciones de tipo ya que está en mecanografiado

"@ types / jazmín": "^ 3.3.12",
"@ tipos / nodo": "^ 12.0.0",
"ts-node": "^ 8.1.0",
"mecanografiado": "^ 3.4.5"

Estos son los métodos personalizados en mecanografiado en un archivo separado en src / test-helpers

Tenemos que definir definiciones de tipo para estos comparadores personalizados, ya que estos se extienden y no están presentes en el archivo de definición de tipo de jazmín y para que el compilador de mecanografía los reconozca.

Podemos declararlos bajo el espacio de nombres de jazmín como se muestra a continuación desde la línea número 4

Aquí está la salida cuando ejecutamos la prueba npm.

prueba de salida

Cómo definir Matchers personalizados en angular

En Angular, definimos los machers personalizados de la misma manera. Necesitamos definir custom-matcher.ts para todos los matchers personalizados y custom-matcher.d.ts para las definiciones de tipo en la carpeta de prueba.

carpeta separada para matcher personalizado

Importe tanto custom-matcher.ts como custom-matcher.d.ts en el archivo de especificaciones como se muestra a continuación.

Eliminé todo el código restante del archivo a continuación por brevedad.

Aquí está la salida cuando ejecuta la prueba npm

prueba de salida

Resumen

  • Los comparadores son las funciones de comparación que comparan el resultado real y esperado y devuelven un valor booleano.
  • Jasmine es un marco de prueba BDD que Angular usa para pruebas unitarias.
  • Los Matchers siempre deben usarse en conjunción con esperar.
  • Jasmine proporciona matchers integrados que se pueden usar directamente en el proyecto.
  • Podemos extender los emparejadores de jazmín con la función llamada addMatchers ().
  • Los matizadores personalizados de Jasmine se pueden escribir tanto en JavaScript como en mecanografiado.
  • Necesitamos declarar archivos de definición de tipo para matchers personalizados para que el compilador mecanografíe a compilar.
  • Jasmine.addMatchers () siempre debe usarse dentro del bloque BeforeEach ().

Recursos

  • Matpo personalizado Javescript Git repo
  • Matcher personalizado Mecanografiado repositorio Git
  • Matpo personalizado angular Git repo

Gracias por leer y si esto le resulta útil, aplauda y ayude a otros a encontrarlo. Por favor, sígueme para más historias interesantes :)