Angularjs Gulp角度单元测试指令templateUrl_Angularjs_Unit Testing_Angularjs Directive_Gulp_Browserify

Angularjs Gulp角度单元测试指令templateUrl

angularjs unit-testing gulp

Angularjs Gulp角度单元测试指令templateUrl,angularjs,unit-testing,angularjs-directive,gulp,browserify,Angularjs,Unit Testing,Angularjs Directive,Gulp,Browserify,我在网上读了很多帖子，但找不到任何有效的解决方案我试图为一个指令编写单元测试，并希望从模板缓存中提供html文件我使用Gulp作为构建工具测试的吞咽任务如下所示 gulp.task('test', function (done) { karma.start({ configFile:__dirname + '/' + config.test.karmaconf, singleRun: false }, done); }); 在karma.c

我在网上读了很多帖子，但找不到任何有效的解决方案我试图为一个指令编写单元测试，并希望从模板缓存中提供html文件

我使用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中使用

预处理器

和

ngHtml2JsPreprocessor

，但没有成功。是否有人能提供解决方案或告诉我如何调试为什么不提供模板

解决方案你可以用多种方法来做这件事。我是这样做的：

使用：

gulp.task（'bundle-common'，function（）{
返回合并(
//将所有html文件存储在$templateCache中
大口([
appDir+'/common/***/.html'
])
.pipe（$$.angularTemplatecache({
根：'普通'
}))
//附加所有其他内容：指令、测试等。
大口([
appDir+'/common/***/.js'
])
)
.pipe（$$.concat（'common.js'））
.pipe（gulp.dest（'public/js/'）；
});

这将输出一个名为

common.js

的文件，其中包含所有html模板和指令

它看起来有点像这样：

angular.module（“模板”）.run（[“$templateCache”），function（$templateCache）{
$templateCache.put（“common/a-great-eye.html”，“无盖，火焰环绕，2次”）；}）；
角度模块（“通用”）
.directive（'aGreatEye'，function（）{
返回{
限制：'E'，
替换：正确，
templateUrl:'common/a-great-eye.html'
};
});
...

在

karma.conf.js

load

common.js

中：

文件：[
“../vendor/jquery/dist/jquery.js”，
“../vendor/angular/angular.js”，
“../vendor/angular mocks/angular mocks.js”，
“../public/js/common.js”
]

在测试文件中引用

模板

模块：

descripe（'unittesting great quotes'，function（）{
var$compile，
$rootScope；
//加载包含指令的公共模块
beforeach（函数（）{
模块（“模板”）；
模块（“通用”）；
});
//存储对$rootScope和$compile的引用
//因此，它们可用于此块中的所有测试
beforeach（注入函数（$compile，$rootScope）{
//匹配时，注入器会从参数名称周围展开下划线（389;）
$compile=\$compile；
$rootScope=\u$rootScope；
}));
它（'用适当的内容替换元素'，函数（）{
//编译一段包含指令的HTML
var元素=$compile（“”（$rootScope）；
//启动所有手表，以便对作用域表达式{{1+1}进行求值
$rootScope.$digest（）；
//检查编译的元素是否包含模板化的内容
expect（element.html（））.toContain（“无盖，火焰环绕，2次”）；
});
});

调试在Chrome浏览器中启动测试并点击调试按钮。然后打开开发者控制台

几点提示：

您可以在测试中添加断点
确保控制台窗口中没有错误，尤其是注入错误。如果您这样做，请验证您在
```
karma.config.js
```
中请求的所有js文件（它们将在开发人员控制台中列出）是否正确加载并包含您需要的代码（角度、模板、指令等）