前端測試簡介

Warning: this post is old and might not reflect the current state of the art

警告：此文章過時，可能無法反映目前的最新狀态

Mocha is an awesome and versatile testing tool. There are many testing frameworks out there, and I choose Mocha because of its popularity and ease of use.

Mocha是一個很棒的多功能測試工具。 那裡有很多測試架構，我選擇Mocha是因為它很受歡迎并且易于使用。

Let’s first see how to run the tests in a browser. Download

首先讓我們看看如何在浏覽器中運作測試。 下載下傳

• https://github.com/visionmedia/mocha

  https://github.com/visionmedia/mocha

• https://github.com/chaijs/chai

  https://github.com/chaijs/chai

• https://github.com/chaijs/chai-jquery

  https://github.com/chaijs/chai-jquery

Put the respective mocha.js, chai.js, chai-jquery.js files in a test/ subfolder on your site.

将相應的mocha.js，chai.js，chai-jquery.js檔案放入您網站上的test /子檔案夾中。

Pick your index.html file and load them, then we’ll setup Mocha to use the BDD testing style and we’ll load in a file called test.web.js, that will host our testing rules.

選擇您的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>
           

Inside your body, put a div#mocha:

在您的體内，放入div＃mocha：

<div id="mocha"></div>
           

the test/test.web.js file is the main piece of the game, and it will host the testing rules.

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();
  });
});
           

Those tests can now be run inside the browser, by opening the browser console an typing

mocha.run()

.

現在可以通過在浏覽器控制台中鍵入

mocha.run()

打開這些測試。

This is great as while the tests run, you can watch the screen change and read the console messages.

這很不錯，因為在運作測試時，您可以觀看螢幕變化并閱讀控制台消息。

Using PhantomJS - an headless WebKit implementation - you can run the tests in the terminal. The downside is that PhantomJS is not the real environment where your code will execute, but it’s better for automatic detection of problems.

使用PhantomJS (無頭WebKit實作)，您可以在終端中運作測試。 缺點是PhantomJS并不是執行代碼的真實環境，但是它對于自動檢測問題更好。

How to do it? Download and install PhantomJS. Install Mocha using the global npm installation:

npm install -g mocha

. Download this package https://github.com/Backbonist/front-tests, and put it in your project directory, under test/ for example.

怎麼做？ 下載下傳并安裝PhantomJS。 使用全局npm安裝來安裝Mocha：

npm install -g mocha

。 下載下傳此軟體包https://github.com/Backbonist/front-tests ，并将其放在您的項目目錄中，例如test /下。

You can then run your tests by calling

phantomjs run-mocha.js http://test-site.com

然後，您可以通過調用

phantomjs run-mocha.js http://test-site.com

來運作測試

The problem with this approach is that you can’t programmatically execute the tests run in the real environment where they will run. That’s not really a problem when still building prototypes and developing prior to opening to the public, but when in production you don’t want to run the test suite from the browser every time you want to test. On every browser, right? Testem is made for this. It’s just a test runner, testing framework agnostic, so it can run Mocha, Jasmine, QUnit or what you use.

這種方法的問題在于，您無法以程式設計方式執行将在實際環境中運作的測試。 當仍然要建構原型并在向公衆開放之前進行開發時，這并不是真正的問題，但是在生産環境中，您不想每次都想要通過浏覽器運作測試套件。 在每個浏覽器上，對不對？ Testem就是為此而制作的。 它隻是一個測試運作程式，與測試架構無關，是以它可以運作Mocha，Jasmine，QUnit或您使用的東西。

1. $ npm install testem -g

   $ npm install testem -g

2. go in the test directory of your app, type

   $ testem

   進入應用程式的測試目錄，輸入

   $ testem

3. open the browser to the specified location to run the tests.

   将浏覽器打開到指定位置以運作測試。

You can run the tests on any browser you want by launching them, or tell testem to run the tests for you by launching

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

$ testem -l Chrome,Safari

$ testem -l Chrome,Safari

You can also use testem in CI (Continuous Integration) mode.

您也可以在CI(連續內建)模式下使用testem。

$ testem ci

$ testem ci

this automatically launches the tests the browser specified and outputs in a format named TAP, which is readable by us humans, and can be inputted in a continuous integration server to automate the process.

這會自動啟動浏覽器指定的測試，并以TAP格式輸出，這種格式對于我們人類來說是可讀的，并且可以輸入到持續內建伺服器中以自動執行該過程。

浏覽器測試 (Browser testing)

You’ll be probably developing your site on Chrome or Firefox: their developer tools are awesome, and they help you speed up the process.

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

Google Chrome has separate versions you can use to test your website on. The stable and normal version, and Chrome Canary.

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

Canary is a browser you can run side by side with the normal Google Chrome. Its advantage is that you get daily updates of what’s committed to the Chromium sources, and you can get access to new features 11 weeks before they’re sent to the main stable Chrome channel, and file bugs if you need. You can even set it as your default browser.

Canary是一種浏覽器，可以與普通的Google Chrome并存運作。 它的優點是您可以每天擷取有關Chromium來源的最新資訊，并且可以在将新功能發送到穩定的主要Chrome管道之前的11周内通路這些新功能，并在需要時送出錯誤 。 您甚至可以将其設定為預設浏覽器。

Mozilla has its own Firefox Nightly that does the same thing as Chrome canary: daily updates will come to your browser.

Mozilla擁有自己的Firefox Nightly ，它的功能與Chrome Canary相同：您的浏覽器将進行每日更新。

You might want to use the Chrome Dev channel, and Firefox Aurora which represent a ‘less on-the-edge’ version then Canary/Nightly.

您可能要使用Chrome Dev通道和Firefox Aurora ，它們代表的是Canary / Nightly的“不太先進”版本。

To test Safari you can use the WebKit Nightly Builds. When you use WebKit, you are basically running Safari with an updated version of the underlying engine.

要測試Safari，可以使用WebKit Nightly Builds 。 使用WebKit時，基本上是在運作帶有基礎引擎更新版本的Safari。

翻譯自: https://flaviocopes.com/frontend-testing/