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
- 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
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?
Top comments (0)