Introduction

Tests give you the confidence to make changes to code whether its yours or someone else's. Tested code also brings peace of mind and is the calling card of a mature developer.

The following is an overview of some of the popular tooling for testing front end applications.

Testing tools typically provide some combination of the following features:

Test running & reporting
Assertion Syntax for writing test code
Browser Automation
Page auditing & profiling

The following are common types of tests

Type of Testing	Definition
Unit	Checking the functionality of individual components by comparing their inputs and output.
Integration	Verifying the functionality of
End to End	Automating the browser to verify functionality from the UI, filling forms clicking buttons and checking network requests.
Performance	Auditing a web page's performance such as load times and core web vitals
Accessibility	Audit the accessibility of a page

Testing Tools

Libraries
- Jasmine
- Jest
- Chai
- Mocha
- Testing Library
Browser Automation
Page Auditing

Frameworks/Libraries

Jasmine

Jasmine is the default testing library of angular but it can be used with any frontend framework. Jasmine allows you to write unit tests using the Behavior-Driven Development (BDD) style.

Jest

Jest is another popular framework, jest boasts excellent exceptions that can provide more context when test cases fail. The Jest core team's goal is to make testing delightful.

Chai is an assertion library, which means it can provide additionally testing syntax that you may want on top of your existing test library. Allow developers to write more specific and readable test cases.

Mocha

Mocha is a testing framework for writing tests but also lets your run the tests and view the report via the CLI. Mocha is often paired with Chai.

Testing Library

Testing Library describes itself as a set of utilities that encourage good testing practices. It includes various libraries that allow you to write tests no matter what you use on the frontend such as the angular, React and vue. Some of which are recommended by the corresponding UI library itself such as vue and react

Browser Automation

Puppeteer

Puppeteer is a fun nodejs package that lets you automate interactions on a browser's webpage. This is usually paired with a testing framework such as mocha to perform End-To-End testcase. For example with this combination you can test to verify if a form submits properly or if a table has a particular structure.

Web Driver IO

Web driver IO is another automation tool with the advantage of being designed with UI Libraries such as React and Vue in mind. Web Driver IO's syntax lets you directly select react/vue components on the page. This allows you to write tests specific to the source code as opposed to the build output that puppeteer would require.

Selenium Web Driver

Selenium Web Driver is another browser automation tool with more support for web browsers than puppeteer including Safari, Opera and even Internet Explorer.

Nightwatch

Nightwatch is a fully integrated End-to-End testing tool that adheres to the W3C API. It also works with Browser Stack to perform cloud testing.

Cypress

Cypress is another fully integrated End-to-End testing tool which lets you write, run and record tests in an interactive dashboard. Cypress has a really nice developer experience and much loved by its userbase.

Page Auditing

Lighthouse

Lighthouse audits performance according to the core web vitals. Additionally, lighthouse can audit for Accessibility, Best Practices, Search Engine Optimization and whether your page is a Progressive Web App. You can also automate lighthouse audits via its API. Its a great tool to ensure your app is fast and does well with google search.

Web Page Test

Web page test is a website that allows you to analyze a web page's performance. It records checks for compression, caching effective use CDN and load times among other things. You can create automated performance tests using its API

WAVE

The Web Accessibility Evaluation Tool with audit your page for accessibility issues. This includes improper use of html elements, bad tab navigation, improper use of aria attributes, font sizes and colour contrasts. Accessibility (A11y) is unfortunately an afterthought sometimes for developers but paying just a little attention to it can go a long way for making a web for everyone.

Conclusion

This stop was a hefty one. As you can see there many tools available for testing (this is no way all of them) and this is just on the frontend side of things. We will be arriving at stop 6 next week and it promises to be very insightful. Can you guess what it might be?

Blog

The Frontend Hitchhiker's Guide: Testing

Nicholas Mendez