gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 03:47:58 27 4
gpt4 key购买 nike

我正在使用 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 测试中导入并成功应用样式表??? :(

最佳答案

好吧,这个问题非常简单和愚蠢......我想知道为什么我浪费了这么多时间来实现它: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);

关于javascript - CSS 问题使用 Karma + Jasmine 测试 AngularJS 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25654043/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com