test(ui/progress): add test case and snapshots (#18)

* test(ui/loading): add test case and snapshots * test(ui/collapse): add test case and snapshots * test(ui/collapse): add test case and snapshots * feat: handle pnpm-lock * chore: handle pnpm-lock
varletjs · Mar 14, 2022 · 3d0848e · 3d0848e
1 parent 01e9910
commit 3d0848e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 31 deletions.
diff --git a/packages/varlet-vue2-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/progress/__tests__/__snapshots__/index.spec.js.snap
@@ -1,5 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`test circle progress prop 1`] = `
+"<div class=\\"var-progress\\">
+  <!---->
+  <div class=\\"var-progress-circle\\" style=\\"width: 50px; height: 50px;\\"><svg viewBox=\\"0 0 50 50\\" class=\\"var-progress-circle__svg\\" style=\\"transform: rotate(-80deg);\\">
+      <circle cx=\\"25\\" cy=\\"25\\" r=\\"21\\" fill=\\"transparent\\" stroke-width=\\"8\\" class=\\"var-progress-circle__background\\" style=\\"stroke-dasharray: 131.94689145077132; stroke: #f5cb90;\\"></circle>
+      <circle cx=\\"25\\" cy=\\"25\\" r=\\"21\\" fill=\\"transparent\\" stroke-width=\\"8\\" class=\\"var-progress-circle__certain\\" style=\\"stroke-dasharray: 39.5840674352314, 131.94689145077132; stroke: #ff9800;\\"></circle>
+    </svg>
+    <div class=\\"var-progress-circle__label\\">
+      30%
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`test linear progress prop 1`] = `
+"<div class=\\"var-progress\\">
+  <div class=\\"var-progress-linear\\">
+    <div class=\\"var-progress-linear__block\\" style=\\"height: 8px;\\">
+      <div class=\\"var-progress-linear__background\\" style=\\"background: rgb(245, 203, 144);\\"></div>
+      <div class=\\"var-progress-linear__certain var-progress-linear__ripple\\" style=\\"background: rgb(255, 152, 0); width: 30%;\\"></div>
+    </div>
+    <div class=\\"var-progress-linear__label\\">
+      <div>success</div>
+    </div>
+  </div>
+  <!---->
+</div>"
+`;
+
 exports[`test progress example 1`] = `
 "<div class=\\"var-progress-example\\">
   <div class=\\"space\\"></div>

diff --git a/packages/varlet-vue2-ui/src/progress/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/progress/__tests__/index.spec.js
@@ -14,37 +14,37 @@ test('test progress plugin', () => {
   expect(Vue.component(Progress.name)).toBeTruthy()
 })
 
-// test('test linear progress prop', () => {
-//   const wrapper = mount(VarProgress, {
-//     propsData: {
-//       value: 30,
-//       lineWidth: 8,
-//       color: '#ff9800',
-//       trackColor: '#f5cb90',
-//       ripple: true,
-//       label: true,
-//     },
-//     scopedSlots: {
-//       default: '<div>success</div>',
-//     },
-//   })
+test('test linear progress prop', () => {
+  const wrapper = mount(VarProgress, {
+    propsData: {
+      value: 30,
+      lineWidth: 8,
+      color: '#ff9800',
+      trackColor: '#f5cb90',
+      ripple: true,
+      label: true,
+    },
+    scopedSlots: {
+      default: '<div>success</div>',
+    },
+  })
 
-//   expect(wrapper.html()).toMatchSnapshot()
-// })
+  expect(wrapper.html()).toMatchSnapshot()
+})
 
-// test('test circle progress prop', () => {
-//   const wrapper = mount(VarProgress, {
-//     propsData: {
-//       mode: 'circle',
-//       value: 30,
-//       lineWidth: 8,
-//       color: '#ff9800',
-//       trackColor: '#f5cb90',
-//       size: 50,
-//       rotate: 10,
-//       label: true,
-//     },
-//   })
+test('test circle progress prop', () => {
+  const wrapper = mount(VarProgress, {
+    propsData: {
+      mode: 'circle',
+      value: 30,
+      lineWidth: 8,
+      color: '#ff9800',
+      trackColor: '#f5cb90',
+      size: 50,
+      rotate: 10,
+      label: true,
+    },
+  })
 
-//   expect(wrapper.html()).toMatchSnapshot()
-// })
+  expect(wrapper.html()).toMatchSnapshot()
+})