Angular - Hinzufügen von benutzerdefinierten Jasmin-Matchern im Komponententest

Sowohl in Javascript als auch in Typescript

Foto von Hosea Georgeson auf Unsplash

Jasmine ist ein BDD-Framework, das viele integrierte Matcher für Unit-Tests bietet. Manchmal müssen wir jedoch eigene benutzerdefinierte Matcher erstellen, um alle Testszenarien zu vereinfachen oder besser lesbare Testfälle zu erstellen.

In diesem Beitrag werden Jasmin-Matcher und ihre Verwendung sowohl in Javascript als auch in Typescript behandelt.

  • Was sind Matcher?
  • Eingebaute Matcher und deren Verwendung
  • Benutzerdefinierte Mathematiker und wie man sie definiert
  • Beispielprojekt in Javascript
  • Beispielprojekt in Typescript
  • So definieren Sie benutzerdefinierte Matcher in Angular
  • Zusammenfassung

Was sind Matcher?

Matcher sind nichts anderes als Vergleichsfunktionen, um das erwartete und das tatsächliche Ergebnis in den Testspezifikationen zu vergleichen.

Hier ist ein Beispiel eines Matchers. Wenn wir uns Zeile 4 ansehen, ist toBe der Matcher und wird immer mit expect verwendet. Es vergleicht nur das tatsächliche Ergebnis mit dem erwarteten Ergebnis und gibt einen booleschen Wert zurück.

Eingebaute Matcher und deren Verwendung

Jasmine bietet so viele integrierte Matcher, und einige davon sehen wir hier.

Matcher-Vorschläge von VSCode

Hier ist, wie wir sie verwenden müssen.

Benutzerdefinierte Mathematiker und wie man sie definiert

Meistens reichen diese eingebauten Matcher aus Jasmin. Aber manchmal müssen wir unsere benutzerdefinierten Matcher erstellen.

Jasmine bietet eine Funktion namens addMatchers, mit der wir Matcher mit unseren benutzerdefinierten oder benutzerdefinierten Funktionen erweitern können. Wir müssen dies in die beforeEach -Funktion setzen.

Sehen wir uns hier an, wie wir benutzerdefinierte Matcher definieren. Wie wir unten sehen können, definieren wir toBeOlderThan, das die Vergleichsfunktion mit dem Ergebnisobjekt mit den Feldern pass und message zurückgibt. Wenn der Test fehlschlägt, wird die hier angegebene Meldung auf der Konsole angezeigt.

Beispielprojekt in Javascript

Ich habe ein Repo für diesen Beitrag geschrieben, mit dem Sie mitverfolgen können. Um es zu benutzen, gehe auf den obigen Link, klone und installiere.

// Repo klonen
Git-Klon https://github.com/bbachi/jasmine-tests.git
// Installiere die Abhängigkeiten und teste
npm install
npm test

Wir haben eine Person mit den Methoden getName, getAge, setName und setAge

Wir möchten diese Klasse mit den benutzerdefinierten Matchern toBeOlderThan, toBeLastNameEqualTo, toBeFirstNameEqualTo testen. Definieren Sie diese benutzerdefinierten Matcher in einem separaten Objekt wie unten und fügen Sie dieses Objekt in die beforeEach-Funktion ein.

Hier ist der Rest der Datei, in der wir das obige benutzerdefinierte Matcher-Objekt zu den addMatchers hinzufügen und das Projekt testen.

Hier ist die Ausgabe, wenn wir den npm-Test ausführen.

Testausgang

Beispielprojekt in Typescript

Ich habe ein Repo für das Typoskript-Projekt geschrieben, mit dem Sie mitarbeiten können. Um es zu benutzen, gehe auf den obigen Link, klone und installiere.

// Das Projekt klonen
Git-Klon https://github.com/bbachi/jasmine-tests-typescript.git
// Abhängigkeiten installieren und Test ausführen
npm install
npm test

Wir haben eine Personenklasse in Typoskript mit den Methoden getName, getAge, setName und setAge

Wir müssen die folgenden Typdefinitionen installieren, da es sich um Typoskript handelt

@ types / jasmine: ^ 3.3.12
"@ types / node": "^ 12.0.0",
"ts-node": "^ 8.1.0",
Typoskript: ^ 3.4.5

Hier sind die benutzerdefinierten Methoden in Typoskript in einer separaten Datei unter src / test-helpers

Wir müssen Typdefinitionen für diese benutzerdefinierten Matcher definieren, da diese erweitert und nicht in der Typdefinitionsdatei von jasmine vorhanden sind und vom Typenskript-Compiler erkannt werden sollen.

Wir können diese unter dem Jasmin-Namespace wie unten in Zeile 4 deklarieren.

Hier ist die Ausgabe, wenn wir den npm-Test ausführen.

Testausgang

So definieren Sie benutzerdefinierte Matcher in Angular

In Angular definieren wir die benutzerdefinierten Macher auf dieselbe Weise. Wir müssen custom-matcher.ts für alle benutzerdefinierten Matcher und custom-matcher.d.ts für die Typdefinitionen im Ordner testing definieren.

separater Ordner für benutzerdefinierten Matcher

Importieren Sie sowohl custom-matcher.ts als auch custom-matcher.d.ts in die folgende Spezifikationsdatei.

Der Kürze halber habe ich den restlichen Code aus der folgenden Datei entfernt.

Hier ist die Ausgabe, wenn Sie npm test ausführen

Testausgang

Zusammenfassung

  • Matcher sind die Vergleichsfunktionen, die das tatsächliche und das erwartete Ergebnis vergleichen und einen booleschen Wert zurückgeben.
  • Jasmine ist ein BDD-Test-Framework, das Angular für Unit-Tests verwendet.
  • Matcher sollten immer in Verbindung mit expect verwendet werden.
  • Jasmine bietet integrierte Matcher, die direkt im Projekt verwendet werden können.
  • Wir können Jasmin Matcher mit der Funktion addMatchers () erweitern.
  • Benutzerdefinierte Jasmine-Matcher können sowohl in Javascript als auch in Typoskript geschrieben werden.
  • Wir müssen Typdefinitionsdateien für benutzerdefinierte Matcher deklarieren, damit der Typenskript-Compiler kompiliert werden kann.
  • Jasmine.addMatchers () sollte immer innerhalb von beforeEach () verwendet werden.

Ressourcen

  • Benutzerdefinierte Matcher Javescript Git Repo
  • Benutzerdefinierte Matcher Typescript Git Repo
  • Benutzerdefinierte Matcher Angular Git Repo

Vielen Dank für das Lesen und wenn Sie dies nützlich finden, geben Sie es bitte einen Klaps und helfen Sie anderen, es zu finden. Bitte folgen Sie mir für weitere interessante Geschichten :)