Gulp angular 单元测试指令 templateUrl
Gulp angular unit testing directive templateUrl
我在互联网和 SO 上阅读了很多 post 但找不到任何有效的解决方案
我正在尝试为指令编写单元测试并希望 html 文件从模板缓存
提供
我正在使用 Gulp 作为构建工具
gulp 测试任务如下所示
gulp.task('test', function (done) {
karma.start({
configFile:__dirname + '/' + config.test.karmaconf,
singleRun: false
}, done);
});
在 karma.conf
中,我定义了
browserify: {
debug: true,
transform: [['browserify-ng-html2js', {
module: 'templates',
extension: 'html'
}]]
}
在单元测试中,我声明
beforeEach(angular.mock.module('templates'));
但收到
Error: Unexpected request: GET path/to/some.html
No more request expected
at $httpBackend
我也尝试在 karma.conf 中使用 preprocessors
和 ngHtml2JsPreprocessor
但没有成功。任何人都可以提供解决方案或指出我如何调试为什么不提供模板?
解决方案
您可以通过多种方式来做到这一点。我是这样做的:
gulp.task('bundle-common', function() {
return merge(
// Store all html files in $templateCache
gulp.src([
appDir + '/common/**/*.html'
])
.pipe($$.angularTemplatecache({
root: 'common'
}))
// Append everything else: directives, tests, etc.
gulp.src([
appDir + '/common/**/*.js'
])
)
.pipe($$.concat('common.js'))
.pipe(gulp.dest('public/js/'));
});
这将输出一个名为 common.js
的文件,其中包含所有 html 模板和指令。
看起来有点像这样:
angular.module("templates").run(["$templateCache", function($templateCache) {
$templateCache.put("common/a-great-eye.html","<div>lidless, wreathed in flame, 2 times</div>");}]);
angular.module("common")
.directive('aGreatEye', function () {
return {
restrict: 'E',
replace: true,
templateUrl: 'common/a-great-eye.html'
};
});
...
- 在
karma.conf.js
加载common.js
:
files: [
'../vendor/jquery/dist/jquery.js',
'../vendor/angular/angular.js',
'../vendor/angular-mocks/angular-mocks.js',
'../public/js/common.js'
]
- 在您的测试文件中引用
templates
模块:
describe('Unit testing great quotes', function() {
var $compile,
$rootScope;
// Load the common module, which contains the directive
beforeEach(function() {
module('templates');
module('common');
});
// Store references to $rootScope and $compile
// so they are available to all tests in this describe block
beforeEach(inject(function(_$compile_, _$rootScope_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('Replaces the element with the appropriate content', function() {
// Compile a piece of HTML containing the directive
var element = $compile("<a-great-eye></a-great-eye>")($rootScope);
// fire all the watches, so the scope expression {{1 + 1}} will be evaluated
$rootScope.$digest();
// Check that the compiled element contains the templated content
expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
});
});
调试
在 Chrome 浏览器中开始测试并点击调试按钮。然后打开开发者控制台。
小提示:
- 您可以在测试中添加断点。
- 确保控制台没有错误window,尤其是注入错误。如果这样做,请验证您在
karma.config.js
中请求的所有 js 文件(它们将在 Developer Console 中列出)是否已正确加载并包含您需要的代码(angular、模板、指令等) .
我在互联网和 SO 上阅读了很多 post 但找不到任何有效的解决方案 我正在尝试为指令编写单元测试并希望 html 文件从模板缓存
提供我正在使用 Gulp 作为构建工具
gulp 测试任务如下所示
gulp.task('test', function (done) {
karma.start({
configFile:__dirname + '/' + config.test.karmaconf,
singleRun: false
}, done);
});
在 karma.conf
中,我定义了
browserify: {
debug: true,
transform: [['browserify-ng-html2js', {
module: 'templates',
extension: 'html'
}]]
}
在单元测试中,我声明
beforeEach(angular.mock.module('templates'));
但收到
Error: Unexpected request: GET path/to/some.html
No more request expected
at $httpBackend
我也尝试在 karma.conf 中使用 preprocessors
和 ngHtml2JsPreprocessor
但没有成功。任何人都可以提供解决方案或指出我如何调试为什么不提供模板?
解决方案
您可以通过多种方式来做到这一点。我是这样做的:
gulp.task('bundle-common', function() {
return merge(
// Store all html files in $templateCache
gulp.src([
appDir + '/common/**/*.html'
])
.pipe($$.angularTemplatecache({
root: 'common'
}))
// Append everything else: directives, tests, etc.
gulp.src([
appDir + '/common/**/*.js'
])
)
.pipe($$.concat('common.js'))
.pipe(gulp.dest('public/js/'));
});
这将输出一个名为 common.js
的文件,其中包含所有 html 模板和指令。
看起来有点像这样:
angular.module("templates").run(["$templateCache", function($templateCache) {
$templateCache.put("common/a-great-eye.html","<div>lidless, wreathed in flame, 2 times</div>");}]);
angular.module("common")
.directive('aGreatEye', function () {
return {
restrict: 'E',
replace: true,
templateUrl: 'common/a-great-eye.html'
};
});
...
- 在
karma.conf.js
加载common.js
:
files: [
'../vendor/jquery/dist/jquery.js',
'../vendor/angular/angular.js',
'../vendor/angular-mocks/angular-mocks.js',
'../public/js/common.js'
]
- 在您的测试文件中引用
templates
模块:
describe('Unit testing great quotes', function() {
var $compile,
$rootScope;
// Load the common module, which contains the directive
beforeEach(function() {
module('templates');
module('common');
});
// Store references to $rootScope and $compile
// so they are available to all tests in this describe block
beforeEach(inject(function(_$compile_, _$rootScope_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('Replaces the element with the appropriate content', function() {
// Compile a piece of HTML containing the directive
var element = $compile("<a-great-eye></a-great-eye>")($rootScope);
// fire all the watches, so the scope expression {{1 + 1}} will be evaluated
$rootScope.$digest();
// Check that the compiled element contains the templated content
expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
});
});
调试
在 Chrome 浏览器中开始测试并点击调试按钮。然后打开开发者控制台。
小提示:
- 您可以在测试中添加断点。
- 确保控制台没有错误window,尤其是注入错误。如果这样做,请验证您在
karma.config.js
中请求的所有 js 文件(它们将在 Developer Console 中列出)是否已正确加载并包含您需要的代码(angular、模板、指令等) .