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

我正在使用 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 to Chrome，但问题是相同的：样式以某种方式被忽略（它们被注入但没有应用于元素，实际上使用jQuery(targetElement).css('width')它返回 0)...

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

好吧，这个问题非常简单和愚蠢......我想知道为什么我花了这么多时间来实现它：P 所以...... Karma 通过在配置文件中指定它们来完美地注入 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);