Softwerkskammer

 

Runder Tisch zum Thema Testen von Web-UIs

Wir haben mit der Frage gestartet, was man überhaupt bei Web-UIs testen kann und soll:
Da im Template-basiertem Ansatz (wie z. B. bei Spring MVC zusammen mit einer Templating-Engineer wie Thymeleaf oder klassisch JSP/JSF) die HTML-Seiten auf dem Server gerendet werden, wird man eher integrative Tests schreiben. Als Werkzeuge dafür wurde u.a. Selenium genannt.

Weitere testbare Aspekte waren:

  • Anordnung des Seitenlayouts mit dem Galen Framework: einen Aufsatz auf Selenium der es erlaubt die Anordnung von Seitenelementen zueinander zu beschreiben und zu prüfen
  • Verhalten von Element beim Mouse-over: auch mit Selenium

Bei Single Page App Frameworks bietet sich hingegen ein Unit-Test einzelner Komponenten an. Das hat uns zu der Diskussion geführt welche Werkzeuge es für das testen von JavaScript-Code insbesondere im Frontend gibt:

  • Karma: Ein Test Runner im Tests im Browser auszuführen
  • Testing-Frameworks in denen die Tests formuliert werden
    • Jasmine: kommt als Standard-Testing-Framework bei Angular.js und Angular zum Einsatz und bringt bereits Assertions und Matchers mit
    • Mocha: ein reines Testing-Framework, das nur Tests ausführt und die Ergebnisse protokolliert. Assertions und Matchers muss man sich über andere Bibliotheken (z. B. Chai oder Must.js) dazu holen
    • Jest: Test Runner mit Assertion-Bibliothek, wird u.a. zum Testen von React-Anwendungen verwendet. Biete interessant Features wie nur die Tests auszuführen, die durch Codeänderungen wahrscheinlich betroffen sind (funktioniert aber aus der Erfahrung der Teilnehmer nicht immer zuverlässig) oder per Snapshot Testing die logische DOM-Struktur einer Komponente per Test fest zu zurren.
    • Wallaby: Lässt die Tests bei jeder Änderung laufen und zeigt im Editor bzw. in der IDE das Ergebnis an

Jasmine biete gerade für ältere JavaScript-Projekte, in denen man schnell eine Test-Infrastruktur bereitstellen möchte, die Möglichkeit mit der Standalone-Version zu starten.

Im Zuge der Diskussion kamen wir noch auf Build-Tools für JavaScript-Projekte zu sprechen:

Da es gerade für Einsteiger auf dem Gebiet der JavaScript-Frontend-Entwicklung schwierig ist, im "Tools-Zoo" durchzublicken, bieten die meisten Frontend-Frameworks Werkzeuge an um schnell ein Grundgerüst zu erstellen, z. B. Angular CLI, Create React App oder vue-cli. Daneben gibt es noch sogenannte "Seeds", die ein statisches Grundgerüst bieten. Der Vorteil der erstgenannten Werkzeuge liegt daran, dass man beim Erstellen der Grundgerüste verschiedene Dinge konfigurieren kann.

 

Aktivitäten