JSテストツールJasmineをCoffeeScriptで使う（少し応用的な使い方）

以下のSlideShareが大変参考になったので備忘を兼ねてCoffeeScript版を書いてみた。

JS開発におけるTDDと自動テストツール利用の勘所
http://www.slideshare.net/KojiNakamura/jstdd

目次

• 1. Matcher概観
• 2. beforeEach / afterEach
• 3. Spy
• 4. Async Test
• 5. jQuery code test

1. Matcher概観

• notで否定のMatcherとなる
• expect(x).toEqual(y)
• expect(x).not.toEqual(y)
• expect(x).toBe(y)
  toBeは === による等値チェック
• expect(x).toMatch(pattern)
• expect(x).toBeDefined()
• expect(x).toBeUndefined()
• expect(x).toBeNull()
• expect(x).toBeNaN()
• expect(x).toBeTruthy()
• expect(x).toBeFalsy()
• expect(x).toContain(y)
• expect(x).toBeLessThan(y)
• expect(x).toBeGreaterThan(y)
• expect(x).toBeCloseTo(y, precision)
• expect(function(){fn();}).toThrow(e)
• expect(spy).toHaveBeenCalled()
• expect(spy).toHaveBeenCalledWith(arguments)

2. beforeEach / afterEach

jasmineBeforeEachAfterEachInCoffeeScript.coffee

# 「JS開発におけるTDDと自動テストツール利用の勘所 」より引用。
# http://www.slideshare.net/KojiNakamura/jstdd

describe "Object", ->

  beforeEach ->
    object = new MyObject

  afterEach ->
    # do something...

  describe "#methodA", ->
    it "should be ok", ->
      expect(object.methodA()).toBeTruthy()

  describe "#methodB", ->
    it "should be ok", ->
      expect(object.methodB).toBeTruthy()

  describe "(context)", ->

    beforeEach ->
      object.someMethod()

    describe "#methodC", ->
      it "should be ok", ->
        expect(object.methodC).toBeTruthy()

3. Spy

jasmineSpyOnCoffeeScript.coffee

# 「JS開発におけるTDDと自動テストツール利用の勘所 」より引用。
# http://www.slideshare.net/KojiNakamura/jstdd
 
it "should be called", ->
  obj = 
    method: ->
  spyOn obj, "method" # spyOnメソッドでオブジェクトの特定メソッドをスパイ化
  obj.method()
  expect(obj.method).toHaveBeenCalled() # spy用のMatcherが用意されている
 
test "should be called", ->
  spy = jasmine.createSpy() # スパイ化された関数オブジェクトを作成する
  spy()
  expect(spy).toHaveBeenCalled()

4. Async Test

jasmineAsyncTestOnCoffeeScript.coffee

# 「JS開発におけるTDDと自動テストツール利用の勘所 」より引用。
# http://www.slideshare.net/KojiNakamura/jstdd
 
it "should be async", ->
 
  # 非同期処理ブロックはruns()で定義される
  runs ->
    expect(true).toBeTruthy()
 
  # waits()で次のブロック実行を、指定したミリ秒間保留する
  waits(500)
 
  spy = jasmine.createSpy()
  runs ->
    setTimeout spy, 1000
 
  # waitsFor()はコールバックがtrueを返すまで、次のブロック実行を保留する
  waitsFor ->
    spy.callCount > 0
 
  runs ->
    expect(true).toBeTruthy()

5. jQuery code test

jQueryCodeTestWithJasmineInCoffeescript.coffee

# 「JS開発におけるTDDと自動テストツール利用の勘所 」より引用。
# http://www.slideshare.net/KojiNakamura/jstdd
 
# 元コード
 
$ ->
  $("div li .button")
    .on 'click', ->
      $("div .contents").html("<span>"+$(this).data("mydata")+"</span>")
 
# テスト可能コード
 
$ ->
  $("button") # HTML構造に依存しないidセレクタに変更
    .on 'click', ->
      clickHandler $("contents"), $(this).data("mydata")
 
clickHandler = (elm, data) ->
  elm.html("<span>"+data+"</span>")
 
# テストコード
 
it "should call html() of passed element", ->
  fakeObj = 
    html: jasmine.createSpy()
  clickHandler(fakeObj, "hoge")
  expect(fakeObj.html).toHaveBeenCalledWith("<span>hoge</span>")

---

ブログやってます：PAPA-tronix !