在5分钟内测试SASS功能

核心要点

• Sass 函数测试可通过创建虚拟函数、编写测试用例、创建测试运行器和自定义输出结果来完成。这可以使用极简的 Sass 测试引擎实现，用于在不同场景下测试函数。
• 使用 Sass 映射可以测试具有多个参数的函数，Sass 映射可以接受任何内容作为键，包括列表。这允许测试具有多个参数的函数。
• 虽然这个极简的测试系统对于测试少量函数非常方便，但对于更深入的解决方案，更适合使用完整的 Sass 测试框架，例如 Eric Suzanne 的 True。

我前几天在使用 Eduardo Bouças 的 include-media 库时，想快速测试自己构建的一个函数，因此开始编写一个小混合器来帮助我测试许多不同的场景。几分钟后，我想出了一个尽可能极简的 Sass 测试引擎。

虽然这篇文章可能略微技术性强一些，但我相信它对很多人都有帮助，因为测试应该是每个开发人员的责任。此外，逐一了解这些内容后，您会发现它实际上并不难理解。

创建用于测试的虚拟函数

一切始于要测试的函数。为了我们的目的，我建议我们使用一个非常简单的函数。比如，一个用于将数字加倍的函数。

@function double($value) {
  @return $value * 2;
}

听起来很简单。但是，仅仅出于我们的演示目的，我们将在函数中故意引入一个错误，以便我们实际看到我们的一个测试失败了。

@function double($value) {
  // 为了演示目的而故意引入的错误
  @if $value == 3 {
    @return 5;
  }

  @return $value * 2;
}

编写测试用例

您可能会觉得很惊讶，但在我们的系统中编写测试用例就像编写一个 Sass 映射一样简单，其中键是函数输入，值是预期结果。

$tests-double: (
  1: 2,
  2: 4,
  3: 6,
  4: 8
);

就是这样！我们已经编写了测试用例。再次强调：左侧是输入，右侧是预期输出。

测试运行器

到目前为止，一切顺利。我们已经构建了我们的函数，并且已经编写了测试用例。我们现在只需要创建测试运行器。

如果您熟悉 Sass，您可能已经理解了这一点。我们的测试运行器将迭代测试映射，为每个输入调用函数，并确保它与预期输出匹配。然后，它将打印我们的测试结果。

以下是我们的测试运行器的样子：

/// 在测试套件 ($tests) 上运行函数 ($function)
/// @param {Map} $tests - 测试套件
/// @param {String} $function - 要测试的函数名称
@mixin run-tests($tests, $function) { .. }

好了。让我们深入了解一下这个“野兽”的内部。其思想是使用每个测试的结果构建一个字符串，一旦所有操作都完成，就使用 @error 指令打印该字符串。例如，我们也可以将其传递给伪元素的 content 属性，但这稍微复杂一些，因此我们将坚持使用 @error。

首先要做的是迭代测试套件。对于每个测试，我们根据其名称动态调用函数（使用 call(...) 函数），并检查结果是否符合预期。

@function double($value) {
  @return $value * 2;
}

此时，我们的系统正在运行。让我们在我们的测试套件上运行它，看看它是什么样子。

@function double($value) {
  // 为了演示目的而故意引入的错误
  @if $value == 3 {
    @return 5;
  }

  @return $value * 2;
}

$tests-double: (
  1: 2,
  2: 4,
  3: 6,
  4: 8
);

嘿！这是一个开始，对吧？现在我们只需要使输出更有用（和更友好）。

改进输出

这是您可以自定义输出以使其看起来像您想要的样子的时候。没有单一的方法可以做到这一点，您可以输出任何您喜欢的输出。请注意，根据 CSS 规范，您可以使用 a 在字符串中换行。

在我的例子中，这就是我所选择的：

/// 在测试套件 ($tests) 上运行函数 ($function)
/// @param {Map} $tests - 测试套件
/// @param {String} $function - 要测试的函数名称
@mixin run-tests($tests, $function) { .. }

如果我们再次在 $tests-double 上针对 double 函数运行它，这就是我们得到的结果：

@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;
}

现在这很整洁，不是吗？

测试具有多个参数的函数

