Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?
@Feel-Physics

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

More than 5 years have passed since last update.

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 !

9
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Feel-Physics
今はHoloLensのアプリを開発しており、技術記事はすべてブログ( http://weed.nagoya )に書いています。以前はSwift、OpenCV+Python、JavaScript、Objective-Cを書いていました。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
9
Help us understand the problem. What is going on with this article?