成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

測試你的前端代碼 - part1（介紹篇）

helloworldcoding / 2520人閱讀

摘要：測試光譜光譜的一端單元測試顧名思義，代碼以單元為單位進(jìn)行測試。這個系列文章整體如下測試你的前端代碼單元測試測試你的前端代碼端到端測試測試你的前端代碼集成測試。

本文作者：Gil Tayar 
編譯：胡子大哈 


翻譯原文：http://huziketang.com/blog/posts/detail?postId=58d3dcb87413fc2e8240855a  
英文連接：Testing Your Frontend Code : Part I (Introduction)

轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息

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

然后我通過 Google 搜索測試相關(guān)的主題，找到了非常多的文章，但是我對于這些文章所介紹的深度并不滿意。另外對于一個前端新手來說，我找不到一個綜合性的教程能讓前端小白逐步深入地進(jìn)行應(yīng)用測試。我想要找的是理論結(jié)合實(shí)踐的前端測試教程。

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

什么是測試？

我把測試定義成：是一段檢測你的應(yīng)用代碼（也叫“生產(chǎn)代碼”）是否按預(yù)期執(zhí)行的代碼。有些人稱之為 TDD（Test-Driven Development 或者 Test-Driven Design），但是 TDD 是一種特定的測試方法，它先寫測試，然后用測試來驅(qū)動產(chǎn)品的設(shè)計(jì)和實(shí)現(xiàn)。

坦率地講，我認(rèn)為在生產(chǎn)代碼完成之前寫測試代碼，還是在完成之后寫測試代碼并不重要。只要你寫了足夠多的測試樣例測試你的生產(chǎn)代碼，直到你對你的生產(chǎn)代碼已經(jīng)足夠有信心就好。但是有很多人（包括我所尊敬的人）認(rèn)為順序很重要，這里我持自己的保留意見。

一個不好的現(xiàn)象是現(xiàn)在工業(yè)界已經(jīng)把測試和 TDD 的概念混淆在一起，這樣對于寫生產(chǎn)代碼的開發(fā)者所寫的測試代碼，就沒有一個標(biāo)準(zhǔn)術(shù)語來稱呼了。我傾向于叫它開發(fā)測試，或者普通測試。如果你對 “TDD vs 普通測試” 的討論感興趣，可以看這里，不過我建議你把我這個系列博文看完再參與討論。

為什么測試？

我不打算在這里討論為什么要進(jìn)行測試。如果你不想寫測試，那你就不寫。不過你需要手動地一遍又一遍地測試你的 web 應(yīng)用，這簡直糟透了。那些討厭的 bug，會不斷地過來討擾你。把這樣的代碼部署到生產(chǎn)環(huán)境，將是你噩夢的開始。

所以，我不打算深入討論為什么要進(jìn)行測試。

測試的類型

另外一個新手學(xué)習(xí)測試很容易有疑問的地方是：有很多種不同的測試類型。如果你提前做了點(diǎn)功課的話，你可能聽說過（這里列出部分測試方法列表）：單元測試、驗(yàn)收測試、集成測試、端到端測試、組件測試和服務(wù)測試。

更糟的是，當(dāng)談到了上面某一個具體的測試時，不同的人又有不同的理解。

這里再次說明我的觀點(diǎn)，我認(rèn)為叫什么名字都不重要，因?yàn)楦鞣N測試的定義都不難理解。所有的測試都分布于“測試光譜”中，光譜的一頭是單元測試，另一頭是端到端測試（后面統(tǒng)一稱為 E2E 測試）。

測試光譜 光譜的一端——單元測試

顧名思義，代碼以單元為單位進(jìn)行測試。那么什么是單元呢？這就不同的編程語言的定義不一樣了。它可以是一個函數(shù)、一個模塊、一個包或者一個類，甚至是一個對象（比如 JavaScript 和 Scala 語言）。在 JavaScript 中，通常是以類或者模塊作為一個單元。

以單元進(jìn)行測試很重要的一點(diǎn)是其測試是獨(dú)立的。對于一些場景這種測試非常適合，比如算法、某些功能性函數(shù)（如字符串中有多少字符）和包含一組驗(yàn)證性功能的類等場景。

這些場景下進(jìn)行獨(dú)立的單元測試非常容易，因?yàn)樗麄儾灰蕾囉谄渌麊卧５羌僭O(shè)一個單元依賴于其他單元怎么辦？可以有兩種做法：兩個單元一起測試，或者 mock 另一個單元。

什么是 mock？下面我們舉例來解釋：

假設(shè)一個模塊是一個單元，模塊中包含了 writeSumToFile 這個函數(shù)，函數(shù)接收兩個數(shù)字參數(shù)，并把他們的和寫入文件中。

這里注意，這個模塊自己并沒有做寫文件操作。寫文件操作是在另一個單元 fileSumWriter 中做的。

那么為了測試第一個單元，我們既可以傳一個真實(shí)的 fileSumWriter 進(jìn)來，也可以模擬（mock）一個寫文件操作（并不用真的實(shí)現(xiàn)寫操作）。

