使用Mochatesting框架的HTML报告
我一直在使用NodeJS和Mocha生成一些testing,我想find一种方法将结果放到浏览器中。 我知道摩卡支持使用'html'记者和mocha init <dir>
但是这两者似乎都不适合我(记者实际上甚至没有运行testing就抛出错误)。
有人能给我一个通过Mocha运行testing并生成HTML报告的好例子吗?我想模仿的一个例子是在visionmedia网站上。 另外,为了例子,我们会说我正在使用名为example.js
的testing文件。
在此先感谢您的帮助,但令人惊讶的是这里有很less的例子。
要让Mocha在浏览器和terminal中运行testing,请按照以下小教程进行操作:
我假设一个正常的node.js摩卡testing套件的以下插件。
- Node.js的
- 摩卡
和下面的树结构:
/root /test my_something_spec.js /javascript index.html
的index.html
免责声明:我公然放弃了各种最佳做法,只是为了指出正确的方向。
<html> <head> <meta charset="utf-8"> <title>Mocha Tests</title> <link rel="stylesheet" href="node_modules/mocha/mocha.css" /> </head> <body> <div id="mocha"></div> <script src="node_modules/mocha/mocha.js"></script> <script>mocha.setup('bdd')</script> <script src="test/my_something_spec.js"></script> <script> mocha.checkLeaks(); mocha.run(); </script> </body> </html>
testing/ my_something_spec.js
describe("my function", function() { it("is a function", function() { expect(true).to.be(true); }); });
使用一个简单的python服务器python -m SimpleHTTPServer 8080
从根目录访问localhost:8080
将会给你一个很好的和失败的testing。 从terminal运行摩卡会给你相同的输出, expect
没有定义。
您尝试使用html
记者,当您尝试在Node中使用它时会抛出:
$ mocha --reporter html > report.html /usr/local/lib/node_modules/mocha/lib/reporters/html.js:194 , div = document.createElement('div') ^ ReferenceError: document is not defined
根据摩卡文档 (和Github中的相关问题 ), html
记者只能在浏览器中工作,即。 在浏览器中testing客户端代码。
如果您想要为Node.jstesting脚本输出HTML,请使用doc
记者 ,它将生成HTML。
我喜欢根据情况通过Node.js 和浏览器testing相同的代码。 我知道你要求“把结果放到浏览器中”(来自Node.js?),但我希望这样做就足够了。
这个例子是在Windows机器上创build的,但是它也可以在Mac和Linux上运行。
你不需要一个networking服务器(Node.js或其他)来工作。
要在浏览器中运行testing,请打开./test/index.html文件。
要在命令行中运行testing,只需执行“mocha”。
从无到有:
C:\TEMP>mkdir mocha_node_browser C:\TEMP>cd mocha_node_browser C:\TEMP\mocha_node_browser>dir Volume in drive C is MessedUp Volume Serial Number is CAB2-E609 Directory of C:\TEMP\mocha_node_browser 2014-08-09 12:17 <DIR> . 2014-08-09 12:17 <DIR> .. 0 File(s) 0 bytes 2 Dir(s) 287,218,769,920 bytes free
初始化将保存所有testing的目录。 总是称之为“testing”:
C:\TEMP\mocha_node_browser>mocha init test
编辑和/或创build一些文件:
C:\TEMP\mocha_node_browser>gvim -p test_me.js test\index.html test\tests.js
我用柴。 两个testing中都会使用相同的chai.js文件。
C:\TEMP\mocha_node_browser>cd test C:\TEMP\mocha_node_browser\test>curl -O http://chaijs.com/chai.js % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 117k 100 117k 0 0 99902 0 0:00:01 0:00:01 --:--:-- 99902 C:\TEMP\mocha_node_browser\test>cd ..
创build/编辑文件后,通过命令行运行testing:
C:\TEMP\mocha_node_browser>mocha . 1 passing (15ms)
…或者将您的浏览器指向./test/index.html。
passes: 1 failures: 0 duration: 0.03s whatever should return "it worked!"
文件内容:
C:\TEMP\mocha_node_browser>type test_me.js // the function to be tested function whatever() { return 'it worked!'; } // only kicks in when running in Node.js via "mocha" if (typeof module !== 'undefined') { module.exports = whatever; }
将Chai和您想要testing的源代码添加到test / index.html中:
C:\TEMP\mocha_node_browser>type test\index.html <!DOCTYPE html> <html> <head> <title>Mocha</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="mocha.css" /> </head> <body> <div id="mocha"></div> <script src="mocha.js"></script> <script>mocha.setup('bdd')</script> <!-- added to index.html: --> <script src="./chai.js"></script> <script src="../test_me.js"></script> <script src="tests.js"></script> <script> mocha.run(); </script> </body> </html>
使您的testing与命令行和浏览器兼容
C:\TEMP\mocha_node_browser>type test\tests.js if (typeof require !== 'undefined') { // testing in command-line var chai = require('./chai'); var whatever = require('../test_me'); } var expect = chai.expect; describe('whatever', function() { it('should return "it worked!"', function() { expect(whatever()).to.equal("it worked!"); }); });