测试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中文网其他相关文章！