input组件地址
input组件测试代码
1. 思路
-
样式
- 宽高样式
- 状态样式
- focus状态
- hover状态
- disabled状态
- readonly状态
- :error属性状态下文字展示、排列等等...
-
事件
- 需要
$emit的eventName和...args
- 需要
双向数据绑定
<s-input v-model='message'></s-input>
`v-model`相当于一个语法糖会将`s-input`转换为：
<s-input :value='message' @input='message = $event.target.value'></s-input>
内部的双向绑定实现：
<template>
<input :value='value' @input='$emit('input', $event.target.value)'></input>
</template>
<script>
export default {
props: {
value: {
type: String
}
}
}
</script>
2. 测试
在使用Karma、Mocha、Sinon做测试的时候需要注意的地方：
// 由于input、change、blur、focus事件都需要使用JS触发
1. 首先需要添加事件：
IE：element.attachEvent(on + eventName, fn)
其他高级浏览器：element.addEventListener(eventName, fn)
2. 触发事件：
IE比较好解决：
只要使用element.fireEvent(on + eventName)
其他高级浏览器：
方式一：
const event = document.createEvent('HTMLEvent') //createEvent已废弃
event.initEvent(eventName, false, true)
element.dispatchEvent(event)
方式二：
const event = new Event(typeArg, eventInit)
//typeArg表示所创建事件的名称
//eventInit表示初始化事件类型（具体查询MDN, 下方有链接）
//由于input、change事件在$emit中返回的是$event.target.value(浏览器给予的)，而用new Event创建的没有，所以需要如果要获得$event.target.value，就需要加多一段代码
Object.defineProperty(event, 'target', {
value: { value: 'hi' },
enumerable: true
})
element.dispatchEvent(event)
