@拭目以待：karma引入css的配置方法

需求场景

使用karma测试click事件执行前后，指定dom的display属性值。html,event,css如下:

html结构

<button id="test-action">show or hide</button>
<div class="test-area">
    这个区域将由button来控制显示或隐藏
</div>

绑定事件

var testAction = document.querySelector('#test-action');
var testArea = document.querySelector('.test-area');
testAction.addEventListener('click', function(e){
    var _display = window.getComputedStyle(testArea)['display'];
    testArea.style.display = _display === 'none' ? 'block' : 'none';
}, false);

需要引入的css文件名为 GridManager.css， 文件内容如下:

.test-area{
dispaly:none;
}

css引入及karma配置过程

1.在依赖 css 的测试文件头部引入 css文件

import '../src/css/GridManager.css';

如果当前项目未使用ES6， 则可以使用karma 自带的require工具

require('../src/css/GridManager.css');

引入之后，执行 npm run test 之后报错信息如下:

ERROR in ./src/css/GridManager.css
Module parse failed: /Users/baukh/work/GridManager/src/css/GridManager.css Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type.

大概意思就是需要处理css的加载程序

2.安装css所需的加载程序

npm install style-loader --save-dev
npm install css-loader --save-dev
npm install url-loader --save-dev

简单来讲 style-loader 与 css-loader 是用来处理样式文件的，而 url-loader 是用来处理 iconfont 相关文件的。如 .woff .ttf .eot .svg。

3.在karma.conf.js 中 配置 css所需要的加载程序

module.exports = function (config) {
    config.set({
            // 省略其它项
        webpack: {
            module:{
                loaders:[
                    {
                        test:/.css$/,
                        loader:'style-loader!css-loader',
                        exclude: /(node_modules|bower_components)/,
                        include: [path.join(__dirname, 'src/css')]
                    },
                    {
                        test: /.(woff|woff2)(?v=d+.d+.d+)?$/,
                        loader: 'url?limit=15000&mimetype=application/font-woff&prefix=fonts',
                        exclude: /(node_modules|bower_components)/,
                        include: [path.join(__dirname, 'src')]
                    },
                    {
                        test: /.ttf(?v=d+.d+.d+)?$/,
                        loader: 'url?limit=15000&mimetype=application/octet-stream&prefix=fonts',
                        exclude: /(node_modules|bower_components)/,
                        include: [path.join(__dirname, 'src')]
                    },
                    {
                        test: /.eot(?#w+)?$/,
                        loader: 'url?limit=15000&mimetype=application/vnd.ms-fontobject&prefix=fonts',
                        exclude: /(node_modules|bower_components)/,
                        include: [path.join(__dirname, 'src')]
                    },
                    {
                        test: /.svg(#w+)?$/,
                        loader: 'url?limit=15000&mimetype=image/svg+xml&prefix=fonts',
                        exclude: /(node_modules|bower_components)/,
                        include: [path.join(__dirname, 'src')]
                    }
                ]
            }
        }
    });
};

4.执行测试过程

it('测试事件执行结果', function(){
    var testAction = document.querySelector('#test-action');
    var testArea = document.querySelector('.test-area');
    expect(window.getComputedStyle(testArea)['display']).toBe('none');
    // 触发更改display事件
    testAction.click();
    expect(window.getComputedStyle(testArea)['display']).toBe('block');
 
    testAction = null;
    testArea = null;
});

@拭目以待

个人站点：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love

《野生前端工程师》专辑中所有文章均为@拭目以待 原创，转载请注明出处。