Eine Einführung in den Frontend-Test

Testing Frontend-Code ist für viele Entwickler immer noch eine verwirrende Praxis. Mit der Frontendentwicklung wird jedoch komplexer und mit Entwicklern, die für Stabilität und Konsistenz wie nie zuvor verantwortlich sind, muss der Frontendtest als gleichberechtigter Bestätiger in Ihrem Codebase angenommen werden. Wir brechen Ihre verschiedenen Testoptionen ab und erklären, welche Situationen sie am besten benutzt werden.

Frontendtests ist ein Deckenbegriff, der eine Vielzahl von automatisierten Teststrategien abdeckt. Einige davon, wie Einheits- und Integrationstests, waren seit Jahren eine anerkannte Best-Practice in der Backend-Entwicklungsgemeinschaft. Andere Strategien sind neuer und stammen von den Änderungen in welcher Backend- und Frontend-Entwicklung für jetzt verwendet.

Am Ende dieses Artikels sollten Sie sich wohl fühlen, welche Teststrategien mit Ihrem Team und Codebasen am besten geeignet sind. Die folgenden Codebeispiele werden mit dem JASMINE-Framework verfasst, aber die Regeln und Prozesse sind auf den meisten Tests der meisten Tests ähnlich.

• Beste Stücke der Benutzerprüfungssoftware

01. Einheitenprüfungen.

Die Untersuchungstests, einer der Prüfveteranen, befindet sich auf der niedrigsten Ebene aller Testarten. Sein Zweck besteht darin, sicherzustellen, dass die kleinsten Bits Ihres Codes (genannte Einheiten) unabhängig voneinander wie erwartet funktionieren.

Stellen Sie sich vor, Sie haben ein Lego-Set für ein Haus. Bevor Sie mit dem Bau beginnen, möchten Sie sicherstellen, dass jedes einzelne Stück entfaltet (fünf rote Quadrate, drei gelbe Rechtecke). Die Untersuchung des Geräts stellt sicher, dass einzelne Code-Sets - Dinge wie Eingabevalidierungen und Berechnungen - vor dem Aufbau des größeren Merkmals als beabsichtigt arbeiten.

Es hilft, über Unit-Tests im Tandem mit dem Mantra "Tun eines Tandes zu denken. Wenn Sie einen Code mit einer einzelnen Verantwortung haben, möchten Sie wahrscheinlich einen Einheitstest dafür schreiben.

Schauen wir uns das folgende Code-Snippet an, in dem wir einen Einheitstest für einen einfachen Rechner schreiben:

 Beschreiben ("Rechneroperationen", Funktion () {
  es ("sollte zwei Zahlen hinzufügen", Funktion () {
    Rechner.init ();
    VArgebnis = Taschenrechner.addnumber (7,3);
    erwarten (Ergebnis) .Tobe (10);
  });
}); 

In unserer Taschenrechner Anwendung, wir möchten sicherstellen, dass die Berechnungen immer unabhängig von der Art und Weise funktionieren, wie wir erwarten. Im Beispiel möchten wir sicherstellen, dass wir immer zwei Zahlen zusammenfügen können.

Das erste, was wir tun, ist, die Serie von Tests zu beschreiben, die wir mit Jasmine verwenden werden beschreiben . Dadurch wird eine Testsuite erstellt - eine Gruppierung von Tests, die sich auf einen bestimmten Bereich der Anwendung beziehen. Für unseren Rechner gruppieren wir jeden Berechnungstest in eigener Suite.

Suiten sind nicht nur für die Code-Organisation großartig, sondern weil Sie es Ihnen ermöglichen, Suites alleine zu rennen. Wenn Sie an einer neuen Funktion für eine Anwendung arbeiten, möchten Sie nicht jeden Test während der aktiven Entwicklung ausführen, da dies sehr zeitaufwändig ist. Testing Suiten können Sie individuell schneller entwickeln.

Als nächstes schreiben wir unsere eigentlichen Tests. Verwendung der es Funktion, wir schreiben das Feature oder die Funktionalität, die wir testen. Unser Beispiel testet die Zusatzfunktion, sodass wir Szenarien ausführen, die bestätigen, dass sie korrekt funktioniert.

Dann schreiben wir unsere Test-Assertion, an denen wir testen, wenn unser Code fungiert, wie wir erwarten. Wir initialisieren unseren Rechner und führen unsere Addnumbers. Funktion mit den beiden Zahlen, die wir hinzufügen möchten. Wir speichern die Nummer als Ergebnis und behaupten, dass dies gleich der von Ihnen erwarteten Anzahl ist (in unserem Fall, 10).

Wenn Addnumbers. Die korrekten Figuren scheitern nicht, unser Test wird ausfallen. Wir würden ähnliche Tests für unsere anderen Berechnungen schreiben - Subtraktion, Multiplikation usw.

