SASSライブラリのテスト

最近、私はEduardoBouçasとcontermediaで働くのにかなりの時間を費やしました。私たちは多くのリファクタリングを経験したので、いくつかのテストを書き、何も壊れないことを確認するためにすべてのコミットでそれらを実行することにしました。この記事の詳細について説明します。

メディアをまだ知らない場合は、SASSの非常に軽量でありながら強力なブレークポイントマネージャーです。

提供されたパブリックAPIは、単一のミックス、メディア（..）（したがってライブラリの名前）ですが、全体が十分に考えられているので、実際に驚異を行うことができます。開始する前の短い例：

<span>.my-component {
</span><span>  <span>width: 100%;</span>
</span>
  <span>// On screens larger or equal to *small* breakpoint,
</span>  <span>// make the component floated and half the size
</span><span>  <span>@include media('≥small') {</span>
</span><span>    <span>float: left;</span>
</span><span>    <span>width: 50%;</span>
</span>  <span>}
</span><span>}</span>

今、それはかなりradですよね？

とにかく

ので、私たちは皆さんと共有したい小さなテストシステムを思いつきました。もちろん、フルフレームワークをテストする場合は、SASSのためにSASSで書かれた完全な吹き飛ばされたテストフレームワークであるEric SuzanneからTrueをSASSのTrueを使用することをお勧めします。

アイデアは何ですか？

リポジトリにコミットするたびに、ライブラリから主要なプライベート機能に関するいくつかのテストを実行したかったのです。テストが失敗した場合、コミットは中止され、コードを修正する必要があります。このようにして、私たちはそれを壊すことを危険にさらすことなくライブラリで安全に作業できることを確認します（これは通常、悪いのことです）。 このようなことを達成することは驚くほど簡単になりました。 git

gitフックを設定して、libsassとrubyの両方のサスでテストを実行する前にテストを実行します。テストが失敗している場合、プロセスを殺します。

SASSとLibsassを実行するにはさまざまな方法があります。バイナリを使用するか、ラッパーを使用できます。私たちの場合、私たちは小さなガルプワークフローを選択し、Ruby SassとLibsassの両方を簡単に実行できます。 非常にシンプルなものが欲しかったので、サッシテスターを使用してサスでテストが書かれています。これは、5分でSASS機能をテストする記事で最近紹介しました。サッシテスターの長さは約25行です。テスト関数は、テストの結果を含むSASSマップのみを出力します。そこから、私たちはそれを使ってやりたいことは何でもできます。私たちの場合、テストが失敗した場合はエラーをスローする必要があります。そうするために、sass！

から@errorディレクティブがあります。 これを要約すると、次のようになります：

1. commit前のフックは、コミットでテストのgulpタスクを実行します
2. テストのガルプタスクは、libsassとruby sassの両方でサステストをコンパイルします
3. テストが失敗した場合、sassは@error
でエラーをスローします
4. サスエラーはガルプによってキャッチされます。
gulpエラーは、コミットを中止する事前コミットフックによってキャッチされます

これまでのところ、とても良いですか？

テストアーキテクチャのセットアップ

アーキテクチャ単語は、実際には非常にシンプルですが、非常に大きく聞こえます。プロジェクトがどのように見えるかは次のとおりです

結局のところ、それほど印象的ではありませんか？ GULPタスクは、テストフォルダー内のすべてのファイルでSASSエンジンを単純に実行します。 function-1.scssがどのように見えるかは次のとおりです

<span>.my-component {
</span><span>  <span>width: 100%;</span>
</span>
  <span>// On screens larger or equal to *small* breakpoint,
</span>  <span>// make the component floated and half the size
</span><span>  <span>@include media('≥small') {</span>
</span><span>    <span>float: left;</span>
</span><span>    <span>width: 50%;</span>
</span>  <span>}
</span><span>}</span>

