Skip to content
This repository has been archived by the owner on Jan 8, 2025. It is now read-only.

Commit

Permalink
test(ui/rate): update snap
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayangweb
ayangweb committed Mar 16, 2022
1 parent 0025916 commit f885051
Show file tree
Hide file tree
Showing 2 changed files with 221 additions and 123 deletions.
98 changes: 98 additions & 0 deletions packages/varlet-vue2-ui/src/rate/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,55 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`test rate count 1`] = `
"<div class=\\"var-rate__warp\\">
<div class=\\"var-rate\\">
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 0px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
</div>
<transition-stub name=\\"var-form-details\\">
<!---->
</transition-stub>
</div>"
`;
exports[`test rate disabled & readonly 1`] = `
"<div class=\\"var-rate__warp\\">
<div class=\\"var-rate\\">
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 0px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
</div>
<transition-stub name=\\"var-form-details\\">
<!---->
</transition-stub>
</div>"
`;
exports[`test rate disabled & readonly 2`] = `
"<div class=\\"var-rate__warp\\">
<div class=\\"var-rate\\">
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 0px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
</div>
<transition-stub name=\\"var-form-details\\">
<!---->
</transition-stub>
</div>"
`;
exports[`test rate example 1`] = `
"<div class=\\"var-rate-example\\">
<div class=\\"app-type\\">基础评分</div>
Expand Down Expand Up @@ -289,3 +339,51 @@ exports[`test rate example 1`] = `
</div>
</div>"
`;
exports[`test rate gap 1`] = `
"<div class=\\"var-rate__warp\\">
<div class=\\"var-rate\\">
<div class=\\"var-rate__content\\" style=\\"margin-right: 10px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 10px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 10px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 10px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 0px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
</div>
<transition-stub name=\\"var-form-details\\">
<!---->
</transition-stub>
</div>"
`;
exports[`test rate validation 1`] = `
"<div class=\\"var-rate__warp\\">
<div class=\\"var-rate\\">
<div class=\\"var-rate__content var-rate--error\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content var-rate--error\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content var-rate--error\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content var-rate--error\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content var-rate--error\\" style=\\"margin-right: 0px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
</div>
<transition-stub name=\\"var-form-details\\">
<div class=\\"var-form-details\\">
<div class=\\"var-form-details__message\\">至少选择一分</div>
<div class=\\"var-form-details__length\\"></div>
</div>
</transition-stub>
</div>"
`;
exports[`test rate validation 2`] = `
"<div class=\\"var-rate__warp\\">
<div class=\\"var-rate\\">
<div class=\\"var-rate__content var-rate--primary\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 2px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
<div class=\\"var-rate__content\\" style=\\"margin-right: 0px; width: 24px; height: 24px; border-radius: 50%;\\"><i class=\\"var-icon var-icon--set var-icon-star-outline\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
</div>
<transition-stub name=\\"var-form-details\\">
<!---->
</transition-stub>
</div>"
`;
246 changes: 123 additions & 123 deletions packages/varlet-vue2-ui/src/rate/__tests__/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,126 +18,126 @@ test('test rate plugin', () => {
expect(Vue.component(Rate.name)).toBeTruthy()
})

// test('test rate onChange', async () => {
// const onChange = jest.fn()
// const onInput = jest.fn((value) => wrapper.setProps({ value }))

// const wrapper = mount(VarRate, {
// propsData: {
// value: 0,
// },
// listeners: {
// change: onChange,
// input: onInput,
// },
// })

// await wrapper.find('.var-rate__content').trigger('click')
// expect(onChange).toHaveBeenCalledTimes(1)
// expect(wrapper.props('value')).toBe(1)

// wrapper.destroy()
// })

// test('test rate half', async () => {
// const onChange = jest.fn()
// const onInput = jest.fn((value) => wrapper.setProps({ value }))

// const wrapper = mount(VarRate, {
// propsData: {
// half: true,
// value: 0,
// },
// listeners: {
// change: onChange,
// input: onInput,
// },
// })

// await trigger(wrapper.find('.var-rate__content'), 'click')
// expect(onChange).toHaveBeenCalledTimes(1)
// expect(wrapper.props('value')).toBe(0.5)

// wrapper.destroy()
// })

// test('test rate validation', async () => {
// const onChange = jest.fn()
// const onInput = jest.fn((value) => wrapper.setProps({ value }))

// const wrapper = mount(VarRate, {
// propsData: {
// value: 0,
// rules: [(v) => v >= 1 || '至少选择一分'],
// },
// listeners: {
// change: onChange,
// input: onInput,
// },
// })

// wrapper.vm.validate()
// await delay(16)

// expect(wrapper.find('.var-form-details__message').text()).toBe('至少选择一分')
// expect(wrapper.html()).toMatchSnapshot()

// await wrapper.find('.var-rate__content').trigger('click')
// await delay(16)
// expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy()
// expect(wrapper.html()).toMatchSnapshot()

// wrapper.vm.reset()
// await delay(16)
// expect(wrapper.props('value')).toBe(0)

// wrapper.destroy()
// })

// test('test rate disabled & readonly', async () => {
// const onChange = jest.fn()

// const wrapper = mount(VarRate, {
// propsData: {
// disabled: true,
// readonly: false,
// },
// listeners: {
// change: onChange,
// },
// })

// await wrapper.find('.var-rate__content').trigger('click')
// expect(wrapper.html()).toMatchSnapshot()
// expect(onChange).toHaveBeenCalledTimes(0)

// await wrapper.setProps({ disabled: false, readonly: true })
// await wrapper.find('.var-rate__content').trigger('click')
// expect(wrapper.html()).toMatchSnapshot()
// expect(onChange).toHaveBeenCalledTimes(0)
// })

// test('test rate count', () => {
// const wrapper = mount(VarRate, {
// propsData: {
// count: 10,
// },
// })

// expect(wrapper.findAll('.var-rate__content').length).toBe(10)
// expect(wrapper.html()).toMatchSnapshot()

// wrapper.destroy()
// })

// test('test rate gap', () => {
// const wrapper = mount(VarRate, {
// propsData: {
// gap: 10,
// },
// })

// expect(wrapper.html()).toMatchSnapshot()

// wrapper.destroy()
// })
test('test rate onChange', async () => {
const onChange = jest.fn()
const onInput = jest.fn((value) => wrapper.setProps({ value }))

const wrapper = mount(VarRate, {
propsData: {
value: 0,
},
listeners: {
change: onChange,
input: onInput,
},
})

await wrapper.find('.var-rate__content').trigger('click')
expect(onChange).toHaveBeenCalledTimes(1)
expect(wrapper.props('value')).toBe(1)

wrapper.destroy()
})

test('test rate half', async () => {
const onChange = jest.fn()
const onInput = jest.fn((value) => wrapper.setProps({ value }))

const wrapper = mount(VarRate, {
propsData: {
half: true,
value: 0,
},
listeners: {
change: onChange,
input: onInput,
},
})

await trigger(wrapper.find('.var-rate__content'), 'click')
expect(onChange).toHaveBeenCalledTimes(1)
expect(wrapper.props('value')).toBe(0.5)

wrapper.destroy()
})

test('test rate validation', async () => {
const onChange = jest.fn()
const onInput = jest.fn((value) => wrapper.setProps({ value }))

const wrapper = mount(VarRate, {
propsData: {
value: 0,
rules: [(v) => v >= 1 || '至少选择一分'],
},
listeners: {
change: onChange,
input: onInput,
},
})

wrapper.vm.validate()
await delay(16)

expect(wrapper.find('.var-form-details__message').text()).toBe('至少选择一分')
expect(wrapper.html()).toMatchSnapshot()

await wrapper.find('.var-rate__content').trigger('click')
await delay(16)
expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy()
expect(wrapper.html()).toMatchSnapshot()

wrapper.vm.reset()
await delay(16)
expect(wrapper.props('value')).toBe(0)

wrapper.destroy()
})

test('test rate disabled & readonly', async () => {
const onChange = jest.fn()

const wrapper = mount(VarRate, {
propsData: {
disabled: true,
readonly: false,
},
listeners: {
change: onChange,
},
})

await wrapper.find('.var-rate__content').trigger('click')
expect(wrapper.html()).toMatchSnapshot()
expect(onChange).toHaveBeenCalledTimes(0)

await wrapper.setProps({ disabled: false, readonly: true })
await wrapper.find('.var-rate__content').trigger('click')
expect(wrapper.html()).toMatchSnapshot()
expect(onChange).toHaveBeenCalledTimes(0)
})

test('test rate count', () => {
const wrapper = mount(VarRate, {
propsData: {
count: 10,
},
})

expect(wrapper.findAll('.var-rate__content').length).toBe(10)
expect(wrapper.html()).toMatchSnapshot()

wrapper.destroy()
})

test('test rate gap', () => {
const wrapper = mount(VarRate, {
propsData: {
gap: 10,
},
})

expect(wrapper.html()).toMatchSnapshot()

wrapper.destroy()
})

0 comments on commit f885051

Please sign in to comment.