Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Spirit of Testing - jsDay

The Spirit of Testing - jsDay

Front-end Javascript testing is a thing since 3/4 years now, but it’s still a ghost in the dev community: someone believes in it while someone else is not convinced at all.

This talk will tackle the misconceptions about testing, how and what to test, dependencies mocking and strategies to write tests in a profitable way without being afraid.

Marco Cedaro

May 14, 2014
Tweet

More Decks by Marco Cedaro

Other Decks in Programming

Transcript

  1. you are testing already 
 (even if you are not)

    http://www.hongkiat.com/blog/developer-habits/
  2. What is not about Task runner Test Runner Testing Platforms

    Assertion Frameworks IDEs integration http://strongenough-christina.blogspot.co.uk/2012/10/my-tool-belt.html
  3. “[…] On several occasions I've heard the reply, "Yes, we

    do CI." 
 Of course, I think, "Great!" and then 
 ask a few questions. 
 How much code coverage do you have with your tests? How long does it take to run your builds? What is your average code complexity? How much code duplication do you have?” – Paul Duvall
  4. to DTU* or not to DTU*?
 (* Define Tests Upfront:

    tdd / bdd / acceptance) http://comicsalliance.com/ryan-north-to-be-or-not-to-be-kickstarter-sets-record/
  5. “it is a byproduct of test-after- development and manifests itself

    as the tendency for engineers to only write tests that they know pass.” – Paul Bourdeaux 
 http://www.sundoginteractive.com/sunblog/posts/confirmation-bias-in-unit-testing
  6. There is actually much more Unit Behaviour Acceptance Usability System

    Integration Performance UI Security Scalability …
  7. How I see it now Automatable !Automatable Feature Code Unit

    Acceptance Usability Code Review Linting Styleguide Integration QA Testing
  8. Testing code IS appealing (or I have some mom issues,

    pick one) http://gossip.whyfame.com/demi-moore-and-whoopi-goldberg-pay-tribute-to-ghost-co-star-patrick-swayze-613
  9. The curious case of Javascript unit testing Unit testing is

    supposed to test a single atomic “unit” of functionality without dependencies on anything else This is where you start to run into serious dependency problems due to the interrelation HTML and CSS What do you test? Usually how the user interface responds to user input.
  10. test('htmlEncode', 1, function() {! ! ! var str = '<I

    love working with JS & CSS>';! ! ! ! equal(! ! ! ! MyApp.htmlEncode(str), ! ! ! ! '&lt;I love working with JS &amp; CSS&gt;'! ! ! );! });
  11. module('audioPlayer', {! ! ! setup: function(){! ! ! ! !

    $('<a class="audio-play"></a>')! ! ! ! ! ! ! .appendTo(document.body);! ! ! },! ! ! teardown: function(){! ! ! ! ! document.body.innerHTML = ';! ! ! }!! ! );! ! test('button state', 2, function() {! ! ! var $elm = $('.audio-play'),! ! ! ! ! player = new MyApp.AudioPlayer($elm);! ! ! ! ! ! ok(!$elm.hasClass(‘audio-playing'));! ! ! ! $elm.trigger('click');! ! ! ok($elm.hasClass('audio-playing'));!! ! });
  12. test('logout', 1, function() {! ! ! MyApp.subscribe('user:logout', function(){! ! !

    ! ! ok(true);! ! ! });! ! ! ! MyApp.setup();! ! ! $('.logout').trigger('click');! });
  13. test('windows matchmedia', 2, function() {! ! ! ! ! var

    spy = sinon.spy(window, 'matchMedia');! ! ! ! MyApp.getDeviceOrientation();! ! ! ! ok(spy.calledOnce);! ! ! ok(spy.calledWith('(orientation:portrait)');! ! ! ! spy.restore();! });
  14. test('windows matchmedia', 3, function() {! ! ! var stub =

    sinon.stub(window, 'matchMedia');! ! ! ! window.matchMedia.returns({! ! ! ! ! matches: false! ! ! });! ! ! ! equal(MyApp.getDeviceOrientation(), 'landscape');! ! ! ok(window.matchMedia.calledOnce);! ! ! ok(window.matchMedia! ! ! ! ! .calledWith('(orientation:portrait)');! ! ! stub.restore();! });
  15. test('ajax call', 2, function() {! ! ! var ajaxStub =

    sinon.stub($, 'ajax');! ! ! ajaxStub.yieldsTo('success', { results: […] });! ! ! ! ! ! ! equal($('#news li').length, 5);! ! ! ! $('.load-more').trigger('click');! ! ! equal($('#news li').length, 10);! ! ! ! ajaxStub.restore();! });
  16. asyncTest('redirect', 1, function() {!! ! ! ! $('window').on('beforeunload', function(e){! !

    ! ! ! e.preventDefault();! ! ! ! ! ok(true, 'redirect works');! ! ! ! ! start();! ! ! });! ! ! ! window.location.href = 'newLocation';! });
  17. asyncTest('script onload', 2, function() {! ! ! ! ! var

    oldIB = HTMLElement.prototype.insertBefore,! ! ! ! ! scripts = [];! ! ! ! ! ! HTMLElement.prototype! ! ! ! ! .insertBefore = function(script){! ! ! ! ! ! ! scripts.push(script);! ! ! ! ! };! ! ! ! ! ! MyApp.loadScript('fake_url', function(){! ! ! ! ! ok(true);! ! ! });! ! ! ! ! var script = scripts[0];! ! ! equal(script.src, 'fake_url');! ! ! ! script.onload();! ! ! ! HTMLElement.prototype.insertBefore = oldIB;!! ! });
  18. Selenium Hell Automatable !Automatable Feature Code Unit Acceptance Usability Code

    Review Linting Styleguide Integration Manual Testing http://beginner.worth1000.com/entries/79392/red-fire
  19. Can this be automated? Are there technical reasons why this

    can’t be automated, or practical reasons why automation isn’t the best candidate ! Does this need to be automated? What is the actual benefit in making this an automated test? How would it benefit the the chain of work? How would it benefit the team? Learn when to automate
  20. “The greatest thing about being a scientist is you never

    have to grow up” – Neil deGrasse Tyson
  21. A scientific method is by definition, repeatable. 
 
 If

    an experimental result cannot be verified by repetition, it is not scientific.