element-plus/packages/components/checkbox/__tests__/checkbox.test.ts

433 lines
12 KiB
TypeScript
Raw Normal View History

import { nextTick } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, expect, test } from 'vitest'
import Checkbox from '../src/checkbox.vue'
import CheckboxButton from '../src/checkbox-button.vue'
import CheckboxGroup from '../src/checkbox-group.vue'
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,
})
describe('Checkbox', () => {
test('create', async () => {
const wrapper = _mount(
'<el-checkbox v-model="checkbox" label="a"/>',
() => ({ checkbox: false })
)
expect(wrapper.classes()).toContain('el-checkbox')
expect(wrapper.classes()).not.toContain('is-disabled')
await wrapper.trigger('click')
expect(wrapper.classes()).toContain('is-checked')
await wrapper.trigger('click')
expect(wrapper.classes('is-checked')).toBe(false)
})
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 })
)
expect(wrapper.classes()).toContain('is-disabled')
await wrapper.trigger('click')
expect(wrapper.classes()).toContain('is-disabled')
})
test('change event', async () => {
const wrapper = _mount(
`<el-checkbox v-model="checked" @change="onChange" />`,
() => ({
data: null,
checked: false,
}),
{
methods: {
onChange(val: boolean) {
this.data = val
},
},
}
)
const vm = wrapper.vm
await wrapper.trigger('click')
expect(vm.data).toBe(true)
})
test('checkbox group', 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: [] })
)
const vm = wrapper.vm
expect(vm.checkList.length).toBe(0)
await wrapper.findComponent({ ref: 'a' }).trigger('click')
expect(vm.checkList.length).toBe(1)
refactor(style): adjust component size to large/default/small (#4491) * refactor(style): adjust component size to large/default/small * refactor(components): avatar size & use flex instead of block * refactor(components): adjust check button size * refactor(components): adjust tag size * refactor(components): adjust size doc * fix(components): datetime-picker demo style width * refactor(components): color-picker size & block to flex * refactor(components): adjust slider input size * refactor(components): adjust radio input size for demo * refactor(components): adjust select size & docs * refactor(components): adjust form radio size & docs * refactor(components): add windicss for docs * refactor(components): adjust skeleton avatar size to css var * refactor(components): simplify typography size demo * refactor(components): adjust dropdown size & demo * refactor(components): adjust descriptions size * fix(components): datetime-picker showcase class pollute global button * chore(ci): upgrade docs dependencies to fix ci * fix(ci): add highlight because vitepress not export it * fix(ci): disable line for no-console * fix(ci): remove mini to fix test * fix(style): code font size * fix(style): button span flex style * fix(style): button padding horizontal default 15px * refactor(components): adjust tag padding size & demo * refactor(components): adjust form line-height for input * refactor(components): adjust dropdown menu size & button padding * fix(style): picker separator block to flex center * fix: dropdown button span items-center * style: adjust input-with-icon & size demo & fix input vitepress load * chore: upgrade dependencies * chore: upgrade dependencies * ci: fix website build * ci: regenerate pnpm-lock.yaml * ci: use dev pnpm-lock * ci: update pnpm-lock.yaml
2021-12-12 17:54:21 +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')
})
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')
})
test('checkbox group change', async () => {
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>
`,
() => ({ checkList: [], data: null }),
{
methods: {
onChange(val: string[]) {
this.data = val
},
},
}
)
const vm = wrapper.vm
await wrapper.findComponent({ ref: 'a' }).trigger('click')
await nextTick()
expect(vm.data.length).toBe(1)
expect(vm.data).toEqual(['a'])
})
test('nested group', async () => {
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>
`,
() => ({ checkList: [] })
)
const vm = wrapper.vm
expect(vm.checkList.length).toBe(0)
await wrapper.findComponent({ ref: 'a' }).trigger('click')
expect(vm.checkList).toEqual(['a'])
})
test('true false label', async () => {
const wrapper = _mount(
`<el-checkbox true-label="a" :false-label="3" v-model="checked"></el-checkbox>`,
() => ({
checked: 'a',
})
)
const vm = wrapper.vm
await wrapper.trigger('click')
expect(vm.checked).toBe(3)
})
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: [],
})
) as any
expect(wrapper.vm.checked).toBe(true)
expect(wrapper.vm.checklist).toEqual(['a'])
})
test('label', async () => {
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: [],
})
)
const checkbox = wrapper.find('.el-checkbox')
await checkbox.trigger('click')
expect(wrapper.vm.checklist[0]).toEqual('')
})
})
describe('check-button', () => {
test('create', async () => {
const wrapper = _mount(
'<el-checkbox-button v-model="checkbox" label="a"/>',
() => ({ checkbox: false })
)
expect(wrapper.classes()).toContain('el-checkbox-button')
await wrapper.trigger('click')
expect(wrapper.classes()).toContain('is-checked')
await wrapper.trigger('click')
expect(wrapper.classes('is-checked')).toBe(false)
})
test('disabled', async () => {
const wrapper = _mount(
'<el-checkbox-button v-model="checkbox" disabled label="a"/>',
() => ({ checkbox: false })
)
expect(wrapper.classes()).toContain('is-disabled')
await wrapper.trigger('click')
expect(wrapper.classes()).toContain('is-disabled')
})
test('change event', async () => {
const wrapper = _mount(
`
<el-checkbox-button v-model="checked" @change="onChange" />
`,
() => ({
data: '',
checked: false,
}),
{
methods: {
onChange(val: boolean) {
this.data = val
},
},
}
)
const vm = wrapper.vm
await wrapper.trigger('click')
expect(vm.data).toBe(true)
})
test('button group change', async () => {
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>
`,
() => ({
data: null,
checkList: [],
}),
{
methods: {
onChange(val: string[]) {
this.data = val
},
},
}
)
const vm = wrapper.vm
await wrapper.findComponent({ ref: 'a' }).trigger('click')
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', () => {
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>
`,
() => ({ checkList: ['a', 'b'] })
)
const vm = wrapper.vm
expect(vm.checkList.length).toBe(2)
expect((vm.$refs.a as any).$el.classList.contains('is-checked')).toBe(true)
expect(
(vm.$refs.a as any).$el.querySelector('.el-checkbox-button__inner').style
.borderColor
).toEqual('#ff0000')
})
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()
})
test('button group min and max', async () => {
const wrapper = _mount(
`
<el-checkbox-group
v-model="checkList"
:min="2"
:max="3"
>
<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-button label="e" ref="e"></el-checkbox-button>
</el-checkbox-group>
`,
() => ({
checkList: ['a', 'b'],
lastEvent: null,
})
)
const vm = wrapper.vm
expect(vm.checkList.length).toBe(2)
await wrapper.findComponent({ ref: 'a' }).trigger('click')
vm.$nextTick(async () => {
expect(vm.checkList.length).toBe(2)
await wrapper.findComponent({ ref: 'c' }).trigger('click')
expect(vm.checkList.length).toBe(3)
expect(vm.checkList).toEqual(['a', 'b', 'c'])
expect((wrapper.findComponent({ ref: 'd' }).vm as any).isDisabled).toBe(
true
)
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(
true
)
})
})
test('nested group', async () => {
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>
`,
() => ({ checkList: [] })
)
const vm = wrapper.vm
expect(vm.checkList.length).toBe(0)
await wrapper.findComponent({ ref: 'a' }).trigger('click')
expect(vm.checkList).toEqual(['a'])
})
test('true false lable', async () => {
const wrapper = _mount(
`<el-checkbox-button true-label="a" :false-label="3" v-model="checked" />`,
() => ({
checked: 'a',
})
)
const vm = wrapper.vm
await wrapper.trigger('click')
expect(vm.checked).toBe(3)
})
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: [],
})
)
expect(wrapper.vm.checked).toBe(true)
expect(wrapper.vm.checklist).toEqual(['a'])
})
test('checked', () => {
const wrapper = _mount(`<el-checkbox checked />`, () => ({}))
expect(wrapper.find('.el-checkbox').classes().toString()).toMatch(
'is-checked'
)
})
})