前端測試簡介

如何開始使用Mocha和Chai測試前端應用程序

警告:此帖子已過時,可能無法反映當前的最新狀態

Mocha是一款很棒的多功能測試工具。那裡有很多測試框架,我選擇Mocha是因為它很受歡迎並且易於使用。

首先讓我們看看如何在瀏覽器中運行測試。下載


將相應的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>

在您的體內,放入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()

這非常好,因為在運行測試時,您可以觀看屏幕變化並閱讀控制台消息。

使用幻影-無頭WebKit實現-您可以在終端中運行測試。缺點是PhantomJS並不是執行代碼的真實環境,但是它對於自動檢測問題更好。

怎麼做?下載並安裝PhantomJS。使用全局安裝Mochanpm安裝:npm install -g mocha。下載此包https://github.com/Backbonist/front-tests,並將其放在您的項目目錄中,例如test /下。

然後,您可以通過以下方式運行測試phantomjs run-mocha.js http://test-site.com

這種方法的問題在於,您無法以編程方式執行在將要運行的真實環境中運行的測試。當仍然要構建原型並在向公眾開放之前進行開發時,這並不是真正的問題,但是在生產環境中,您不想每次都想要通過瀏覽器運行測試套件。在每個瀏覽器上,對不對?睾丸為此。它只是一個測試運行程序,與測試框架無關,因此它可以運行Mocha,Jasmine,QUnit或您使用的東西。

  1. $ npm install testem -g

  2. 進入您應用的測試目錄,輸入$ testem

  3. 將瀏覽器打開到指定位置以運行測試。

您可以通過在任意瀏覽器上運行它們來運行測試,或者通過啟動來告訴testem為您運行測試

$ testem -l Chrome,Safari

您還可以在CI(連續集成)模式下使用testem。

$ testem ci

這會自動啟動指定瀏覽器的測試,並以TAP格式輸出,這種格式對於我們人類來說是可讀的,並且可以輸入到持續集成服務器中以自動執行該過程。

瀏覽器測試

您可能會在Chrome或Firefox上開發網站:他們的開發人員工具很棒,它們可以幫助您加快流程。

Google Chrome瀏覽器具有單獨的版本,可用於測試您的網站。穩定版和普通版以及Chrome Canary版。

Canary是一種瀏覽器,您可以將其與普通的Google Chrome瀏覽器並排運行。它的優點是您可以每天獲取有關Chromium來源的最新信息,並且可以在將新功能發送到主要的穩定Chrome渠道之前的11週內訪問這些新功能,並且文件錯誤如果你需要。您甚至可以將其設置為默認瀏覽器。

Mozilla擁有自己的Firefox每晚與Chrome Canary的功能相同:您的瀏覽器會進行每日更新。

您可能要使用Chrome開發者頻道, 和Firefox Aurora代表Canary / Nightly的“不太先進”版本。

要測試Safari,您可以使用WebKit每晚構建。使用WebKit時,基本上是在運行帶有基礎引擎更新版本的Safari。


更多devtools教程: