element-plus/packages/components/rate/__tests__/rate.spec.ts

150 lines
3.3 KiB
TypeScript
Raw Normal View History

2020-08-04 15:27:37 +08:00
import { mount } from '@vue/test-utils'
2021-11-05 20:20:00 +08:00
import Rate from '../src/rate.vue'
2020-08-04 15:27:37 +08:00
describe('Rate.vue', () => {
2020-08-04 16:48:41 +08:00
test('create', () => {
2020-08-04 15:27:37 +08:00
const wrapper = mount(Rate, {
2020-08-04 16:48:41 +08:00
props: {
max: 10,
2020-08-04 15:27:37 +08:00
},
})
2020-08-05 13:14:20 +08:00
const stars = wrapper.findAll('.el-rate__item')
2020-08-04 16:48:41 +08:00
expect(stars.length).toEqual(10)
})
test('allow half', async () => {
const wrapper = mount({
template: `
<div>
<el-rate v-model="value" allow-half ref='rate' />
</div>
`,
props: {},
data() {
return {
value: 0,
}
},
components: {
'el-rate': Rate,
},
})
const vm = wrapper.vm
const secondStar = wrapper.findAll('.el-rate__item')[1]
.element as HTMLElement
vm.$refs.rate.setCurrentValue(1, { target: secondStar, offsetX: 0 })
// expect(vm.$refs.rate.currentValue).toEqual(0.5)
secondStar.click()
vm.$refs.rate.resetCurrentValue()
expect(vm.value).toEqual(0.5)
})
2020-08-04 16:48:41 +08:00
test('with texts', () => {
2020-08-05 13:14:20 +08:00
const wrapper = mount(Rate, {
2020-08-04 16:48:41 +08:00
props: {
showText: true,
modelValue: 4,
texts: ['1', '2', '3', '4', '5'],
},
2020-08-05 13:14:20 +08:00
})
const text = wrapper.find('.el-rate__text').element
2020-08-04 16:48:41 +08:00
expect(text.textContent).toEqual('4')
})
2020-08-05 13:14:20 +08:00
test('value change', async () => {
2020-08-04 16:48:41 +08:00
const wrapper = mount(Rate, {
props: {
modelValue: 0,
},
})
const vm = wrapper.vm
await wrapper.setProps({ modelValue: 3 })
expect(vm.modelValue).toEqual(3)
})
test('click', () => {
2020-08-05 13:14:20 +08:00
const wrapper = mount({
2020-08-04 16:48:41 +08:00
template: `
<div>
<el-rate v-model="value1" />
</div>
`,
props: {},
2020-08-04 16:48:41 +08:00
data() {
return {
value1: 0,
}
},
components: {
'el-rate': Rate,
},
2020-08-05 13:14:20 +08:00
})
const vm = wrapper.vm
const thirdStar = wrapper.findAll('.el-rate__item')[2]
.element as HTMLElement
2020-08-04 16:48:41 +08:00
thirdStar.click()
expect(vm.value1).toEqual(3)
2020-08-04 15:27:37 +08:00
})
test('colors', () => {
const wrapper = mount({
template: `
<div>
<el-rate v-model="value" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
</div>
`,
props: {},
data() {
return {
value: 4,
}
},
components: {
'el-rate': Rate,
},
})
// const vm = wrapper.vm
const thirdStar = (
wrapper.findAll('.el-rate__item')[2].element as HTMLElement
).querySelector('.el-rate__icon') as any
expect(thirdStar.style.color).toEqual('rgb(255, 153, 0)')
})
test('change event', () => {
const wrapper = mount({
template: `
<div>
<el-rate v-model="value" @change="handleChange"></el-rate>
</div>
`,
data() {
return {
value: 4,
changeCount: 0,
}
},
methods: {
handleChange() {
this.changeCount++
},
},
components: {
'el-rate': Rate,
},
})
const vm = wrapper.vm
const fourthStar = wrapper.findAll('.el-rate__item')[3]
.element as HTMLElement
fourthStar.click()
expect(vm.value).toEqual(4)
expect(vm.changeCount).toEqual(0)
const fifthStar = wrapper.findAll('.el-rate__item')[4]
.element as HTMLElement
fifthStar.click()
expect(vm.value).toEqual(5)
expect(vm.changeCount).toEqual(1)
})
2020-08-04 15:27:37 +08:00
})