Wir automatisieren das Testen von Redux-Selektoren in der Anwendung.

    In diesem Artikel möchte ich meine Ideen zur Automatisierung von Schreibeinheitstests in Reakt / Redux-Anwendungen teilen. Diese Ideen wurden in einer der Diskussionen mit Kollegen während des Schreibens von Tests geboren, und es scheint mir, dass die vorgeschlagene Lösung das Recht auf Leben hat.

    Über das Problem


    Ich möchte gerne über die Notwendigkeit von Komponententests nachdenken und mich direkt mit dem Geschäft befassen. Wie testen wir jetzt Selektoren?

    Ein Redux-Selektor ist eine Funktion, die den Status einer Anwendung (Speichern) übernimmt und das Ergebnis zurückgibt. Selbst wenn der Selektor mit reselect createSelector () erstellt wurde und mehrere Selektoren kombiniert wird, übernimmt er auch das Speichern als Eingabe.

    Um den Selektor für immer zu testen, müssen Sie den Punkt vollständig durchgehen. Durch das Erstellen eines Mock-Stores können natürlich unnötige Bereiche eliminiert werden. Wenn wir jedoch einen komplexen Selektor testen, der andere Selektoren aus verschiedenen Teilen des Stores kombiniert, müssen wir einen vollständigen oder fast vollständigen Zustand wiederherstellen. Und so für jeden Fall.

    Hier können Sie auf verschiedene Arten gehen:

    • Erstellen Sie den Status der Anwendung in der Testumgebung erneut, und entladen Sie den Status, z. B. mithilfe der Erweiterung redux devtools.
    • Erstellen Sie einfach ein Objekt, so genannte Stifte. Wenn die Anwendung groß ist und ihr Status viele „Zweige“ enthält, kann dies ein ziemlich komplizierter und mühsamer Prozess sein.

    Die Idee, den Prozess zu automatisieren


    Stellen Sie sich vor, Sie haben eine Middleware, die unter anderem alle Selektoren der Anwendung kennt. Nach jeder Aktion kann eine solche Middleware alle Selektoren berechnen und einen Testfall vorbereiten, bestehend aus:

    • Ereignis aufgetreten (Aktion);
    • Anwendungsstatus (speichern);
    • Das Ergebnis der Ausführung aller Selektoren mit diesem Status.

    Daher haben wir für jede Aktion eine Reihe von Daten: den Status der Anwendung für die Übertragung an die Selektoren und die erwarteten Ergebnisse - in der Tat, um zu vergleichen.

    Ie Wir haben Datensätze aus einer realen Anwendung, deren Vorbereitung ein Minimum an Zeit in Anspruch nahm.

    Es bleibt nur zu lernen, wie man diese Daten speichert und irgendwie automatisch Selektoren durchführt und das Ergebnis vergleicht, aber diese Aufgabe ist einfach, technisch und ich habe sie für Sie gelöst. In diesem Kapitel wollte ich nur die Idee vermitteln.

    Wie funktioniert das?


    Wenn die ganze Idee klar ist (und Ihnen angemessen erscheint :)), schlage ich vor, mit der Implementierung zu beginnen. Zu Beginn benötigen wir die Browsererweiterung Redux CheckState .
    Diese Erweiterung ruft alle Aktionen Ihrer Anwendung ab, führt Selektoren aus und speichert Testfälle. Am Ende klicken Sie dort auf die Schaltfläche und laden die Datei mit den resultierenden Testfällen herunter.

    Es sieht so aus:

    Redux CheckState Screenshot

    Damit die Erweiterung Daten zu den Ereignissen erhält und die Pinzette ausführen kann, müssen Sie mit dem Projekt kleine Manipulationen vornehmen.

    Schritt 1. Selektoren exportieren


    Im Stammverzeichnis des Projekts müssen Sie eine Datei checkState.config.js erstellen und alle Selektoren exportieren, die Sie testen möchten. In meinem Testprojekt sieht es so aus:

    export {
        selectCategories,
        selectActiveCategory,
        selectIsCategoryActive,
        selectActiveCategoryId,
    } from "./state/category";
    export {
        selectPopup,
        selectPopupType,
        selectIsPopupOpen,
    } from "./state/popup";
    export {
        selectTasks,
        selectActiveTasks,
        selectActiveDoneTasks,
        selectActiveInProgressTasks,
    } from "./state/task";

    Sehen Sie sich ein Beispiel für Github an .

    Schritt 2. Implementierung der Middleware


    Nun müssen Sie Middleware hinzufügen, die alle Aktionen und andere Daten an die Erweiterung überträgt.

    Der Code ist sehr einfach:

    import * as selectors from "./checkState.config";
    const checkStateMiddleware = (options = {}) => {
        return window && window["__checkStoreExtension__"] ? window["__checkStoreExtension__"](options) :
            store => next => action => next(action);
    };

    In meiner Testanwendung können Sie auch die Implementierungsoptionen für Typoskript betrachten.

    Alles, das Schreiben des Codes ist abgeschlossen. Jetzt starten wir die Anwendung, öffnen die Erweiterung und verwenden die Anwendung als Benutzer. Sie müssen so viele Action-Spiele wie möglich machen. Jede perfekte Aktion, die Sie in der Erweiterung sehen werden. Sie können auch auf eine beliebige Aktion klicken und die Ergebnisse der Ausführung von Selektoren sehen.

    Wenn alle Aktionen perfekt sind, laden Sie einfach die Datei herunter und fügen Sie sie in das Projekt ein. Jetzt führen Sie einfach die Tests durch. Es ist noch einfacher.

    Laufende Tests


    Um die Tests auszuführen, habe ich das CLI-Tool vorbereitet. Installieren Sie das Paket:
    npm ich check-state -g

    Führen Sie danach im Projektordner den Befehl aus:
    check-state start

    Überprüfungsstatus CLI findet die von der Browsererweiterung generierte Testfalldatei, sucht und kompiliert die exportierten Selektoren (während Javascript und Typoscript unterstützt werden).
    Danach werden alle Testfälle nacheinander bestanden, jeder Selektor wird mit dem Anwendungsstatus aus dem Testfall ausgeführt und der berechnete Wert wird mit dem erwarteten (auch aus dem Testfall) verglichen. Wenn es keinen Unterschied gibt, sehen wir eine grüne Linie, wenn es eine rote Linie gibt, mit Informationen, die Ihnen helfen, das Problem zu diagnostizieren:

    • Der Name des Selektors, der das falsche Ergebnis zurückgegeben hat.
    • Erwartetes Ergebnis;
    • Aktuelles Ergebnis;
    • Nugget-Anwendungsstatus aus dem Testfall.

    Überprüfen Sie den Status des CLI-Tools
    Ein Beispiel für einen "gefallenen" Test.

    Damit Sie mit dem Tool experimentieren können - ich habe eine Testanwendung vorbereitet, in der es mehrere Selektoren gibt, und habe bereits den Check-Status: Beispielanwendung implementiert

    Fazit


    Ich hoffe, Ihnen gefällt die Idee zur Automatisierung des automatischen Testschreibens. Möglicherweise implementieren Sie diesen Ansatz in Ihrem Projekt :)

    Wenn Sie an der technischen Implementierung der Tools interessiert sind:


    Ich freue mich über Ideen und Kommentare :)

    Jetzt auch beliebt: