Maintaining JS Code Quality

http://kechggeography.blogspot.fi/2012/02/crack-in-wall-my-journey-from-charity.html

Q: “What is your test coverage?”

A: “That is only a small part of what we do!”

The main purpose for testing is to give courage

to refactor code.

Where do we get the courage from?

A Bag of Tricks

QUnitSelenium

JUnit

JS ErrorReporter

JS Error logging

Server HTTP logsCode reviews

Testing lunchesGet Satisfaction

Mixpanel

Google Analytics

Customer emails

Usertesting.com

Test outsourcing

JSLint

Blanket.js

Bug tracker

Bug fix day

Unit Tests

Service Tests

UI Tests

Service Tests

Unit Tests

Backend

Frontend

Based on “The Test Pyramid” by Mike Cohn

Reporting JS Errors in Selenium Tests

protected void get( String address ) {

    List<JavaScriptError> jsErrors =      JavaScriptError.readErrors(driver);             assertTrue( "JsErrors on page" +         jsErrors.toString(), jsErrors.isEmpty() );     m_driver.get( address ); }

Logging Javascript Errors from Production

var maxErrors = 5, curErrors = 0; var origOnErr = window.onerror;   window.onerror = function() {     if(origOnErr) origOnErr.call(null, arguments);         curErrors += 1;     if(curErrors>=maxErrors) return;       $.ajax({         url: BASE_URL+'/reportJsErrors',         data: { error: arguments },         dataType: 'jsonp'     }); };

Compare that CSS styles match

function cssStylesMatch($elem1,$elem2) {     return serializeDomToHtml($elem1)===            serializeDomToHtml($elem2); }

People don’t make bugs, bad processes do.

Testing can be fun. Be creative!