CSS问题与测试噶+茉莉AngularJS指令 [英] CSS issue testing AngularJS directives with Karma + Jasmine

问题描述

我用噶+茉莉测试我AngularJS指令，我写了300多的测试，我感到非常高兴......直到我发现，我花了这里，因为我卡住了一个问题：一些测试失败，因为他们需要应用到一些元素的CSS，尽管我加入含有CSS实现文件（在我的指令做基于这种样式的大小计算一块code的），该文件似乎在测试过程中被忽略。
在我的业力的配置我加了这样的css文件：

I'm using Karma + Jasmine to test my AngularJS directives, I wrote more than 300 tests and I was very happy... until I found an issue that taken me here because I'm stuck: some tests are failing because they need a CSS applied to some elements (a piece of code in my directive does a size computation based on this style), and despite I added the file containing the CSS implementation, this file seems ignored during tests. In my karma config I added the css file in this way:

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

上述设置生成的体的链接标记，而不是头，所以我试图注入CSS 手动使用JS：

the settings above generates a link tag in the body rather than head, so I tried to inject the CSS "manually" using js:

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

但既不是这种做法似乎工作（我测试和风格标签被正确注射）。
我终于想补充一点，我编译使用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（'宽'）则返回0，他们没有得到应用的元素，其实）...

...but still no lucky... I also tried to switch the test runner from PhantomJS to Chrome, but the problem is the same: styles are somehow ignored (they are injected but they don't get applied to elements, in fact using jQuery(targetElement).css('width') it returns 0)...

所以，我的大问题：我应该怎么导入和业力试验成功申请样式？ （

so, my big question: how should I import and successfully apply stylesheet in karma tests??? :(

推荐答案

好吧，这个问题非常简单，愚蠢的......我不知道为什么我失去了这么多的时间来实现它：P
所以...的CSS是由完美噶通过注入在配置文件中指定它们，就像我作为第一种方法做（有没有需要其他插件或黑魔法），但... CSS样式直到他们添加到DOM！不会应用到的元素，这是不相关的业力，棱角分明，茉莉花或者还有什么问题......这是怎样一个浏览器引擎的作品！浏览器解析CSS定义，它呈现了根据页面的元素，但在角测试时，我写的：

Ok, the problem is very simple and stupid... I wonder why I lost so much time to realize it :P So... the CSS are perfectly injected by Karma by specifying them in the config file, like I've done as the first approach (there is no need for other plugin or black magic), but... CSS styles are not applied to elements until they get added to the DOM! and this is not an issue related to karma, angular, jasmine or what else... this is how a browser engine works! A browser parses CSS definitions and it renders elements in the page according, but when in angular test I write:

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

我处理内存中的DOM节点，这是未知所有，但我的JavaScript code！浏览器引擎应该如何应用CSS生活在一个js变量在内存中的节点？它不能明显...它只能遍历网页中的节点树，所以......修复很简单：我的元素添加到DOM：

I'm dealing with in-memory DOM nodes, which are unknown to all but my JavaScript code! How should the browser engine apply CSS to an in-memory node living in a js variable? It can't obviously... it can only traverse the nodes tree in the page, so... the "fix" is very simple: I have to add the element to the DOM:

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

这篇关于CSS问题与测试噶+茉莉AngularJS指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！