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

[new feature] Rate: add allow-half prop (#3134)

Browse Source
This commit is contained in:
neverland
2019-04-11 17:14:34 +08:00
committed by GitHub
parent e6d4f331a8
commit 9ecbcae725
7 changed files with 314 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/rate/test/__snapshots__/demo.spec.js.snap
+97 -25
View File
@@ -3,37 +3,109 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-rate"><i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
<!----></i><i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
<!----></i><i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
<!----></i><i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
<!----></i><i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
<!----></i></div>
<div class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
<!----></i></div>
</div>
</div>
<div>
<div class="van-rate"><i data-index="0" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
<!----></i><i data-index="1" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
<!----></i><i data-index="2" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
<!----></i><i data-index="3" class="van-icon van-icon-like-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
<!----></i><i data-index="4" class="van-icon van-icon-like-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
<!----></i></div>
<div class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
<!----></i></div>
</div>
</div>
<div>
<div class="van-rate"><i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#07c160;font-size:25px;">
<!----></i><i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#07c160;font-size:25px;">
<!----></i><i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#07c160;font-size:25px;">
<!----></i><i data-index="3" class="van-icon van-icon-star van-rate__item" style="color:#07c160;font-size:25px;">
<!----></i><i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
<!----></i><i data-index="5" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
<!----></i></div>
<div class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#f44;font-size:25px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#f44;font-size:25px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#f44;font-size:25px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
<!----></i></div>
</div>
</div>
<div>
<div class="van-rate"><i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!----></i><i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!----></i><i data-index="2" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!----></i><i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!----></i><i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!----></i></div>
<div class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:25px;">
<!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#ffd21e;font-size:25px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:25px;">
<!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#ffd21e;font-size:25px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
<!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#ffd21e;font-size:25px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
<!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#eee;font-size:25px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color:#eee;font-size:25px;">
<!----></i><i data-score="4.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color:#eee;font-size:25px;">
<!----></i></div>
</div>
</div>
<div>
<div class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
<!----></i></div>
</div>
</div>
<div>
<div class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#bdbdbd;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#bdbdbd;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#bdbdbd;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color:#bdbdbd;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#bdbdbd;font-size:20px;">
<!----></i></div>
</div>
</div>
<div>
<div class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color:#ffd21e;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
<!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color:#c7c7c7;font-size:20px;">
<!----></i></div>
</div>
</div>
</div>
`;
packages/rate/test/index.spec.js
+23 -1
View File
@@ -13,13 +13,35 @@ test('change event', () => {
}
}
});
const item4 = wrapper.findAll('.van-rate__item').at(3);
const item4 = wrapper.findAll('.van-rate__icon').at(3);
item4.trigger('click');
expect(onInput).toHaveBeenCalledWith(4);
expect(onChange).toHaveBeenCalledWith(4);
});
test('allow half', () => {
const onInput = jest.fn();
const onChange = jest.fn();
const wrapper = mount(Rate, {
propsData: {
allowHalf: true
},
context: {
on: {
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();