[筆記]1.Karma前端TDD試水

894974231 發布于2019-08-19 14:35 / 2095人閱讀

摘要：起博主是電信行業的碼農，在工作單位也搞搞單元測試和了什么。目前對技術很感興趣，嘗試新的領域里面也試試看這次要用的方式要實現一個簡單畫圖板功能，支持和。配置文件里面主要就是一個對象，根據注釋提示調整下即可。

起

博主是電信行業的碼農，在工作單位也搞搞單元測試和TDD了什么。目前對Web技術很感興趣，嘗試新的領域里面也試試看TDD.

這次要用TDD的方式要實現一個簡單畫圖板功能，支持Chrome和Firefox。

準備工作 安裝Karma

npm install -g karma

墻內的朋友安裝的時候可能會看到這樣的錯誤

Downloading http://cdn.bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-windows.zip
Saving to C:TEMPphantomjsphantomjs-1.9.7-windows.zip

events.js:72
        throw er; // Unhandled "error" event
              ^
Error: read ECONNRESET
    at errnoException (net.js:901:11)
    at TCP.onread (net.js:556:19)

這個時候需要自己手動下載一份phantomjs-1.9.7-windows.zip放到對應目錄，然后繼續執行npm install -g karma，安裝就會成功。

執行karma init就會像執行npm init，一樣提示你配置好你的karma.conf.js文件。配置文件里面主要就是一個JSON對象，根據注釋提示調整下即可。(如果你和我一樣使用的測試框架是Mocha,斷言庫是chai的話，還需要為Karma安裝Mocha的插件npm install karma-mocha & npm install karma-chai。)

我的配置文件和目錄結構

./
│  karma.conf.js
├─lib
|
└─test
    testwwp.js

啟動karma，karma會啟動你需要的瀏覽器，并執行case。不過我們還沒有添加任何Case。

>karma start
INFO [karma]: Karma v0.10.9 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [launcher]: Starting browser Firefox
WARN [launcher]: Chrome have not captured in 60000 ms, killing.
WARN [launcher]: Firefox have not captured in 60000 ms, killing.
INFO [launcher]: Trying to start Chrome again.
INFO [launcher]: Trying to start Firefox again.
INFO [Chrome 33.0.1750 (Windows 7)]: Connected on socket XSBr3JzPetUpruEbr30w
INFO [Firefox 27.0.0 (Windows 7)]: Connected on socket LfejRTLN--KYyhSlr30x
Chrome 33.0.1750 (Windows 7): Executed 0 of 0 ERROR (1.061 secs / 0 secs)
Firefox 27.0.0 (Windows 7): Executed 0 of 0 ERROR (1.252 secs / 0 secs)

添加Case

按照TDD的節奏，該寫一個失敗的Case了。

"use strict";

var expect = chai.expect;

describe("fist test",function() {

  it("should failed",function() {
    expect(1).to.equal(2);
  });

});

Karma的配置文件加載了Mocha和Chai，在測試文件中就不需要像node.js一樣require("xxx")了。如果你的karma配置文件中autoWatch是true的話，當你保存文件之后Karma就告訴你的Case在兩個瀏覽器里面執行的結果了。

INFO [watcher]: Changed file "D:/git/karmatddpost/test/testwwp.js".
Chrome 33.0.1750 (Windows 7) fist test should failed FAILED
        expected 1 to equal 2
        AssertionError: expected 1 to equal 2
Firefox 27.0.0 (Windows 7) fist test should failed FAILED
        expected 1 to equal 2
Chrome 33.0.1750 (Windows 7): Executed 1 of 1 (1 FAILED) ERROR (0.357 secs / NaN secs)
Firefox 27.0.0 (Windows 7): Executed 1 of 1 (1 FAILED) ERROR (0.383 secs / NaN secs)

Karma的TDD的工作環境算是配置好了。接下來就可以開發簡易畫圖板了。

捐贈

如果您覺得本文對您有幫助，歡迎請作者一杯咖啡

https://me.alipay.com/shupengfei

云服務器 GPU云服務器試水 tdd python tdd 兼容筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78027.html

前端單元測試

摘要：為保證代碼的質量，單元測試必不可少。本文記錄自己在學習單元測試過程中的一些總結。以一個項目為例，代碼結構如下前端測試框架主要是與，這里我們選擇，斷言庫有以及自帶的。為保證代碼的質量，單元測試必不可少。本文記錄自己在學習單元測試過程中的一些總結。 TDD與BDD的區別 TDD屬于測試驅動開發，BDD屬于行為驅動開發。個人理解其實就是TDD先寫測試模塊，再寫主功能代碼，然后能讓測試模塊通...

liuyix 2019-08-22 14:58 評論0 收藏0
前端臨床手札——單元測試

摘要：感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。具體執行的測試用例實現代碼。測試工具斷言庫測試驅動開發及測試框架入門學習最近博主工作是和另一枚后端合作，但是經常發現他寫的接口出錯，苦逼連連。感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。經過博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡...

kid143 2019-08-19 18:17 評論0 收藏0
前端臨床手札——單元測試

摘要：感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。具體執行的測試用例實現代碼。測試工具斷言庫測試驅動開發及測試框架入門學習最近博主工作是和另一枚后端合作，但是經常發現他寫的接口出錯，苦逼連連。感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。經過博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡...

godlong_X 2019-05-29 16:57 評論0 收藏0
前端組件的測試

摘要：的配置文件是為了解析那些需要測試的源文件相關的文件，然后再給的單元測試用例去識別。其作用是僅僅渲染至虛擬節點，不會返回真實的節點，能極大提高測試性能。為解放勞動力，發展生產力測試有了這般變化：鼠標點擊手動測試 -> 用腳本模擬,自動化測試 Vue中的組件測試需要安裝的包全局安裝：babel、mocha、karma 其他局部安裝的包在下面的【測試環境搭建】最下方配置文件中給出...

haobowd 2019-08-22 15:10 評論0 收藏0
《Python Web開發》作者Harry Percival：TDD就是微小而漸進的改變

摘要：目前就職于，他在各種演講研討會和開發者大會上積極推廣測試驅動開發。問很多敏捷教練都表示訓練新人做測試驅動開發是一件辛苦而進度緩慢的事，并且收益也不是很大。首先是開發的對話式風格。第一個問題就是測試套件的速度。 Harry J.W. Percival目前就職于PythonAnywhere，他在各種演講、研討會和開發者大會上積極推廣測試驅動開發（TDD）。他在利物浦大學獲得計算機科學碩士學...

Guakin_Huang 2019-07-24 18:26 評論0 收藏0