På Metamatrix gör vi validerings-, tillgänglighets- och visuella tester i alla våra webbprojekt. Vi utvärderar dessutom kontinuerligt och vidareutvecklar vårt arbetssätt kring hur vi arbetar med tester för att de ska bli så användbara och effektiva verktyg som möjligt i vårt arbete.

Sandra Widmark gjorde tidigare sin LIA-praktik här på Metamatrix men har numera en anställning hos oss. Under hennes LIA-praktik på Metamatrix arbetade hon med en metod för att vi enkelt ska kunna utföra automatiska tester på digitala grafiska manualer så kallade style guides.

Automatiska tester kan både spara tid i ett webbprojekt och öka kvaliteten på det som levereras. De kan till exempel underlätta arbetet med att granska kod för att se till att den håller hög kvalitet - validera att html-koden är korrekt skriven, granska den tekniska tillgängligheten eller göra visuella tester för att undvika felaktiga ändringar och misstag under utvecklingen. Visuella tester handlar om att försäkra sig att olika grafiska element inte har ändrat sig utseendemässigt – fått en ljusare eller mörkare nyans eller ändrat storlek jämfört med det ursprungliga gränssnittet.

I projekten applicerar vi den här typen av automatiska testet på front-end-kod.

Testerna grundar sig på färdiga moduler

Ett sätt att gå tillväga för att sätta upp de här testerna är att använda sig av färdiga moduler från NPM (Node Package Manager) och konfigurera dem i projektet med en Task runner för JavaScript, som till exempel Grunt eller Gulp.

NPM kan beskrivas som ett stort register av moduler skrivna i JavaScript, som kan installeras i utvecklarens miljö för att användas i ett projekt. Både privatpersoner och företag kan bidra till NPM:s register genom att ladda upp egenutvecklade moduler.

En task runner som Gulp eller Grunt används för att automatisera olika delar av arbetet. Det kan handla om repetitiva uppgifter, till exempel minifiering som tar bort onödiga mellanrum, tabbar och rader som datorn inte bryr sig om. Det kan också röra sig om kompilering som förvandlar den ursprungliga koden till läsbar kod för en webbläsare eller enhetstester som granskar att koden fungerar på olika plattformar. Men även den typen av tester som jag nämnt ovan.

Grunt och Grunt-plugins installeras och hanteras via NPM. De uppgifter som ska automatiseras konfigureras i projektets grunt-fil, Gruntfile.js. För att säkerställa att koden följer giltig html och bra struktur kan en modul, till exempel grunt-w3c-html-validation konfigureras för att generera en valideringsrapport. När kommandot grunt skrivs i datorns terminal, kommer valideringen att köras och en rapport skapas för alla html-filer som specificerats i konfigurationen.

Ta reda på mer:

https://www.npmjs.com/

http://gruntjs.com/