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