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. The Spirit
    of Testing

    View Slide

  2. The Spirit of Testing

    View Slide

  3. Testing? I’m bored already
    http://stockarch.com/images/events/bored-halloween-ghost-6068

    View Slide

  4. DON’T

    View Slide

  5. Testing should be Appealing
    http://gossip.whyfame.com/demi-moore-and-whoopi-goldberg-pay-tribute-to-ghost-co-star-patrick-swayze-613

    View Slide

  6. “Testing is like sex. If it’s not
    fun, then you’re doing it
    wrong”

    – anonymous

    View Slide

  7. http://writingisacompulsion.blogspot.co.uk/2013/10/9-months-in-making-baby-of-thought.html

    View Slide

  8. Remember
    being a
    kid?
    https://parentsavvy.com/child-health/?SubtopicId=30014,30017&DocId=1,2954

    View Slide

  9. Kids run tests
    every moment
    http://www.psychalive.org/category/tantrums-2/ http://www.patrasevents.gr/article/100447-deite-tin-apisteuti-antidrasi-apo-morakia-pou-dokimazoun-lemoni-video

    View Slide

  10. They are
    the best at it
    http://www.childrensdayton.org/cms/images/a0f6b517aba16ca5/index.html

    View Slide

  11. They explore the unknowns
    http://www.childrensdayton.org/cms/images/a0f6b517aba16ca5/index.html

    View Slide

  12. embrace you don’t know either

    View Slide

  13. Through tests we sense

    the unknowns
    http://www.dailymail.co.uk/news/article-2381456/How-science-spirit-world-really-makes-Ouija-board-dowsing-rods-move.html

    View Slide

  14. (re)think Testing

    View Slide

  15. you are testing already 

    (even if you are not)
    http://www.hongkiat.com/blog/developer-habits/

    View Slide

  16. you might just need to formalise
    http://www.wisegeek.org/what-is-procedural-programming.htm

    View Slide

  17. to, eventually, forget this
    (almost)
    https://twitter.com/fredzen/status/439774520111419392

    View Slide

  18. 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

    View Slide

  19. What it is about
    http://www.sourcecon.com/news/2010/11/19/sourcing-a-passing-fad-or-a-strategic-move/

    View Slide

  20. I Build So Consistently
    share
    Identify

    what to automate
    create a 

    build script
    make it
    continuous

    View Slide

  21. “[…] 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

    View Slide

  22. 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/

    View Slide

  23. any test is better than no
    tests, but…

    View Slide

  24. Confirmation bias
    http://www.thezerosbeforetheone.com/confirming-my-own-confirmation-bias

    View Slide

  25. “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

    View Slide

  26. Code Review vs Pairing
    http://powerbuilder.us/ http://meetingking.com/mini-meetings-or-pair-programming/

    View Slide

  27. Error Management
    http://comicbooks.about.com/od/ghostrid2/ig/Ghost-Rider-Movie-Gallery/Ghost-Rider-Johnny-Blaze.htm

    View Slide

  28. Feedback loop
    http://www.smashingmagazine.com/2013/02/15/designing-great-feedback-loops/

    View Slide

  29. Testing is a way to shape
    your process, not only your
    workflow

    View Slide

  30. what I learned so far

    View Slide

  31. @cedmax
    turning blank files
    to bugs since 2003

    View Slide

  32. webteam @ Shazam

    View Slide

  33. When I started testing
    http://quoteko.com/lego-block.html http://karenchilvers.mycouncillor.org.uk/2013/09/28/planning-applications-week-ending-27th-september-2013/

    View Slide

  34. There is actually much more
    Unit

    Behaviour

    Acceptance

    Usability

    System

    Integration

    Performance

    UI

    Security

    Scalability


    View Slide

  35. How I see it now
    Automatable !Automatable
    Feature
    Code
    Unit
    Acceptance Usability
    Code Review
    Linting Styleguide
    Integration QA Testing

    View Slide

  36. 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

    View Slide

  37. “Egoism is the very essence
    of a noble soul.”

    – Friedrich Nietzsche

    View Slide

  38. Interlude

    How I Learned to Stop Worrying and Love the DOM

    View Slide

  39. 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.

    View Slide

  40. standard input/output

    View Slide

  41. test('htmlEncode', 1, function() {!
    ! ! var str = '';!
    !
    ! ! equal(!
    ! ! ! MyApp.htmlEncode(str), !
    ! ! ! '<I love working with JS & CSS>'!
    ! ! );!
    });

    View Slide

  42. the DOM

    View Slide

  43. module('audioPlayer', {!
    ! ! setup: function(){!
    ! ! ! ! $('')!
    ! ! ! ! ! ! .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'));!! !
    });

    View Slide

  44. Pub/Sub

    (this is easy)

    View Slide

  45. test('logout', 1, function() {!
    ! ! MyApp.subscribe('user:logout', function(){!
    ! ! ! ! ok(true);!
    ! ! });!
    !
    ! ! MyApp.setup();!
    ! ! $('.logout').trigger('click');!
    });

    View Slide

  46. Mocking api

    View Slide

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

    View Slide

  48. 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();!
    });

    View Slide

  49. AJAX

    View Slide

  50. 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();!
    });

    View Slide

  51. Can’t mock?
    GET CREATIVE!

    View Slide

  52. asyncTest('redirect', 1, function() {!! !
    ! ! $('window').on('beforeunload', function(e){!
    ! ! ! ! e.preventDefault();!
    ! ! ! ! ok(true, 'redirect works');!
    ! ! ! ! start();!
    ! ! });!
    !
    ! ! window.location.href = 'newLocation';!
    });

    View Slide

  53. 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;!! !
    });

    View Slide

  54. Selenium Hell
    Automatable !Automatable
    Feature
    Code
    Unit
    Acceptance Usability
    Code Review
    Linting Styleguide
    Integration Manual Testing
    http://beginner.worth1000.com/entries/79392/red-fire

    View Slide

  55. Back to square one…

    View Slide

  56. “…then you’re doing it wrong”
    http://www.brianorndorf.com/2010/07/reliving-the-summer-of-1990-week-eight.html

    View Slide

  57. View Slide

  58. How to do it right?

    View Slide

  59. Forget the framework 

    in the short-term

    View Slide

  60. Don’t automate
    something just

    because you can

    View Slide

  61. 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

    View Slide

  62. Prioritise

    (business critical vs nice to have)

    View Slide

  63. A learning process

    View Slide

  64. Programming is magic

    View Slide

  65. “Software development is a
    learning process, working
    code is a side effect”

    – Alberto Brandolini

    View Slide

  66. Remember
    being
    a kid?
    https://parentsavvy.com/child-health/?SubtopicId=30014,30017&DocId=1,2954

    View Slide

  67. “The greatest thing about
    being a scientist is you never
    have to grow up”

    – Neil deGrasse Tyson

    View Slide

  68. A scientific method is by
    definition, repeatable. 


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

    View Slide

  69. Applying this method to
    programming is…
    http://en.wikipedia.org/wiki/Marie_Curie

    View Slide

  70. http://en.wikipedia.org/wiki/Marie_Curie
    The Spirit
    of Testing
    [email protected]

    http://cedmax.com

    @cedmax

    View Slide

  71. http://en.wikipedia.org/wiki/Marie_Curie
    The Spirit
    of Testing
    [email protected]

    http://cedmax.com

    @cedmax

    View Slide