Plezier met Flutter Golden testen

Een speciale categorie van Flutter widget testen, zijn testen die de visualisatie tot in detail controleren. Dit is bijvoorbeeld relevant voor widgets die een interne layout hebben, of met custom painters getekende onderdelen laten zien. Hiervoor levert Flutter zogenaamde “Golden” widget testen, die een afbeelding van het canvas vergelijken met een eerder gemaakte afbeelding. Dit alles klinkt in theorie helemaal geweldig, maar levert in praktijk enkele verrassende uitdagingen op.

Een van de uitdagingen is dat headless widget testen in Flutter gebruik maken van een speciaal “Ahem” font dat bestaat uit blokjes in plaats van leesbare letters. Het argument hiervoor is dat het in de testen gaat om de layout en marges, en niet om pixel perfectie. Hoewel het wel mogelijk is om een echt font te laden, blijkt dat de plaatjes zo wel precies de marges en afstanden rond teksten uitlichten. Een implicatie van de blokjes van het Ahem font is dat teksten er veel langer door worden. Hierdoor ontstaan sneller overflow problemen in de layout.

Een grote beperking van Golden testen is verder dat ze platform afhankelijk zijn: Testen die op de Linux build server werken, falen op Mac machines door een afwijking in de font rendering. Zelfs tussen verschillende Mac machines blijkt die (door lokale instellingen?) niet altijd hetzelfde te zijn. Gelukkig treedt dit alleen op in Golden testen waar teksten in staan, maar het betekent dat voor reproduceerbare Golden testen al snel oplossingen met Docker images nodig zijn naast de normale ontwikkelomgeving.