Pro Yearly is on sale from $80 to $50! »

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.

3ca63d4e2f2be0ef47b841e63b564d18?s=128

Marco Cedaro

May 14, 2014
Tweet

Transcript

  1. The Spirit of Testing

  2. The Spirit of Testing

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

  4. DON’T

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

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

    doing it wrong” – anonymous
  7. http://writingisacompulsion.blogspot.co.uk/2013/10/9-months-in-making-baby-of-thought.html

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

  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

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

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

  12. embrace you don’t know either

  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

  14. (re)think Testing

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

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

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

  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
  19. What it is about http://www.sourcecon.com/news/2010/11/19/sourcing-a-passing-fad-or-a-strategic-move/

  20. I Build So Consistently share Identify what to automate create

    a 
 build script make it continuous
  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
  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/
  23. any test is better than no tests, but…

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

  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
  26. Code Review vs Pairing http://powerbuilder.us/ http://meetingking.com/mini-meetings-or-pair-programming/

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

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

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

    your workflow
  30. what I learned so far

  31. @cedmax turning blank files to bugs since 2003

  32. webteam @ Shazam

  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/

  34. There is actually much more Unit Behaviour Acceptance Usability System

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

    Acceptance Usability Code Review Linting Styleguide Integration QA Testing
  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
  37. “Egoism is the very essence of a noble soul.” –

    Friedrich Nietzsche
  38. Interlude How I Learned to Stop Worrying and Love the

    DOM
  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.
  40. standard input/output

  41. 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;'! ! ! );! });
  42. the DOM

  43. 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'));!! ! });
  44. Pub/Sub
 (this is easy)

  45. test('logout', 1, function() {! ! ! MyApp.subscribe('user:logout', function(){! ! !

    ! ! ok(true);! ! ! });! ! ! ! MyApp.setup();! ! ! $('.logout').trigger('click');! });
  46. Mocking api

  47. test('windows matchmedia', 2, function() {! ! ! ! ! var

    spy = sinon.spy(window, 'matchMedia');! ! ! ! MyApp.getDeviceOrientation();! ! ! ! ok(spy.calledOnce);! ! ! ok(spy.calledWith('(orientation:portrait)');! ! ! ! spy.restore();! });
  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();! });
  49. AJAX

  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();! });
  51. Can’t mock? GET CREATIVE!

  52. asyncTest('redirect', 1, function() {!! ! ! ! $('window').on('beforeunload', function(e){! !

    ! ! ! e.preventDefault();! ! ! ! ! ok(true, 'redirect works');! ! ! ! ! start();! ! ! });! ! ! ! window.location.href = 'newLocation';! });
  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;!! ! });
  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
  55. Back to square one…

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

  57. None
  58. How to do it right?

  59. Forget the framework 
 in the short-term

  60. Don’t automate something just because you can

  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
  62. Prioritise
 (business critical vs nice to have)

  63. A learning process

  64. Programming is magic

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

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

  67. “The greatest thing about being a scientist is you never

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

    an experimental result cannot be verified by repetition, it is not scientific.
  69. Applying this method to programming is… http://en.wikipedia.org/wiki/Marie_Curie

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

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