核心要點(diǎn)

• Sass 函數(shù)測(cè)試可通過創(chuàng)建虛擬函數(shù)、編寫測(cè)試用例、創(chuàng)建測(cè)試運(yùn)行器和自定義輸出結(jié)果來(lái)完成。這可以使用極簡(jiǎn)的 Sass 測(cè)試引擎實(shí)現(xiàn)，用于在不同場(chǎng)景下測(cè)試函數(shù)。
• 使用 Sass 映射可以測(cè)試具有多個(gè)參數(shù)的函數(shù)，Sass 映射可以接受任何內(nèi)容作為鍵，包括列表。這允許測(cè)試具有多個(gè)參數(shù)的函數(shù)。
• 雖然這個(gè)極簡(jiǎn)的測(cè)試系統(tǒng)對(duì)于測(cè)試少量函數(shù)非常方便，但對(duì)于更深入的解決方案，更適合使用完整的 Sass 測(cè)試框架，例如 Eric Suzanne 的 True。

我前幾天在使用 Eduardo Bou?as 的 include-media 庫(kù)時(shí)，想快速測(cè)試自己構(gòu)建的一個(gè)函數(shù)，因此開始編寫一個(gè)小混合器來(lái)幫助我測(cè)試許多不同的場(chǎng)景。幾分鐘后，我想出了一個(gè)盡可能極簡(jiǎn)的 Sass 測(cè)試引擎。

雖然這篇文章可能略微技術(shù)性強(qiáng)一些，但我相信它對(duì)很多人都有幫助，因?yàn)闇y(cè)試應(yīng)該是每個(gè)開發(fā)人員的責(zé)任。此外，逐一了解這些內(nèi)容后，您會(huì)發(fā)現(xiàn)它實(shí)際上并不難理解。

創(chuàng)建用于測(cè)試的虛擬函數(shù)

一切始于要測(cè)試的函數(shù)。為了我們的目的，我建議我們使用一個(gè)非常簡(jiǎn)單的函數(shù)。比如，一個(gè)用于將數(shù)字加倍的函數(shù)。

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

聽起來(lái)很簡(jiǎn)單。但是，僅僅出于我們的演示目的，我們將在函數(shù)中故意引入一個(gè)錯(cuò)誤，以便我們實(shí)際看到我們的一個(gè)測(cè)試失敗了。

@function double($value) {
  // 為了演示目的而故意引入的錯(cuò)誤
  @if $value == 3 {
    @return 5;
  }

  @return $value * 2;
}

編寫測(cè)試用例

您可能會(huì)覺得很驚訝，但在我們的系統(tǒng)中編寫測(cè)試用例就像編寫一個(gè) Sass 映射一樣簡(jiǎn)單，其中鍵是函數(shù)輸入，值是預(yù)期結(jié)果。

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

就是這樣！我們已經(jīng)編寫了測(cè)試用例。再次強(qiáng)調(diào)：左側(cè)是輸入，右側(cè)是預(yù)期輸出。

測(cè)試運(yùn)行器

到目前為止，一切順利。我們已經(jīng)構(gòu)建了我們的函數(shù)，并且已經(jīng)編寫了測(cè)試用例。我們現(xiàn)在只需要?jiǎng)?chuàng)建測(cè)試運(yùn)行器。

如果您熟悉 Sass，您可能已經(jīng)理解了這一點(diǎn)。我們的測(cè)試運(yùn)行器將迭代測(cè)試映射，為每個(gè)輸入調(diào)用函數(shù)，并確保它與預(yù)期輸出匹配。然后，它將打印我們的測(cè)試結(jié)果。

以下是我們的測(cè)試運(yùn)行器的樣子：

/// 在測(cè)試套件 ($tests) 上運(yùn)行函數(shù) ($function)
/// @param {Map} $tests - 測(cè)試套件
/// @param {String} $function - 要測(cè)試的函數(shù)名稱
@mixin run-tests($tests, $function) { .. }

好了。讓我們深入了解一下這個(gè)“野獸”的內(nèi)部。其思想是使用每個(gè)測(cè)試的結(jié)果構(gòu)建一個(gè)字符串，一旦所有操作都完成，就使用 @error 指令打印該字符串。例如，我們也可以將其傳遞給偽元素的 content 屬性，但這稍微復(fù)雜一些，因此我們將堅(jiān)持使用 @error。

