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.