mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +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