相关疑难解决方法(0)

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

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

files: [
     // ..
     'styles/foo.css',
     // ..
],
Run Code Online (Sandbox Code Playgroud)

上面的设置生成一个链接标签,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>'
);
Run Code Online (Sandbox Code Playgroud)

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

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);
Run Code Online (Sandbox Code Playgroud)

...但仍然没有幸运...我也尝试将测试运行PhantomJS切换到Chrome,但问题是相同的:样式被忽略了(它们被注入但是它们不适用于元素,实际上使用jQuery(targetElement).css('width')它返回0)...

所以,我的一个大问题:如何在业力测试中导入并成功应用样式表?:(

javascript css jasmine angularjs karma-runner

9
推荐指数
1
解决办法
3286
查看次数

标签 统计

angularjs ×1

css ×1

jasmine ×1

javascript ×1

karma-runner ×1