02. Akzeptanztests

Wenn Einheitstests wie das Überprüfen jedes LEGO-Stücks sind, prüfen Annahmeprüfungen, ob jede Gebäudestufe abgeschlossen sein kann. Nur weil alle Teile berücksichtigt werden, bedeutet dies nicht, dass die Anweisungen ordnungsgemäß ausführbar sind und Sie ermöglichen, das letzte Modell aufzubauen.

Akzeptanztests gehen durch die laufende Anwendung und stellen sicher, dass bestimmte Aktionen, Benutzereingänge und Benutzerströme abgeschlossen und funktionieren.

Nur weil unsere Anwendung Addnumbers. Die Funktion gibt die richtige Nummer zurück, bedeutet nicht, dass die Taschenrechnerschnittstelle definitiv funktioniert, um das richtige Ergebnis zu erteilen. Was ist, wenn unsere Tasten deaktiviert sind, oder das Berechnungsergebnis wird nicht angezeigt? Akzeptanztests helfen uns, diese Fragen zu beantworten.

 Beschreiben ("Fehler anmelden Zustand", Funktion () {
  ("sollte die Anmeldung nicht zulassen mit ungültigen Informationen", Funktion () {
    Var Page = Besuch ("/ home");
    Page.Fill_in ("Input [Name = 'E-Mail"] "," keine E-Mail ");
    Page.Click ("Taste [type = Senden]");
    Page.Click ("Taste [type = Senden]");
    erwarten (Seite.Find ("# Signuperror"). Hasklasse ("versteckt")). TOFEFALSY ();
  });
}); 

Die Struktur sieht unserem Einheitstest sehr ähnlich aus: Wir definieren eine Suite mit beschreiben , dann schreiben Sie unseren Test in die es Funktion, füllen Sie dann einen gewünschten Code aus und überprüfen Sie das Ergebnis.

Anstatt jedoch um bestimmte Funktionen und Werte zu testen, werden wir jedoch hier getestet, um zu sehen, ob ein bestimmter Workflow (ein Anmeldefluss) sich wie erwartet verhält, wenn wir einige schlechte Informationen ausfüllen. Es gibt hier mehr Minutenaktionen, z. B. Formalvalidierungen, die möglicherweise getestet werden können, sowie jede Handhabung für das, was unseren Fehlerzustand zeigt, das von einem Element mit der ID demonstriert wird Signuperror .

Akzeptanztests sind eine großartige Möglichkeit, sicherzustellen, dass die Strömungen der Schlüsselerfahrung immer ordnungsgemäß funktionieren. Es ist auch leicht, Tests um Rand-Fälle hinzuzufügen, und um Ihren QA-Teams zu helfen, sie in Ihrer Anwendung zu finden.

Wenn Sie in Betracht ziehen, welchen Akzeptanztests schreiben sollen, sind Ihre Benutzergeschichten ein großartiger Start. Wie interagiert Ihr Benutzer mit Ihrer Website, und was ist das erwartete Ergebnis dieser Interaktion? Es ist anders der Untersuchungsprüfung, was besser auf etwas wie Funktionsanforderungen abgestimmt ist, z. B. die Anforderungen um ein validiertes Feld.

03. Visuelle Regressionsprüfung

Wie in der Einführung erwähnt, sind einige Arten von Tests für die Frontend-Welt einzigartig. Das erste davon ist visuelle Regressionsprüfung. Dies trifft Ihren Code nicht, sondern vergleicht das gerenderte Ergebnis Ihres Codes - Ihre Benutzeroberfläche - mit der gerenderten Version Ihrer Anwendung in Produktion, Inszenierung oder einer vorgeänderten lokalen Umgebung.

Dies erfolgt typischerweise durch den Vergleich von Screenshots, die in einem heftigen Browser genommen wurden (ein Browser, der auf dem Server ausgeführt wird). Bildvergleichswerkzeuge erkennen dann alle Unterschiede zwischen den beiden Schüssen.

