Revision 469: Testing mit Angular

Published: March 23, 2021, 9:12 a.m.

Vanessa, Schepp und Stefan reden heute mit Mathias Sch\xe4fer (@molily) \xfcber\nTesting mit Angular.\n\n\nSCHAUNOTIZEN\n\n[00:00:29] TESTING ANGULAR\n\nNachdem Mathias im Jahr 2017 sein Werk \u201eRobust Clientside JavaScript\u201c\nver\xf6ffentlich hat, ist das nun erschienene \u201eTesting Angular\u201c so etwas wie dessen\nFortf\xfchrung. Angular musste in dem Fall als Framework herhalten, allerdings\nk\xf6nnen Mathias Empfehlungen aus dem Buch auf alle anderen Frameworks \xfcbertragen\nwerden. Angular hat den Vorteil, dass es zu Beginn etwas mehr Tooling mitliefert\nals etwa React. Das Problem ist aber, dass man anschlie\xdfend ohne Unterst\xfctzung\nbei der Test-Methodik allein gelassen wird. Diese L\xfccke wollte Mathias\nschlie\xdfen. Dabei ist Mathias ohne vorgefertigte Meinung gestartet. Stattdessen\nging es ihm darum, Testing zu durchdenken und zu einer eigenen Position zu\nkommen, die dann begr\xfcndet wird. Das Buch erkl\xe4rt, was sinnvolle Tests sind. F\xfcr\nMathias sind es diejenigen Tests, die Komponenten als Ganzes testen, also\ninklusive dem DOM und nicht nur die dahinterstehende (Klassen-)Logik. Letzteres\nnennt man \u201eWhite-Box-Tests\u201c, weil man zum Testen wissen muss, wie das JavaScript\naufgebaut ist. Besser sind aber die \u201eBlack-Box-Tests\u201c, die das HTML abtesten und\ndenen v\xf6llig egal ist, was hinter den Kulissen an Abl\xe4ufen notwendig ist. Diese\nArt von Tests nehmen zudem st\xe4rker die Nutzerperspektive ein und sie gehen bei\nsp\xe4teren Refactorings weniger oft kaputt, was weniger Wartungsaufw\xe4nde an den\nTests zur Folge hat. Mathias reiht sich damit hinter Vordenker wie Kent C. Dodds\nein. Was Mathias als mitgeliefertes Werkzeug nicht \xfcberzeugt hat, ist\nProtractor, und zwar vorwiegend weil es WebDriver-basiert ist und weil es ein\npaar seiner ehemaligen Verzahnungen mit Angular verloren hat. Stattdessen\nbevorzugt er Cypress, das wir vor nicht allzu langer Zeit hier im Podcast zum\nThema hatten. Folgende Links spielen im Laufe unseres Gespr\xe4chs eine Rolle:\n\n\n\n * Mathias\u2018 Testing Helpers\n * Spectator\n * TS Mockito\n * ng Mocks\n * PlayWright\n * Das Buch \u201eTesting Angular Applications\u201c von Manning\n\n\nKEINE SCHAUNOTIZEN\n\nEXPECT(EXCEPTION)\n\nVanessas Podcast \xfcber Frontend Testing.\n\nFLOWCHART.FUN\n\nEine Web-App, in der man Flu\xdfdiagramme mit Hilfe von speziellem Markup\nschreibt/zeichnet