Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
QUnit
Selenium
JUnit
JS Error
Reporter
JS Error logging
Server HTTP logs
Code reviews
Testing lunches
Get ...
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);
     ...
Logging Javascript Errors
from Production
var maxErrors = 5, curErrors = 0;
var origOnErr = window.onerror;
 
window.onerror = function() {
    if(origOnErr)
origOn...
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!
Upcoming SlideShare
Loading in …5
×

Maintaining Quality (HelsinkiJS, Nov 2013)

211 views

Published on

Sometimes when people want to know of how good your code is, they ask "what is your test coverage". Ok, that tells part of the truth but, especially for front-end code, not everything.

When you've been maintaining the same system for three years, after a while some of the code will be legacy code. And you cannot replace it all. You need to learn to live with it.

So how do we maintain code quality in a lean project?

Published in: Software
  • Be the first to comment

Maintaining Quality (HelsinkiJS, Nov 2013)

  1. 1. Maintaining JS Code Quality http://kechggeography.blogspot.fi/2012/02/crack-in-wall-my-journey-from-charity.html
  2. 2. Q: “What is your test coverage?” A: “That is only a small part of what we do!”
  3. 3. The main purpose for testing is to give courage to refactor code.
  4. 4. Where do we get the courage from?
  5. 5. A Bag of Tricks QUnit Selenium JUnit JS Error Reporter JS Error logging Server HTTP logs Code reviews Testing lunches Get Satisfaction Mixpanel Google Analytics Customer emails Usertesting.com Test outsourcing JSLint Blanket.js Bug tracker Bug fix day
  6. 6. Unit Tests Service Tests UI Tests Service Tests Unit Tests Backend Frontend Based on “The Test Pyramid” by Mike Cohn
  7. 7. Reporting JS Errors in Selenium Tests
  8. 8. protected void get( String address ) {     List<JavaScriptError> jsErrors =      JavaScriptError.readErrors(driver);             assertTrue( "JsErrors on page" +         jsErrors.toString(), jsErrors.isEmpty() );     m_driver.get( address ); }
  9. 9. Logging Javascript Errors from Production
  10. 10. 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'     }); };
  11. 11. Compare that CSS styles match
  12. 12. function cssStylesMatch($elem1,$elem2) {     return serializeDomToHtml($elem1)===            serializeDomToHtml($elem2); }
  13. 13. People don’t make bugs, bad processes do.
  14. 14. Testing can be fun. Be creative!

×