我正在使用Karma + Jasmine来测试我的AngularJS指令,我写了300多个测试,我非常高兴......直到我发现一个问题让我在这里因为我被卡住了:一些测试失败了,因为他们需要一个CSS应用于某些元素(我的指令中的一段代码根据此样式进行大小计算),尽管我添加了包含CSS实现的文件,但在测试期间此文件似乎被忽略.在我的karma配置中,我以这种方式添加了css文件:
files: [
// ..
'styles/foo.css',
// ..
],
Run Code Online (Sandbox Code Playgroud)
上面的设置生成一个链接标签,body而不是head,所以我试图使用js"手动"注入CSS:
angular.element(document).find('head').prepend(
'<style type="text/css">@charset "UTF-8";' +
'/* THE STYLE I NEED FOR MY TESTS HERE */' +
'</style>'
);
Run Code Online (Sandbox Code Playgroud)
但这种方法似乎都不起作用(我测试过并且样式标签被正确注入).我终于尝试在使用angular编译的html中添加一个样式块$compile:
var element = ng.element('<div>' +
'<style type="text/css">@charset "UTF-8";' +
'/* THE STYLE I NEED FOR MY TESTS HERE */' +
'</style>' +
'<my-directive></my-directive>' +
+ '</div>');
$compile(element)(scope);
Run Code Online (Sandbox Code Playgroud)
...但仍然没有幸运...我也尝试将测试运行器从PhantomJS切换到Chrome,但问题是相同的:样式被忽略了(它们被注入但是它们不适用于元素,实际上使用jQuery(targetElement).css('width')它返回0)...
所以,我的一个大问题:如何在业力测试中导入并成功应用样式表?:(