Unit-Testing With Jasmine

Transcript

1. 1.

   . UNit-TEsTiNg WiTh JAsMiNe BY YUyA SAiTo 2013.04.26

2. 2.

    @cSsRAdAr

3. 3.

   En.Ja oSS github.com/enja-oss

4. 4.

   @CYbErAGeNt

5. 5.

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

   MOrE OuT Of JAsMiNe ^ MAkE JAsMiNe mORe USeFul i
6. 6.

   CHrIsTiAn JOhAnSen AUtHoR Of TEst-DRiVeN JAvaSCrIpT DEvElOpMeNt

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

   e WHaT Is bDD?

9. 9.

   DAn NOrTh ThE OrIgInAtOr Of bDD.

10. 10.

    dannorth.net/introducing-bdd

11. 11.

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

    DEvElOpMeNt
12. 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. 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. 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. 15.

    D bDD BUsInEss

16. 16.

    & WHaT Is JAsMiNe?

17. 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. 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. 19.

    pivotal.github.io/jasmine

20. 20.

    None
21. 21.

    HOw TO JAsMiNe?

22. 22.

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

23. 23.

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

    world!")); }); });
24. 24.

    Suite describe("Hello world", function(){ it("says hello to the world", function(){

    expect(helloWorld().toEqual("Hello world!")); }); });
25. 25.

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

    world!")); }); }); Spec
26. 26.

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

    world!")); }); });
27. 27.

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

    }); expect(helloWorld().toEqual("Hello world!"));
28. 28.

    H - K K K MaTcHer

29. 29.

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

30. 30.

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

    }); });
31. 31.

    github.com/pivotal/jasmine/wiki/Matchers

32. 32.

    JAsMiNe Is EAsY To STaRt UNit-TeStIng.

33. 33.

    ` GEtTiNg MOrE OUt OF JAsMiNe

34. 34.

    BeFoRe/AfTer

35. 35.

    .beforeEach() .afterEach()

36. 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. 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. 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. 39.

    ASyNc

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

    ASyNc Is WEaKeSt LiNk In JAsMiNe

42. 42.

    v C SPy

43. 43.

    Is OnE Of TEsT DOuBlE PaTtErn SPy

44. 44.

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

45. 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. 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. 47.

    H MAkE JAsMiNe MOrE USeFul

48. 48.

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

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

     JaSmIne-JqUeRy github.com/velesin/jasmine-jquery

52. 52.

    +26 MAtChErS FoR jQUeRy FIxTuRe FoR hTmL

53. 53.

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

54. 54.

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

55. 55.

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

    Function to have been called.
56. 56.

     github.com/raganwald/Underscore-Matchers-for-Jasmine UNdErScOrE MAtChErS FoR JAsMiNe

57. 57.

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

58. 58.

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

59. 59.

    1 1 1 ? WHy TEst?

60. 60.

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

61. 61.

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

62. 62.

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

63. 63.

    NIkOlA TEsLa SErBiAn-AMeRiCaN InVeNtOr

64. 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. 65.

    THaNk You! FOlLoW ME @cSsRAdAr