jasmine-jqueryというかloadFixturesが便利

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を使ってるともっと相性いいのかも．