Unit-Testing With Jasmine

Slide 1

Slide 1 text

. UNit-TEsTiNg WiTh JAsMiNe BY YUyA SAiTo 2013.04.26

Slide 2

Slide 2 text

 @cSsRAdAr

Slide 3

Slide 3 text

En.Ja oSS github.com/enja-oss

Slide 4

Slide 4 text

@CYbErAGeNt

Slide 5

Slide 5 text

AGeNda WHaT Is bDD? f WHaT Is JAsMiNe? , GEt MOrE OuT Of JAsMiNe ^ MAkE JAsMiNe mORe USeFul i

Slide 6

Slide 6 text

CHrIsTiAn JOhAnSen AUtHoR Of TEst-DRiVeN JAvaSCrIpT DEvElOpMeNt

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

e WHaT Is bDD?

Slide 9

Slide 9 text

DAn NOrTh ThE OrIgInAtOr Of bDD.

Slide 10

Slide 10 text

dannorth.net/introducing-bdd

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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 ͜Ε͔Β࡞੒͠Α͏ͱ͢ΔϓϩάϥϜʹظ଴͞ΕΔ ʮৼΔ෣͍ʯ ΍ ʮ੍໿৚݅ʯ ɺ ͭ·Γ ʮ ཁٻ࢓༷ʯ ʹ ͍ۙܗͰɺ ࣗવݴޠΛซه͠ͳ͕ΒςετίʔυΛ هड़͢Δ͜ͱ͕ղܾ΁ͷۙಓͩͱߟ͑ͨɻ

Slide 14

Slide 14 text

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 ΞϓϦέʔγϣϯશମͰ͸ͳ͘ɺ খ͘͞ɺ ͭͷ͜ͱͷΈςετ͢Δ ςετΛจষͷΑ͏ʹهड़͢Δ

Slide 15

Slide 15 text

D bDD BUsInEss

Slide 16

Slide 16 text

& WHaT Is JAsMiNe?

Slide 17

Slide 17 text

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ͷͨΊͷ ϏϔΠϏΞۦಈͷςετϑϨʔϜϫʔΫ

Slide 18

Slide 18 text

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 ʹରͯ͠ɺ ίʔυ͕ ͲΜͳৼΔ෣͍Λ͢Δ΂͖͔Λදݱ͢ΔͷΛ खॿ͚ͯ͘͠ΕΔπʔϧ

Slide 19

Slide 19 text

pivotal.github.io/jasmine

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

HOw TO JAsMiNe?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

H - K K K MaTcHer

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

github.com/pivotal/jasmine/wiki/Matchers

Slide 32

Slide 32 text

JAsMiNe Is EAsY To STaRt UNit-TeStIng.

Slide 33

Slide 33 text

` GEtTiNg MOrE OUt OF JAsMiNe

Slide 34

Slide 34 text

BeFoRe/AfTer

Slide 35

Slide 35 text

.beforeEach() .afterEach()

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Slide 38

Slide 38 text

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(''); }); });

Slide 39

Slide 39 text

ASyNc

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

ASyNc Is WEaKeSt LiNk In JAsMiNe

Slide 42

Slide 42 text

v C SPy

Slide 43

Slide 43 text

Is OnE Of TEsT DOuBlE PaTtErn SPy

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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 ؔ਺ʹ੒Γ୅Θͬͯɺ ͦͷؔ਺͕ԿΛ͍ͯ͠Δͷ͔Λ஌Βͤͯ͘ΕΔɻ

Slide 46

Slide 46 text

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 ݺͼग़͞Ε͔ͨͲ͏͔ Կճݺͼग़͞Εͨͷ͔ ͲΜͳҾ਺Ͱݺͼग़͞Ε͔ͨ

Slide 47

Slide 47 text

H MAkE JAsMiNe MOrE USeFul

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

+26 MAtChErS FoR jQUeRy FIxTuRe FoR hTmL

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

1 1 1 ? WHy TEst?

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

NIkOlA TEsLa SErBiAn-AMeRiCaN InVeNtOr

Slide 64

Slide 64 text

g If Edison had a needle to ﬁnd 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.

Slide 65

Slide 65 text

THaNk You! FOlLoW ME @cSsRAdAr