mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-09-04 23:19:46 +08:00
test(Rate): update test cases
This commit is contained in:
chenjiahan
parent
c821ccbf2b
commit
1e919b85b3
@ -1,31 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`gutter prop 1`] = `
|
|
||||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
|
||||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="1" class="van-icon van-icon-star-o van-rate__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="2" class="van-icon van-icon-star-o van-rate__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`size prop 1`] = `
|
|
||||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
|
||||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="false" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
|
|
||||||
<!----></i></div>
|
|
||||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="false" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
|
|
||||||
<!----></i></div>
|
|
||||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
|
|
||||||
<!----></i></div>
|
|
||||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
|
|
||||||
<!----></i></div>
|
|
||||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
73
src/rate/test/__snapshots__/index.spec.js.snap
Normal file
73
src/rate/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should render gutter when using gutter prop 1`] = `
|
||||||
|
<div role="radiogroup"
|
||||||
|
class="van-rate"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div role="radio"
|
||||||
|
style="padding-right: 10px;"
|
||||||
|
class="van-rate__item"
|
||||||
|
tabindex="0"
|
||||||
|
aria-setsize="5"
|
||||||
|
aria-posinset="1"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
|
||||||
|
data-score="1"
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<div role="radio"
|
||||||
|
style="padding-right: 10px;"
|
||||||
|
class="van-rate__item"
|
||||||
|
tabindex="0"
|
||||||
|
aria-setsize="5"
|
||||||
|
aria-posinset="2"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
|
||||||
|
data-score="2"
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<div role="radio"
|
||||||
|
style="padding-right: 10px;"
|
||||||
|
class="van-rate__item"
|
||||||
|
tabindex="0"
|
||||||
|
aria-setsize="5"
|
||||||
|
aria-posinset="3"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
|
||||||
|
data-score="3"
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<div role="radio"
|
||||||
|
style="padding-right: 10px;"
|
||||||
|
class="van-rate__item"
|
||||||
|
tabindex="0"
|
||||||
|
aria-setsize="5"
|
||||||
|
aria-posinset="4"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
|
||||||
|
data-score="4"
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<div role="radio"
|
||||||
|
class="van-rate__item"
|
||||||
|
tabindex="0"
|
||||||
|
aria-setsize="5"
|
||||||
|
aria-posinset="5"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
|
||||||
|
data-score="5"
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,154 +0,0 @@
|
|||||||
import Rate from '..';
|
|
||||||
import { mount, triggerDrag } from '../../../test';
|
|
||||||
|
|
||||||
function mockGetBoundingClientRect(items) {
|
|
||||||
items.filter((icon, index) => {
|
|
||||||
icon.element.getBoundingClientRect = () => ({
|
|
||||||
left: index * 25,
|
|
||||||
width: 25,
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
test('change event', () => {
|
|
||||||
const onInput = jest.fn();
|
|
||||||
const onChange = jest.fn();
|
|
||||||
|
|
||||||
const wrapper = mount(Rate, {
|
|
||||||
listeners: {
|
|
||||||
input: (value) => {
|
|
||||||
onInput(value);
|
|
||||||
wrapper.setProps({ value });
|
|
||||||
},
|
|
||||||
change: onChange,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const item4 = wrapper.findAll('.van-rate__icon').at(3);
|
|
||||||
|
|
||||||
item4.trigger('click');
|
|
||||||
item4.trigger('click');
|
|
||||||
|
|
||||||
expect(onInput).toHaveBeenCalledWith(4);
|
|
||||||
expect(onInput).toHaveBeenCalledTimes(1);
|
|
||||||
expect(onChange).toHaveBeenCalledWith(4);
|
|
||||||
expect(onChange).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('allow half', () => {
|
|
||||||
const onInput = jest.fn();
|
|
||||||
const onChange = jest.fn();
|
|
||||||
|
|
||||||
const wrapper = mount(Rate, {
|
|
||||||
props: {
|
|
||||||
allowHalf: true,
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
input: onInput,
|
|
||||||
change: onChange,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const item4 = wrapper.findAll('.van-rate__icon--half').at(3);
|
|
||||||
|
|
||||||
item4.trigger('click');
|
|
||||||
expect(onInput).toHaveBeenCalledWith(3.5);
|
|
||||||
expect(onChange).toHaveBeenCalledWith(3.5);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('disabled', () => {
|
|
||||||
const onInput = jest.fn();
|
|
||||||
const onChange = jest.fn();
|
|
||||||
|
|
||||||
const wrapper = mount(Rate, {
|
|
||||||
props: {
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
input: onInput,
|
|
||||||
change: onChange,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const item4 = wrapper.findAll('.van-rate__item').at(3);
|
|
||||||
|
|
||||||
triggerDrag(wrapper, 100, 0);
|
|
||||||
item4.trigger('click');
|
|
||||||
|
|
||||||
expect(onInput).toHaveBeenCalledTimes(0);
|
|
||||||
expect(onChange).toHaveBeenCalledTimes(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('touchmove to select item', () => {
|
|
||||||
const onChange = jest.fn();
|
|
||||||
const wrapper = mount(Rate, {
|
|
||||||
listeners: {
|
|
||||||
change: onChange,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const icons = wrapper.findAll('.van-rate__item');
|
|
||||||
|
|
||||||
mockGetBoundingClientRect(icons);
|
|
||||||
triggerDrag(wrapper, 100, 0);
|
|
||||||
|
|
||||||
expect(onChange).toHaveBeenNthCalledWith(1, 1);
|
|
||||||
expect(onChange).toHaveBeenNthCalledWith(2, 2);
|
|
||||||
expect(onChange).toHaveBeenNthCalledWith(3, 2);
|
|
||||||
expect(onChange).toHaveBeenNthCalledWith(4, 4);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('touchmove to select half item', () => {
|
|
||||||
const onChange = jest.fn();
|
|
||||||
const wrapper = mount(Rate, {
|
|
||||||
props: {
|
|
||||||
allowHalf: true,
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
change: onChange,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const icons = wrapper.findAll('.van-rate__item');
|
|
||||||
|
|
||||||
mockGetBoundingClientRect(icons);
|
|
||||||
triggerDrag(wrapper, 100, 0);
|
|
||||||
|
|
||||||
expect(onChange).toHaveBeenNthCalledWith(1, 1);
|
|
||||||
expect(onChange).toHaveBeenNthCalledWith(2, 1.5);
|
|
||||||
expect(onChange).toHaveBeenNthCalledWith(3, 2);
|
|
||||||
expect(onChange).toHaveBeenNthCalledWith(4, 4);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('gutter prop', () => {
|
|
||||||
const wrapper = mount(Rate, {
|
|
||||||
props: {
|
|
||||||
gutter: 10,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('size prop', () => {
|
|
||||||
const wrapper = mount(Rate, {
|
|
||||||
props: {
|
|
||||||
size: '2rem',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('untouchable', () => {
|
|
||||||
const onChange = jest.fn();
|
|
||||||
const wrapper = mount(Rate, {
|
|
||||||
props: {
|
|
||||||
touchable: false,
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
change: onChange,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
triggerDrag(wrapper, 100, 0);
|
|
||||||
expect(onChange).toHaveBeenCalledTimes(0);
|
|
||||||
});
|
|
||||||
129
src/rate/test/index.spec.js
Normal file
129
src/rate/test/index.spec.js
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
import Rate from '..';
|
||||||
|
import { mount, triggerDrag } from '../../../test';
|
||||||
|
|
||||||
|
function mockGetBoundingClientRect(items) {
|
||||||
|
items.filter((icon, index) => {
|
||||||
|
icon.element.getBoundingClientRect = () => ({
|
||||||
|
left: index * 25,
|
||||||
|
width: 25,
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
test('should emit change and update:modelValue event when rate icon is clicked', async () => {
|
||||||
|
const wrapper = mount(Rate);
|
||||||
|
const item4 = wrapper.findAll('.van-rate__icon')[3];
|
||||||
|
|
||||||
|
item4.trigger('click');
|
||||||
|
expect(wrapper.emitted('change').length).toEqual(1);
|
||||||
|
expect(wrapper.emitted('change')[0][0]).toEqual(4);
|
||||||
|
expect(wrapper.emitted('update:modelValue').length).toEqual(1);
|
||||||
|
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(4);
|
||||||
|
|
||||||
|
await wrapper.setProps({ modelValue: 4 });
|
||||||
|
item4.trigger('click');
|
||||||
|
expect(wrapper.emitted('change').length).toEqual(1);
|
||||||
|
expect(wrapper.emitted('update:modelValue').length).toEqual(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not emit change and update:modelValue event when rate is not changed', () => {
|
||||||
|
const wrapper = mount(Rate, {
|
||||||
|
props: {
|
||||||
|
modelValue: 4,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const item4 = wrapper.findAll('.van-rate__icon')[3];
|
||||||
|
item4.trigger('click');
|
||||||
|
expect(wrapper.emitted('change')).toBeFalsy();
|
||||||
|
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should allow half rate when using allow-half prop', () => {
|
||||||
|
const wrapper = mount(Rate, {
|
||||||
|
props: {
|
||||||
|
allowHalf: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const item4 = wrapper.findAll('.van-rate__icon--half')[3];
|
||||||
|
item4.trigger('click');
|
||||||
|
expect(wrapper.emitted('change')[0][0]).toEqual(3.5);
|
||||||
|
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(3.5);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not emit change or update:modelValue event when rate is disabled', () => {
|
||||||
|
const wrapper = mount(Rate, {
|
||||||
|
props: {
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const item4 = wrapper.findAll('.van-rate__item')[3];
|
||||||
|
triggerDrag(wrapper, 100, 0);
|
||||||
|
item4.trigger('click');
|
||||||
|
|
||||||
|
expect(wrapper.emitted('change')).toBeFalsy();
|
||||||
|
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit change event when rate icon is touchmoved', () => {
|
||||||
|
const wrapper = mount(Rate);
|
||||||
|
|
||||||
|
const icons = wrapper.findAll('.van-rate__item');
|
||||||
|
mockGetBoundingClientRect(icons);
|
||||||
|
triggerDrag(wrapper, 100, 0);
|
||||||
|
|
||||||
|
const onChange = wrapper.emitted('change');
|
||||||
|
expect(onChange).toEqual([[1], [2], [2], [4]]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit change event when rate icon is touchmoved and using allow-half prop', () => {
|
||||||
|
const wrapper = mount(Rate, {
|
||||||
|
props: {
|
||||||
|
allowHalf: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const icons = wrapper.findAll('.van-rate__item');
|
||||||
|
|
||||||
|
mockGetBoundingClientRect(icons);
|
||||||
|
triggerDrag(wrapper, 100, 0);
|
||||||
|
|
||||||
|
const onChange = wrapper.emitted('change');
|
||||||
|
expect(onChange).toEqual([[1], [1.5], [2], [4]]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render gutter when using gutter prop', () => {
|
||||||
|
const wrapper = mount(Rate, {
|
||||||
|
props: {
|
||||||
|
gutter: 10,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should change icon size when using size prop', () => {
|
||||||
|
const wrapper = mount(Rate, {
|
||||||
|
props: {
|
||||||
|
size: '2rem',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.find('.van-rate__icon').element.style.fontSize).toEqual(
|
||||||
|
'2rem'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not emit change event when untouchable rate is touchmoved', () => {
|
||||||
|
const wrapper = mount(Rate, {
|
||||||
|
props: {
|
||||||
|
touchable: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
triggerDrag(wrapper, 100, 0);
|
||||||
|
expect(wrapper.emitted('change')).toBeFalsy();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user