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

Testable JavaScript

Yuya Saito
February 09, 2013

Testable JavaScript

Frontrend Vol4. @ 2013.02.09
テストしやすいJavaScriptについて

あとになってバグに悩まされるくらいなら、初めにテストを書いておいた方が開発スピードは速い。脱初心者を目指すならまずテストしやすいコード、そしてJavaScriptのテストとはどんなものなのかについて紹介していきます。

Yuya Saito

February 09, 2013
Tweet

More Decks by Yuya Saito

Other Decks in Programming

Transcript

  1. I get paid for code that works, not for tests,

    so my philosophy is to test as little as possible to reach a given level of confidence […]. “ ” - Kent Beck on StackOverflow
  2. $(document).ready(function() { $('#form-send-mock').on('click', function(e){ e.preventDefault(); var data = { 'quote':

    $('#quote-text').val(), 'author': $('#author').val(), 'url': $('#source').val() }; $('#quotes').append( '<li>' + '<div class="quote">' + '<p class="text">' + data.quote + '</p>' + '<p class="meta">' + '<span class="author">' + '—' + data.author + '</span>' + ' / ' + '<span class="source"><a href="' + data.url + '">ࢀরݩ</a></span>' + '</p>' + '</div>' + '</li>' ); $('#quote-text').val(''); $('#author').val(''); $('#source').val(''); }); });
  3. $(document).ready(function() { $('#form-send-mock').on('click', function(e){ var data = { 'quote': $('#quote-text').val(),

    'author': $('#author').val(), 'url': $('#source').val() }; $('#quotes').append( '<li>' + '<div class="quote">' + '<p class="text">' + data.quote + '</p>' + '<p class="meta">' + '<span class="author">' + '—' + data.author + '</span>' + ' / ' + '<span class="source"><a href="' + data.url + '">ࢀরݩ</a></span>' + '</p>' + '</div>' + '</li>' ); $('#quote-text').val(''); $('#author').val(''); $('#source').val(''); }); });
  4. $.ajax({ type: 'POST', url: '/post/', data: data, dataType: 'json', success:

    function(data) { // Get data from the server } });
  5. $.ajax({ type: 'POST', url: '/post/', data: data, dataType: 'json', success:

    function(data) { // Get data from the server } });
  6. One of the Coolest things that will happen to you

    as a developer is you'd take the test first approach, you write a bunch of tests, you write a code that make the tests pass and you fire up the application and then it works.[…] so at least try testing first sometime to just experience that. “ ” - Rebecca Murphey at Full Frontal 2012
  7. Starting with a test means that we have to describe

    what we what to achieve before we consider how. “ ” - Steve Freeman, Nat Price
  8. $(document).ready(function() { $('#form-send-mock').on('click', function(e){ e.preventDefault(); var data = { 'quote':

    $('#quote-text').val(), 'author': $('#author').val(), 'url': $('#source').val() }; $('#quotes').append( '<li>' + '<div class="quote">' + '<p class="text">' + data.quote + '</p>' + '<p class="meta">' + '<span class="author">' + '—' + data.author + '</span>' + ' / ' + '<span class="source"><a href="' + data.url + '">ࢀরݩ</a></span>' + '</p>' + '</div>' + '</li>' ); $('#quote-text').val(''); $('#author').val(''); $('#source').val(''); }); });
  9. Each pattern describes a problem that occurs over and over

    again in our environment, and then describes the core of the solution to that problem, in such way that you can use this solution a million times over, without ever doing it the same way twice. “ ” - Christopher Alexandar
  10. var qof = { init: function() { // EPDVNFOU SFBEZ

    GVODUJPO \ʜ^ ͷத਎Λίϐʔ } };
  11. test('User input values are good to go', function() { qof.init();

    equal( qof.getData().quote, 'quote', 'quote is in #quote-text' ); equal( qof.getData().author, 'author', 'author is in #author' ); equal( qof.getData().url, 'url', 'url is in #source' ); });
  12. var qof = { init: function() { $('#form-send-mock').on('click', function(e){ var

    data = this.getData(); // লུ }); }, getData: function() { return { 'quote': $('#quote-text').val(), 'author': $('#author').val(), 'url': $('#source').val() }; } }; var qof = { init: function() { $('#form-send-mock').on('click', function(e){ var data = this.getData(); // লུ }); }, getData: function() { return { 'quote': $('#quote-text').val(), 'author': $('#author').val(), 'url': $('#source').val() }; } };
  13. Write programs that do one thing and do it well.

    - Doug McIlroy, Father of Unix “ ”
  14. test('Generate HTML from input data', function() { expect(1); var html

    = qof.template(); var dummy = '<li>' + '<div class="quote">' + '<p class="text">' + 'quote'+ '</p>' + '<p class="meta">' + '<span class="author">' + '—' + 'author' + '</span>' + ' / ' + '<span class="source"><a href="url">ࢀরݩ</a> + '</span>' + '</p>' + '</div>' + '</li>'; equal( html, dummy, 'Templating is working' ); });
  15. template: function() { var data = qof.getData(); var html =

    '<li>' + '<div class="quote">' + '<p class="text">' + data.quote + '</p>' + '<p class="meta">' + '<span class="author">' + '—' + data.author + '</span>' + ' / ' + '<span class="source"> + '<a href="' + data.url + '">ࢀরݩ</a></span>' + '</p>' + '</div>' + '</li>'; return html; }, render: function() { var html = qof.template(); $('#quotes').append(html); }
  16. module( 'Templating', { setup: function() { $('#quote-text').val('quote'); $('#author').val('author'); $('#source').val('url'); },

    teardown: function() { $('#quote-text').val(''); $('#author').val(''); $('#source').val(''); } } );
  17. Why do we fall, sir? So that we can learn

    to pick ourselves up. “ ” - Alfred Pennyworth from Batman Begins