最後になりましたが、最後になりましたが、Sassytesterの元のものはすべてが合格しても@errorでテストの結果を出力するため、実行（..）を再定義する必要があります。私たちの場合、エラーがある場合にのみスローしたいと考えています。ヘルパー/_output-formatter.scss。

に入れてみましょう

dist/
<span>|
</span><span>|- my-sass-library.scss
</span><span>|
</span>tests/
<span>|
</span><span>|- helpers/
</span><span>|   |- _SassyTester.scss
</span><span>|   |- _custom-formatter.scss
</span><span>|
</span><span>|- function-1.scss
</span><span>|- function-2.scss
</span><span>|- ...</span>

より高度なバージョンの等価バージョン（..）ミキシンについては、include-mediaから1つを確認してください。

gulpワークフロー

<span>// Import the library to test (or only the function if you can)
</span><span><span>@import '../dist/my-sass-library';</span>
</span>
<span>// Import the tester
</span><span><span>@import 'helpers/SassyTester';</span>
</span>
<span>// Import the custom formatter
</span><span><span>@import 'helpers/custom-formatter';</span>
</span>
<span>// Write the tests
</span><span>// See my previous article to know more about this:
</span><span>// http://...
</span><span><span>$tests-function-1: ( ... );</span>
</span>
<span>// Run the tests
</span><span><span>@include run(test('function-1', $tests-function-1));</span></span>

Gulpの短い紹介が必要な場合は、最近の記事について必ず読んでください：SASS用のシンプルなガルピーワークフロー。このセクションでは、Gulpに精通していると仮定します

3つのタスクが必要です

テストフォルダーでlibsassを実行する1つ（gulp-sassを使用）

テストフォルダーでRuby Sassを実行する1つ（Gulp-Ruby-Sassを使用）

1つは、2つの前のタスクを実行します

理想的には、SASSがエラーをスローする場合（エラーが組み込まれているため、または@errorのため）、Gulpは適切に終了する必要があります。残念ながら、まだ修正されていないGulp-Ruby-Sassでこれについて問題があります。Ruby Sassの場合、Process.Exit（1）自分自身を使用してノード
• exitを使用する必要があります。 >
事前にコミットフックを追加
事前にコミットのフックをセットアップするライブラリがたくさんあります。私は個人的には事前に好きですが、基本的にあなたは好きなものを選択することができます。

プロジェクトに事前コミットフックを追加するには、Package.jsonに事前コミットキーを作成する必要があります。このキーは、

<span>// We overwrite the `run(..)` mixin from SassyTester to make it throw
</span><span>// an `@error` only if a test fails. The only argument needed by the
</span><span>// `run(..)` mixin is the return of `test(..)` function from SassyTester.
</span><span>// You can check what `$data` looks like in SassyTester documentation:
</span><span>// http://kittygiraudel.com/SassyTester/#function-test
</span><span><span>@mixin run($data) {</span>
</span><span>  <span>$tests: map-get($data, 'tests');</span>
</span>
<span>  <span>@each $test in $tests {</span>
</span><span>    <span>@if map-get($test, 'fail') {</span>
</span><span>      <span>@error 'Failing test!</span>
</span><span>        <span>Expected : #{map-get($test, 'expected')}</span>
</span><span>        <span>Actual   : #{map-get($test, 'actual')}';</span>
</span>    <span>}
</span>  <span>}
</span><span>}</span>

npmスクリプト

コマンドの配列にマッピングされます。したがって、gulpコマンドにマッピングされたテストという名前のキーを備えたスクリプトオブジェクトも必要です：gulpテスト。 コミットする際には、コミット前のフックが発射され、テストNPMスクリプトを実行しようとします。このスクリプトは、次のコマンドを実行します：Gulp Testは、テストを実行するためにGulpを推測します。

それだけです、私たちは完了です。

最終的な考え

この例はご覧のとおり非常に単純化されていますが、ジョブを行い、うまく機能します。これがどのように見えるかもしれませんか：

それで、あなたはどう思いますか？これはあなたがあなたのライブラリやフレームワークに追加することを検討するかもしれないものですか？

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