karma引入css的配置方法

karma,webpack,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;
});