測試你的前端程式碼 – part1(介紹篇)

發表於2017-04-21

最近我的一個剛剛接觸前端開發的朋友,問我如何測試他的 app。當時是電話交流的,大家都知道測試是一個繁雜的知識體系,不可能通過電話說清楚,不過我也跟他保證了要給他發一份“測試指引”。

然後我通過 Google 搜尋測試相關的主題,找到了非常多的文章,但是我對於這些文章所介紹的深度並不滿意。另外對於一個前端新手來說,我找不到一個綜合性的教程能讓前端小白逐步深入地進行應用測試。我想要找的是理論結合實踐的前端測試教程。

所以我決定自己寫一個前端測試系列。這裡就是這一系列的開始。

什麼是測試?

我把測試定義成:是一段檢測你的應用程式碼(也叫“生產程式碼”)是否按預期執行的程式碼。有些人稱之為 TDD(Test-Driven Development 或者 Test-Driven Design),但是 TDD 是一種特定的測試方法,它先寫測試,然後用測試來驅動產品的設計和實現。

坦率地講,我認為在生產程式碼完成之前寫測試程式碼,還是在完成之後寫測試程式碼並不重要。只要你寫了足夠多的測試樣例測試你的生產程式碼,直到你對你的生產程式碼已經足夠有信心就好。但是有很多人(包括我所尊敬的人)認為順序很重要,這裡我持自己的保留意見。

一個不好的現象是現在工業界已經把測試和 TDD 的概念混淆在一起,這樣對於寫生產程式碼的開發者所寫的測試程式碼,就沒有一個標準術語來稱呼了。我傾向於叫它開發測試,或者普通測試。如果你對 “TDD vs 普通測試” 的討論感興趣,可以看這裡,不過我建議你把我這個系列博文看完再參與討論。

為什麼測試?

我不打算在這裡討論為什麼要進行測試。如果你不想寫測試,那你就不寫。不過你需要手動地一遍又一遍地測試你的 web 應用,這簡直糟透了。那些討厭的 bug,會不斷地過來討擾你。把這樣的程式碼部署到生產環境,將是你噩夢的開始。

所以,我不打算深入討論為什麼要進行測試。

測試的型別

另外一個新手學習測試很容易有疑問的地方是:有很多種不同的測試型別。如果你提前做了點功課的話,你可能聽說過(這裡列出部分測試方法列表):單元測試、驗收測試、整合測試、端到端測試、元件測試和服務測試。

更糟的是,當談到了上面某一個具體的測試時,不同的人又有不同的理解。

這裡再次說明我的觀點,我認為叫什麼名字都不重要,因為各種測試的定義都不難理解。所有的測試都分佈於“測試光譜”中,光譜的一頭是單元測試,另一頭是端到端測試(後面統一稱為 E2E 測試)。

測試光譜

光譜的一端——單元測試

顧名思義,程式碼以單元為單位進行測試。那麼什麼是單元呢?這就不同的程式語言的定義不一樣了。它可以是一個函式、一個模組、一個包或者一個類,甚至是一個物件(比如 JavaScript 和 Scala 語言)。在 JavaScript 中,通常是以類或者模組作為一個單元。

以單元進行測試很重要的一點是其測試是獨立的。對於一些場景這種測試非常適合,比如演算法、某些功能性函式(如字串中有多少字元)和包含一組驗證性功能的類等場景。

這些場景下進行獨立的單元測試非常容易,因為他們不依賴於其他單元。但是假設一個單元依賴於其他單元怎麼辦?可以有兩種做法:兩個單元一起測試,或者 mock 另一個單元。

什麼是 mock?下面我們舉例來解釋:

假設一個模組是一個單元,模組中包含了 writeSumToFile 這個函式,函式接收兩個數字引數,並把他們的和寫入檔案中。

這裡注意,這個模組自己並沒有做寫檔案操作。寫檔案操作是在另一個單元 fileSumWriter 中做的。

那麼為了測試第一個單元,我們既可以傳一個真實的 fileSumWriter 進來,也可以模擬(mock)一個寫檔案操作(並不用真的實現寫操作)。

如果我們傳遞一個 mock 到這個函式,那麼這個單元測試,當然可以叫做“單元測試”,因為沒有涉及到其他單元。但是如果兩個單元一起測試,那麼可能就有人說你這並不是單元測試了。

還是那句話,我不關心這到底應該叫什麼。

光譜的另一端——端到端測試

上面介紹了以一個單元為單位的測試。現在介紹端到端測試——測試整個應用。測試過程中,應用的所有配置會設定成和生產環境一樣,應用中的一切都會被測試到。

這兩個是“測試光譜”的兩端。上面提到的其他測試方法,都是分佈在這兩個極端中間。他們的基本思路是逐步擴大測試範圍,被測試的程式碼越來越多,mock 的程式碼越來越少。

很多人把這兩個極端測試中間的部分叫做“整合測試”,但是對於 TDD 崇尚者們來說,整合測試是另一個完全不同的概念。在本系列文章中我將會使用這個概念模糊的名字——整合測試,具體說來就是:測試多個單元,但不是測試全部單元。

結語

那麼你的測試到底在什麼測試層級上呢?很多人說有一個測試金字塔——大量的單元測試,少部分的整合測試,非常小部分的端到端測試。但是我不想討論這些,這個系列文章我希望討論的是如何對前端程式碼進行單元測試、整合測試和端到端測試。

接下來的文章,第一篇將會介紹前端單元測試,第二篇會介紹端到端測試,第三篇會介紹整合測試。

應這個系列的博文需要,我寫了一個小 app——計算器——我用它來展示如何進行不同型別的測試。你可以在這裡獲取它的原始碼,不過請注意現在還不完整,當整個系列博文完成的時才算完整。

相關文章