文章

目前顯示的是 六月, 2018的文章

單元測試法則

圖片
單元測試法則 What should we test?
Incoming & Outgoing Messages 上圖表示一個物件是如何被測試的。 測試物件的時候,你可以發現受測物件會接收與發送訊息: Incoming Messages 表示呼叫受測物件的訊息 Outgoing Messages 表示受測物件傳遞給其依賴物件的訊息 訊息可以被傳進物件,也會被物件傳遞出去(如上圖你可以看見有訊息進入物件,也有訊息從物件出去)。 進行測試時,你只能對物件傳遞訊息,沒有辦法看見物件的內部。這就是為什麼要 測試介面,不要測試實作。 (testing the interface, and NOT the implementation.) 測試介面讓我們可以隨意切換實作類別,並且不破壞測試程式。 Query & Command Messages 除了 Incoming & Outgoing Messages 以外,訊息還分為 Query 與 Command 兩種: Query Message: messages return data without changing anything. 只返回 Data,不做修改任何物件屬性的訊息 不會替應用程式帶來副作用。 Command Message: messages modify data without returning any data. 只修改物件屬性,但不返回任何 Data 訊息 一定會有副作用。 合併的 Command 與 Query 訊息: 這種訊息除了修改資料與回傳資料外,還可能有隱藏的副作用。 (如新增一筆 user 資料並返回新的 user ID,但是 DB 內的 ID 自動 +1) 在商業邏輯一定要使用合併訊息時,一定要確保這些訊息不能含有意料外的副作用。 Test Double
為什麼要 Test Double? 1. 隔離依賴: 單元測試目的是要測試受測物件的行為是否符合預期,如果連受測物件的依賴物件也一起進行測試,那就叫做整合測試了。 因此單元測試需要隔離依賴。 2. 要求快速: 單元測試的時間應該非常短,才可以向開發者快速反饋信息。

進行重構時,一點點修改就要立刻執行測試,確保功能沒有被改壞。如果每次執行測試,受測物件將訊息遞給依賴物件處理 15 秒才回傳值。就會大幅減緩開發速度。 使用測…

JavaScript 前端測試覆蓋率

圖片
JavaScript 前端測試覆蓋率 如果您還沒建置好 JavaScript 前端測試環境,請移步至建立 JavaScript 單元測試環境

Blanket.js是一款易於安裝,易於配置且易於使用的 JavaScript 程式覆蓋率庫,可在瀏覽器中和與 Node.js一起使用。 除此之外也是唯一找到可以與 Mocha 前端測試搭配的套件。 Blanket.js 的使用非常簡單,只需要兩個步驟即可。 一、將 Blanket.js 添加到您的 HTML 測試文件:__注意__ mocha-blanket.js 是讓 blanket.js 可以在 mocha 測試之後產生覆蓋率的匹配器。 原始碼文件:blanket.js, mocha-blanket.js 二、在受測物件的檔案後方加上 data-cover 屬性 test_taskStorage.html 配置完成的樣子 配置完成,執行 test_taskStorage.html 就會自動產生測試涵蓋率的區塊:

參考文章: 前端 mocha + blanket 產生測試覆蓋率: 前端覆蓋率套件 Blanket.js 已經失修。有機會要找新的套件取代。

建立 JavaScript 單元測試環境

圖片
建立 JavaScript 單元測試環境 本案例使用 Mocha 單元測試框架替專案進行測試。 GETTING STARTED 安裝 mocha$ cd 到專案根目錄 $ npm install mocha 建立測試目錄與測試程式$ mkdir tests # 建立測試目錄 $ $EDITOR test/test.js # 在測試目錄下,使用你的編輯器建立測試程式 test.js 到目前為止,專案目錄結構如下: ├── index.html ├── node_modules # node 套件目錄 │ │ │ ├── mocha # mocha 目錄 │ │ ├── bin # mocha 執行檔目錄 │ │ │ ├── mocha # mocha 執行檔,我們就是透過這個 mocha 進行單元測試 ├── package-lock.json ├── package.json └── tests # 測試目錄,以後所有測試程式統一放在 tests 目錄下 └── test.js # 測試程式 test.js 確定測試環境已經建立 進行測試之前,一定要先確定測試環境已經建立完成,所以先隨便寫一個一定會 pass 的測試程式。 編輯 test.js
手動進行第一次測試 啟用 Mocha,第一個參數必須是測試目錄的路徑 $ node_modules/mocha/bin/mocha tests 執行結果:
透過 npm 進行測試 如果覺得每次都要打這麼長的指令才能進行測試,也可以設定 package.json,使用 npm 進行測試。 在 package.json 的 scripts 欄位加入 "test": "mocha --recursive ./tests"。 修改 package.json { "name": "todolist-libs", "version": "1.0.0", "description": &quo…

建置 ECMAScript 6 開發環境

建置 ECMAScript 6 開發環境 安裝 Babel Babel 是一個廣泛使用的轉碼器,可以將 ES6 代碼轉為 ES5 代碼,從而在現有環境執行。 在專案目錄下,使用 npm 進行安裝: npm install babel-cli 配置文件.babelrc Babel 的配置文件是 .babelrc,存放在項目的根目錄下。使用 Babel 的第一步,就是配置這個文件。 .babelrc 用來設置轉碼規則和插件,基本格式如下。 { "presets": [], "plugins": [] } presets 字段設定轉碼規則,官方提供以下的規則集,你可以根據需要安裝。 # ES2015 轉碼規則 npm install --save-dev babel-preset-es2015 # react 轉碼規則 npm install --save-dev babel-preset-react # ES7 不同階段語法提案的轉碼規則(共有 4 個階段),選裝一個 npm install --save-dev babel-preset-stage-0 npm install --save-dev babel-preset-stage-1 npm install --save-dev babel-preset-stage-2 npm install --save-dev babel-preset-stage-3 然後,將這些規則加入.babelrc。 { "presets": [ "es2015",` "react", "stage-2" ], "plugins": [] } 編譯 ECMAscript 6編譯前: ES6 語法 print = (message) => { alert(message); } 編譯後: ES6 語法已經被編譯成瀏覽器可使用之 JavaScript 語法 print = function print(message) { alert(message); };

bind、apply、call

bind、apply、call apply、call、bind 三者都是用來改變函數的 this 的指向對象; apply、call、bind 三者第一個參數都是 this 要指向的對象,也就是想指定的上下文; apply、call、bind 三者都可以利用後續參數傳參; bind 是返回對應函數,便於稍後調用;apply 、call 則是立即調用。 bind 運算符 :: ES 7 新語法 :: 為 bind 的短語法,使用範例如下: 把函數綁定到變數上var log = console.log.bind(console); 用法: log('one', '2', 3, [4], {5: 5}); 輸出: one 2 3 [4] Object {5: 5} 為什麼要綁定在變數上? 這能讓你在程式運作的時候動態決定要使用哪一種 function。 例如:你可以在程式運行時決定使用哪一個自定義記錄器: