Prüfung d3 (und andere SVG-basiert) Web-Anwendungen

Ich habe eine web-Anwendung, die verwendet die d3 Bibliothek für einige komplexe SVG-basierten Visualisierungen.

Ich habe von automatisierten tests für meine server-side-code und JavaScript-Modelle (ich benutze eine MVC-Architektur in meinem JavaScript). Diese laufen auf einem Jenkins CI-server auf jedem commit. Jetzt muss ich herausfinden, wie um zu testen, meine Ansichten.

Wie andere die dieses problem angehen und welche tools verwenden Sie?

Einige Gedanken, die ich habe ...

  • Serialisieren der SVG erzeugt und in einer Datei zu vergleichen, um ein baseline -
  • Erfassen automatisch ein browser-image und ein image diff
  • Etwas anderes?

Dank!

  • Was habt Ihr Jungs endlich das zu tun? Wir haben ähnliche Probleme, wo wir die Generierung von Diagrammen mit HighCharts in SVG und wollen sicherstellen, dass die Diagramme korrekt sind. Wir sind wirklich kämpfen.
  • Ich ging mit dem Ansatz, den ich speichern unterhalb mit Selen / ImageMagick und es hat gut funktioniert. stackoverflow.com/a/15823644/16779
InformationsquelleAutor RichH | 2013-04-04
  1. 22

    Das Beispiel, das Sie geben, sind für die Prüfung der grafischen Ausgabe. Für diese können Sie verwenden, einen screenshot diff-tool wie PhantomCSS, Sikuli oder roll-up Ihre eigenen mit Resemble.js.

    Aber wenn deine Frage ist mehr genrally zum testen D3.js/SVG-basierte apps, wie der Titel schon sagt, sollten Sie sich die D3 test-suite. Die meisten tests brauchen noch nicht einmal eine html-Vorrichtung, weil Sie grundsätzlich das testen der API. Wenn das wichtigste für Sie ist die Konsistenz von dem visuellen Ergebnis, gehen Sie mit einem screenshot diff-tool. Für die navigation und UX-flow, sind Sie besser mit browser-automation wie Selen. Aber für unit-Tests, wo Sie wollen, um sicherzustellen, dass eine einheitliche API und modularer code, die meisten test-frameworks mit spies -, Vorrichtungs-und mocking-Funktionen tun (ich.e, Jasmin, Gelübde, Mokka).

    • Ich empfinde den d3 test-suite ist ähnlich wie Teste ich meine Modelle momentan. Ich drücken so viel von der Logik für die Visualisierung in das Modell und die view wirklich nur um die rendering-Besonderheiten. Ich benutze auch Selen für die navigation. Ich bin auf der Suche in PhantomCSS jetzt, wie es könnte eine große Lösung prüfen komplexer Visualisierungen. Danke!
    InformationsquelleAutor Biovisualize
  2. 0

    Es klingt wie Selen tun sollten, was Sie suchen. Es treibt den web-browser und daher können Sie überprüfen, was passiert eigentlich im browser statt, vorausgesetzt, dass der SVG korrekt dargestellt werden. Es erlaubt Ihnen, zu spezifizieren unit-tests als eine Serie von Klicks/Tastendrücke und es integriert sich sehr schön mit Jenkins.

    • aber es klingt wie er will testen, die grafische Ausgabe in einem automatisierten Weg, nicht nur das Verhalten (Klicks & Tastatureingaben)
    • Sie tun können, dass auch durch die überprüfung der Struktur des Dokuments. Ich Stimme zu, dass es noch besser sein könnte, um eine serialisierte version der SVG aufgrund seiner Komplexität, aber das kann man im Rahmen auch.
    • Ich habe Selen 2 ziemlich stark und denke, es ist großartig. In dieser situation brauche ich, um zu überprüfen die Positionen, Farben und Transparenz von tausenden von SVG Elemente und pro element prüft, wäre schwer, es sei denn, es war eine serialisierte form. Wenn ich die screen-capture-route Selen wäre wahrscheinlich eine gute Wahl für die Aufbereitung der Bilder.
    InformationsquelleAutor Lars Kotthoff
  3. 0

    Die Lösung, die ich bin derzeit erwägen ist ...

    1. Erstellen Sie eine einfache Datei (csv) mit einer Liste von urls zu erfassen, zusammen mit einer Ernte-region (siehe 3)
    2. Laden von urls und screenshots mit Selen
    3. Ernte die Darstellung aus dem screenshot mit ImageMagick (so sind wir nur das testen der Visualisierung und nicht der ganze ui)
    4. Vergleichen Sie die Bilder, um baselines mit ImageMagick
    5. Generiert einen HTML-Bericht mit dem alten, neuen und diff-images (für alle Bilder, die anders sind)
    6. Generieren von JUnit-xml-Ausgabe für den CI-server
    • Implementieren Sie es in das Ende? Wie ist es gelaufen?
    InformationsquelleAutor RichH
  4. 0

    Erfassung von browser und prüfen, ob der graph ist ein guter test. Aber ich habe das Gefühl, dass dies in der Verantwortung der D3 selbst, als unseren code.

    War ich auch mit einer ähnlichen Frage. (Meine Frage). Bitte der Kasse die Antwort, die ich es gebucht.

    InformationsquelleAutor user1401472
Schreibe einen Kommentar