如何使用 Mocha 和 Chai 開始測試前端應用程式
警告:本篇文章已經過時,可能無法反映目前的最新技術狀態
Mocha 是一個強大且多功能的測試工具。市面上有很多測試框架,而我選擇 Mocha 是因為它的流行程度和易用性。
讓我們首先看看如何在瀏覽器中運行測試。下載以下文件:
- https://github.com/visionmedia/mocha
- https://github.com/chaijs/chai
- https://github.com/chaijs/chai-jquery
將相應的 mocha.js、chai.js、chai-jquery.js 文件放在您網站的 test/ 子文件夾中。
選擇您的 index.html 文件並載入它們,然後我們將設置 Mocha 使用 BDD 測試風格,並載入一個名為 test.web.js 的文件,該文件將承載我們的測試規則。
<script src="test/vendor/mocha.js" data-build-exclude="true"></script>
<script src="test/vendor/chai.js" data-build-exclude="true"></script>
<script src="test/vendor/chai-jquery.js" data-build-exclude="true"></script>
<script data-build-exclude="true">
mocha.setup('bdd');
expect = chai.expect;
</script>
<script src="test/test.web.js" data-build-exclude="true"></script>
在您的 body 中,放置一個 div#mocha:
<div id="mocha"></div>
test/test.web.js 文件是整個遊戲的核心,它將承載測試規則。
describe('Array', function(){
describe('#indexOf()', function(){
it('should return -1 when the value is not present', function(){
[1,2,3].indexOf(5).should.equal(-1);
[1,2,3].indexOf(0).should.equal(-1);
})
})
})
describe('After this', function() {
it('should be logged in', function(done) {
expect($('#the-main-div')).to.exist;
done();
});
});
現在可以在瀏覽器中運行這些測試,在瀏覽器的控制台中輸入 mocha.run()
即可。
這很棒,因為在測試運行時,您可以觀察屏幕變化並讀取控制台消息。
使用 PhantomJS(無界面的 WebKit 實現),您可以在終端中運行測試。缺點是 PhantomJS 不是真正執行代碼的環境,但它更適合自動檢測問題。
如何實現呢?下載並安裝 PhantomJS。使用全局 npm 安裝 Mocha:npm install -g mocha
。下載這個包 https://github.com/Backbonist/front-tests,並將它放在您的項目目錄中,例如 test/。
然後,您可以通過調用 phantomjs run-mocha.js http://test-site.com
來運行測試。
這種方法的問題是,您無法在真實的環境中以程序方式執行測試。當還在構建原型和開發之前,尚未向公眾開放時,這實際上不是一個問題,但在生產環境中,您不想每次想要測試時都從瀏覽器運行測試套件。每個瀏覽器都要測試一次吧?
Testem 就是為此而生的。它只是一個測試運行器,與測試框架無關,因此它可以運行 Mocha、Jasmine、QUnit 或您使用的任何測試框架。
$ npm install testem -g
- 進入您應用程式的測試目錄,輸入
$ testem
- 打開瀏覽器,訪問指定的位置以運行測試。
您可以選擇在任何瀏覽器上運行測試,只需啟動它們,或者通過運行
$ testem -l Chrome,Safari
告訴 testem 為您運行測試。
您也可以在 CI(持續集成)模式下使用 testem。
$ testem ci
這將自動在指定的瀏覽器上啟動測試並以 TAP 格式輸出,該格式可供人閱讀,並可輸入連續集成伺服器以自動化流程。
瀏覽器測試
您可能會在 Chrome 或 Firefox 上開發您的網站:它們的開發者工具很棒,可以幫助您加快開發過程。
Google Chrome 有不同的版本供您測試您的網站。穩定版和正常版,還有 Chrome Canary。
Canary 是一款可與正常版 Google Chrome 並行運行的瀏覽器。它的優點是您每天都能獲得提交到 Chromium 源代碼的更新,並且在這些功能被送到主要穩定的 Chrome 通道之前,您可以在 11 個星期內獲得對它們的訪問,並且如果需要,可以提交錯誤報告。您甚至可以將它設為您的默認瀏覽器。
Mozilla 也有自己的 Firefox Nightly,可以做與 Chrome Canary 類似的事情:每天更新將送到您的瀏覽器。
您可能希望使用 Chrome 開發通道,以及 Firefox Aurora,它們代表的是比 Canary/Nightly 更穩定的版本。
要測試 Safari,您可以使用 WebKit 夜間版本。當您使用 WebKit 時,實際上是在運行具有更新版本的底層引擎的 Safari。