Unit-Testing With Jasmine

第38回 HTML5とか勉強会資料

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