sass导入sass
The other day, I was playing with the include-media library from Eduardo Bouças and I wanted to quickly test a function I built so I started writing a little mixin to help me test a lot of different scenarios. After a couple of minutes, I came up with the most minimalistic Sass testing engine you could possibly get.
前几天，我正在使用EduardoBouças的include-media库，我想快速测试一下我构建的功能，因此我开始编写一些mixin来帮助我测试许多不同的场景。 几分钟后，我想到了您可能会得到的最简约的Sass测试引擎。
While this article might be slightly technical, I believe it can be helpful to many people as testing it should be the responsibility of every developer. Also, when going through things one after the other, you’ll see that it actually is not that difficult to understand.
尽管本文可能只是技术性文章，但我相信它对许多人都将有所帮助，因为测试它应该是每个开发人员的责任。 而且，当一个接一个地进行时，您会发现实际上并不难理解。
Everything starts with a function to test. For our purpose, I suggest we go with a very simple function. Let’s say, a function to double a number.
一切都始于要测试的功能。 为了我们的目的，我建议我们使用一个非常简单的功能。 假设是一个将数字加倍的函数。
@function double($value) { @return $value * 2; }Sounds simple enough. Although, and only for our demo concerns, we are going to voluntarily introduce a bug inside our function so that we can actually see that one of our tests fails.
听起来很简单。 尽管并且仅出于演示方面的考虑，我们还是会在函数内部自愿引入一个错误，以便我们实际上可以看到我们的测试之一失败了。
@function double($value) { // Voluntarily introduced bug for demonstration purpose @if $value == 3 { @return 5; } @return $value * 2; }You might find it surprising, but writing tests in our system is as simple as writing a Sass map where keys are function inputs, and values are expected results.
您可能会感到惊讶，但是在我们的系统中编写测试就像编写Sass映射一样简单，其中键是函数输入，而值是预期结果。
$tests-double: ( 1: 2, 2: 4, 3: 6, 4: 8 );That’s it! We’ve written our tests. Again: on the left side are the inputs, and on the right side the expected outputs.
而已！ 我们已经编写了测试。 同样：左侧是输入，右侧是预期输出。
So far, so good. We have built our function and we have written our tests. We now only need to create the test runner.
到目前为止，一切都很好。 我们已经建立了功能并编写了测试。 现在，我们只需要创建测试运行器即可。
If you are familiar with Sass, you might already understand where this is going. Our test runner is going to iterate on the test map, calling the function for each input and making sure that it matches the expected output. Then, it will print the result of our tests.
如果您熟悉Sass，您可能已经知道它的发展方向。 我们的测试运行器将在测试图上进行迭代，为每个输入调用该函数，并确保该函数与预期的输出匹配。 然后，它将打印我们的测试结果。
Here is what our test runner looks like:
这是我们的测试跑步者的样子：
/// Run a function ($function) on a test suite ($tests) /// @param {Map} $tests - Test suite /// @param {String} $function - Name of function to test @mixin run-tests($tests, $function) { .. }Alright. Let’s dig into the belly of the beast. The idea is to build a string with the result of each test, and once everything has been done, print the string with the @error directive. We could also pass it to the content property of a pseudo-element for instance, but it’s slightly more complex so we’ll stick to @error.
好的。 让我们深入研究一下野兽的腹部。 这个想法是用每个测试的结果构建一个字符串，完成所有操作后，使用@error指令打印该字符串。 例如，我们也可以将其传递给伪元素的content属性，但是它稍微复杂一些，因此我们将坚持使用@error 。
First thing to do is to iterate on the test suite. For each test, we dynamically call the function from its name (with the call(..) function) and we check if the result is as expected.
首先要做的是迭代测试套件。 对于每个测试，我们从其名称动态调用该函数(使用call(..)函数)，然后检查结果是否符合预期。
@mixin run-tests($tests, $function) { $output: ''; @each $test, $expected-result in $tests { $result: call($function, $test...); @if $result == $expected-result { // Test passed $output: $output + 'Test passed; '; } @else { // Test failed $output: $output + 'Test failed; '; } } // Print output @error $output; }At this point, we have our system working. Let’s run it on our test suite to see what it looks like.
至此，我们的系统开始运行了。 让我们在测试套件上运行它以查看其外观。
@include run-tests($tests-double); Test passed; Test passed; Test failed; Test passed;Hey! That’s a start right? Now we only need to make the output a bit more helpful (and friendly).
嘿! 那是一个开始吧？ 现在，我们只需要使输出更有用(更友好)即可。
This is the moment where you can customize the output to make it look like you want. There is no single way to do this, you can output whatever you prefer. Note that as per the CSS specification, you can have a line break in your string using \a.
此时，您可以自定义输出以使其看起来像您想要的。 没有单一的方法可以执行此操作，您可以输出任何您喜欢的内容。 请注意，根据CSS规范，您可以使用\a在字符串中使用换行符。
In my case, here is what I went with:
就我而言，这是我的追求：
@mixin run-tests($tests, $function) { $output: ''; $length: length($tests); $failing: 0; @each $test, $expected-result in $tests { $result: call($function, $test...); $test-index: index(map-keys($tests), $test); $output: $output + '\a Test #{$test-index} out of #{$length}... '; @if $result == $expected-result { // Test passed $output: $output + '✔'; } @else { // Test failed $failing: $failing + 1; $output: $output + '✘\a Expected : `#{$expected-result}`.\a Actual : `#{$result}`.'; } } // Print output @error 'Started tests for function `#{$function}`\a ' + '-----------------------------------' + $output + '\a ' + '-----------------------------------\a ' + 'Over: #{$length - $pass} test(s) out of #{$length} failing.'; }If we run it again over on our $tests-double for the double function, here is what we got:
如果我们再次在double函数的$tests-double上运行它，则得到的是：
Started tests for function `double` ----------------------------------- Test 1 out of 4... ✔ Test 2 out of 4... ✔ Test 3 out of 4... ✘ Expected : `6`. Actual : `5`. Test 4 out of 4... ✔ ----------------------------------- Over: 1 test(s) out of 4 failing.Now that’s pretty neat, isn’t it?
现在很整洁，不是吗？
In our example, our function had a single argument but we can rely on the fact that Sass maps accepts anything as keys (including lists) to test functions with several parameters as well. It would look like this:
在我们的示例中，我们的函数只有一个参数，但是我们可以依靠Sass映射接受任何东西作为键(包括列表)来测试具有多个参数的函数这一事实。 它看起来像这样：
@function my-function($string, $color, $length) { .. } $tests-my-function: ( ('a', red, 42px): 'My expected result', // ... );If you have a look back at our mixin, you’ll see that we add an ellipsis (...) to the $test variable when calling the function with call(..).
如果回头看一下我们的mixin，您会发现在使用call(..)调用函数时，我们在$test变量中添加了省略号( ... call(..) 。
$result: call($function, $test...);This means we pass the value $test as an arglist. In other words, if $test is a list (e.g. ('a', red, 42px)), then it will be passed as several arguments instead as a list.
这意味着我们将值$test作为arglist传递。 换句话说，如果$test是一个列表(例如('a', red, 42px) )，则它将作为几个参数而不是作为列表传递。
There you have it, folks: the most minimalistic Sass testing engine ever. This tiny testing system can come in very handy to test the few functions you could have in your project, especially if you plan on providing it to other developers (framework, library…). Also, I found out it is extremely convenient to quickly test a function on SassMeister. Just drop the mixin and your function there, and run your tests!
伙计们，您已经拥有了它：有史以来最简约的Sass测试引擎。 这个小巧的测试系统可以非常方便地测试项目中可能具有的少数功能，特别是如果您打算将其提供给其他开发人员(框架，库等)时，尤其如此。 另外，我发现在SassMeister上快速测试功能非常方便。 只需将mixin和您的函数放在那里，然后运行测试！
Of course if you are looking for more in-depth solution, you might want to have a look at True by Eric Suzanne. As a full testing framework for Sass, it is more suited for global unit test infrastructure.
当然，如果您正在寻找更深入的解决方案，则可能需要看看Eric Suzanne的True 。 作为Sass的完整测试框架，它更适合于全局单元测试基础结构。
If you want to have a look at (a slightly more advanced version of) the code, I opened the SassyTester repository to gather everything.
如果您想看一下代码(稍微高级一点的代码)，我打开了SassyTester存储库以收集所有内容。
So what do you think?
所以你怎么看？
翻译自: https://www.sitepoint.com/testing-sass-function-5-minutes/
sass导入sass
