alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(Rate): select half star correctly when clicked (#8580)

Browse Source 
* fix(Rate): select half star correctly when clicked

* fix: failed to click

* chore: upd
This commit is contained in:
neverland
2021-04-20 19:31:04 +08:00
committed by GitHub
parent d86a2dc568
commit 032a512b22
9 changed files with 93 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/rate/test/__snapshots__/demo.spec.ts.snap
+42 -176
View File
@@ -13,9 +13,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -25,9 +23,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -37,9 +33,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -49,9 +43,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@@ -61,9 +53,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@@ -80,9 +70,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -92,9 +80,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -104,9 +90,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -116,9 +100,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon">
</i>
</div>
<div role="radio"
@@ -128,9 +110,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon">
</i>
</div>
</div>
@@ -149,7 +129,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="color: rgb(255, 210, 30); font-size: 25px;"
data-score="1"
>
</i>
</div>
@@ -162,7 +141,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="color: rgb(255, 210, 30); font-size: 25px;"
data-score="2"
>
</i>
</div>
@@ -175,7 +153,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="color: rgb(255, 210, 30); font-size: 25px;"
data-score="3"
>
</i>
</div>
@@ -188,7 +165,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="4"
>
</i>
</div>
@@ -201,7 +177,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="5"
>
</i>
</div>
@@ -219,15 +194,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="font-size: 25px;"
data-score="1"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="font-size: 25px; width: 1em;"
data-score="0.5"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -237,15 +204,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="font-size: 25px;"
data-score="2"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="font-size: 25px; width: 1em;"
data-score="1.5"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -255,14 +214,10 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="font-size: 25px; width: 0.5em;"
data-score="2.5"
style="width: 0.5em;"
>
</i>
</div>
@@ -273,15 +228,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="4"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half"
style="color: rgb(238, 238, 238); font-size: 25px; width: 0em;"
data-score="3.5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@@ -291,15 +238,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="5"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half"
style="color: rgb(238, 238, 238); font-size: 25px; width: 0em;"
data-score="4.5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@@ -316,9 +255,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -328,9 +265,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -340,9 +275,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -352,9 +285,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -364,9 +295,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@@ -376,9 +305,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="6"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="6"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@@ -395,9 +322,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -407,9 +332,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -419,9 +342,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -431,9 +352,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled">
</i>
</div>
<div role="radio"
@@ -443,9 +362,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled">
</i>
</div>
</div>
@@ -462,9 +379,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -474,9 +389,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -486,9 +399,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -498,9 +409,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@@ -510,9 +419,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@@ -529,14 +436,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="width: 1em;"
data-score="0.5"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -546,14 +446,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="width: 1em;"
data-score="1.5"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -563,14 +456,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="width: 1em;"
data-score="2.5"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -580,13 +466,10 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="width: 0.3em;"
data-score="3.5"
>
</i>
</div>
@@ -597,14 +480,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--half"
style="width: 0em;"
data-score="4.5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@@ -621,9 +497,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -633,9 +507,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@@ -645,9 +517,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@@ -657,9 +527,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@@ -669,9 +537,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
src/rate/test/__snapshots__/index.spec.ts.snap
+5 -15
View File
@@ -13,9 +13,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="1"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@@ -26,9 +24,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="2"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@@ -39,9 +35,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="3"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@@ -52,9 +46,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@@ -64,9 +56,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
src/rate/test/index.spec.ts
+2 -15
View File
@@ -42,19 +42,6 @@ test('should not emit change and update:modelValue event when rate is not change
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]).toEqual([3.5]);
expect(wrapper.emitted('update:modelValue')![0]).toEqual([3.5]);
});
test('should not emit change or update:modelValue event when rate is disabled', () => {
const wrapper = mount(Rate, {
props: {
@@ -137,6 +124,6 @@ test('should get decimal when using allow-half and readonly prop', () => {
},
});
const item4 = wrapper.findAll('.van-rate__icon--half')[3];
expect(item4.style.width).toEqual('0.3em');
const halfIcon = wrapper.find('.van-rate__icon--half');
expect(halfIcon.style.width).toEqual('0.3em');
});