如果我們傳遞一個 mock 到這個函數(shù)，那么這個單元測試，當(dāng)然可以叫做“單元測試”，因?yàn)闆]有涉及到其他單元。但是如果兩個單元一起測試，那么可能就有人說你這并不是單元測試了。

還是那句話，我不關(guān)心這到底應(yīng)該叫什么。

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

上面介紹了以一個單元為單位的測試?，F(xiàn)在介紹端到端測試——測試整個應(yīng)用。測試過程中，應(yīng)用的所有配置會設(shè)置成和生產(chǎn)環(huán)境一樣，應(yīng)用中的一切都會被測試到。

這兩個是“測試光譜”的兩端。上面提到的其他測試方法，都是分布在這兩個極端中間。他們的基本思路是逐步擴(kuò)大測試范圍，被測試的代碼越來越多，mock 的代碼越來越少。

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

結(jié)語

那么你的測試到底在什么測試層級上呢？很多人說有一個測試金字塔——大量的單元測試，少部分的集成測試，非常小部分的端到端測試。但是我不想討論這些，這個系列文章我希望討論的是如何對前端代碼進(jìn)行單元測試、集成測試和端到端測試。

接下來的文章，第一篇將會介紹前端單元測試，第二篇會介紹端到端測試，第三篇會介紹集成測試。

應(yīng)這個系列的博文需要，我寫了一個小 app——計(jì)算器——我用它來展示如何進(jìn)行不同類型的測試。你可以在這里獲取它的源代碼，不過請注意現(xiàn)在還不完整，當(dāng)整個系列博文完成的時才算完整。

這個系列文章整體如下：

《測試你的前端代碼 - part2（單元測試）》；

《測試你的前端代碼 - part3（端到端測試）》；

《測試你的前端代碼 - part4（集成測試）》。

我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點(diǎn)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/8755.html

相關(guān)文章

  • 測試你的前端代碼 - part1（介紹篇）

    摘要：測試光譜光譜的一端單元測試顧名思義，代碼以單元為單位進(jìn)行測試。這個系列文章整體如下測試你的前端代碼單元測試測試你的前端代碼端到端測試測試你的前端代碼集成測試。 showImg(https://segmentfault.com/img/remote/1460000008812278?w=998&h=354); 本文作者：Gil Tayar 編譯：胡子大哈 翻譯原文：http://hu...

    jimhs 評論0 收藏0

  • 2017-06-20 前端日報(bào)

    摘要：前端日報(bào)精選專題之跟著學(xué)節(jié)流冴羽的博客全家桶仿微信項(xiàng)目，支持多人在線聊天和機(jī)器人聊天騰訊前端團(tuán)隊(duì)社區(qū)編碼的奧秘模塊實(shí)現(xiàn)入門淺析知乎專欄前端每周清單發(fā)布新版本提升應(yīng)用性能的方法中文寇可往吾亦可往用實(shí)現(xiàn)對決支付寶的微信企業(yè)付款到零 2017-06-20 前端日報(bào) 精選 JavaScript專題之跟著 underscore 學(xué)節(jié)流 - 冴羽的JavaScript博客 - SegmentFau...

    Galence 評論0 收藏0

  • 前端跳槽面試算法——動態(tài)規(guī)劃

    摘要：我記得大三參加騰訊的校招面試時只準(zhǔn)備了幾種常見的排序算法就足以應(yīng)對了，然而今年包括今日頭條在內(nèi)的多家大廠的前端筆試題目中都出現(xiàn)了貪心算法動態(tài)規(guī)劃分治算法等進(jìn)階性的算法題目。本篇博客參考今日頭條銀國徽老師的《js版數(shù)據(jù)結(jié)構(gòu)與算法》Part1改編自《漫畫算法》原作者：程序員小灰前言眾所周知，與后臺開發(fā)人員相比，算法是我們前端開發(fā)人員的一個弱項(xiàng)。而近兩年隨著互聯(lián)網(wǎng)行業(yè)競爭愈發(fā)激烈，市場上對前端崗位...

    mushang 評論0 收藏0

  • 測試你的前端代碼 - part2（單元測試）

    摘要：單元測試上一節(jié)有討論過，單元測試就是以代碼單元為單位進(jìn)行測試，代碼單元可以是一個函數(shù)，一個模塊，或者一個類。單元測試是最容易理解也最容易實(shí)現(xiàn)的測試方式。在寫單元測試的時候，盡量將你的單元測試獨(dú)立出來，不要幾個單元互相引用。 showImg(https://segmentfault.com/img/remote/1460000008823416?w=997&h=350); 本文作者：G...

    daydream 評論0 收藏0

  • 測試你的前端代碼 - part2（單元測試）

    摘要：單元測試上一節(jié)有討論過，單元測試就是以代碼單元為單位進(jìn)行測試，代碼單元可以是一個函數(shù)，一個模塊，或者一個類。單元測試是最容易理解也最容易實(shí)現(xiàn)的測試方式。在寫單元測試的時候，盡量將你的單元測試獨(dú)立出來，不要幾個單元互相引用。 showImg(https://segmentfault.com/img/remote/1460000008823416?w=997&h=350); 本文作者：G...

    shadajin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<