jasmine-jqueryというかloadFixturesが便利
Posted: Updated:
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を使ってるともっと相性いいのかも．
