前端测试简介

如何开始使用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教程: