CSS使用Karma+Jasmine发布测试AngularJS指令

CSS issue testing AngularJS directives with Karma + Jasmine

本文关键字：测试 AngularJS 指令 使用 Karma+Jasmine 布测试 CSS      更新时间：2023-09-26

我正在使用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 $compile:编译的html中添加一个样式块

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）。。。

所以，我的大问题是：我应该如何在因果报应测试中导入并成功应用样式表？？：（

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

根据您的情况，您希望测试DOM是否处于特定状态。我发现了一个插件，它看起来是在考虑这个用例的情况下设计的：jasminejquery。即使您使用AngularJs进行DOM操作，这个扩展仍然可以让您测试结果DOM的状态。

特别是，我认为你应该看看StyleSheet Fixtures，它可以让你在测试中注入CSS。

免责声明：我还没有测试过这些，答案只是研究的结果

相关文章：