chai-jquery

chai-jqueryは、jQuery固有のアサーションセットを提供するchaiアサーションライブラリの拡張機能です。

使用方法

テストファイルに、jquery.jsとchai.js (バージョン 1.0.0-rc1 以降)の後、chai-jquery.jsを含めてください。

<script src="jquery.js"></script>
<script src="chai.js"></script>
<script src="chai-jquery.js"></script>

jquery.jsとchai.jsはどちらを先に挿入しても構いません（ここでは順序は問題になりません）。

chaiのexpectまたはshouldアサーションと一緒にアサーションを使用してください。

アサーション

attr(name[, value])

.attr()を使用して、選択の最初の要素が指定された属性を持っていることをアサートします。必要に応じて、特定の値もアサートします。戻り値はチェーンで使用できます。

$('#header').should.have.attr('foo');
expect($('body')).to.have.attr('foo', 'bar');
expect($('body')).to.have.attr('foo').match(/bar/);

prop(name[, value])

.prop()を使用して、選択の最初の要素が指定されたプロパティを持っていることをアサートします。必要に応じて、特定の値もアサートします。戻り値はチェーンで使用できます。

$('#header').should.have.prop('disabled');
expect($('body')).to.have.prop('disabled', false);
expect($('body')).to.have.prop('value').match(/bar/);

css(name[, value])

.css()を使用して、選択の最初の要素が指定されたCSSプロパティを持っていることをアサートします。必要に応じて、計算された値もアサートします。戻り値はチェーンで使用できます。

$('#header').should.have.css('background');
expect($('body')).to.have.css('background-color', 'rgb(0, 0, 0)');
expect($('body')).to.have.css('font-family').match(/sans-serif/);

data(name[, value])

.data()を使用して、選択の最初の要素が指定されたデータ値を持っていることをアサートします。必要に応じて、特定の値もアサートします。戻り値はチェーンで使用できます。

$('#header').should.have.data('foo');
expect($('body')).to.have.data('foo', 'bar');
expect($('body')).to.have.data('foo').match(/bar/);

class(className)

.hasClass()を使用して、選択の最初の要素が指定されたクラスを持っていることをアサートします。

$('#header').should.have.class('foo');
expect($('body')).to.have.class('foo');

id(id)

.attr('id')を使用して、選択の最初の要素が指定されたIDを持っていることをアサートします。

$('.header').should.have.id('#main');
expect($('body')).to.have.id('foo');

html(html)

.html()を使用して、選択の最初の要素のHTMLが指定されたHTMLと等しいことをアサートします。

$('.name').should.have.html('<em>John Doe</em>');
expect($('#title')).to.have.html('Chai Tea');

text(text)

.text()を使用して、選択の最初の要素のテキストが指定されたテキストと等しいことをアサートします。

$('.name').should.have.text('John Doe');
expect($('#title')).to.have.text('Chai Tea');

value(value)

.val()を使用して、選択の最初の要素が指定された値を持っていることをアサートします。

$('.name').should.have.value('John Doe');
expect($('.year')).to.have.value('2012');

visible (可視)

.is(':visible')を使用して、選択の少なくとも1つの要素が可視であることをアサートします。

$('.name').should.be.visible;
expect($('.year')).to.be.visible;

hidden (非表示)

.is(':hidden')を使用して、選択の少なくとも1つの要素が非表示であることをアサートします。

$('.name').should.be.hidden;
expect($('.year')).to.be.hidden;

selected (選択済み)

.is(':selected')を使用して、選択の少なくとも1つの要素が選択されていることをアサートします。

$('option').should.be.selected;
expect($('option')).not.to.be.selected;

checked (チェック済み)

.is(':checked')を使用して、選択の少なくとも1つの要素がチェックされていることをアサートします。

$('.checked').should.be.checked;
expect($('input')).not.to.be.checked;

enabled (有効)

.is(':enabled')を使用して、選択の少なくとも1つの要素が有効であることをアサートします。

$('.enabled').should.be.enabled;
expect($('enabled')).to.be.enabled;

disabled (無効)

.is(':disabled')を使用して、選択の少なくとも1つの要素が無効であることをアサートします。

$('.disabled').should.be.disabled;
expect($('input')).not.to.be.disabled;

empty (空)

.is(':empty')を使用して、選択の少なくとも1つの要素が空であることをアサートします。アサート対象のオブジェクトがjQueryオブジェクトでない場合、元の実装が呼び出されます。

$('.empty').should.be.empty;
expect($('body')).not.to.be.empty;

exist (存在する)

選択が空でないことをアサートします。これは組み込みのchaiアサーションをオーバーライドすることに注意してください。アサート対象のオブジェクトがjQueryオブジェクトでない場合、元の実装が呼び出されます。

$('#exists').should.exist;
expect($('#nonexistent')).not.to.exist;

match(selector)

.is()を使用して、選択が指定されたセレクターに一致することをアサートします。これは組み込みのchaiアサーションをオーバーライドすることに注意してください。アサート対象のオブジェクトがjQueryオブジェクトでない場合、元の実装が呼び出されます。

$('input').should.match('#foo');
expect($('#empty')).to.match(':empty');

contain(text)

:contains()を使用して、選択に指定されたテキストが含まれていることをアサートします。アサート対象のオブジェクトがjQueryオブジェクトでない場合、またはcontainが関数として呼び出されない場合、元の実装が呼び出されます。

$('body').should.contain('text');
expect($('#content')).to.contain('text');

descendants(selector) (子孫)

.has()を使用して、選択に、指定されたセレクターに一致する子孫を持つ要素が少なくとも1つ含まれていることをアサートします。

$('body').should.have.descendants('h1');
expect($('#content')).to.have.descendants('div');

focus() (フォーカス)

選択の少なくとも1つの要素がフォーカスされていることをアサートします。このアサーションは.is(':focus')を使用しないことに注意してください。特定のwebkitブラウザにおける.is(':focus')の非互換性のため、代わりに$('.element').get(0) === document.activeElementを使用します。

$('#focused').should.have.focus();
expect($('#nonfocused')).not.have.focus();

貢献

テストスイートを実行するには、npm installを実行し（システムにNode.jsがインストールされている必要があります）、Webブラウザでtest/index.htmlを開きます。

ライセンス

著作権 (c) 2012 John Firebaugh

MITライセンス (LICENSEファイルを参照)