需求場(chǎng)景
使用karma測(cè)試click事件執(zhí)行前后，指定dom的display屬性值爬橡。html,event,css如下:
html結(jié)構(gòu)
<button id="test-action">show or hide</button>
<div class="test-area">
這個(gè)區(qū)域?qū)⒂蒪utton來(lái)控制顯示或隱藏
</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， 文件內(nèi)容如下:
.test-area{
dispaly:none;
}
css引入及karma配置過(guò)程
1.在依賴 css 的測(cè)試文件頭部引入 css文件
import '../src/css/GridManager.css';
如果當(dāng)前項(xiàng)目未使用ES6， 則可以使用karma 自帶的require工具
require('../src/css/GridManager.css');
引入之后，執(zhí)行 npm run test 之后報(bào)錯(cuò)信息如下:
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
簡(jiǎn)單來(lái)講 style-loader 與 css-loader 是用來(lái)處理樣式文件的口芍，而 url-loader 是用來(lái)處理 iconfont 相關(guān)文件的。如 .woff .ttf .eot .svg雇卷。
3.在karma.conf.js 中 配置 css所需要的加載程序
module.exports = function (config) {
config.set({
// 省略其它項(xiàng)
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.執(zhí)行測(cè)試過(guò)程
it('測(cè)試事件執(zhí)行結(jié)果', function(){
var testAction = document.querySelector('#test-action');
var testArea = document.querySelector('.test-area');
expect(window.getComputedStyle(testArea)['display']).toBe('none');
// 觸發(fā)更改display事件
testAction.click();
expect(window.getComputedStyle(testArea)['display']).toBe('block');
testAction = null;
testArea = null;
});
@拭目以待
個(gè)人站點(diǎn)：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
《野生前端工程師》專輯中所有文章均為@拭目以待 原創(chuàng)闪唆，轉(zhuǎn)載請(qǐng)注明出處。
