feat: Progress component

2020-07-06 15:52:54 +08:00
parent 6567b041b9
commit 2539a548b6
10 changed files with 374 additions and 8 deletions
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px;">50%</span></span></div>
+  </div>
+  <div>
+    <div class="van-progress" style="height: 8px;"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px;">50%</span></span></div>
+  </div>
+  <div>
+    <div class="van-progress"><span class="van-progress__portion" style="background: rgb(202, 202, 202); width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(202, 202, 202);">50%</span></span></div>
+  </div>
+  <div>
+    <div class="van-progress"><span class="van-progress__portion" style="background: rgb(242, 130, 106); width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(242, 130, 106);">橙色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion" style="background: rgb(238, 10, 36); width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(238, 10, 36);">红色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px; background: rgb(114, 50, 221);">紫色</span></span></div>
+  </div>
+</div>
+`;
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px;"></span></div>`;
+
+exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px;"><span class="van-progress__pivot" style="left: 0px;">test</span></span></div>`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,28 @@
+import Progress from '..';
+import { mount, later } from '../../../test';
+
+test('calc width', async () => {
+  const wrapper = mount(Progress, {
+    propsData: {
+      showPivot: false,
+      percentage: 100,
+    },
+  });
+  await later();
+  expect(wrapper).toMatchSnapshot();
+
+  wrapper.vm.showPivot = true;
+  wrapper.vm.pivotText = 'test';
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('track color prop', async () => {
+  const wrapper = mount(Progress, {
+    propsData: {
+      trackColor: 'green',
+    },
+  });
+
+  expect(wrapper.element.style.background).toEqual('green');
+});