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.

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
    marco@fromthefront.it
    
    http://cedmax.com
    
    @cedmax
    

    View Slide

71. http://en.wikipedia.org/wiki/Marie_Curie
    The Spirit
    of Testing
    marco@fromthefront.it
    
    http://cedmax.com
    
    @cedmax
    

    View Slide