在我们的示例中，我们的函数只有一个参数，但我们可以依赖于 Sass 映射接受任何内容作为键（包括列表）这一事实来测试具有多个参数的函数。它看起来像这样：

@include run-tests($tests-double);

如果您回顾我们的混合器，您会看到当使用 call(...) 调用函数时，我们在 $test 变量中添加了省略号 (...)。

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

这意味着我们将 $test 值作为参数列表传递。换句话说，如果 $test 是一个列表（例如 ('a', red, 42px')），则它将作为多个参数而不是列表传递。

最终想法

就是这样，朋友们：有史以来最小的 Sass 测试引擎。这个微小的测试系统可以非常方便地测试您项目中可能具有的少量函数，特别是如果您计划将其提供给其他开发人员（框架、库……）。此外，我发现它在 SassMeister 上快速测试函数非常方便。只需将混合器和您的函数放在那里，然后运行您的测试！

当然，如果您正在寻找更深入的解决方案，您可能想看看 Eric Suzanne 的 True。作为一个完整的 Sass 测试框架，它更适合全局单元测试基础设施。

如果您想查看（稍微高级一些版本的）代码，我已经开放了 SassyTester 存储库来收集所有内容。

那么您认为如何呢？

关于测试 SASS 函数的常见问题解答 (FAQ)

测试 SASS 函数的重要性是什么？

测试 SASS 函数在 Web 开发中至关重要，因为它可以确保 CSS 预处理器的功能和效率。它有助于识别和修复错误，提高网站性能，并确保 SASS 函数按预期工作。通过测试 SASS 函数，您可以确保您的网站设计和布局在不同的浏览器和平台上保持一致。

如何测试 SASS 函数？

可以使用各种工具和方法来测试 SASS 函数。一种常见的方法是使用 SASS 测试框架，例如 True。True 是一种单元测试工具，可以与您的 SASS 项目集成。它允许您直接在 SASS 文件中编写测试，然后可以在 Node.js 或任何 Web 浏览器中运行这些测试。

测试 SASS 函数的最佳实践是什么？

测试 SASS 函数的一些最佳实践包括为每个函数编写测试，对测试使用一致的命名约定，并确保测试涵盖所有可能的场景。在对函数进行更改时，定期运行测试并根据需要更新测试也很重要。

我可以使用 JavaScript 测试 SASS 函数吗？

是的，可以使用 JavaScript 测试 SASS 函数。可以使用诸如 Jest 之类的工具来测试您的 SASS 函数。Jest 是一个 JavaScript 测试框架，允许您以简单明了的语法编写测试。

测试 SASS 函数的常见挑战是什么？

测试 SASS 函数的一些常见挑战包括处理复杂函数、管理依赖项以及确保跨浏览器兼容性。可以使用强大的测试框架、编写清晰简洁的测试以及定期检查和更新测试来克服这些挑战。

如何提高我的 SASS 测试技能？

可以通过定期练习、阅读和学习他人的代码以及了解 SASS 测试的最新趋势和最佳实践来提高您的 SASS 测试技能。参与编码挑战和为开源项目做出贡献也有助于提高您的技能。

SASS 在 Web 开发中的作用是什么？

SASS 通过使 CSS 更强大和更易于维护而在 Web 开发中发挥着至关重要的作用。它提供诸如变量、嵌套、混合器和函数之类的功能，这有助于编写更高效且可重用的 CSS 代码。

如何调试 SASS 函数？

可以使用各种工具和技术来调试 SASS 函数。一种常见的方法是使用 SASS inspect 函数，它允许您检查 SASS 表达式的值。您还可以使用 SASS @debug 指令，它将 SASS 表达式的值打印到控制台。

我可以在没有测试框架的情况下测试 SASS 函数吗？

虽然可以在没有测试框架的情况下测试 SASS 函数，但不建议这样做。测试框架提供了一种结构化和系统化的测试方法，使编写、管理和运行测试更容易。

使用 SASS 测试框架的好处是什么？

使用 SASS 测试框架提供了许多好处。它允许您以结构化和系统化的方式编写测试，使管理和运行测试更容易。它还提供可以帮助编写更有效测试的工具和功能，例如断言函数和测试运行器。

以上是在5分钟内测试SASS功能的详细内容。更多信息请关注PHP中文网其他相关文章！