Javascript CSS发布测试AngularJS指令与Karma+；茉莉花

我用Karma+Jasmine测试我的AngularJS指令，我写了300多个测试，我非常高兴。。。直到我发现了一个问题，因为我陷入了困境：一些测试失败，因为它们需要对某些元素应用CSS（我的指令中的一段代码基于此样式进行大小计算），尽管我添加了包含CSS实现的文件，但在测试期间似乎忽略了该文件。 在我的karma配置中，我以以下方式添加了css文件：

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

上面的设置在

主体

中生成链接标记，而不是

头部

，因此我尝试使用js“手动”注入CSS：

angular.element(document).find('head').prepend(
        '<style type="text/css">@charset "UTF-8";' +
        '/* THE STYLE I NEED FOR MY TESTS HERE */' +
        '</style>'
);

…但还是不走运。。。我还尝试将测试运行程序从PhantomJS切换到Chrome，但问题是相同的：不知何故，样式被忽略了（它们被注入，但不会应用到元素，事实上使用

jQuery（targetElement）.css（'width'）

返回0）

---

所以，我的大问题是：我应该如何导入样式表并成功地将其应用于业力测试（

从您的情况来看，您希望测试DOM是否处于特定状态。我发现一个插件似乎是根据此用例设计的：。即使您使用AngularJs进行DOM操作，此扩展仍允许您测试生成的DOM状态

特别是，我认为您应该看看允许您将CSS注入到测试中的

---

免责声明：我还没有对此进行任何测试，答案只是研究的结果。

好的，这个问题非常简单和愚蠢……我想知道为什么我浪费了这么多时间去认识它：p 所以…CSS完全由Karma通过在配置文件中指定它们来注入，就像我第一种方法所做的那样（不需要其他插件或黑魔法），但是……CSS样式在元素添加到DOM之前不会应用于元素！这与karma、angular、jasmine或其他内容无关……这就是浏览器引擎的工作方式！浏览器解析CSS定义，并根据其呈现页面中的元素，但在angular test中，我写道：

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

---

我强烈建议在测试中将元素追加到DOM中时，在每个（function（）{element.remove（）}）之后添加一个（function（）{element.remove（）。

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

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