首先要做的是迭代測(cè)試套件。對(duì)于每個(gè)測(cè)試，我們根據(jù)其名稱動(dòng)態(tài)調(diào)用函數(shù)（使用 call(...) 函數(shù)），并檢查結(jié)果是否符合預(yù)期。

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

此時(shí)，我們的系統(tǒng)正在運(yùn)行。讓我們?cè)谖覀兊臏y(cè)試套件上運(yùn)行它，看看它是什么樣子。

@function double($value) {
  // 為了演示目的而故意引入的錯(cuò)誤
  @if $value == 3 {
    @return 5;
  }

  @return $value * 2;
}

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

嘿！這是一個(gè)開始，對(duì)吧？現(xiàn)在我們只需要使輸出更有用（和更友好）。

改進(jìn)輸出

這是您可以自定義輸出以使其看起來(lái)像您想要的樣子的時(shí)候。沒有單一的方法可以做到這一點(diǎn)，您可以輸出任何您喜歡的輸出。請(qǐng)注意，根據(jù) CSS 規(guī)范，您可以使用 a 在字符串中換行。

在我的例子中，這就是我所選擇的：

/// 在測(cè)試套件 ($tests) 上運(yùn)行函數(shù) ($function)
/// @param {Map} $tests - 測(cè)試套件
/// @param {String} $function - 要測(cè)試的函數(shù)名稱
@mixin run-tests($tests, $function) { .. }

如果我們?cè)俅卧?$tests-double 上針對(duì) double 函數(shù)運(yùn)行它，這就是我們得到的結(jié)果：

@mixin run-tests($tests, $function) {
  $output: '';

  @each $test, $expected-result in $tests {
    $result: call($function, $test...);

    @if $result == $expected-result {
      // 測(cè)試通過
      $output: $output + 'Test passed; ';
    } @else {
      // 測(cè)試失敗
      $output: $output + 'Test failed; ';
    }
  }

  // 打印輸出
  @error $output;
}

現(xiàn)在這很整潔，不是嗎？

測(cè)試具有多個(gè)參數(shù)的函數(shù)

在我們的示例中，我們的函數(shù)只有一個(gè)參數(shù)，但我們可以依賴于 Sass 映射接受任何內(nèi)容作為鍵（包括列表）這一事實(shí)來(lái)測(cè)試具有多個(gè)參數(shù)的函數(shù)。它看起來(lái)像這樣：

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

如果您回顧我們的混合器，您會(huì)看到當(dāng)使用 call(...) 調(diào)用函數(shù)時(shí)，我們?cè)?$test 變量中添加了省略號(hào) (...)。

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

這意味著我們將 $test 值作為參數(shù)列表傳遞。換句話說，如果 $test 是一個(gè)列表（例如 ('a', red, 42px')），則它將作為多個(gè)參數(shù)而不是列表傳遞。

最終想法

就是這樣，朋友們：有史以來(lái)最小的 Sass 測(cè)試引擎。這個(gè)微小的測(cè)試系統(tǒng)可以非常方便地測(cè)試您項(xiàng)目中可能具有的少量函數(shù)，特別是如果您計(jì)劃將其提供給其他開發(fā)人員（框架、庫(kù)……）。此外，我發(fā)現(xiàn)它在 SassMeister 上快速測(cè)試函數(shù)非常方便。只需將混合器和您的函數(shù)放在那里，然后運(yùn)行您的測(cè)試！

當(dāng)然，如果您正在尋找更深入的解決方案，您可能想看看 Eric Suzanne 的 True。作為一個(gè)完整的 Sass 測(cè)試框架，它更適合全局單元測(cè)試基礎(chǔ)設(shè)施。

如果您想查看（稍微高級(jí)一些版本的）代碼，我已經(jīng)開放了 SassyTester 存儲(chǔ)庫(kù)來(lái)收集所有內(nèi)容。

那么您認(rèn)為如何呢？

關(guān)于測(cè)試 SASS 函數(shù)的常見問題解答 (FAQ)

測(cè)試 SASS 函數(shù)的重要性是什么？

測(cè)試 SASS 函數(shù)在 Web 開發(fā)中至關(guān)重要，因?yàn)樗梢源_保 CSS 預(yù)處理器的功能和效率。它有助于識(shí)別和修復(fù)錯(cuò)誤，提高網(wǎng)站性能，并確保 SASS 函數(shù)按預(yù)期工作。通過測(cè)試 SASS 函數(shù)，您可以確保您的網(wǎng)站設(shè)計(jì)和布局在不同的瀏覽器和平臺(tái)上保持一致。

