使用Karma + Jasmine测试AngularJS指令的CSS问题

Question

我正在使用Karma + Jasmine来测试我的AngularJS指令,我写了300多个测试,我非常高兴......直到我发现一个问题让我在这里因为我被卡住了:一些测试失败了,因为他们需要一个CSS应用于某些元素(我的指令中的一段代码根据此样式进行大小计算),尽管我添加了包含CSS实现的文件,但在测试期间此文件似乎被忽略.在我的karma配置中,我以这种方式添加了css文件:

files: [
     // ..
     'styles/foo.css',
     // ..
],

上面的设置生成一个链接标签,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>'
);

但这种方法似乎都不起作用(我测试过并且样式标签被正确注入).我终于尝试在使用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);

...但仍然没有幸运...我也尝试将测试运行器从PhantomJS切换到Chrome,但问题是相同的:样式被忽略了(它们被注入但是它们不适用于元素,实际上使用jQuery(targetElement).css('width')它返回0)...

所以,我的一个大问题:如何在业力测试中导入并成功应用样式表？:(

Answer 1

好吧,问题非常简单和愚蠢...我想知道为什么我失去了这么多时间来实现它:P所以...通过在配置文件中指定它们来完全注入CSS,就像我做的那样第一种方法(不需要其他插件或黑魔法),但是... CSS样式在添加到DOM之前不会应用于元素!这不是与业力,角度,茉莉或其他相关的问题......这就是浏览器引擎的工作原理!浏览器解析CSS定义,它根据页面呈现元素,但是在角度测试中,我写道:

var element = angular.element('<my-directive></my-directive>');
$compile(element)(scope);

我正在处理内存中的DOM节点,除了我的JavaScript代码之外,它们都是未知的!浏览器引擎应该如何将CSS应用于生活在js变量中的内存节点？它显然不能......它只能遍历页面中的节点树,所以......"修复"非常简单:我必须将元素添加到DOM:

angular.element(document).find('body').append(element);