web-dev-qa-db-ja.com

CSSユニットテスト

いくつかの簡単な検索で、私は明らかに ではない一人称 考えていることがわかりました「CSSを単体テストできますか？」 。

ここで誰かがCSSユニットテストに成功したのだろうか？あなたが試みて失敗した場合、または単にあなた自身の理論を持っている場合、なぜそれが（明らかに）まだ行われていないのか教えてください。

cssunit-testing
56
nickf

WebテストフレームワークであるSeleniumを使用できます。このようにして、DOMなどの要素にどのスタイルを適用するかを表明できます。

セレン

そうでなければ、あなたの目的が何であるかわからない。ユニットテストは、その名前が示すように、「ユニット」をテストすることであり、私にとって、これはcssではなくコードでのみ意味があります。

20
RekrowYnapmoc

Quixote と呼ばれる新しいcssユニットテストライブラリがあります。画像を視覚的に比較するのではなく、コードを調べます。 Seleniumとは異なり、特定のスタイルを表明する必要はありません。代わりに、「中央に配置する必要があります」または「左側をこの他の要素の右側に10px離す必要があります」などと言うことができます。

15
aharris88

CSSをユニットテストできなかった、またはユニットテストすべきではない理由がわかりません。これが私が考えているシナリオです：

複数のモジュラーCSSファイルで構成されたCSSフレームワークがあり、5つのサイトを駆動しています。

Ex : base.css / form.css / article.css etc.

サイト＃1のみに適用される要件のためにbase.cssに変更を加えたと想像してください=>サイト＃2のスタイルを壊す可能性があります。

私のCSSフレームワークがLESSまたはSASSの上に構築されている場合、CSSユニットテストはさらに適切になります。マクロを変更すると、すべてのスタイルが壊れる可能性があります。 。

2
boudu

ブラウザ（クライアント側）でCSSを「単体テスト」することは可能だと思います。単体テストというより、自動チェッカーのようなものです。

  1. 特定のCSSクラスまたはID（結果）に対して保持したい最終的なCSS属性条件を評価します。
  2. 静的コンテンツとCSSをレンダリングするには、テストドキュメントのHTMLが必要です。すべての要素は、個別のコンテナのコンテンツに含める必要があります。
  3. レンダリング後、選択したターゲットの最終属性または結果の最終属性をjavascriptで確認し、一致しない要素を出力します。

ユニットテストケース：

DOMセレクター：

.test1
.test2
#test3

これは常に最終的な属性である必要があります。

CSSAttribute1, CSSFinalValue1
CSSAttribute2, CSSFinalValue2
CSSAttribute3, CSSFinalValue3

JSでテストルールを設定する関数は次のようになります。

addCSSUnitTest(".test1, .test2, #test3", "margin-left: 4px; font-size: 8px");

次に、DOM要素にこの最終属性があるかどうかを確認します。

レンダリング後、すべてjavascriptで実行されます。しかし、とにかくこれは実用的ではありません。コードを大幅に増やす多くの単体テストケースを構築する必要があるからです。

また、クロスブラウザの「互換性」のために、reset.cssが常に必要です。

alternativeは、属性全体を保持する必要があることがわかっているCSSクラスを指定することになります。 DOMセレクターのリストを作成します。 jQueryを使用してCSSクラス属性を（CSSクラスから直接）取得し、それらがターゲットDOM要素に保持されているかどうかを確認します。この最後の方法はほぼ完全に自動化できますが、より複雑なjavascriptチェッカーが必要になります。最後の1つは、CSSでIDセレクター（例： "＃test3"）をチェックせず、クラス（例： ".test1"）のみをチェックします

2
Heroselohim

PhantomCSSを使用して自動視覚比較を行うことができます。次に、基本CSSスタイルのみをロードし、コンポーネントをすべての状態で表示し、他のコンポーネントからCSSをロードしないCSSモジュールユニットテストページを作成できます。そして、すべてのモジュールがロードされた完全なCSSファイルと比較できます。

1
Jkarttunen

UIを多用する大規模なプロジェクトで単体テストを設定しましたが、うまく機能しました。また、見た目よりもはるかに簡単でした。

getBoundingClientRect または getComputedStyle のような簡単なツールを使用して、それを hyperscript すばやく一時的なDOMツリーを作成すれば、準備は完了です。 tape-css でテストするときにボイラープレートを減らすために、 tape-css と記述しました。 ）tape（-===-））==ですが、スタックはどのテストセットアップでも同様です。

昨日、新しいワークフローとそれが生産性をどのように向上させたかについての簡単なチュートリアルとライブ例を含む詳細なブログ投稿を公開しました： CSSユニットテストがどのように高速移動に役立ったか 。

1
tomekwi

CSSのユニットテストは、フレームワークとCSSへのアプローチによって異なります。

尋ねる質問：

CSSで特定のクラスをテストします（例：Assert.IsNotNull）

CSSプロパティを取得し、その属性を確認します。

まず、CSSファイルが存在するかどうかを確認してから、特定のクラスを探し、次に指定されたクラス内の属性を探します。

回帰テスト中にクラスの欠落を経験し、以前の調査結果からすぐに修正することができました。

0
Muks

私が試したことがないが、うまくいくかもしれない興味深いアプローチがあります：

  1. すべてのコンポーネントなどを提供するサンプルページ（àla https://getboostrap.com ）を作成します。
  2. Huxley でテストします

Etvoilà:)

0
avetisk