beforeEach内でDOMをちまちまやるのが面倒
なんですよ.例えばですが乱暴にゴチャゴチャと書くと...
describe('Some test case....', function() { var testDiv, testList, attrTest, insertTest; beforeEach(function() { testDiv = document.createElement('div'); testDiv.innerHTML = '<a id="attrTest" data-test="hogehoge" target="_blank" href="#">test</a>'; document.body.appendChild(testDiv); testList = document.createElement('div'); testList.innerHTML = '<ul id="insertTest"><li>BASELINE</li></ul>'; document.body.appendChild(testList); }); it("insertTest parent is testList", function() { expect(insertTest.parentNode).toBe(testList); }); });
こんな風にcreateElement
とかして要素を作って下ごしらえすると,どうにも見栄えがよくなくなりがちです.というか整理しづらい...
たまたま見つけたjasmine-jquery
Railsの話だったのですが,たまたま見つけたページに,なんだかステキな記述を発見
Jasmine-jqueryは、名前が示す通りJasmineのjQuery用機能拡張です。これがfixtureサポートを提供しているので、シンプルなHTML句に対してJavaScriptをテストすることができます。#261 Testing JavaScript with Jasmine - RailsCasts
あらステキ.
ここから取得して組み込みます.Downloads for velesin's jasmine-jqueryから,jasmine-jquery-1.3.1.jsを取得,そしてjquery本体も1.6.4を取得しおいて,SpecRunner.htmlに読み込みます.
loadFixturesで,別途用意したHTMLを対象にできる
HTMLと・・・
<html> <head> <title>element.html</title> </head> <body> <div id="testDiv"> <a id="attrTest" data-test="hogehoge" target="_blank" href="#">test</a> </div> <div id="testList"> <ul id="insertTest"><li>BASELINE</li></ul> </div> </body> </html>
JSが・・・
describe('Some test case....', function() { var testDiv, testList, attrTest, insertTest; beforeEach(function() { loadFixtures('element.html'); testDiv = document.getElementById('testDiv'); testList = document.getElementById('testList'); }); it("insertTest parent is testList", function() { expect(insertTest.parentNode).toBe(testList); }); });
分離されます.やってみると当たり前な感じもする使い勝手です.
これだけ見ると,jQueryの必要すらあんまりない気もしますが,他にもmetchersが拡張されているので何かと便利な感じの拡張です.テスト対象のコードもjQueryを使ってるともっと相性いいのかも.