博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端测试简介
阅读量:2520 次
发布时间:2019-05-11

本文共 5168 字,大约阅读时间需要 17 分钟。

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

首先让我们看看如何在浏览器中运行测试。 下载



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的文件,该文件将承载我们的测试规则。

Inside your body, put a div#mocha:

在您的体内,放入div#mocha:

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 - 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.

使用 (无头WebKit实现),您可以在终端中运行测试。 缺点是PhantomJS并不是执行代码的真实环境,但是它对于自动检测问题更好。

How to do it? Download and install PhantomJS. Install Mocha using the global installation: npm install -g mocha. Download this package , and put it in your project directory, under test/ for example.

怎么做? 下载并安装PhantomJS。 使用全局安装来安装Mocha: npm install -g mocha 。 下载此软件包 ,并将其放在您的项目目录中,例如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? is made for this. It’s just a test runner, testing framework agnostic, so it can run Mocha, Jasmine, QUnit or what you use.

这种方法的问题在于,您无法以编程方式执行将在实际环境中运行的测试。 当仍然要构建原型并在向公众开放之前进行开发时,这并不是真正的问题,但是在生产环境中,您不想每次都想要通过浏览器运行测试套件。 在每个浏览器上,对不对? 就是为此而制作的。 它只是一个测试运行程序,与测试框架无关,因此它可以运行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 if you need. You can even set it as your default browser.

Canary是一种浏览器,可以与普通的Google Chrome并存运行。 它的优点是您可以每天获取有关Chromium来源的最新信息,并且可以在将新功能发送到稳定的主要Chrome渠道之前的11周内访问这些新功能,并在需要时 。 您甚至可以将其设置为默认浏览器。

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

Mozilla拥有自己的 ,它的功能与Chrome Canary相同:您的浏览器将进行每日更新。

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

您可能要使用和 ,它们代表的是Canary / Nightly的“不太先进”版本。

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

要测试Safari,可以使用 。 使用WebKit时,基本上是在运行带有基础引擎更新版本的Safari。

翻译自:

转载地址:http://boqgb.baihongyu.com/

你可能感兴趣的文章
前自增和后自增的区别
查看>>
Linux 基本操作
查看>>
ManagementClass("Win32_Share")之共享目录
查看>>
利用php制作对战后台程序
查看>>
【Leetcode】【Easy】Remove Linked List Elements
查看>>
django 反向解析
查看>>
快速排序一(划分)
查看>>
Oracle面试问题汇总
查看>>
Java程序员必知的8大排序
查看>>
数据库访问性能优化(二)
查看>>
Java-堆排序
查看>>
URI跳转方式地图导航的代码实践
查看>>
python 类私有化
查看>>
clion 快捷键
查看>>
php运算符
查看>>
垂直方向兼容显示的内容多少的情况样式Flex布局
查看>>
CEC Benchmark Functions
查看>>
Count Color poj 2777
查看>>
python主进程或者主线程是否会等待子线程或子进程的问题
查看>>
安装visio和office16
查看>>