Reine Funktionen sind der perfekte Fall für Unit-Tests. Für eine gegebene Eingabe erwarten wir immer die gleiche Ausgabe – es ist kein interner Zustand beteiligt. Schauen wir uns ein paar Beispiele und einige einfache Tests an, die prüfen, ob die Methoden wie erwartet funktionieren.  Jasmin  Jasmine ist ein Unit-Test-Framework für JavaScript. Es kann Tests sowohl in Node.js als auch im Browser ausführen. Es wird im Angular-Framework verwendet und ist besonders in Projekten beliebt, die auf Angular basieren. Es ist eine gute Wahl für Vanilla JS-Projekte oder auch Projekte, die auf anderen Frameworks basieren.  Viel Spaß beim Testen des Weges  Beim Happy-Path-Testen testen wir eine Methode mit Eingaben, von denen erwartet wird, dass sie normal funktioniert. Die Argumente sind gültig und liegen in angemessenen Grenzen. Bei diesen Tests wird überprüft, ob die Methode ihre Aufgabe korrekt erfüllt. Die Testfälle sollten einfache Beispiele dafür sein, wie die Methode in ihrer Dokumentation erklärt wird.  Pseudocode-Beispiele:    , expect(add(2, 2)).toBe(4)   expect(concatenate(“Lorem”, “Ipsum”)).toBe(“LoremIpsum”)  Diese Tests sollen es automatisch abfangen, wenn das Verhalten des Methodenschlüssels fehlerhaft ist.  Methoden  Sehen wir uns ein paar einfache Methoden an: einfache Operationen, die wir möglicherweise in einigen realen Anwendungen benötigen.  Alle Implementierungen sind stark vereinfacht – alle Methoden werden auf hässliche Weise kaputt gehen, wenn wir ihnen nur Parameter zur Verfügung stellen, die geringfügig von den Erwartungen abweichen. Der Code ist alles andere als robust.  grüßen  Methode, die den Benutzer mit seinem Vor- und Nachnamen begrüßt:   export function greet(name, surname) { return `Hello ${name} ${surname}!`; }  kurzes Date    ist eine Formatierungsmethode, die ein Datumsobjekt nimmt und es formatiert als kurze Zeichenfolge zurückgibt. Der Code: shortDate   export function shortDate(date) { return date.toISOString().substring(0, 10); }  Ellipse    nimmt eine lange Textzeichenfolge und einen optionalen Längenparameter und schneidet die Zeichenfolge dann so zu, dass sie in den Grenzwert passt: ellipsis   export function ellipsis(text, length = 50) { if (text.length > length) { return text.substring(0, length) + "…"; } return text; }  übersetzen  Eine Methode, die übersetzte Zeichenfolgenwerte für ein   und   -Paar bereitstellt. Es handelt sich um eine vereinfachte Implementierung dessen, was durch fortschrittlichere Übersetzungsbibliotheken ersetzt werden könnte. key lang   export function translate(key, lang = "en") { switch (lang) { case "en": switch (key) { case "hello": return "Hello!"; } case "pl": switch (key) { case "hello": return "Cześć!"; } } }  applyDiscount  Methode zum Anwenden eines prozentualen Rabatts auf einen Preis. Mit dieser naiven Implementierung kann es sich übertrieben anfühlen, aber später, wenn wir anfangen, Randfälle zu untersuchen, wird es viel interessanter.   export function applyDiscount(price, discountPercentage) { return price - (price * discountPercentage) / 100; }  berechne den Preis  Dieser berechnet den Gesamtpreis beim Kauf mehrerer Einheiten zu einem bestimmten Preis. Es wird auch komplizierter, wenn interessante Randfälle hinzugefügt werden.   export function calculatePrice(unitPrice, quantity) { return unitPrice * quantity; }  Vollständiger JS-Code  Der vollständige JS-Code,   : src/main.js   export function greet(name, surname) { return `Hello ${name} ${surname}!`; } export function shortDate(date) { return date.toISOString().substring(0, 10); } export function ellipsis(text, length = 50) { if (text.length > length) { return text.substring(0, length) + "…"; } return text; } export function translate(key, lang = "en") { switch (lang) { case "en": switch (key) { case "hello": return "Hello!"; } case "pl": switch (key) { case "hello": return "Cześć!"; } } } export function applyDiscount(price, discountPercentage) { return price - (price * discountPercentage) / 100; } export function calculatePrice(unitPrice, quantity) { return unitPrice * quantity; }  Jasmintests hinzufügen  Um Jasmine hinzuzufügen, beginnen wir mit der Konvertierung des Ordners in ein npm-Paket:   $ npm init -y Wrote to …/package.json: …  Dann können wir das Jasmine-Paket installieren:   $ npm install --save-dev jasmine added 42 packages, and audited 43 packages in 2s 13 packages are looking for funding run `npm fund` for details found 0 vulnerabilities  Dann können wir von Jasmine verwendete Ordner und Dateien generieren:   $ npx jasmine init (no output)  Dieser Befehl generiert Folgendes:    – ein Ordner, in dem wir   Dateien mit dem Test ablegen können, und spec/ *.spec.js    – eine Datei mit der Jasmine-Konfiguration. spec/support/jasmine.json  Unit-Tests  Bei den folgenden Komponententests konzentriere ich mich nur auf den glücklichen Weg – ich überprüfe, ob das Ergebnis für vernünftige Eingaben den Erwartungen entspricht. Der Test sollte selbsterklärend sein, also werfen wir einen Blick darauf:   import { greet, shortDate, ellipsis, translate, applyDiscount, calculatePrice, } from "../src/main.js"; describe("main", () => { describe("greet", () => { it("should greet by name and surname", () => { expect(greet("Lorem", "Ipsum")).toEqual("Hello Lorem Ipsum!"); }); }); describe("shortDate", () => { it("should format correclty date", () => { const date = new Date("2023-11-02"); expect(shortDate(date)).toEqual("2023-11-02"); }); }); describe("shortDate", () => { it("should shorten long text at 50 chars", () => { expect( ellipsis( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a faucibus massa." ) ).toEqual("Lorem ipsum dolor sit amet, consectetur adipiscing…"); }); it("should leave short text unchanged", () => { expect(ellipsis("Lorem ipsum sin dolor")).toEqual( "Lorem ipsum sin dolor" ); }); it("should shorten to custom length", () => { expect(ellipsis("Lorem ipsum sin dolor", 10)).toEqual("Lorem ipsu…"); }); }); describe("translate", () => { it("should translate to supported langauges", () => { expect(translate("hello", "en")).toEqual("Hello!"); expect(translate("hello", "pl")).toEqual("Cześć!"); }); }); describe("applyDiscount", () => { it("should lower the price accordingly", () => { expect(applyDiscount(120, 25)).toEqual(90); expect(applyDiscount(8, 50)).toEqual(4); }); }); describe("calculatePrice", () => { it("should find a price of many products", () => { expect(calculatePrice(4, 3)).toEqual(12); expect(calculatePrice(9, 0.5)).toEqual(4.5); }); }); });  (Datei   ) spec/main.spec.js  Ausführen von Tests  Um die Tests auszuführen, können wir das folgende Skript zu   hinzufügen: package.json  .. "scripts": { "test": "jasmine" }, …  Nachdem dies geschehen ist, führt   unsere Tests aus: npm run test   $ npm run test > testing-example@1.0.0 test > jasmine Randomized with seed 76873 Started ........ 8 specs, 0 failures Finished in 0.004 seconds Randomized with seed 76873 (jasmine --random=true --seed=76873)  Zusammenfassung  In diesem Beitrag haben wir uns ein einfaches Beispiel für JS-Code angesehen und gezeigt, wie dieser durch Unit-Tests abgedeckt werden kann. Das   . vollständige Codebeispiel finden Sie auf GitHub   Auch   veröffentlicht hier

2022 - HackerNoon Contributor of the Year - Beginners Guide

2022 - HackerNoon Contributor of the Year - Code Quality

2022 - HackerNoon Contributor of the Year - Learning

2022 - the Greatest Storyteller

Newsletter

Senior JS developer

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Jasmine: Ein anfängerfreundlicher Leitfaden zu reinen Funktionen und grundlegenden Tests

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Startups Community!

HackerNoon Decoded 2024: Celebrating Our AI Community!

HackerNoon Decoded 2024: Celebrating Our Writing Community!

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded 2024: Celebrating Our Startups Community!

HackerNoon Decoded 2024: Celebrating Our AI Community!

HackerNoon Decoded 2024: Celebrating Our Writing Community!

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps