如何使用 grunt 设置浏览器内测试
How can I setup in-browser tests using grunt?
我是咕噜
咕噜的新手。我正在使用 yeoman 网络应用程序生成器的一个版本(我想在我做对时分叉)。它似乎可以正确服务网站并运行摩卡测试,但在实时加载时遇到问题。
我想做的是让它在浏览器中运行摩卡测试,这样我就可以使用控制台调试和/或更丰富的输出格式。我已经在咕噜声中设置了一个测试:浏览器任务:
grunt.registerTask('test', function( target ) {
var tasks;
if ( target === 'browser' ) {
tasks = [
'clean:server',
'concurrent:test',
'autoprefixer',
'connect:livereload_test',
'watch' ];
} else {
tasks = [
'clean:server',
'concurrent:test',
'autoprefixer',
'connect:test',
'mocha'
];
}
grunt.task.run( tasks );
});
添加了"连接:livereload_test"并修改了"watch:livereload":
livereload_test: {
options: {
open: 'test/index.html',
base: [
'.tmp',
'.',
'<%= yeoman.app %>'
]
}
},
和:
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'{<%= yeoman.app %>,test}/*.html',
'.tmp/styles/{,*/}*.css',
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
'test/*.js',
'test/spec/{,*/}*.js',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'test/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
分别。似乎成功地为 test/index.html 服务。但是,当我修改测试/规范/测试.js以更改测试描述(例如)时,它会注意到更改,但测试结果不会反映更改。我假设我错过了一些咕噜咕噜的代码,但它会是什么?
我们已经在浏览器中实现了摩卡测试运行,并在生成器主干中进行了实时加载。
livereload 代码段由 connect-livereload 生成。
var LIVERELOAD_PORT = 35729;
var SERVER_PORT = 9000;
var lrSnippet = require('connect-livereload')({port: LIVERELOAD_PORT});
但是 require('connect-livereload') 本身不会插入到索引.html中,您需要在 connect:test 中指定它
livereload: {
options: {
middleware: function (connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
test: {
options: {
port: 9001,
middleware: function (connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, 'test'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
检查中间件中的lrSnippet
。
然后我们需要指定任务,在生成器骨干中我们grunt test:server
.(来源)
if (target === 'test') {
return grunt.task.run([
'clean:server',
'coffee',
'createDefaultTemplate',
'jst',
'compass:server',
'connect:test',
'watch:livereload'
]);
}
您可以在 yeoman/发电机骨干/问题上找到我们的讨论。如果您想看一下,我最初的解决方法可以作为要点使用。
希望对您有所帮助。
相关文章:
- JS和three.JS,在浏览器中进行参数测试
- 在禁用浏览器flash插件的情况下运行Karma测试
- $watch回调每次在浏览器中触发,但在测试期间只触发一次
- 如何使用gulp-test和karma在浏览器中调试Javascript测试文件
- 使用 Jasmine 测试主干视图时,浏览器页面不断刷新
- 在浏览器上显示实习运行程序功能测试的结果
- 如何测试浏览器对背景剪辑的支持:文本
- 如何使用JavaScript /条件注释测试浏览器是否符合CSS3
- 为什么 ExtJS 要测试浏览器是否支持排序
- 测试浏览器是否支持 Web 音频 API 的简单方法
- 如何测试浏览器是否支持特定的 JavaScript 代码行
- 如何使用Jasmine测试浏览器交互
- Angular单元测试:浏览器还没有定义
- 如何在“不安全的JavaScript试图访问带有url的框架”之前测试浏览器的权限(Chrome本地框架)
- Protractor/Jasmine测试浏览器.isElementPresent在查找类时不起作用
- 测试浏览器是否支持多个文件上传
- 测试浏览器是否支持getAttributeNode, setAttributeNode和createAttribute
- 如何(自动地)测试浏览器重新绘制后是否发生了操作
- 测试浏览器在javascript中播放wav文件的能力
- 测试浏览器是否支持该样式