javascript - jQuery の .hide() は style="display: none;" を設定しませんブラウザ間で一貫して

Question

背景:次の方法で要素の作成を検証するため
に使用しています (これまでのところ正常に機能しています)。QUnitDOM

$actual = Mylibrary.createSomething();
$expected = $('<div........');
ok($actual[0].isEqualNode($expected[0]),'Node properly created');

詳細情報isEqualNode: MDN、W3

問題:メソッド
を使用すると、ノードの比較で問題が発生します。理由は次のとおりです。jQuery's .hide()

それは生成しますstyle="display: none;"（の後に余分なスペースはありません;）Firefox
それはstyle="display: none; "（の後の余分なスペース;）を生成しますChrome
isEqualNodestyle="display: none;"それは異なると見なされstyle="display: none; "ます（属性を異なる順序で持つことができ、isEqualNodeノードは等しいと見なされますが、余分なスペースはそうではありません）。
を構築するとき$expectedは、2 つの状況のうちの 1 つしか対応できません。

したがって、私のテストは、作成することを選択した状況で、Chromeまたは状況に応じて常に失敗します。Firefox$expected

要素が隠されているかどうかを確認できます.is(':hidden')が、それは私にとって理想的ではありません。

.isEqualNode現在のように DOM要素のセット全体を比較することはできなくなり、同等のものを取得するには多くの個別のテストを作成する必要があり、テストが非常に広範になり、保守が困難になります。
DOMメソッド (例: ) を使用することで、メソッド(例: )isEqualNodeを使用した場合よりもテストが堅牢になると思います。これは、要素が最初にで生成され、非依存の検証メソッドを使用すると、問題が発見される可能性が高くなるからです。jQuery.is(':hidden')jQueryjQuery

jQueryのメソッドがバグ/問題として属性を.hide()生成する方法との不一致が見られますか? stype="display(つまり、http://bugs.jquery.com/で提起する必要があります)?

メソッドを使用せずにノードを比較できるソリューションはありjQueryますか?

score 2 · Accepted Answer

QUnit の観点から、要素が非表示になっているかどうかを確認するために、次のチェックを実行します。

equal(element.css('display'), 'none', 'element is not hidden');

これにより、文字列の違いを比較する必要がなくなります。jQuery を使用していない場合は、次を実行します。

equal(element.style.display, 'none', 'element is not hidden');

ユニット/相互作用テストをモジュール化するためにいくつかのユーティリティ拡張を作成したい場合、 isEqualNode はここでの最良のアプローチではありません。次のような方法を提供することをお勧めします。

checkClass(element, cssClass)
checkAttribute(element, attr, value)
checkAttributeExists(element, attr)
etc...

javascript - jQuery の .hide() は style="display: none;" を設定しません ブラウザ間で一貫して