feat: Rate component

2020-07-06 16:45:12 +08:00
parent aa09ba0fd9
commit 3bf64717b5
10 changed files with 941 additions and 8 deletions
@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></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">
+          <!----></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>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon van-rate__icon--full">
+          <!----></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-like-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-like-o van-rate__icon">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
+          <!----></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 van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></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 van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="font-size: 25px;">
+          <!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="font-size: 25px;">
+          <!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;">
+          <!----></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 van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></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 van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i><i data-score="4.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="4" aria-checked="true" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="6" 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 role="radio" tabindex="0" aria-setsize="6" aria-posinset="6" aria-checked="false" class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate van-rate--disabled">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
+          <!----></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 van-rate__icon--disabled">
+          <!----></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 van-rate__icon--disabled">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate van-rate--readonly">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></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">
+          <!----></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>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></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">
+          <!----></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">
+          <!----></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>
+  </div>
+</div>
+`;
@@ -0,0 +1,31 @@
+// 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>
+`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,154 @@
+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, {
+    propsData: {
+      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, {
+    propsData: {
+      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, {
+    propsData: {
+      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, {
+    propsData: {
+      gutter: 10,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('size prop', () => {
+  const wrapper = mount(Rate, {
+    propsData: {
+      size: '2rem',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('untouchable', () => {
+  const onChange = jest.fn();
+  const wrapper = mount(Rate, {
+    propsData: {
+      touchable: false,
+    },
+    listeners: {
+      change: onChange,
+    },
+  });
+
+  triggerDrag(wrapper, 100, 0);
+  expect(onChange).toHaveBeenCalledTimes(0);
+});