Vue.jsのビューモデルのテストを書いてみた

vuejs javascript

こんにちは。明日はウルトラ花金です、きたけーです。

この前かいたVue.jsのコード(Vue.jsでページネーションを実装してみる - きたけーTechブログ, Vue.js で 複数のViewModelを連携させる - きたけーTechブログ)のテストをMocha+Chaiで書いてみた。

(微妙なコードですけど)こんなかんじ。

describe Menus, ->
  beforeEach ->
    @menus = new Menus
      data:
        menus: [
          {name: "ikura", price: 100},
          {name: "tako", price: 200},
          {name: "maguro", price: 300},
          {name: "uni", price: 400},
          {name: "toro", price: 500}
        ]

  it "はじめのページであること", ->
    expect(@menus.isStartPage).to.be(true)

  it "設定された個数分、ネタが取得できること", ->
    expect(@menus.displayMenus.length).to.be(@menus.$data.displaySize)

  it "ページが進むと、最後のページであること", ->
    @menus.showNext()
    expect(@menus.isEndPage).to.be(true)

  it "ページが進むと、ひとつだけネタが取得できること", ->
    @menus.showNext()
    expect(@menus.displayMenus.length).to.be(1)

  it "最後のページから、次のページに進もうとしても進まないこと", ->
    @menus.showNext()
    lastPage = @menus.$data.page
    @menus.showNext()
    expect(@menus.$data.page).to.be(lastPage)

AngularのControllerでもいえると思うんですけど、テストを書くことで自ずとDOMとか通信に依存しない良いコードになりそうなかんじ(依存していたらテストコード書きづらい)。

Railsのプロジェクトで書いていたので、テストランナーはteaspoonを選択しました。Railsじゃないプロジェクト+mocha-phantomjsあたりでも走らせてみたいなぁ。