Mit einem Werkzeug wie PhantomCSS, Ihre Tests geben an, wo der Testlaufer zu navigieren, zu einem Screenshot navigieren, und das Framework zeigt Ihnen Unterschiede, die in diesen Ansichten aufgenommen wurden.

 casper.start ("/ home"). Dann (Funktion () {

  // Anfangszustand der Form
  phantomcss.screenshot ("# SignUpform", "Melden Sie sich an);

  // Triff die Anmelde-Taste (sollte Fehler auslösen)
  casper.click ("Button # Anmeldung");

  // Nehmen Sie einen Screenshot der UI-Komponente
  phantomcss.screenshot ("# SignUpform", "FORM FORM FORM FORM FORM");

  // Formular mit Namensattributen & AMP füllen; einreichen
  casper.Fill ("# Signuform", {
    Name: "Alicia Sedlock",
    E-Mail: "[email protected]"
  }, wahr);

  // einen zweiten Screenshot des Erfolgszustands nehmen
 phantomcss.screenshot ("# SignUpform", "Melden Sie sich an, um den Formular anzumelden);
}); 

Im Gegensatz zu Akzeptanz- und Einheitsprüfungen ist die visuelle Regressionsprüfung schwer zu profitieren, wenn Sie etwas Neues aufbauen. Wenn Ihre Benutzeroberfläche während des gesamten Auflaufs der aktiven Entwicklung schnelle und drastische Änderungen sehen, werden Sie diese Tests wahrscheinlich dafür speichern, wenn Teile der Schnittstelle visuell vollständig sind. Daher sind visuelle Regressionstests die letzten Tests, die Sie schreiben sollten.

Derzeit erfordern viele visuelle Regressionswerkzeuge ein bisschen manuelle Aufwand. Möglicherweise müssen Sie Ihre Screenshot-Capture ausführen, bevor Sie die Entwicklung auf Ihrer Branche starten, oder die Baseline-Screenshots manuell aktualisieren, wenn Sie Änderungen an der Schnittstelle vornehmen.

Dies ist einfach wegen der Art der Entwicklung - ändert sich an der Ui Kann vorsätzlich sein, aber Tests wissen nur "Ja, dies ist das gleiche" oder "Nein, das ist anders". Wenn jedoch visuelle Regressionen ein Schmerzpunkt in Ihrer Bewerbung sind, kann dieser Ansatz Ihre Teamzeit und -aufwands insgesamt sparen, verglichen mit ständig fixierenden Regressionen.

04. Zugänglichkeit und Leistungstests

Da die Kultur und Bewusstsein um den Frontendtest wächst, wächst die Fähigkeit, verschiedene Aspekte des Ökosystems zu testen. Angesichts des erhöhten Fokus auf Barrierefreiheit und Leistung in unserer technischen Kultur, in der Integration in Ihre Testsuite, sorgt dafür, dass diese Konzepte eine Priorität bleiben.

Wenn Sie Probleme beim Durchsetzung von Leistungsbudgets oder Zugangsnormen haben, ist dies ein Weg, um diese Anforderungen an den Vordergrund der Köpfe der Menschen zu halten.

Beide Überprüfungen können entweder mit Build-Tools wie Grunts und GULP oder semi-manuell in Ihrem Terminal in Ihren Workflow integriert werden. Für Leistungsbudgets bietet ein Tool wie Grunt-Perfbudget die Möglichkeit, Ihre Site über den Webpagetest automatisch innerhalb einer bestimmten Aufgabe auszuführen.

Wenn Sie jedoch keinen Task-Runner verwenden, können Sie sich auch als eigenständiges NPM-Modul perfudget angreifen und die Tests manuell ausführen.

Hier ist es, wie es aussieht, um dies durch das Terminal auszuführen:

 PFLUDGET - SURL http://www.aliciability.com --key [Webpagetest API-Taste] - speedindex 2000 --render 400

Und ebenfalls durch Grunzen einrichten:

Perfbudget: {
  Standard: {
    Optionen: {
      URL: 'http://aliciability.com',
      Schlüssel: 'Webpagetest API-Taste',
      Budget: {
        Edledex: '2000',
        Render: '400'
      }
    }
  }
}

[...]

Grunts.RegistertDask ('Standard', ['JShint', 'Perfludget']); 

Die gleichen Optionen stehen für den Zugang zur Zugänglichkeit zur Verfügung. Für pa11y können Sie entweder das ausführen PA16Y. Befehl in Ihrem Browser für die Ausgabe oder Richten Sie eine Aufgabe ein, um diesen Schritt zu automatisieren. Im Terminal:

 pa11y aliciability.com

// als JavaScript-Befehl nach der NPM-Installation

var pa11y = erfordern ('pa11y'); // erfordern pa11y.
var test = pa11y (); // Holen Sie sich PA11Y bereit zum Set

test.run ('aliciability.com', Funktion (Fehler, Ergebnisse) {
  // Melden Sie sich analysieren Ihre Ergebnisse
}); 

Die meisten Tools in diesen Kategorien sind ziemlich plug-and-Play, geben Ihnen aber auch die Möglichkeit, anzupassen, wie die Tests ausgeführt werden. Zum Beispiel können Sie sie einstellen, um bestimmte WCAG-Standards zu ignorieren.

Nächste Seite: Wie man Testing in Ihren Workflow einführt

• 1.
• 2.

Aktuelle Seite: Verschiedene Arten von Frontendtests (und wann sie verwenden)