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

Question

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

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

上面的设置在 body 而不是 head 中生成链接标记，所以我尝试使用 js“手动”注入(inject) CSS:

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

但这种方法似乎都不起作用(我测试过并且样式标签被正确注入(inject))。 我终于尝试在使用 angular $compile 编译的 html 中添加一个样式 block :

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，但问题是一样的:样式不知何故忽略(它们被注入(inject)但没有应用到元素，实际上使用 jQuery(targetElement).css('width') 它返回 0)...

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

Answer 1

好吧，这个问题非常简单和愚蠢......我想知道为什么我浪费了这么多时间来实现它:P 所以... CSS 由 Karma 通过在配置文件中指定它们来完美注入(inject)，就像我作为第一种方法所做的那样(不需要其他插件或黑魔法)，但是... CSS 样式在将它们添加到 DOM 之前不会应用于元素! 这不是与 karma 、 Angular 、 Jasmine 或其他什么相关的问题……这就是浏览器引擎的工作方式!浏览器解析 CSS 定义并根据页面呈现元素，但是在 Angular Testing 中我写:

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

我正在处理内存中的 DOM 节点，除了我的 JavaScript 代码外，其他人都不知道这些节点!浏览器引擎应该如何将 CSS 应用于 js 变量中的内存节点？它显然不能......它只能遍历页面中的节点树，所以......“修复”非常简单:我必须将元素添加到 DOM:

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