element-plus/packages/components/rate/__tests__/rate.vitest.tsx
云游君 d3a66b8767
refactor(components): [rate] use css var & disable to disabled & star-color to fill-color (#6601)
* refactor(components): [rate] use css var & disable to disabled

* refactor(components): [rate] remove getIconStyle

* refactor(components): [rate] rename star-color to fill-color

* fix(test-utils): rate vitest by css vars

* refactor: use ns.is('', state)
2022-03-14 19:34:49 +08:00

115 lines
2.9 KiB
TypeScript

import { ref } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import Rate from '../src/rate.vue'
import type { RateInstance } from '../src/rate'
describe('Rate.vue', () => {
it('create', () => {
const wrapper = mount(Rate, {
props: {
max: 10,
},
})
const stars = wrapper.findAll('.el-rate__item')
expect(stars.length).toMatchInlineSnapshot('10')
})
it('size', async () => {
const wrapper = mount(Rate, {
props: {
size: 'large',
},
})
expect(wrapper.find('.el-rate--large').exists()).toBe(true)
await wrapper.setProps({ size: '' })
expect(wrapper.find('.el-rate--default').exists()).toBe(true)
})
it('allow half', async () => {
const value = ref(0)
const wrapper = mount(() => <Rate v-model={value.value} allowHalf />)
const vm = wrapper.getComponent(Rate).vm as RateInstance
const secondStar = wrapper.findAll('.el-rate__item')[1]
.element as HTMLElement
vm.setCurrentValue(1, {
target: secondStar,
offsetX: 0,
} as any as MouseEvent)
secondStar.click()
vm.resetCurrentValue()
expect(value.value).toEqual(0.5)
})
it('with texts', () => {
const wrapper = mount(Rate, {
props: {
showText: true,
modelValue: 4,
texts: ['1', '2', '3', '4', '5'],
},
})
const text = wrapper.find('.el-rate__text').element
expect(text.textContent).toMatchInlineSnapshot('"4"')
})
it('value change', async () => {
const wrapper = mount(Rate, {
props: {
modelValue: 0,
},
})
const vm = wrapper.vm
await wrapper.setProps({ modelValue: 3 })
expect(vm.modelValue).toMatchInlineSnapshot('3')
})
it('click', () => {
const value1 = ref(0)
const wrapper = mount(() => <Rate v-model={value1.value} />)
const thirdStar = wrapper.findAll('.el-rate__item')[2]
.element as HTMLElement
thirdStar.click()
expect(value1.value).toEqual(3)
})
it('colors', () => {
const value = ref(4)
const wrapper = mount(() => (
<Rate v-model={value.value} colors={['#99A9BF', '#F7BA2A', '#FF9900']} />
))
const rateEl = wrapper.find('.el-rate').element as HTMLElement
expect(rateEl.style.getPropertyValue('--el-rate-fill-color')).toBe(
'#FF9900'
)
})
it('change event', () => {
const value = ref(4)
const changeCount = ref(0)
const handleChange = () => {
changeCount.value++
}
const wrapper = mount(() => (
<Rate v-model={value.value} onChange={handleChange} />
))
const fourthStar = wrapper.findAll('.el-rate__item')[3]
.element as HTMLElement
fourthStar.click()
expect(value.value).toEqual(4)
expect(changeCount.value).toEqual(0)
const fifthStar = wrapper.findAll('.el-rate__item')[4]
.element as HTMLElement
fifthStar.click()
expect(value.value).toEqual(5)
expect(changeCount.value).toEqual(1)
})
})