Testable JavaScript

32f242f75b63e7174b493446de54a6b8?s=47 Yuya Saito
February 09, 2013

Testable JavaScript

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

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

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

February 09, 2013
Tweet

Transcript

  1. 1.
  2. 15.

    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
  3. 24.
  4. 25.

    $(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(''); }); });
  5. 26.

    $(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(''); }); });
  6. 27.

    $.ajax({ type: 'POST', url: '/post/', data: data, dataType: 'json', success:

    function(data) { // Get data from the server } });
  7. 28.

    $.ajax({ type: 'POST', url: '/post/', data: data, dataType: 'json', success:

    function(data) { // Get data from the server } });
  8. 35.

    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
  9. 40.

    Starting with a test means that we have to describe

    what we what to achieve before we consider how. “ ” - Steve Freeman, Nat Price
  10. 42.

    $(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(''); }); });
  11. 45.

    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
  12. 49.

    var qof = { init: function() { // EPDVNFOU SFBEZ

    GVODUJPO \ʜ^ ͷத਎Λίϐʔ } };
  13. 55.

    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' ); });
  14. 57.

    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() }; } };
  15. 58.

    Write programs that do one thing and do it well.

    - Doug McIlroy, Father of Unix “ ”
  16. 60.

    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' ); });
  17. 61.

    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); }
  18. 62.

    module( 'Templating', { setup: function() { $('#quote-text').val('quote'); $('#author').val('author'); $('#source').val('url'); },

    teardown: function() { $('#quote-text').val(''); $('#author').val(''); $('#source').val(''); } } );
  19. 67.
  20. 72.
  21. 77.
  22. 98.
  23. 106.

    Why do we fall, sir? So that we can learn

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