2020-08-30 22:13:35 +08:00
|
|
|
import { nextTick } from 'vue'
|
2021-09-17 15:27:31 +08:00
|
|
|
import { mount } from '@vue/test-utils'
|
2022-04-19 12:46:57 +08:00
|
|
|
import { describe, expect, test } from 'vitest'
|
2020-08-13 15:16:38 +08:00
|
|
|
import Checkbox from '../src/checkbox.vue'
|
|
|
|
import CheckboxButton from '../src/checkbox-button.vue'
|
|
|
|
import CheckboxGroup from '../src/checkbox-group.vue'
|
|
|
|
|
2021-09-04 19:29:28 +08:00
|
|
|
const _mount = <D>(
|
|
|
|
template: string,
|
|
|
|
data: () => D,
|
|
|
|
otherObj?: Record<string, unknown>
|
|
|
|
) =>
|
|
|
|
mount<D>({
|
|
|
|
components: {
|
|
|
|
'el-checkbox': Checkbox,
|
|
|
|
'el-checkbox-group': CheckboxGroup,
|
|
|
|
'el-checkbox-button': CheckboxButton,
|
|
|
|
},
|
|
|
|
template,
|
|
|
|
data,
|
|
|
|
...otherObj,
|
|
|
|
})
|
2020-08-13 15:16:38 +08:00
|
|
|
|
|
|
|
describe('Checkbox', () => {
|
2020-08-30 22:13:35 +08:00
|
|
|
test('create', async () => {
|
2021-09-04 19:29:28 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
'<el-checkbox v-model="checkbox" label="a"/>',
|
|
|
|
() => ({ checkbox: false })
|
|
|
|
)
|
2020-08-13 15:16:38 +08:00
|
|
|
expect(wrapper.classes()).toContain('el-checkbox')
|
2022-01-25 11:51:43 +08:00
|
|
|
expect(wrapper.classes()).not.toContain('is-disabled')
|
2020-08-13 15:16:38 +08:00
|
|
|
await wrapper.trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(wrapper.classes()).toContain('is-checked')
|
|
|
|
await wrapper.trigger('click')
|
|
|
|
expect(wrapper.classes('is-checked')).toBe(false)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('no v-model', async () => {
|
2021-09-04 19:29:28 +08:00
|
|
|
const wrapper = _mount('<el-checkbox label="a"/>', () => ({
|
|
|
|
checkbox: false,
|
|
|
|
}))
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(wrapper.classes('is-checked')).toBe(false)
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
2020-08-30 22:13:35 +08:00
|
|
|
test('disabled', async () => {
|
2021-09-04 19:29:28 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
'<el-checkbox v-model="checkbox" disabled label="a"/>',
|
|
|
|
() => ({ checkbox: false })
|
|
|
|
)
|
2020-08-13 15:16:38 +08:00
|
|
|
expect(wrapper.classes()).toContain('is-disabled')
|
|
|
|
await wrapper.trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(wrapper.classes()).toContain('is-disabled')
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
2020-08-30 22:13:35 +08:00
|
|
|
test('change event', async () => {
|
2020-08-13 15:16:38 +08:00
|
|
|
const wrapper = _mount(
|
2020-08-30 22:13:35 +08:00
|
|
|
`<el-checkbox v-model="checked" @change="onChange" />`,
|
2020-08-13 15:16:38 +08:00
|
|
|
() => ({
|
2020-08-30 22:13:35 +08:00
|
|
|
data: null,
|
2020-08-13 15:16:38 +08:00
|
|
|
checked: false,
|
|
|
|
}),
|
|
|
|
{
|
|
|
|
methods: {
|
2020-08-30 22:13:35 +08:00
|
|
|
onChange(val: boolean) {
|
2020-08-13 15:16:38 +08:00
|
|
|
this.data = val
|
|
|
|
},
|
|
|
|
},
|
2021-09-04 19:29:28 +08:00
|
|
|
}
|
2020-08-13 15:16:38 +08:00
|
|
|
)
|
|
|
|
|
|
|
|
const vm = wrapper.vm
|
|
|
|
await wrapper.trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(vm.data).toBe(true)
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
2020-08-30 22:13:35 +08:00
|
|
|
test('checkbox group', async () => {
|
2020-08-13 15:16:38 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<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>
|
|
|
|
`,
|
2021-09-04 19:29:28 +08:00
|
|
|
() => ({ checkList: [] })
|
2020-08-13 15:16:38 +08:00
|
|
|
)
|
|
|
|
const vm = wrapper.vm
|
|
|
|
expect(vm.checkList.length).toBe(0)
|
|
|
|
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(vm.checkList.length).toBe(1)
|
2021-12-12 17:54:21 +08:00
|
|
|
|
2020-08-30 22:13:35 +08:00
|
|
|
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')
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
2021-12-21 14:38:54 +08:00
|
|
|
test('checkbox group without modelValue', async () => {
|
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<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>
|
|
|
|
`,
|
|
|
|
() => ({ checkList: undefined })
|
|
|
|
)
|
|
|
|
const vm = wrapper.vm
|
|
|
|
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
|
|
|
expect(vm.checkList.length).toBe(1)
|
|
|
|
expect(vm.checkList).toContain('a')
|
|
|
|
})
|
|
|
|
|
2020-08-30 22:13:35 +08:00
|
|
|
test('checkbox group change', async () => {
|
2020-08-13 15:16:38 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<el-checkbox-group v-model="checkList" @change="onChange">
|
|
|
|
<el-checkbox label="a" ref="a"></el-checkbox>
|
|
|
|
<el-checkbox label="b" ref="b"></el-checkbox>
|
|
|
|
</el-checkbox-group>
|
|
|
|
`,
|
2020-08-30 22:13:35 +08:00
|
|
|
() => ({ checkList: [], data: null }),
|
2020-08-13 15:16:38 +08:00
|
|
|
{
|
|
|
|
methods: {
|
2020-08-30 22:13:35 +08:00
|
|
|
onChange(val: string[]) {
|
2020-08-13 15:16:38 +08:00
|
|
|
this.data = val
|
|
|
|
},
|
|
|
|
},
|
2021-09-04 19:29:28 +08:00
|
|
|
}
|
2020-08-13 15:16:38 +08:00
|
|
|
)
|
|
|
|
const vm = wrapper.vm
|
|
|
|
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
await nextTick()
|
|
|
|
expect(vm.data.length).toBe(1)
|
|
|
|
expect(vm.data).toEqual(['a'])
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
2020-08-30 22:13:35 +08:00
|
|
|
test('nested group', async () => {
|
2020-08-13 15:16:38 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<el-checkbox-group v-model="checkList">
|
|
|
|
<div>
|
|
|
|
<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>
|
|
|
|
</div>
|
|
|
|
</el-checkbox-group>
|
|
|
|
`,
|
2021-09-04 19:29:28 +08:00
|
|
|
() => ({ checkList: [] })
|
2020-08-13 15:16:38 +08:00
|
|
|
)
|
|
|
|
const vm = wrapper.vm
|
|
|
|
expect(vm.checkList.length).toBe(0)
|
|
|
|
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(vm.checkList).toEqual(['a'])
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
2021-07-01 08:12:47 +08:00
|
|
|
test('true false label', async () => {
|
2020-08-13 15:16:38 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
`<el-checkbox true-label="a" :false-label="3" v-model="checked"></el-checkbox>`,
|
|
|
|
() => ({
|
|
|
|
checked: 'a',
|
2021-09-04 19:29:28 +08:00
|
|
|
})
|
2020-08-13 15:16:38 +08:00
|
|
|
)
|
|
|
|
const vm = wrapper.vm
|
|
|
|
await wrapper.trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(vm.checked).toBe(3)
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('check', () => {
|
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<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>
|
|
|
|
`,
|
|
|
|
() => ({
|
|
|
|
checked: false,
|
|
|
|
checklist: [],
|
2021-09-04 19:29:28 +08:00
|
|
|
})
|
2020-08-13 15:16:38 +08:00
|
|
|
) as any
|
|
|
|
expect(wrapper.vm.checked).toBe(true)
|
|
|
|
expect(wrapper.vm.checklist).toEqual(['a'])
|
|
|
|
})
|
2021-07-01 08:12:47 +08:00
|
|
|
|
2021-09-04 19:29:28 +08:00
|
|
|
test('label', async () => {
|
2021-07-01 08:12:47 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<div>
|
|
|
|
<el-checkbox-group v-model="checklist">
|
|
|
|
<el-checkbox label="">all</el-checkbox>
|
|
|
|
<el-checkbox label="a">a</el-checkbox>
|
|
|
|
<el-checkbox label="b">b</el-checkbox>
|
|
|
|
</el-checkbox-group>
|
|
|
|
</div>
|
|
|
|
`,
|
|
|
|
() => ({
|
|
|
|
checked: false,
|
|
|
|
checklist: [],
|
2021-09-04 19:29:28 +08:00
|
|
|
})
|
2021-07-01 08:12:47 +08:00
|
|
|
)
|
|
|
|
const checkbox = wrapper.find('.el-checkbox')
|
|
|
|
await checkbox.trigger('click')
|
|
|
|
expect(wrapper.vm.checklist[0]).toEqual('')
|
|
|
|
})
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
describe('check-button', () => {
|
2020-08-30 22:13:35 +08:00
|
|
|
test('create', async () => {
|
2021-09-04 19:29:28 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
'<el-checkbox-button v-model="checkbox" label="a"/>',
|
|
|
|
() => ({ checkbox: false })
|
|
|
|
)
|
2020-08-13 15:16:38 +08:00
|
|
|
expect(wrapper.classes()).toContain('el-checkbox-button')
|
|
|
|
await wrapper.trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(wrapper.classes()).toContain('is-checked')
|
|
|
|
await wrapper.trigger('click')
|
|
|
|
expect(wrapper.classes('is-checked')).toBe(false)
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
2020-08-30 22:13:35 +08:00
|
|
|
test('disabled', async () => {
|
2021-09-04 19:29:28 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
'<el-checkbox-button v-model="checkbox" disabled label="a"/>',
|
|
|
|
() => ({ checkbox: false })
|
|
|
|
)
|
2020-08-13 15:16:38 +08:00
|
|
|
expect(wrapper.classes()).toContain('is-disabled')
|
|
|
|
await wrapper.trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(wrapper.classes()).toContain('is-disabled')
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
2020-08-30 22:13:35 +08:00
|
|
|
test('change event', async () => {
|
2020-08-13 15:16:38 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<el-checkbox-button v-model="checked" @change="onChange" />
|
|
|
|
`,
|
|
|
|
() => ({
|
|
|
|
data: '',
|
|
|
|
checked: false,
|
|
|
|
}),
|
|
|
|
{
|
|
|
|
methods: {
|
2020-08-30 22:13:35 +08:00
|
|
|
onChange(val: boolean) {
|
2020-08-13 15:16:38 +08:00
|
|
|
this.data = val
|
|
|
|
},
|
|
|
|
},
|
2021-09-04 19:29:28 +08:00
|
|
|
}
|
2020-08-13 15:16:38 +08:00
|
|
|
)
|
|
|
|
|
|
|
|
const vm = wrapper.vm
|
|
|
|
await wrapper.trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(vm.data).toBe(true)
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
2020-08-30 22:13:35 +08:00
|
|
|
test('button group change', async () => {
|
2020-08-13 15:16:38 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<el-checkbox-group v-model="checkList" @change="onChange">
|
|
|
|
<el-checkbox-button label="a" ref="a"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="b" ref="b"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="c" ref="c"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="d" ref="d"></el-checkbox-button>
|
|
|
|
</el-checkbox-group>
|
|
|
|
`,
|
|
|
|
() => ({
|
2020-08-30 22:13:35 +08:00
|
|
|
data: null,
|
2020-08-13 15:16:38 +08:00
|
|
|
checkList: [],
|
|
|
|
}),
|
|
|
|
{
|
|
|
|
methods: {
|
2020-08-30 22:13:35 +08:00
|
|
|
onChange(val: string[]) {
|
2020-08-13 15:16:38 +08:00
|
|
|
this.data = val
|
|
|
|
},
|
|
|
|
},
|
2021-09-04 19:29:28 +08:00
|
|
|
}
|
2020-08-13 15:16:38 +08:00
|
|
|
)
|
|
|
|
const vm = wrapper.vm
|
|
|
|
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
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'])
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('button group props', () => {
|
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<el-checkbox-group v-model="checkList" size="large" fill="#FF0000" text-color="#000">
|
|
|
|
<el-checkbox-button label="a" ref="a"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="b" ref="b"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="c" ref="c"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="d" ref="d"></el-checkbox-button>
|
|
|
|
</el-checkbox-group>
|
|
|
|
`,
|
2021-09-04 19:29:28 +08:00
|
|
|
() => ({ checkList: ['a', 'b'] })
|
2020-08-13 15:16:38 +08:00
|
|
|
)
|
|
|
|
const vm = wrapper.vm
|
|
|
|
expect(vm.checkList.length).toBe(2)
|
|
|
|
expect((vm.$refs.a as any).$el.classList.contains('is-checked')).toBe(true)
|
2021-09-04 19:29:28 +08:00
|
|
|
expect(
|
|
|
|
(vm.$refs.a as any).$el.querySelector('.el-checkbox-button__inner').style
|
|
|
|
.borderColor
|
|
|
|
).toEqual('#ff0000')
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
2021-12-28 08:51:44 +08:00
|
|
|
test('button group tag', () => {
|
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<el-checkbox-group v-model="checkList" tag="tr">
|
|
|
|
<el-checkbox-button label="a" ref="a"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="b" ref="b"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="c" ref="c"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="d" ref="d"></el-checkbox-button>
|
|
|
|
</el-checkbox-group>
|
|
|
|
`,
|
|
|
|
() => ({ checkList: ['a', 'b'] })
|
|
|
|
)
|
|
|
|
expect(wrapper.find('tr').classes('el-checkbox-group')).toBeTruthy()
|
|
|
|
})
|
|
|
|
|
2020-08-30 22:13:35 +08:00
|
|
|
test('button group min and max', async () => {
|
2020-08-13 15:16:38 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<el-checkbox-group
|
|
|
|
v-model="checkList"
|
2021-10-30 21:30:52 +08:00
|
|
|
:min="2"
|
|
|
|
:max="3"
|
2020-08-13 15:16:38 +08:00
|
|
|
>
|
|
|
|
<el-checkbox-button label="a" ref="a"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="b" ref="b"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="c" ref="c"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="d" ref="d"></el-checkbox-button>
|
2021-10-30 21:30:52 +08:00
|
|
|
<el-checkbox-button label="e" ref="e"></el-checkbox-button>
|
2020-08-13 15:16:38 +08:00
|
|
|
</el-checkbox-group>
|
|
|
|
`,
|
|
|
|
() => ({
|
2021-10-30 21:30:52 +08:00
|
|
|
checkList: ['a', 'b'],
|
2020-08-13 15:16:38 +08:00
|
|
|
lastEvent: null,
|
2021-09-04 19:29:28 +08:00
|
|
|
})
|
2020-08-13 15:16:38 +08:00
|
|
|
)
|
|
|
|
const vm = wrapper.vm
|
2021-10-30 21:30:52 +08:00
|
|
|
expect(vm.checkList.length).toBe(2)
|
2020-08-13 15:16:38 +08:00
|
|
|
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
|
|
|
vm.$nextTick(async () => {
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(vm.checkList.length).toBe(2)
|
|
|
|
await wrapper.findComponent({ ref: 'c' }).trigger('click')
|
2021-10-30 21:30:52 +08:00
|
|
|
expect(vm.checkList.length).toBe(3)
|
|
|
|
expect(vm.checkList).toEqual(['a', 'b', 'c'])
|
|
|
|
expect((wrapper.findComponent({ ref: 'd' }).vm as any).isDisabled).toBe(
|
2021-09-04 19:29:28 +08:00
|
|
|
true
|
|
|
|
)
|
2021-10-30 21:30:52 +08:00
|
|
|
expect((wrapper.findComponent({ ref: 'e' }).vm as any).isDisabled).toBe(
|
|
|
|
true
|
|
|
|
)
|
|
|
|
vm.checkList = []
|
|
|
|
await vm.$nextTick()
|
|
|
|
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
|
|
|
await wrapper.findComponent({ ref: 'd' }).trigger('click')
|
|
|
|
expect(vm.checkList).toEqual(['a', 'd'])
|
|
|
|
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
|
|
|
expect(vm.checkList).toEqual(['a', 'd'])
|
|
|
|
expect((wrapper.findComponent({ ref: 'a' }).vm as any).isDisabled).toBe(
|
2021-09-04 19:29:28 +08:00
|
|
|
true
|
|
|
|
)
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2020-08-30 22:13:35 +08:00
|
|
|
test('nested group', async () => {
|
2020-08-13 15:16:38 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<el-checkbox-group v-model="checkList">
|
|
|
|
<div>
|
|
|
|
<el-checkbox-button label="a" ref="a"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="b" ref="b"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="c" ref="c"></el-checkbox-button>
|
|
|
|
<el-checkbox-button label="d" ref="d"></el-checkbox-button>
|
|
|
|
</div>
|
|
|
|
</el-checkbox-group>
|
|
|
|
`,
|
2021-09-04 19:29:28 +08:00
|
|
|
() => ({ checkList: [] })
|
2020-08-13 15:16:38 +08:00
|
|
|
)
|
|
|
|
const vm = wrapper.vm
|
|
|
|
expect(vm.checkList.length).toBe(0)
|
|
|
|
await wrapper.findComponent({ ref: 'a' }).trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(vm.checkList).toEqual(['a'])
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
2020-08-30 22:13:35 +08:00
|
|
|
test('true false lable', async () => {
|
2020-08-13 15:16:38 +08:00
|
|
|
const wrapper = _mount(
|
|
|
|
`<el-checkbox-button true-label="a" :false-label="3" v-model="checked" />`,
|
|
|
|
() => ({
|
|
|
|
checked: 'a',
|
2021-09-04 19:29:28 +08:00
|
|
|
})
|
2020-08-13 15:16:38 +08:00
|
|
|
)
|
|
|
|
const vm = wrapper.vm
|
|
|
|
await wrapper.trigger('click')
|
2020-08-30 22:13:35 +08:00
|
|
|
expect(vm.checked).toBe(3)
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('check', () => {
|
|
|
|
const wrapper = _mount(
|
|
|
|
`
|
|
|
|
<div>
|
|
|
|
<el-checkbox-button v-model="checked" checked />
|
|
|
|
<el-checkbox-group v-model="checklist">
|
|
|
|
<el-checkbox-button checked label="a" />
|
|
|
|
</el-checkbox-group>
|
|
|
|
</div>
|
|
|
|
`,
|
|
|
|
() => ({
|
|
|
|
checked: false,
|
|
|
|
checklist: [],
|
2021-09-04 19:29:28 +08:00
|
|
|
})
|
2020-08-30 22:13:35 +08:00
|
|
|
)
|
2020-08-13 15:16:38 +08:00
|
|
|
expect(wrapper.vm.checked).toBe(true)
|
|
|
|
expect(wrapper.vm.checklist).toEqual(['a'])
|
|
|
|
})
|
2021-06-14 20:20:02 +08:00
|
|
|
|
|
|
|
test('checked', () => {
|
2021-09-04 19:29:28 +08:00
|
|
|
const wrapper = _mount(`<el-checkbox checked />`, () => ({}))
|
|
|
|
expect(wrapper.find('.el-checkbox').classes().toString()).toMatch(
|
|
|
|
'is-checked'
|
|
|
|
)
|
2021-06-14 20:20:02 +08:00
|
|
|
})
|
2020-08-13 15:16:38 +08:00
|
|
|
})
|