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

Unit-Testing With Jasmine

Unit-Testing With Jasmine

第38回 HTML5とか勉強会資料

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

April 26, 2013
Tweet

Transcript

  1. . UNit-TEsTiNg WiTh JAsMiNe BY YUyA SAiTo 2013.04.26

  2.  @cSsRAdAr

  3. En.Ja oSS github.com/enja-oss

  4. @CYbErAGeNt

  5. AGeNda WHaT Is bDD? f WHaT Is JAsMiNe? , GEt

    MOrE OuT Of JAsMiNe ^ MAkE JAsMiNe mORe USeFul i
  6. CHrIsTiAn JOhAnSen AUtHoR Of TEst-DRiVeN JAvaSCrIpT DEvElOpMeNt

  7. g Testability is an inherent quality of good design. You

    can have testability and still have bad design, sure, but you cannot have good design without testability. Think of the tests as small sample use cases - examples of using your code - if testing is hard, it means using the code is hard.
  8. e WHaT Is bDD?

  9. DAn NOrTh ThE OrIgInAtOr Of bDD.

  10. dannorth.net/introducing-bdd

  11. k 3 3 ? 3 tDD TEst-DRiVeN DEvElOpMeNt bDD BEhAvIor-DRiVeN

    DEvElOpMeNt
  12. 6 QUeStIoNs On tDD:  ·ͣͲ͔͜Β࢝ΊΕ͹Α͍ͷ͔  ͳʹΛςετ͢Ε͹Α͍ͷ͔  ͳʹΛςετ͢Δඞཁ͕ͳ͍ͷ͔

     ͭͷ΋ͷʹରͯ͠Ͳͷఔ౓ςετ͢Ε͹Α͍ͷ͔  ςετΛͳΜͱݺ΂͹Α͍ͷ͔  ςετ͕ࣦഊͨ͠ཧ༝ΛͲ͏ཧղ͢Ε͹Α͍ͷ͔ v v v v v v v v v v v v v v v v v v v v v v v v v v
  13. DAn NOrTh ANsWeRs: v v v v v v v

    v v v v v v v v v v v v v v v v v v v ͜Ε͔Β࡞੒͠Α͏ͱ͢ΔϓϩάϥϜʹظ଴͞ΕΔ ʮৼΔ෣͍ʯ ΍ ʮ੍໿৚݅ʯ ɺ ͭ·Γ ʮ ཁٻ࢓༷ʯ ʹ ͍ۙܗͰɺ ࣗવݴޠΛซه͠ͳ͕ΒςετίʔυΛ هड़͢Δ͜ͱ͕ղܾ΁ͷۙಓͩͱߟ͑ͨɻ
  14. IN SHoRt: v v v v v v v v

    v v v v v v v v v v v v v v v v v v  ΞϓϦέʔγϣϯશମͰ͸ͳ͘ɺ খ͘͞ɺ ͭͷ͜ͱͷΈςετ͢Δ  ςετΛจষͷΑ͏ʹهड़͢Δ
  15. D bDD BUsInEss

  16. & WHaT Is JAsMiNe?

  17. JAsMiNe Is: v v v v v v v v

    v v v v v v v v v v v v v v v v +BWB4DSJQUͷͨΊͷ ϏϔΠϏΞۦಈͷςετϑϨʔϜϫʔΫ
  18. JAsMiNe Is: v v v v v v v v

    v v v v v v v v v v v v v v v v ͋Δ࢓༷ 4QFD ʹରͯ͠ɺ ίʔυ͕ ͲΜͳৼΔ෣͍Λ͢Δ΂͖͔Λදݱ͢ΔͷΛ खॿ͚ͯ͘͠ΕΔπʔϧ
  19. pivotal.github.io/jasmine

  20. None
  21. HOw TO JAsMiNe?

  22. function helloWorld(){ return "Hello world!"; }

  23. describe("Hello world", function(){ it("says hello to the world", function(){ expect(helloWorld().toEqual("Hello

    world!")); }); });
  24. Suite describe("Hello world", function(){ it("says hello to the world", function(){

    expect(helloWorld().toEqual("Hello world!")); }); });
  25. describe("Hello world", function(){ it("says hello to the world", function(){ expect(helloWorld().toEqual("Hello

    world!")); }); }); Spec
  26. describe("Hello world", function(){ it("says hello to the world", function(){ expect(helloWorld().toEqual("Hello

    world!")); }); });
  27. describe("Hello world", function(){ }); it("says hello to the world", function(){

    }); expect(helloWorld().toEqual("Hello world!"));
  28. H - K K K MaTcHer

  29. ? )FMMP8PSME͚ͩͰ͸ͳ͘ɺ ΄͔ͷࠃʹ΋ѫࡰΛ͢Δ࢓༷ ͩͱͨ͠Βɺ Ͳ͏͢Ε͹Α͍Ͱ͠ΐ͏͔ʁ

  30. describe("Hello countries", function(){ it("says hello to the countries", function(){ expect(helloWorld().toCountain("Hello"));

    }); });
  31. github.com/pivotal/jasmine/wiki/Matchers

  32. JAsMiNe Is EAsY To STaRt UNit-TeStIng.

  33. ` GEtTiNg MOrE OUt OF JAsMiNe

  34. BeFoRe/AfTer

  35. .beforeEach() .afterEach()

  36. describe("employee", function(){ var employee; beforeEach(function(){ employee = new Employee; });

    it("has a name", function(){ expect(employee.name.toBeDefined()); }); it("has a role", function(){ expect(employee.role.toBeDefined()); }); });
  37. describe("employee", function(){ var employee; beforeEach(function(){ employee = new Employee; });

    it("has a name", function(){ expect(employee.name.toBeDefined()); }); it("has a role", function(){ expect(employee.role.toBeDefined()); }); });
  38. describe("Submit values", function(){ beforeEach(function(){ $('#quote-text').val('quote'); $('#author').val('author'); $('#source').val('url'); }); // Spec

    afterEach(function(){ $('#quote-text').val(''); $('#author').val(''); $('#source').val(''); }); });
  39. ASyNc

  40. describe("an async spec", function () { var r, fetchDone; it("fetchFilter",

    function () { runs(function () { model.fetch(opts) .done(function(data) { r = data; fetchDone = true; }); }); waitsFor(function() {return fetchDone;}, "never completed", 5000); runs(function () { expect(r[0].gender).toBeDefined(); }); }); });
  41. ASyNc Is WEaKeSt LiNk In JAsMiNe

  42. v C SPy

  43. Is OnE Of TEsT DOuBlE PaTtErn SPy

  44. By GErArD MEsZaRos www.amazon.co.jp/dp/B00132S6V4

  45. JAsMiNe SPiEs Are: v v v v v v v

    v v v v v v v v v v v v v v v v v ؔ਺ʹ੒Γ୅Θͬͯɺ ͦͷؔ਺͕ԿΛ͍ͯ͠Δͷ͔Λ஌Βͤͯ͘ΕΔɻ
  46. JAsMiNe SPiEs Are: v v v v v v v

    v v v v v v v v v v v v v v v v v  ݺͼग़͞Ε͔ͨͲ͏͔  Կճݺͼग़͞Εͨͷ͔  ͲΜͳҾ਺Ͱݺͼग़͞Ε͔ͨ
  47. H MAkE JAsMiNe MOrE USeFul

  48.  JAsMiNe.ASyNc github.com/derickbailey/jasmine.async

  49. describe("an async spec", function () { var r, fetchDone; it("fetchFilter",

    function () { runs(function () { model.fetch(opts) .done(function(data) { r = data; fetchDone = true; }); }); waitsFor(function() {return fetchDone;}, "never completed", 5000); runs(function () { expect(r[0].gender).toBeDefined(); }); }); });
  50. describe("an async spec", function() { var async = new AsyncSpec(this);

    var r; async.beforeEach(function(done){ // simulate async stuff and wait 10ms setTimeout(function(){ model.fetch(opts).done(function(data) { r = data; }); done(); }, 10); }); async.it("fetchFilter", function(done) { expect(res[0].gender).toBeDefined(); }); });
  51.  JaSmIne-JqUeRy github.com/velesin/jasmine-jquery

  52. +26 MAtChErS FoR jQUeRy FIxTuRe FoR hTmL

  53.  JaSmIne-SiNon github.com/froots/jasmine-sinon

  54. // Jasmine-SinonΛ࢖Θͳ͍৔߹ expect(mySinonSpy.calledWith('foo')).toBeTruthy(); // Jasmine-SinonΛ࢖ͬͨ৔߹ expect(mySinonSpy).toHaveBeenCalledWith('foo');

  55. # Jasmine-SinonΛ࢖Θͳ͍৔߹ Expected false to be truthy. # Jasmine-SinonΛ࢖ͬͨ৔߹ Expected

    Function to have been called.
  56.  github.com/raganwald/Underscore-Matchers-for-Jasmine UNdErScOrE MAtChErS FoR JAsMiNe

  57.  github.com/studiomohawk/js-testing-boilerplates /tree/grunt-0.4.x JAvaSCrIpT TEsTiNg BOiLeRpLaTe

  58.  JAvaSCrIpt-KOan github.com/studiomohawk/javascript-koans /tree/ja-translation

  59. 1 1 1 ? WHy TEst?

  60. ςετΛॻ͘͜ͱ͸ɺ σϕϩούʔζϒϩοΫͷղফʹͭͳ͕Δ

  61. ςετΛॻ͘͜ͱͱͰॻ͍͍ͯΔίʔυͷ σβΠϯ΁ͷཧղΛਂΊΔ͜ͱ͕Ͱ͖Δ

  62. ςετΛॻ͘͜ͱͰίʔυ͸ςετ΋ؚΊͯ ࠶ར༻͠΍͘͢ͳΔ

  63. NIkOlA TEsLa SErBiAn-AMeRiCaN InVeNtOr

  64. g If Edison had a needle to find in a

    haystack, he would proceed at once with the diligence of the bee to examine straw after straw until he found the object of his search. I was a sorry witness of such doings, knowing that a little theory and calculation would have saved him ninety per cent of his labor.
  65. THaNk You! FOlLoW ME @cSsRAdAr