LoginSignup
32

More than 5 years have passed since last update.

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

Last updated at Posted at 2012-12-26

以下の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 !

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32