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