JasmineでFlickrビューア・アプリをテスト駆動開発する(1)

Goal

Setup

こちらの記事を参考にしてください。

JavaScriptをテスト駆動開発する環境を整える #JavaScript #CoffeeScript #Guard #jasmine - Qiita

1st Red

1. テストを書く

FlickrSpec.coffee

describe "Flickr", ->
  beforeEach ->
    @flickr = new Flickr

  it "should be defined", ->
    expect(@flickr).toBeDefined()

1. 自動的にテストが走り、コケる

2. コードを書く

Flickr.coffee

class Flickr

1. 自動的にテストが走り、コケる

2. コードを書く

Flickr.coffee

root = exports ? this
class root.Flickr

1. 自動的にテストが走り、合格する

Other Setup

1. コンソールで実行

$ rm public/javascripts/Player.js
$ rm public/javascripts/Song.js
$ rm spec/javascripts/PlayerSpec.js

2nd Red

1. テストを書く

FlickrSpec.coffee

...
  describe ".photos", ->
    beforeEach ->
      @flickrPhotos = @flickr.photos

    it "should be defined", ->
      expect(@flickrPhotos).toBeDefined()

1. 自動的にテストが走り、コケる

2. コードを書く

Flickr.coffee

  constructor: ->
    @photos = []

1. 自動的にテストが走り、合格する

3rd Red

1. テストを書く

getData()は非同期なのでデータを取得した後に確認する。通常通り実行させるためにspyOnするときにandCallThrough()を付けている。

FlickrSpec.coffee

...
  describe "#getData", ->
    beforeEach ->
      spyOn(@flickr, "getData").andCallThrough()
      @flickrPhotos = @flickr.photos
      @flickr.getData 5

    afterEach ->
      @flickrPhotos = [] # remove photo data

    it "should have been called", ->
      expect(@flickr.getData).toHaveBeenCalled()

    it "should set Data into .photos", ->
      waitsFor (-> @flickrPhotos.length > 0), 'timeout', 1000
      runs ->
        expect(@flickrPhotos.length).toBe 5

1. 自動的にテストが走り、コケる

2. コードを書く

Flickr.coffee

...
  getData: (number) ->
    $.getJSON(
      'http://www.flickr.com/services/rest/?jsoncallback=?'
        format : 'json'
        method : 'flickr.photos.search'
        api_key : '7965a8bc5a2a88908e8321f3f56c80ea'
        user_id : '29242822@N00'
        per_page : number
    ).done((data) =>
      $.each data.photos.photo, (i, item) =>
      @photos.push item
    )

1. 自動的にテストが走り、合格する

4th Red

テストのたびにFlickrにデータを取りに行くのは時間がかかるし、取ってくるデータも更新があれば変わってしまうので、スタブを設定する。

1. テストを書く

FlickrSpec.coffee

...
  describe "with fakeServer requests", ->
    beforeEach ->
      @fakeRequestServer = sinon.fakeServer.create()
      @flickrPhotos = @flickr.photos
      @oldGetData = @flickr.getData
      # use JSON request instead of JSONP request
      fakeGetData = (number) ->
        $.getJSON(
          # 'http://www.flickr.com/services/rest/?jsoncallback=?'
          # fake request scceed only when without '?jsoncallback=?'
          'http://www.flickr.com/services/rest/'
            format : 'json'
            method : 'flickr.photos.search'
            api_key : '7965a8bc5a2a88908e8321f3f56c80ea'
            user_id : '77921082@N00'
            per_page : number
        ).done((data) =>
          $.each data.photos.photo, (i, item) =>
            @photos.push item
        )
      @flickr.getData = fakeGetData

    afterEach ->
      @flickr.photos = [] # remove photo data
      @flickr.getData = @oldGetData
      @fakeRequestServer.restore()

    it "[0].title should be Pod", ->
      @flickr.getData 5
      @fakeRequestServer.requests[0].respond(
        200
        "Content-Type": "application/json"
        '{"photos":{"page":1, "pages":726, "perpage":5, "total":"3630", "photo":[{"id":"8591804280", "owner":"77921082@N00", "secret":"da96195b4b", "server":"8526", "farm":9, "title":"Pod", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"8591810388", "owner":"77921082@N00", "secret":"d94ce346a5", "server":"8509", "farm":9, "title":"Street Plate", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"8591801040", "owner":"77921082@N00", "secret":"cb7b1e246a", "server":"8097", "farm":9, "title":"Stone pod", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"8590414659", "owner":"77921082@N00", "secret":"fb49a25607", "server":"8094", "farm":9, "title":"Street pole", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"8590411479", "owner":"77921082@N00", "secret":"9aab17d3a9", "server":"8370", "farm":9, "title":"Street plate", "ispublic":1, "isfriend":0, "isfamily":0}]}, "stat":"ok"}'
      )
      expect(@flickrPhotos[0].title).toBe "Pod"

1. 自動的にテストが走り、合格する

---

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