測試SASS庫-js教程-PHP中文網

測試SASS庫

最近，我花了很多時間與Media一起與EduardoBouças合作。我們經歷了很多重構，因此決定編寫一些測試，並在每項承諾上運行它們，以確保我們沒有破壞任何東西。我將詳細介紹本文的詳細信息。

如果您還不知道媒體，那麼這是SASS中非常輕巧但功能強大的斷點經理。

>提供的公共API是單個Mixin，Media（..）（因此是庫的名稱），但是整個事情都經過了足夠的思考，因此您實際上可以為此做奇蹟。入門之前的一個簡短示例：

<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>

登入後複製

>現在相當不錯，不是嗎？

無論如何，

，所以我們想出了一個我想與你們分享的一些測試系統。當然，如果您想測試一個完整的框架，則可能需要從Eric Suzanne中使用True，而Eric Suzanne則是用Sass編寫的完整吹製測試框架，並在最近的SitePoint上的一篇文章中被David介紹和解釋。

有什麼想法？

>我們想在我們對存儲庫提交的任何時候對庫的主要私人功能進行一些測試。如果任何測試失敗，則該提交將中止，並且需要修復代碼以允許提交通過。這樣，我們確保我們可以在圖書館安全地工作而不會打破它的風險（通常是 bad

的事情）。實現類似的事情最終變得非常容易：我們在任何提交之前設置了a

> git

git掛鉤，以在libsass和ruby sass中進行測試。如果測試失敗，我們會殺死該過程。

測試SASS庫有不同的方法來運行Sass和Libsass。您可以使用二進製文件，也可以使用包裝紙。在我們的情況下，我們選擇了一個很小的散裝工作流程，使我們很容易運行Ruby Sass和Libsass。

>我們想要一些非常簡單的東西，因此使用Sassytester用SASS編寫測試，我最近在文章中介紹了5分鐘內測試SASS功能的文章。 Sassytester長約25行。測試功能僅輸出一個帶有測試結果的SASS映射。從那裡，我們可以對此做任何想做的事情。就我們的情況而言，如果測試失敗，我們想提出錯誤。為此，我們有來自SASS的@Error指令！

編譯SASS測試時，如果GULP任務遇到了SASS錯誤，則在投擲錯誤本身時退出該過程，該錯誤本身會彈出前簽名的掛鉤並最終中止了提交。

如果我們總結一下，那就這樣：

一個預先承諾的鉤子在提交上運行一個測試GULP任務
中編譯了SASS測試
>的錯誤

到目前為止，太好了？

設置測試體系結構

架構>單詞使它聽起來很大，而它實際上非常簡單。這是該項目的外觀：

<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>

登入後複製

畢竟不是那麼令人印象深刻，嗯？ GULP任務只需在測試文件夾中的所有文件上運行SASS引擎即可。這是函數-1.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>

登入後複製

最後但並非最不重要的一點是，我們需要重新定義運行（..），因為Sassytester的原始速度將輸出測試結果，無論是否通過是否通過。在我們的情況下，我們只想在發生錯誤時投擲。讓我們將其放在助手/_Output-formatter.scs.

>中

<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>

登入後複製

對於更高級的等效運行（..）mixin的更高級版本，請檢查Incless-Media。

Gulp Workflow

如果您想簡要介紹Gulp，請務必閱讀我最近的文章：Sass的簡單笨拙的工作流程。對於本節，我假設您熟悉Gulp。

我們需要三個任務：

一個可以在測試文件夾上運行libsass（使用Gulp-sass）

> 一個可以在測試文件夾上運行Ruby Sass（使用Gulp-ruby-sass）

一個運行兩個任務

und offfick fastuard faturoght fatal例外process.exit（1）我們自己。 >

添加預加入鉤

<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>

登入後複製

>有大量的庫可以設置前簽名的掛鉤。我個人喜歡預先提交的，但您基本上可以選擇自己喜歡的東西，因為它們都做或多或少。 > >要在我們的項目中添加預訂掛鉤，我們需要在包裝中創建一個預命令密鑰。該鍵映射到命令的數組。因此，我們還需要一個腳本對象，並帶有一個名為“測試”的密鑰，映射到Gulp命令：Gulp Test。

提交時，預先承諾的掛鉤會發射並嘗試執行測試NPM腳本。該腳本運行以下命令：Gulp Test，該腳本將Gulp插入測試。

就是這樣，我們已經完成了。

最終想法 如您所見，此示例非常簡單，但是它可以完成工作，並且做得很好。這是它的外觀：

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var rubySass = require('gulp-ruby-sass');
</span>
<span>// Run LibSass on the tests folder
</span><span>// Gulp automatically exits process in case of Sass error
</span>gulp<span>.task('test:libsass', function () {
</span>  <span>return gulp.src('./tests/*.scss')
</span>    <span>.pipe(plugins.sass());
</span><span>});
</span>
<span>// Run Ruby Sass on the tests folder
</span><span>// Gulp manually exits process in case of Sass error
</span>gulp<span>.task('test:ruby-sass', function () {
</span>  <span>return rubySass('./tests')
</span>    <span>.on('error', function (err) {
</span>      process<span>.exit(1);
</span>    <span>});
</span><span>});
</span>
gulp<span>.task('test', ['test:libsass', 'test:ruby-sass']);</span>

登入後複製

>你怎麼看？您可能會考慮將其添加到您的庫或框架中嗎？

以上是測試SASS庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！