先前我們寫的測試案例程式碼, 有很多test 裡面的程式碼都一樣

test('buy 1 book', () => {
   let bookstore = new Bookstore();
   expect(bookstore.getPrice(1)).toEqual(100); 
});

test('buy 2 books', () => {
   let bookstore = new Bookstore();
   expect(bookstore.getPrice(2)).toEqual(190); 
});

test('buy 3 books', () => {
   let bookstore = new Bookstore();
   expect(bookstore.getPrice(3)).toEqual(270);
});

參數化測試

寫了很多測試之後, 你會發現如果要針對某個 method 進行種不同情境的測試, 僅差在不同的參數來多次驗證結果.

我們需要解決這個問題, 後端軟體開發的人一定都知道NUnit 測試框架, 有提供參數化測試功能, TestCase Attribute 可以解決這個問題.

另外還有一套Specflow 套件, 提供數據表(Table) 功能, 它可以用將數據表(Table)定義為將值列表傳遞給測試程式的方法, 使用管道字符 | 來分隔列名稱和值.

Specflow 的Table 測試案例如下

When User enter credentials
| Key      | Value      |
| Username | testuser_1 |
| Password | Test@123   |

但在前端這邊我是用jest-each 套件, 打開VSCode Terminal 視窗, 輸入下面指令安裝

yarn add -D jest-each

安裝好jest-each 套件之後, 就可以將上面的原本的測試案例程式碼改成進行參數化測試.

import each from "jest-each";

each`
  books          | expectedPrice
  ${1}           | ${100}
  ${2}           | ${190}
  ${3}           | ${270}
  ${4}           | ${320}
  ${5}           | ${375}
  ${6}           | ${450}
`.test("buy $books books", ({books, expectedPrice}) => {
   let bookstore = new Bookstore();
   expect(bookstore.getPrice(books)).toEqual(expectedPrice); 
});

jest-each 套件提供了 each 方法, 你可以在裡面填寫需要的測試資料, 每一個參數名稱以 | 符號做分割, 然後資料用 ${ } 前後包在一起

這樣一來就可以減少測試程式碼, 測試案例也更清楚.

Debug 測試案例

在測試案例中我們有可能遇到紅燈, 但當實作的程式碼邏輯非常複雜的時候, 我們會需要進行Debug , 首先在VSCode 點取左邊第四個Icon

再選取功能表上的齒輪設定 新增json 內容如下

{
   "type": "node",
   "request": "launch",
   "name": "Jest All",
   "program": "${workspaceFolder}/node_modules/.bin/jest",
   "args": ["--runInBand"],
   "console": "integratedTerminal",
   "internalConsoleOptions": "neverOpen",
   "disableOptimisticBPs": true,
   "windows": {
      "program": "${workspaceFolder}/node_modules/jest/bin/jest"
   }
},
{
   "type": "node",
   "request": "launch",
   "name": "Jest Current File",
   "program": "${workspaceFolder}/node_modules/.bin/jest",
   "args": ["${fileBasenameNoExtension}", "--config", "jest.config.js"],
   "console": "integratedTerminal",
   "internalConsoleOptions": "neverOpen",
   "disableOptimisticBPs": true,
   "windows": {
      "program": "${workspaceFolder}/node_modules/jest/bin/jest"
   }
}

然後在你的原始碼檔案中, 游標移到你想要設定debug 斷點的那一行, 按下快速鍵F9 即可設定, 或是用滑鼠在那一行最左邊的行數點一下也能設定debug 斷點. 然後再按下F5 開始進行Debug 之旅.

回到剛剛我們實作getPrice 程式碼地方

class Bookstore {
   getPrice(books: number): number {
      if( books == 2 ) {
         return 190;
      }
      if( books == 3 ) {
         return 270;
      }
      if( books == 4 ) {
         return 320;
      }
      if( books == 5 ) {
         return 375;
      }
      if( books >= 6 ) {
         return books * 100 * 0.75;
      }
      return 100;
   }
}

在軟體開發過程中, 常常面臨多個條件判斷的情况, 如果不加思索就寫程式碼, 很容易出現一堆if else 的程式碼, 導致超長的函式內容, 除了程式碼邏輯不清晰, 可閱讀性也差.

想要消滅很多個if else 敘述程式碼, 有幾個方法

• 提前return
• 用Dictionary 替代 if else
• 用物件多型 替代 if else
• 用責任鏈模式 替代 if else