如何測(cè)試 SASS 函數(shù)？

可以使用各種工具和方法來(lái)測(cè)試 SASS 函數(shù)。一種常見的方法是使用 SASS 測(cè)試框架，例如 True。True 是一種單元測(cè)試工具，可以與您的 SASS 項(xiàng)目集成。它允許您直接在 SASS 文件中編寫測(cè)試，然后可以在 Node.js 或任何 Web 瀏覽器中運(yùn)行這些測(cè)試。

測(cè)試 SASS 函數(shù)的最佳實(shí)踐是什么？

測(cè)試 SASS 函數(shù)的一些最佳實(shí)踐包括為每個(gè)函數(shù)編寫測(cè)試，對(duì)測(cè)試使用一致的命名約定，并確保測(cè)試涵蓋所有可能的場(chǎng)景。在對(duì)函數(shù)進(jìn)行更改時(shí)，定期運(yùn)行測(cè)試并根據(jù)需要更新測(cè)試也很重要。

我可以使用 JavaScript 測(cè)試 SASS 函數(shù)嗎？

是的，可以使用 JavaScript 測(cè)試 SASS 函數(shù)?？梢允褂弥T如 Jest 之類的工具來(lái)測(cè)試您的 SASS 函數(shù)。Jest 是一個(gè) JavaScript 測(cè)試框架，允許您以簡(jiǎn)單明了的語(yǔ)法編寫測(cè)試。

測(cè)試 SASS 函數(shù)的常見挑戰(zhàn)是什么？

測(cè)試 SASS 函數(shù)的一些常見挑戰(zhàn)包括處理復(fù)雜函數(shù)、管理依賴項(xiàng)以及確保跨瀏覽器兼容性?？梢允褂脧?qiáng)大的測(cè)試框架、編寫清晰簡(jiǎn)潔的測(cè)試以及定期檢查和更新測(cè)試來(lái)克服這些挑戰(zhàn)。

如何提高我的 SASS 測(cè)試技能？

可以通過定期練習(xí)、閱讀和學(xué)習(xí)他人的代碼以及了解 SASS 測(cè)試的最新趨勢(shì)和最佳實(shí)踐來(lái)提高您的 SASS 測(cè)試技能。參與編碼挑戰(zhàn)和為開源項(xiàng)目做出貢獻(xiàn)也有助于提高您的技能。

SASS 在 Web 開發(fā)中的作用是什么？

SASS 通過使 CSS 更強(qiáng)大和更易于維護(hù)而在 Web 開發(fā)中發(fā)揮著至關(guān)重要的作用。它提供諸如變量、嵌套、混合器和函數(shù)之類的功能，這有助于編寫更高效且可重用的 CSS 代碼。

如何調(diào)試 SASS 函數(shù)？

可以使用各種工具和技術(shù)來(lái)調(diào)試 SASS 函數(shù)。一種常見的方法是使用 SASS inspect 函數(shù)，它允許您檢查 SASS 表達(dá)式的值。您還可以使用 SASS @debug 指令，它將 SASS 表達(dá)式的值打印到控制臺(tái)。

我可以在沒有測(cè)試框架的情況下測(cè)試 SASS 函數(shù)嗎？

雖然可以在沒有測(cè)試框架的情況下測(cè)試 SASS 函數(shù)，但不建議這樣做。測(cè)試框架提供了一種結(jié)構(gòu)化和系統(tǒng)化的測(cè)試方法，使編寫、管理和運(yùn)行測(cè)試更容易。

使用 SASS 測(cè)試框架的好處是什么？

使用 SASS 測(cè)試框架提供了許多好處。它允許您以結(jié)構(gòu)化和系統(tǒng)化的方式編寫測(cè)試，使管理和運(yùn)行測(cè)試更容易。它還提供可以幫助編寫更有效測(cè)試的工具和功能，例如斷言函數(shù)和測(cè)試運(yùn)行器。

以上是在5分鐘內(nèi)測(cè)試SASS功能的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！