5分でSASS機能をテストします

コアポイント

SASS関数テストは、仮想関数を作成し、テストケースを作成し、テストランナーを作成し、カスタム出力結果を作成することで実行できます。これは、さまざまなシナリオで機能をテストするためのミニマリストSASSテストエンジンを使用して実装できます。
SASSマッピングを使用して、複数のパラメーターを使用して関数をテストします。これは、リストを含むキーとして何でも受け入れることができます。これにより、複数のパラメーターを使用したテスト関数が可能になります。
このミニマリストテストシステムは、少数の機能をテストするのに非常に便利ですが、Eric Suzanneがより詳細なソリューションに当てはまるなど、完全なSASSテストフレームワークにより適しています。

先日、エドゥアルドブーサスのメディアライブラリを使用していて、自分で構築した機能をすばやくテストしたいと思っていたので、さまざまなシナリオをテストするのに役立つ小さなミキサーを書き始めました。数分後、私はできるだけ最小限のSASSテストエンジンを思いつきました。

この投稿はもう少し技術的かもしれませんが、テストはすべての開発者の責任であるべきであるため、多くの人々を助けると思います。また、これらを1つずつ理解した後、実際に理解するのは難しくないことがわかります。

テスト用の仮想関数を作成

それはすべて、テストする関数から始まります。私たちの目的のために、非常に単純な機能を使用することをお勧めします。たとえば、数字を2倍にするために使用される関数。

<code class="language-sass">@function double($value) {
  @return $value * 2;
}</code>

シンプルに聞こえます。ただし、デモンストレーションのみのためにのみ、テストの1つが実際に失敗するのを実際に見ることができるように、関数のエラーを意図的に導入します。

<code class="language-sass">@function double($value) {
  // 为了演示目的而故意引入的错误
  @if $value == 3 {
    @return 5;
  }

  @return $value * 2;
}</code>

テストケースの書き込み

驚くかもしれませんが、私たちのシステムでテストケースを書くことは、キーが関数入力であり、値が予想される結果であるSASSマップを書くのと同じくらい簡単です。

<code class="language-sass">$tests-double: (
  1: 2,
  2: 4,
  3: 6,
  4: 8
);</code>

それだけです！テストケースを書きました。繰り返しますが、左は入力であり、右は予想される出力です。

テストランナー

これまでのところ、すべてがうまくいきました。機能を構築し、テストケースを書いています。今すぐテストランナーを作成する必要があります。

SASSに精通している場合、おそらくこれをすでに理解しているでしょう。テストランナーは、テストマップを繰り返し、各入力の関数を呼び出し、予想される出力と一致することを確認します。その後、テスト結果を印刷します。

これが私たちのテストランナーがどのように見えるかです：

<code class="language-sass">/// 在测试套件 ($tests) 上运行函数 ($function)
/// @param {Map} $tests - 测试套件
/// @param {String} $function - 要测试的函数名称
@mixin run-tests($tests, $function) { .. }</code>

わかりました。この「獣」の内側をもっと詳しく見てみましょう。アイデアは、各テストの結果を使用して文字列を構築することです。すべての操作が完了したら、

ディレクティブを使用して文字列を印刷します。たとえば、それを擬似要素の@errorプロパティに渡すこともできますが、これはもう少し複雑であるため、contentに固執します。 @error

最初に行うことは、テストスイートを反復することです。各テストについて、その名前（call(...)関数を使用）に基づいて関数を動的に呼び出し、結果が予想どおりであるかどうかを確認します。

<code class="language-sass">@function double($value) {
  @return $value * 2;
}</code>

この時点で、システムは実行されています。テストスイートで実行して、それがどのように見えるか見てみましょう。

<code class="language-sass">@function double($value) {
  // 为了演示目的而故意引入的错误
  @if $value == 3 {
    @return 5;
  }

  @return $value * 2;
}</code>

<code class="language-sass">$tests-double: (
  1: 2,
  2: 4,
  3: 6,
  4: 8
);</code>

ねえ！これが始まりですよね？これで、出力をより便利に（そしてよりフレンドリー）する必要があります。

出力の改善

これは、出力をカスタマイズして、見たいように見えるようにすることができるときです。これを行う方法はありません。好きな出力を出力できます。 CSS仕様によれば、aを使用して、文字列にラインを包むことができることに注意してください。

私の場合、これは私が選んだものです：

<code class="language-sass">/// 在测试套件 ($tests) 上运行函数 ($function)
/// @param {Map} $tests - 测试套件
/// @param {String} $function - 要测试的函数名称
@mixin run-tests($tests, $function) { .. }</code>

関数で再び実行すると、これが得られるものです。 $tests-double double今はとてもきれいですね。

複数のパラメーターを使用して機能をテスト

<code class="language-sass">@mixin run-tests($tests, $function) {
  $output: '';

  @each $test, $expected-result in $tests {
    $result: call($function, $test...);

    @if $result == $expected-result {
      // 测试通过
      $output: $output + 'Test passed; ';
    } @else {
      // 测试失败
      $output: $output + 'Test failed; ';
    }
  }

  // 打印输出
  @error $output;
}</code>

