測試驅動開發(TDD) JS and Vue3 範例

tags: JavaScript Vue Testing

category: Front-End

description: TDD - JS and Vue3 範例

created_at: 2022/09/28 13:00:00

前言

這份簡報為 2022/09/28 在交大資工戊組分享的簡報。

分享的主題為：軟體測試 以 JavaScript 與 Vue 3 為例

主要先粗淺帶過以往人工測試的方式與基本的如何使用程式做測試，中間在提到覆蓋率的計算方式，再帶入 TDD 的做法以及範例。

大多數 TDD 的範例都過於簡單(?)，可能不太曉得要怎麼轉換到實際上的專案上使用，所以後面的範例會從簡單的開始，在加上兩個在開發前端應該會用到的工具當作範例(Router、Pinia)，沒用過 Pinia 就把它想成是一個中央狀態管理器，換作是 React 就是 Redux。

一些建議

一開始沒寫過測試可能很難下手先寫測試這件事情，畢竟測試本身可能就有問題而導致怎麼寫都不會過，所以一開始不熟可以先寫程式在寫測試也沒問題（啊TDD不是要先寫測試嗎?)，我的想法是 TDD 只是讓你的實際程式不要一開始就做太多不必要的額外功能(把需求固定)，然後可以先以使用者使用的觀點去寫測試，去侷限需要實作的內容（還是把需求固定)，然後也可以避免漏掉一些 case。(畢竟事後補足就很像人工測試一樣，可能漏東漏西)

規則是死的，但開發者是活的

如果真的硬要的話，TDD是先寫測試，實作剛好的產品程式，但那個剛好就有點難界定，有些極端的例子會先寫死在抽象，仔細想想這真的有必要嗎?

最後上簡報