在TypeScript專案中進行BDD測試

崔馳坤Richard發表於2022-04-02
TypeScript

在TypeScript專案中進行BDD測試

什麼是BDD?

BDD(Behavior-Driven Design)是軟體團隊的一種工作方式，通過以下方式縮小業務人員和技術人員之間的差距：

  • 鼓勵跨角色協作，建立對待解決問題的共同理解
  • 以快速、小迭代的方式工作，以增加反饋和價值流
  • 生成系統文件，自動對照系統行為進行檢查

我們通過將協作工作的重點放在具體的、真實的例子上來實現這一點，這些例子說明了我們希望系統如何執行。我們用這些例子來指導我們在持續合作的過程中從概念到實施。

Gherkin語法

BDD特性(Feature)描述採用Gherkin語法。Gherkin使用一組特殊的關鍵字為可執行規範提供結構和意義。每個關鍵詞都被翻譯成多種語言；在本參考資料中，我們將使用英語。

Cucumber是流行的BDD測試框架，支援各種平臺，其文件中的大多數行都以一個關鍵字開頭。
註釋僅允許出現在新行的開頭，即要素檔案中的任何位置。它們以零個或多個空格開頭，後跟雜湊符號（#）和一些文字。(Cucumber目前不支援區塊註釋。)

空格或製表符可用於縮排。建議的縮排級別為兩個空格。下面是一個例子：

Feature: Guess the word

  # The first example has two steps
  Scenario: Maker starts a game
    When the Maker starts a game
    Then the Maker waits for a Breaker to join

  # The second example has three steps
  Scenario: Breaker joins a game
    Given the Maker has started a game with the word "silky"
    When the Breaker joins the Maker's game
    Then the Breaker must guess a word with 5 characters

Gherkin語法具體可以參考Gherkin Reference - Cucumber Documentation

給TypeScript專案配置BDD測試框架Cucumber.js

  • 通過命令yarn add -D @cucumber/cucumber chai 安裝BDD測試框架Cucumber.js和斷言(Assert)框架chai。

  • 建立目錄features，在目錄下建立檔案bank-account.feature，內容如下：

    # features/bank-account.feature
Feature: Bank Account

  Scenario: Stores money
    Given A bank account with starting balance of $100
    When $100 is deposited
    Then The bank account balance should be $200

    此文件描述了存款場景，銀行存款賬戶有100美金，存入100美金，則賬戶應該有200美金。

  • 建立step-definitions\bank-account.steps.ts

    const { Given, Then, When} = require( '@cucumber/cucumber');
const { assert } = require( 'chai');

let accountBalance = 0;

Given('A bank account with starting balance of ${int}', function(amount) {
    accountBalance = amount;
});

When('${int} is deposited', function (amount) {
    accountBalance = Number(accountBalance) + Number(amount);
});

Then('The bank account balance should be ${int}', function(expectedAmount) {
    assert.equal(accountBalance, expectedAmount);
});

    我們需要建立與之對應的測試程式碼，程式碼將通過型別與特性檔案中輸入和輸出驗證進行對映，其中Given對應的方法將獲得100美金初始賬戶金額的對映，傳給accountBalance。在When對應的方法中，amount測試會獲得存入100美金的金額對映。最後，在Then對應的方法中expectedAmount會對映到200美金，用來驗證最後是否與accountBalance相等，如果相等斷言正常返回，否則BDD判斷測試Case失敗。

  • 我們可以通過命令yarn cucumber-js features\**\*.feature -r step-definitions\**\*.js執行測試。

  • 要想完成自動化配置，可以在工程根目錄下建立檔案cucumber.js，內容如下：

    // cucumber.js
let common = [
    'features/**/*.feature', // Specify our feature files
    '--require step-definitions/**/*.js', // Load step definitions
    '--format progress-bar', // Load custom formatter
].join(' ');
module.exports = {
    default: common
};

  • 再次執行命令yarn cucumber-js，通過cucumber.js檔案中的配置項，會自動找到feature檔案和步驟定義指令碼檔案，完成BDD測試工作。

參考：

相關文章