JavaScript Testing: Idiot Proofing Your Code

3 min readSep 12, 2014

Jarrod Overson is a JavaScript Engineer at Shape Security in Mountain View, California. He stopped by the PubNub HQ at last week’s SF JavaScript Meetup to discuss “JavaScript Testing: Idiot Proofing Your Code” aka Achieving Maintainability. In his entertaining talk, Jarrod suggests testing best practices for linting, reducing complexity and unit testing.

His full talk can be seen in the video below. If you want to keep reading about JavaScript testing, scroll past the video:

JavaScript Testing Overview

Idiot Proofing Your JavaScript aka Achieving Maintainability from PubNub on Vimeo.

Linting

How many people Lint? JSHint and ESLint have high configurability. Know your linter’s options. The whole goal around these tools is to get it to check your code against the way you want to write it. Set your limits, such as maxparams or maxdepth.

Reduce Cyclomatic Complexity

This term relatively common in the C# world, also known as conditional complexity. Technically, it’s the number of paths through a block of code; it measures how hard your code is to test. For example, every block starts off with a complexity of one. As you start adding branches, your complexity increases. Code coverage visualizations such as Istanbul can provide data of what code is covered by the tests.

Make Unit Testing Easy

javascript testingHow many people actually test their code? One common complaint is the complexity of testing. However, unit testing is significantly easier now, thanks to Karma, Grunt and Gulp plugins. If testing isn’t easy and automatic, it won’t get done. And if it doesn’t get visualized, it doesn’t really matter.

Build first. Set up your build before you start writing code. Most developers will use minification, which is one step of a build process. Yeoman can help you manage file copies, conflicts, and it’s easily configurable with defaults.

There are upwards of 2,400 grunt plugins, so there is no excuse to have anything manual right now. Anything you have manual will make your project very difficult to maintain, especially by somebody other than yourself, or even you a few months down the line!

Enforce Code Style

We all have our own code style guidelines. Do people go through the effort of establishing a code style in their company? Sure, but do you enforce it? There’s no point in you spending your time complaining about something that should be automated. The code style, metrics, build tools, directory structure… agree on these points, and document them. Fork the AirBNB Style Guide. Once you’ve agreed, enforce the agreement. Don’t ignore warnings — warnings are errors. Make it hard to be wrong. When anything gets pushed, have it run through all the tests and linters.

Testing at PubNub

At PubNub, we thoroughly test our SDKs, including our JavaScript SDK. We use Jenkins, Testswarm, BrowserStack, node-testswarm, and testswarm-browserstack.

  1. We configure a GitHub hook to ping Jenkins whenever a build is pushed to Staging.
  2. Jenkins starts a new build upon the push.
  3. Mocha tests are run. Assuming these tests succeed, we proceed to step 4.
  4. Jenkins creates a job on testswarm to execute Qunit tests across various browsers. Cross-browser testing is done via BrowserStack. A script runs on the server which keeps querying testswarm for the swarm state . The state defines which browsers are required by swarm. This script then spawns those browsers on BrowserStack. The browsers not required any more are killed. This way whenever a job is submitted, the script will start browsres and kill them once done.
  5. The job creation script keeps polling swarm for test results. If the results indicate success, the build status is set as passed… if the tests indicate failure, build status is set as failure, and mail is sent to PubNub support for further investigation.

More from PubNub

How to Create a Dating App: 7 Steps to Fit Any Design
Insights6 minMar 15, 2023

How to Create a Dating App: 7 Steps to Fit Any Design

There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...

Michael Carroll

Michael Carroll

How to Create a Real-time Public Transportation Schedule App
Build6 minMar 14, 2023

How to Create a Real-time Public Transportation Schedule App

How to use geohashing, JavaScript, Google Maps API, and BART API to build a real-time public transit schedule app.

Michael Carroll

Michael Carroll

How to Create Real-Time Vehicle Location Tracking App
Build2 minMar 9, 2023

How to Create Real-Time Vehicle Location Tracking App

How to track and stream real-time vehicle location on a live-updating map using EON, JavaScript, and the Mapbox API.

Michael Carroll

Michael Carroll

Talk to an expert