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)
|
|
|
|
})
|
|
|
|
|
2020-11-05 20:31:50 +08:00
|
|
|
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
|
2021-09-04 19:29:28 +08:00
|
|
|
const secondStar = wrapper.findAll('.el-rate__item')[1]
|
|
|
|
.element as HTMLElement
|
2020-11-05 20:31:50 +08:00
|
|
|
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>
|
|
|
|
`,
|
2020-11-05 20:31:50 +08:00
|
|
|
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
|
2021-09-04 19:29:28 +08:00
|
|
|
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
|
|
|
})
|
2020-11-05 20:31:50 +08:00
|
|
|
|
|
|
|
test('colors', () => {
|
|
|
|
const wrapper = mount({
|
|
|
|
template: `
|
|
|
|
<div>
|
|
|
|
<el-rate v-model="value" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
|
|
|
|
</div>
|
|
|
|
`,
|
2021-09-04 19:29:28 +08:00
|
|
|
props: {},
|
2020-11-05 20:31:50 +08:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
value: 4,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
'el-rate': Rate,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
// const vm = wrapper.vm
|
2021-09-04 19:29:28 +08:00
|
|
|
const thirdStar = (
|
|
|
|
wrapper.findAll('.el-rate__item')[2].element as HTMLElement
|
|
|
|
).querySelector('.el-rate__icon') as any
|
2020-11-05 20:31:50 +08:00
|
|
|
|
|
|
|
expect(thirdStar.style.color).toEqual('rgb(255, 153, 0)')
|
|
|
|
})
|
2021-06-11 18:28:50 +08:00
|
|
|
|
|
|
|
test('change event', () => {
|
|
|
|
const wrapper = mount({
|
|
|
|
template: `
|
|
|
|
<div>
|
|
|
|
<el-rate v-model="value" @change="handleChange"></el-rate>
|
|
|
|
</div>
|
|
|
|
`,
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
value: 4,
|
|
|
|
changeCount: 0,
|
|
|
|
}
|
|
|
|
},
|
2021-09-04 19:29:28 +08:00
|
|
|
methods: {
|
2021-06-11 18:28:50 +08:00
|
|
|
handleChange() {
|
|
|
|
this.changeCount++
|
|
|
|
},
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
'el-rate': Rate,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
const vm = wrapper.vm
|
2021-09-04 19:29:28 +08:00
|
|
|
const fourthStar = wrapper.findAll('.el-rate__item')[3]
|
|
|
|
.element as HTMLElement
|
2021-06-11 18:28:50 +08:00
|
|
|
fourthStar.click()
|
|
|
|
expect(vm.value).toEqual(4)
|
|
|
|
expect(vm.changeCount).toEqual(0)
|
2021-09-04 19:29:28 +08:00
|
|
|
const fifthStar = wrapper.findAll('.el-rate__item')[4]
|
|
|
|
.element as HTMLElement
|
2021-06-11 18:28:50 +08:00
|
|
|
fifthStar.click()
|
|
|
|
expect(vm.value).toEqual(5)
|
|
|
|
expect(vm.changeCount).toEqual(1)
|
|
|
|
})
|
2020-08-04 15:27:37 +08:00
|
|
|
})
|