この例では、関数にはパラメーターが1つしかありませんが、SASSマップが複数のパラメーターで関数をテストするためにキー（リストを含む）として何でも受け入れるという事実に依存することができます。このように見えます：

ミキサーを確認すると、

を使用して関数を呼び出すと、

変数にerlypsis（...）を追加することがわかります。

<code class="language-sass">@include run-tests($tests-double);</code>

これは、パラメーターリストとしてcall(...)値を渡すことを意味します。言い換えれば、がリスト（例：）である場合、リストの代わりに複数のパラメーターとして渡されます。 $test

最終的な考え

<code>Test passed; Test passed; Test failed; Test passed;</code>

それだけです、友達：これまでで最小のSASSテストエンジン。この小さなテストシステムは、特に他の開発者（Frameworks、Libraries ...）が利用できるようにすることを計画している場合、プロジェクトにある可能性のある少数の機能をテストするのに非常に便利です。また、Sassmeisterで機能をすばやくテストするのが非常に便利であることがわかりました。ミキサーと機能をそこに置いて、テストを実行してください！ $test $testもちろん、より詳細なソリューションを探している場合は、エリックスザンヌのTrueをチェックしてください。完全なSASSテストフレームワークとして、グローバルユニットテストインフラストラクチャにより適しています。 ('a', red, 42px')

（コードの少し高度なバージョン）を表示したい場合、Sassytesterリポジトリを開いてすべてを収集しました。

それで、あなたはどう思いますか？

SASS関数のテスト（FAQ）

FAQ

SASS関数をテストすることの重要性は何ですか？

SASS関数のテストは、CSSプリプロセッサの機能と効率を保証するため、Web開発において重要です。バグを特定して修正し、サイトのパフォーマンスを改善し、SASS機能が期待どおりに機能するようにします。 SASS機能をテストすることにより、さまざまなブラウザとプラットフォームでWebサイトの設計とレイアウトが一貫していることを確認できます。

SASS関数をテストする方法は？

さまざまなツールとメソッドを使用して、SASS機能をテストできます。一般的なアプローチは、TrueなどのSASSテストフレームワークを使用することです。 Trueは、SASSプロジェクトと統合する単体テストツールです。 SASSファイルに直接テストを作成することができ、node.jsまたは任意のWebブラウザーで実行できます。

SASS関数をテストするためのベストプラクティスは何ですか？

SASS関数のテストのためのいくつかのベストプラクティスには、各関数のテストの書き込み、テストの一貫した命名規則を使用し、テストがすべての可能なシナリオをカバーすることを保証することが含まれます。また、テストを定期的に実行し、機能を変更する際に必要に応じてテストを更新することも重要です。

JavaScriptを使用してSASS関数をテストできますか？

はい、JavaScriptを使用してSASS関数をテストできます。 Jestなどのツールを使用して、SASS機能をテストできます。 Jestは、シンプルで明確な構文でテストを作成できるJavaScriptテストフレームワークです。

SASS関数のテストにおける一般的な課題は何ですか？

SASS関数のテストにおけるいくつかの一般的な課題には、複雑な関数の処理、依存関係の管理、クロスブラウザーの互換性の確保が含まれます。これらの課題は、強力なテストフレームワークを使用して克服し、明確で簡潔なテストを作成し、テストを定期的にチェックおよび更新することができます。

SASSテストスキルを向上させる方法は？

定期的に練習し、他の人のコードを読んで学習し、SASSテストの最新のトレンドとベストプラクティスを理解することで、SASSテストスキルを向上させることができます。コーディングの課題に参加し、オープンソースプロジェクトに貢献することは、スキルの向上にも役立ちます。

Web開発におけるSASSの役割は何ですか？

SASSは、CSSをより強く維持しやすくすることにより、Web開発において重要な役割を果たします。変数、ネスト、ミキサー、機能などの機能を提供し、より効率的で再利用可能なCSSコードの書き込みに役立ちます。

SASS関数をデバッグする方法は？

さまざまなツールとテクニックを使用して、SASS関数をデバッグできます。一般的なアプローチは、SASS

関数を使用することです。これにより、SASS式の値を確認できます。また、SASS式の式の値をコンソールに印刷するSASSinspectディレクティブを使用することもできます。 @debug

テストフレームワークなしでSASS関数をテストできますか？

SASS関数はテストフレームワークなしでテストできますが、これは推奨されません。テストフレームワークは、テストに対する構造化された体系的なアプローチを提供し、テストの書き込み、管理、実行が容易になります。

SASSテストフレームワークを使用することの利点は何ですか？

SASSテストフレームワークを使用すると、多くの利点があります。構造化された体系的な方法でテストを作成し、テストの管理と実行を容易にすることができます。また、アサーション機能やテストランナーなど、より効率的なテストの作成に役立つツールと機能も提供します。

以上が5分でSASS機能をテストしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。