The State of Front-End Testing

You may have heard developers say that testing your code is a best practice. But what kinds of testing are they talking about? From unit and acceptance testings, to code linting, visual regression testing and more, it may be difficult to sort out which kind of testing is right for your team or project.

In this talk, we will cover the breadth of testing strategies available to front-end developers now, their benefits, and considerations before integrating them into your applications.

Front-end testing is a collection of techniques to hold developers accountable for writing and maintaining functioning and usable code bases.

For back-end developers, testing is a given and is taken seriously but many front-end developers working with frameworks seem to have lost the habit.

The six time-proven components of front-end testing are Unit, Integration, Acceptance, Visual Regression, Performance, and Accessibility.

Unit, Integration and Acceptance testing are the established forms of testing familiar to back-end developers.

Visual Regression, Performance and Accessibility tests focus more on user interface issues that come front-end development.

Unit tests are for ensuring small pieces of code work as expected.

Typical unit testing process is to create logical groups, identify specific functionality and then run through the processes to make sure they run as they should.

Tools that may meet your specific needs include Jasmine, Mocha, Chai, Webdriver.io, QUnit, Unit.js and Sinon.

Integration tests are a level up, and check that all the small pieces play well together in the bigger picture, eg checking that several different inputs successfully create a single output.

Acceptance testing checks that major tasks can be accomplished and that all units and integrations are working cohesively together.

Tools used for acceptance testing include jasmine-integration, Karma, Selenium and Nightwatch.

Visual Regression tests check for inconsistencies in the view, eg when CSS is updated to improve a page but has effects on other pages that go unnoticed unless they’re specifically checked.

Visual Regression testing tools typically use screenshots to compare output before and after development stages to show exactly what has changed.

Because different viewport sizes can be defined, Visual Regression testing helps test for responsive design resilience.

Tools used for Visual Regreession testing include PhantomCSS / PhantomFlow, Backstop.JS, Wraith, Webdriver.io and Percy.io.

Accessibility tests compare sites against accessibility standards.

Because Accessibility testing tools check more than just code – eg, colour contrast – they can help developers show designers where accessibility issues might occur.

Tools used for Accessibility testing include ally (use grunt-ally for build tool automation), Pally, ember-ally-testing, protractor-accessibility-plugin (Angular) and react-ally.

Performance tests keep a project honest with regard to performance.

Tools for testing Performance include grunt-perfbudget, gulp size and perf.js.

Monkey testing is a form of stress testing a site using a tool called Gremlins.js, which tries its hardest to break your site, not testing for expected outcomes so much as unexpected outcomes.

Assess your needs, select the most appropriate tools and don’t go overboard – keep it practical and focused.

Build a test conscious team through education, experimentation and practice.

There is no one right way to do testing. Understand what’s out there and use what works for your situation.

Testing requires a mindset that focuses on outcome, not input: the expected result is known.

Testing doesn’t have to be an integrated part of the development cycle, but it definitely helps.

Testing doesn’t have to be automated but that will make your life easier.

The issues that Visual Regression tests check for are less common these days with atomic design, living style guides and modular design – but they should still be checked.

It’s often more practical to test page components for Visual Regression rather than entire pages, to avoid having issues in repeated components present as multiple page failures.

Visual Regression testing is more subjective than unit, integration and acceptance testing as changes may be made deliberately yet present as a failure.

Performance budgets set rules for what resources should be committed to page components and elements, but can be hard to stick to.

Linting is a different kind of testing that looks more at the input than the output.

You might not need every type of testing covered if you don’t have a very JavaScript-heavy website.

Writing good tests takes practice.