mirror of https://github.com/ElemeFE/element
add checkbox test
parent
ab693a2e15
commit
01d7b983f5
|
@ -41,7 +41,7 @@
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<!-- `checked` 为 true 或 false -->
|
<!-- `checked` 为 true 或 false -->
|
||||||
<el-checkbox class="checkbox" v-model="checked" checked>备选项</el-checkbox>
|
<el-checkbox v-model="checked" checked>备选项</el-checkbox>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
@ -63,8 +63,8 @@
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<el-checkbox class="checkbox" v-model="checked1" disabled>备选项1</el-checkbox>
|
<el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>
|
||||||
<el-checkbox class="checkbox" v-model="checked2" disabled>备选项</el-checkbox>
|
<el-checkbox v-model="checked2" disabled>备选项</el-checkbox>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
@ -88,11 +88,11 @@
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<el-checkbox-group v-model="checkList">
|
<el-checkbox-group v-model="checkList">
|
||||||
<el-checkbox class="checkbox" label="复选框 A"></el-checkbox>
|
<el-checkbox label="复选框 A"></el-checkbox>
|
||||||
<el-checkbox class="checkbox" label="复选框 B"></el-checkbox>
|
<el-checkbox label="复选框 B"></el-checkbox>
|
||||||
<el-checkbox class="checkbox" label="复选框 C"></el-checkbox>
|
<el-checkbox label="复选框 C"></el-checkbox>
|
||||||
<el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
|
<el-checkbox label="禁用" disabled></el-checkbox>
|
||||||
<el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
|
<el-checkbox label="选中且禁用" disabled></el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -117,7 +117,6 @@
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<el-checkbox
|
<el-checkbox
|
||||||
class="checkbox"
|
|
||||||
v-model="isValid"
|
v-model="isValid"
|
||||||
true-label="可用"
|
true-label="可用"
|
||||||
false-label="不可用">
|
false-label="不可用">
|
||||||
|
|
|
@ -0,0 +1,102 @@
|
||||||
|
import { createVue } from '../util';
|
||||||
|
|
||||||
|
describe('Checkbox', () => {
|
||||||
|
it('create', done => {
|
||||||
|
const vm = createVue({
|
||||||
|
template: `
|
||||||
|
<el-checkbox v-model="checked">
|
||||||
|
</el-checkbox>
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checked: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
let checkboxElm = vm.$el;
|
||||||
|
expect(checkboxElm.classList.contains('el-checkbox')).to.be.true;
|
||||||
|
checkboxElm.click();
|
||||||
|
vm.$nextTick(_ => {
|
||||||
|
expect(checkboxElm.querySelector('.is-checked')).to.be.ok;
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
it('disabled', () => {
|
||||||
|
const vm = createVue({
|
||||||
|
template: `
|
||||||
|
<el-checkbox
|
||||||
|
v-model="checked"
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
</el-checkbox>
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checked: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
let checkboxElm = vm.$el;
|
||||||
|
expect(checkboxElm.querySelector('.is-disabled')).to.be.ok;
|
||||||
|
});
|
||||||
|
it('checkbox group', done => {
|
||||||
|
const vm = createVue({
|
||||||
|
template: `
|
||||||
|
<el-checkbox-group v-model="checkList">
|
||||||
|
<el-checkbox label="a" ref="a"></el-checkbox>
|
||||||
|
<el-checkbox label="b" ref="b"></el-checkbox>
|
||||||
|
<el-checkbox label="c" ref="c"></el-checkbox>
|
||||||
|
<el-checkbox label="d" ref="d"></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checkList: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
expect(vm.checkList.length === 0).to.be.true;
|
||||||
|
vm.$refs.a.$el.click();
|
||||||
|
vm.$nextTick(_ => {
|
||||||
|
expect(vm.checkList.indexOf('a') !== -1).to.be.true;
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
it('true false label', done => {
|
||||||
|
const vm = createVue({
|
||||||
|
template: `
|
||||||
|
<el-checkbox true-label="a" :false-label="3" v-model="checked"></el-checkbox>
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checked: 'a'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
vm.$el.click();
|
||||||
|
vm.$nextTick(_ => {
|
||||||
|
expect(vm.checked === 3).to.be.true;
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
it('checked', () => {
|
||||||
|
const vm = createVue({
|
||||||
|
template: `
|
||||||
|
<div>
|
||||||
|
<el-checkbox v-model="checked" checked></el-checkbox>
|
||||||
|
<el-checkbox-group v-model="checklist">
|
||||||
|
<el-checkbox checked label="a"></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checked: false,
|
||||||
|
checklist: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
expect(vm.checked).to.be.true;
|
||||||
|
expect(vm.checklist.indexOf('a') !== -1).to.be.true;
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue