mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-01 10:47:57 +08:00
fix(checkbox): fix test cases in checkbox
This commit is contained in:
Herrington Darkholme
hangzou
parent
4d94c9712b
commit
12e5e93387
@ -1,9 +1,10 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { nextTick } from 'vue'
|
||||
import Checkbox from '../src/checkbox.vue'
|
||||
import CheckboxButton from '../src/checkbox-button.vue'
|
||||
import CheckboxGroup from '../src/checkbox-group.vue'
|
||||
|
||||
const _mount = <T={data: any; checkList: [];}>(template: string, data, otherObj?) => mount<T>({
|
||||
const _mount = <D>(template: string, data: () => D, otherObj?: Record<string, unknown>) => mount<D>({
|
||||
components: {
|
||||
'el-checkbox': Checkbox,
|
||||
'el-checkbox-group': CheckboxGroup,
|
||||
@ -23,42 +24,37 @@ const _mount = <T={data: any; checkList: [];}>(template: string, data, otherObj?
|
||||
})
|
||||
|
||||
describe('Checkbox', () => {
|
||||
test('create', async done => {
|
||||
test('create', async () => {
|
||||
const wrapper = _mount('<el-checkbox v-model="checkbox" label="a"/>', () => ({ checkbox: false }))
|
||||
const vm = wrapper.vm
|
||||
expect(wrapper.classes()).toContain('el-checkbox')
|
||||
await wrapper.trigger('click')
|
||||
vm.$nextTick(async () => {
|
||||
expect(wrapper.classes()).toContain('is-checked')
|
||||
await wrapper.trigger('click')
|
||||
expect(wrapper.classes('is-checked')).toBe(false)
|
||||
done()
|
||||
})
|
||||
expect(wrapper.classes()).toContain('is-checked')
|
||||
await wrapper.trigger('click')
|
||||
expect(wrapper.classes('is-checked')).toBe(false)
|
||||
})
|
||||
|
||||
test('disabled', async done => {
|
||||
test('no v-model', async () => {
|
||||
const wrapper = _mount('<el-checkbox label="a"/>', () => ({ checkbox: false }))
|
||||
expect(wrapper.classes('is-checked')).toBe(false)
|
||||
})
|
||||
|
||||
test('disabled', async () => {
|
||||
const wrapper = _mount('<el-checkbox v-model="checkbox" disabled label="a"/>', () => ({ checkbox: false }))
|
||||
const vm = wrapper.vm
|
||||
expect(wrapper.classes()).toContain('is-disabled')
|
||||
await wrapper.trigger('click')
|
||||
vm.$nextTick(() => {
|
||||
expect(wrapper.classes()).toContain('is-disabled')
|
||||
done()
|
||||
})
|
||||
expect(wrapper.classes()).toContain('is-disabled')
|
||||
})
|
||||
|
||||
test('change event', async done => {
|
||||
test('change event', async () => {
|
||||
const wrapper = _mount(
|
||||
`
|
||||
<el-checkbox v-model="checked" @change="onChange" />
|
||||
`,
|
||||
`<el-checkbox v-model="checked" @change="onChange" />`,
|
||||
() => ({
|
||||
data: '',
|
||||
data: null,
|
||||
checked: false,
|
||||
}),
|
||||
{
|
||||
methods: {
|
||||
onChange(val) {
|
||||
onChange(val: boolean) {
|
||||
this.data = val
|
||||
},
|
||||
},
|
||||
@ -66,15 +62,11 @@ describe('Checkbox', () => {
|
||||
)
|
||||
|
||||
const vm = wrapper.vm
|
||||
|
||||
await wrapper.trigger('click')
|
||||
vm.$nextTick(() => {
|
||||
expect(vm.data).toBe(true)
|
||||
done()
|
||||
})
|
||||
expect(vm.data).toBe(true)
|
||||
})
|
||||
|
||||
test('checkbox group', async done => {
|
||||
test('checkbox group', async () => {
|
||||
const wrapper = _mount(
|
||||
`
|
||||
<el-checkbox-group v-model="checkList">
|
||||
@ -89,20 +81,15 @@ describe('Checkbox', () => {
|
||||
const vm = wrapper.vm
|
||||
expect(vm.checkList.length).toBe(0)
|
||||
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
||||
vm.$nextTick(async () => {
|
||||
expect(vm.checkList.length).toBe(1)
|
||||
expect(vm.checkList).toContain('a')
|
||||
await wrapper.findComponent({ ref: 'b' }).trigger('click')
|
||||
vm.$nextTick(() => {
|
||||
expect(vm.checkList.length).toBe(2)
|
||||
expect(vm.checkList).toContain('a')
|
||||
expect(vm.checkList).toContain('b')
|
||||
done()
|
||||
})
|
||||
})
|
||||
expect(vm.checkList.length).toBe(1)
|
||||
expect(vm.checkList).toContain('a')
|
||||
await wrapper.findComponent({ ref: 'b' }).trigger('click')
|
||||
expect(vm.checkList.length).toBe(2)
|
||||
expect(vm.checkList).toContain('a')
|
||||
expect(vm.checkList).toContain('b')
|
||||
})
|
||||
|
||||
test('checkbox group change', async done => {
|
||||
test('checkbox group change', async () => {
|
||||
const wrapper = _mount(
|
||||
`
|
||||
<el-checkbox-group v-model="checkList" @change="onChange">
|
||||
@ -110,10 +97,10 @@ describe('Checkbox', () => {
|
||||
<el-checkbox label="b" ref="b"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
`,
|
||||
() => ({ checkList: [] }),
|
||||
() => ({ checkList: [], data: null }),
|
||||
{
|
||||
methods: {
|
||||
onChange(val) {
|
||||
onChange(val: string[]) {
|
||||
this.data = val
|
||||
},
|
||||
},
|
||||
@ -121,14 +108,12 @@ describe('Checkbox', () => {
|
||||
)
|
||||
const vm = wrapper.vm
|
||||
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
||||
vm.$nextTick(() => {
|
||||
expect(vm.data.length).toBe(1)
|
||||
expect(vm.data).toEqual(['a'])
|
||||
done()
|
||||
})
|
||||
await nextTick()
|
||||
expect(vm.data.length).toBe(1)
|
||||
expect(vm.data).toEqual(['a'])
|
||||
})
|
||||
|
||||
test('nested group', async done => {
|
||||
test('nested group', async () => {
|
||||
const wrapper = _mount(
|
||||
`
|
||||
<el-checkbox-group v-model="checkList">
|
||||
@ -145,13 +130,10 @@ describe('Checkbox', () => {
|
||||
const vm = wrapper.vm
|
||||
expect(vm.checkList.length).toBe(0)
|
||||
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
||||
vm.$nextTick(() => {
|
||||
expect(vm.checkList).toEqual(['a'])
|
||||
done()
|
||||
})
|
||||
expect(vm.checkList).toEqual(['a'])
|
||||
})
|
||||
|
||||
test('true false lable', async done => {
|
||||
test('true false lable', async () => {
|
||||
const wrapper = _mount(
|
||||
`<el-checkbox true-label="a" :false-label="3" v-model="checked"></el-checkbox>`,
|
||||
() => ({
|
||||
@ -160,10 +142,7 @@ describe('Checkbox', () => {
|
||||
)
|
||||
const vm = wrapper.vm
|
||||
await wrapper.trigger('click')
|
||||
vm.$nextTick(() => {
|
||||
expect((vm as any).checked).toBe(3)
|
||||
done()
|
||||
})
|
||||
expect(vm.checked).toBe(3)
|
||||
})
|
||||
|
||||
test('check', () => {
|
||||
@ -187,31 +166,23 @@ describe('Checkbox', () => {
|
||||
})
|
||||
|
||||
describe('check-button', () => {
|
||||
test('create', async done => {
|
||||
test('create', async () => {
|
||||
const wrapper = _mount('<el-checkbox-button v-model="checkbox" label="a"/>', () => ({ checkbox: false }))
|
||||
const vm = wrapper.vm
|
||||
expect(wrapper.classes()).toContain('el-checkbox-button')
|
||||
await wrapper.trigger('click')
|
||||
vm.$nextTick(async () => {
|
||||
expect(wrapper.classes()).toContain('is-checked')
|
||||
await wrapper.trigger('click')
|
||||
expect(wrapper.classes('is-checked')).toBe(false)
|
||||
done()
|
||||
})
|
||||
expect(wrapper.classes()).toContain('is-checked')
|
||||
await wrapper.trigger('click')
|
||||
expect(wrapper.classes('is-checked')).toBe(false)
|
||||
})
|
||||
|
||||
test('disabled', async done => {
|
||||
test('disabled', async () => {
|
||||
const wrapper = _mount('<el-checkbox-button v-model="checkbox" disabled label="a"/>', () => ({ checkbox: false }))
|
||||
const vm = wrapper.vm
|
||||
expect(wrapper.classes()).toContain('is-disabled')
|
||||
await wrapper.trigger('click')
|
||||
vm.$nextTick(() => {
|
||||
expect(wrapper.classes()).toContain('is-disabled')
|
||||
done()
|
||||
})
|
||||
expect(wrapper.classes()).toContain('is-disabled')
|
||||
})
|
||||
|
||||
test('change event', async done => {
|
||||
test('change event', async () => {
|
||||
const wrapper = _mount(
|
||||
`
|
||||
<el-checkbox-button v-model="checked" @change="onChange" />
|
||||
@ -222,7 +193,7 @@ describe('check-button', () => {
|
||||
}),
|
||||
{
|
||||
methods: {
|
||||
onChange(val) {
|
||||
onChange(val: boolean) {
|
||||
this.data = val
|
||||
},
|
||||
},
|
||||
@ -231,13 +202,10 @@ describe('check-button', () => {
|
||||
|
||||
const vm = wrapper.vm
|
||||
await wrapper.trigger('click')
|
||||
vm.$nextTick(() => {
|
||||
expect(vm.data).toBe(true)
|
||||
done()
|
||||
})
|
||||
expect(vm.data).toBe(true)
|
||||
})
|
||||
|
||||
test('button group change', async done => {
|
||||
test('button group change', async () => {
|
||||
const wrapper = _mount(
|
||||
`
|
||||
<el-checkbox-group v-model="checkList" @change="onChange">
|
||||
@ -248,12 +216,12 @@ describe('check-button', () => {
|
||||
</el-checkbox-group>
|
||||
`,
|
||||
() => ({
|
||||
data: '',
|
||||
data: null,
|
||||
checkList: [],
|
||||
}),
|
||||
{
|
||||
methods: {
|
||||
onChange(val) {
|
||||
onChange(val: string[]) {
|
||||
this.data = val
|
||||
},
|
||||
},
|
||||
@ -261,14 +229,11 @@ describe('check-button', () => {
|
||||
)
|
||||
const vm = wrapper.vm
|
||||
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
||||
vm.$nextTick(async () => {
|
||||
expect(vm.data).toEqual(['a'])
|
||||
await wrapper.findComponent({ ref: 'b' }).trigger('click')
|
||||
vm.$nextTick(() => {
|
||||
expect(vm.data).toEqual(['a', 'b'])
|
||||
done()
|
||||
})
|
||||
})
|
||||
await nextTick() // await change event
|
||||
expect(vm.data).toEqual(['a'])
|
||||
await wrapper.findComponent({ ref: 'b' }).trigger('click')
|
||||
await nextTick() // await change event
|
||||
expect(vm.data).toEqual(['a', 'b'])
|
||||
})
|
||||
|
||||
test('button group props', () => {
|
||||
@ -289,7 +254,7 @@ describe('check-button', () => {
|
||||
expect((vm.$refs.a as any).$el.querySelector('.el-checkbox-button__inner').style.borderColor).toEqual('#ff0000')
|
||||
})
|
||||
|
||||
test('button group min and max', async done => {
|
||||
test('button group min and max', async () => {
|
||||
const wrapper = _mount(
|
||||
`
|
||||
<el-checkbox-group
|
||||
@ -314,21 +279,16 @@ describe('check-button', () => {
|
||||
vm.$nextTick(async () => {
|
||||
expect(vm.checkList.length).toBe(1)
|
||||
await wrapper.findComponent({ ref: 'b' }).trigger('click')
|
||||
vm.$nextTick(async () => {
|
||||
expect(vm.checkList.length).toBe(2)
|
||||
await wrapper.findComponent({ ref: 'c' }).trigger('click')
|
||||
vm.$nextTick(() => {
|
||||
expect(vm.checkList.length).toBe(2)
|
||||
expect(vm.checkList).toEqual(['a', 'b'])
|
||||
expect((wrapper.findComponent({ ref: 'c' }).vm as any).isDisabled).toBe(true)
|
||||
expect((wrapper.findComponent({ ref: 'd' }).vm as any).isDisabled).toBe(true)
|
||||
done()
|
||||
})
|
||||
})
|
||||
expect(vm.checkList.length).toBe(2)
|
||||
await wrapper.findComponent({ ref: 'c' }).trigger('click')
|
||||
expect(vm.checkList.length).toBe(2)
|
||||
expect(vm.checkList).toEqual(['a', 'b'])
|
||||
expect((wrapper.findComponent({ ref: 'c' }).vm as any).isDisabled).toBe(true)
|
||||
expect((wrapper.findComponent({ ref: 'd' }).vm as any).isDisabled).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
test('nested group', async done => {
|
||||
test('nested group', async () => {
|
||||
const wrapper = _mount(
|
||||
`
|
||||
<el-checkbox-group v-model="checkList">
|
||||
@ -345,13 +305,10 @@ describe('check-button', () => {
|
||||
const vm = wrapper.vm
|
||||
expect(vm.checkList.length).toBe(0)
|
||||
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
||||
vm.$nextTick(() => {
|
||||
expect(vm.checkList).toEqual(['a'])
|
||||
done()
|
||||
})
|
||||
expect(vm.checkList).toEqual(['a'])
|
||||
})
|
||||
|
||||
test('true false lable', async done => {
|
||||
test('true false lable', async () => {
|
||||
const wrapper = _mount(
|
||||
`<el-checkbox-button true-label="a" :false-label="3" v-model="checked" />`,
|
||||
() => ({
|
||||
@ -360,10 +317,7 @@ describe('check-button', () => {
|
||||
)
|
||||
const vm = wrapper.vm
|
||||
await wrapper.trigger('click')
|
||||
vm.$nextTick(() => {
|
||||
expect((vm as any).checked).toBe(3)
|
||||
done()
|
||||
})
|
||||
expect(vm.checked).toBe(3)
|
||||
})
|
||||
|
||||
test('check', () => {
|
||||
@ -380,7 +334,7 @@ describe('check-button', () => {
|
||||
checked: false,
|
||||
checklist: [],
|
||||
}),
|
||||
) as any
|
||||
)
|
||||
expect(wrapper.vm.checked).toBe(true)
|
||||
expect(wrapper.vm.checklist).toEqual(['a'])
|
||||
})
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
<input
|
||||
v-if="trueLabel || falseLabel"
|
||||
v-model="model"
|
||||
:checked="isChecked"
|
||||
class="el-checkbox-button__original"
|
||||
type="checkbox"
|
||||
:name="name"
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
<input
|
||||
v-if="trueLabel || falseLabel"
|
||||
v-model="model"
|
||||
:checked="isChecked"
|
||||
class="el-checkbox__original"
|
||||
type="checkbox"
|
||||
:aria-hidden="indeterminate ? 'true' : 'false'"
|
||||
@ -111,19 +112,18 @@ export default defineComponent({
|
||||
setup(props, { emit }) {
|
||||
const { elForm, isGroup, _checkboxGroup, _elFormItemSize, elFormItem, ELEMENT } = useCheckbox()
|
||||
const instance = getCurrentInstance()
|
||||
const selfModel = ref(false)
|
||||
const selfModel = ref<unknown>(false)
|
||||
const focus = ref(false)
|
||||
const isLimitExceeded = ref(false)
|
||||
const store = computed(() => _checkboxGroup ? _checkboxGroup.modelValue.value : props.modelValue)
|
||||
const model = computed({
|
||||
const model = computed<unknown>({
|
||||
get() {
|
||||
return isGroup.value ? store.value : props.modelValue !== undefined ? props.modelValue : selfModel
|
||||
return isGroup.value
|
||||
? store.value : props.modelValue !== undefined ? props.modelValue : selfModel.value
|
||||
},
|
||||
|
||||
set(val: any) {
|
||||
if (isGroup.value) {
|
||||
set(val: unknown) {
|
||||
if (isGroup.value && Array.isArray(val)) {
|
||||
isLimitExceeded.value = false
|
||||
|
||||
if (_checkboxGroup.min !== undefined && val.length < _checkboxGroup.min) {
|
||||
isLimitExceeded.value = true
|
||||
}
|
||||
@ -139,12 +139,13 @@ export default defineComponent({
|
||||
},
|
||||
})
|
||||
const isChecked = computed(() => {
|
||||
if (Object.prototype.toString.call(model.value) === '[object Boolean]') {
|
||||
return model.value
|
||||
} else if (Array.isArray(model.value)) {
|
||||
return model.value.includes(props.label)
|
||||
} else if (model.value !== null && model.value !== undefined) {
|
||||
return model.value === props.trueLabel
|
||||
const value = model.value
|
||||
if (Object.prototype.toString.call(value) === '[object Boolean]') {
|
||||
return Boolean(value)
|
||||
} else if (Array.isArray(value)) {
|
||||
return value.includes(props.label)
|
||||
} else if (value !== null && value !== undefined) {
|
||||
return value === props.trueLabel
|
||||
}
|
||||
})
|
||||
const isLimitDisabled = computed(() => {
|
||||
@ -176,16 +177,14 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
function handleChange(e: UIEvent) {
|
||||
function handleChange(e: InputEvent) {
|
||||
if (isLimitExceeded.value) return
|
||||
let value = ref(undefined)
|
||||
if ((e.target as HTMLInputElement).checked) {
|
||||
value.value = props.trueLabel === undefined ? true : props.trueLabel
|
||||
} else {
|
||||
value.value = props.falseLabel === undefined ? false : props.falseLabel
|
||||
}
|
||||
const target = e.target as HTMLInputElement
|
||||
const value = target.checked
|
||||
? props.trueLabel ?? true
|
||||
: props.falseLabel ?? false
|
||||
|
||||
emit('change', value.value, e)
|
||||
emit('change', value, e)
|
||||
/**
|
||||
* to discuss does it is useful
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user