test(ui/counter): add test case and snapshots (#36)

* 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 * test(ui/index-bar): add test case and snapshots * fix: undo merge Code changes * test: Merge branch 'dev' from upstream * test(ui/lazy): add test case and snapshots * fix: remove test code * test(ui/action-sheet): add test case and snapshots * test(ui/date-picker): add test case and snaps * test(ui/date-picker): fix .at error * test(ui/date-picker): fix .at error * test(ui/counter): add test case
varletjs · Mar 17, 2022 · e966fec · e966fec
1 parent cc35d33
commit e966fec
Show file tree

Hide file tree

Showing 2 changed files with 195 additions and 146 deletions.
diff --git a/packages/varlet-vue2-ui/src/counter/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/counter/__tests__/__snapshots__/index.spec.js.snap
@@ -68,3 +68,15 @@ exports[`test counter example 1`] = `
   <div class=\\"space\\"></div>
 </div>"
 `;
+
+exports[`test counter validation 1`] = `
+"<div class=\\"var-counter var--box\\">
+  <div class=\\"var-counter__controller var-elevation--2 var-counter--error\\"><i class=\\"var-icon var-counter__decrement-button var-icon--set var-icon-minus\\" style=\\"transition: transform 0ms;\\" var-counter-cover=\\"\\"></i> <input inputmode=\\"numeric\\" class=\\"var-counter__input\\"> <i class=\\"var-icon var-counter__increment-button var-icon--set var-icon-plus\\" style=\\"transition: transform 0ms;\\" var-counter-cover=\\"\\"></i></div>
+  <transition-stub name=\\"var-form-details\\">
+    <div class=\\"var-form-details\\">
+      <div class=\\"var-form-details__message\\">必须大于0</div>
+      <div class=\\"var-form-details__length\\"></div>
+    </div>
+  </transition-stub>
+</div>"
+`;
diff --git a/packages/varlet-vue2-ui/src/counter/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/counter/__tests__/index.spec.js
@@ -16,158 +16,195 @@ test('test counter plugin', () => {
   expect(Vue.component(Counter.name)).toBeTruthy()
 })
 
-// const Wrapper = {
-//   components: {
-//     [VarCounter.name]: VarCounter,
-//   },
-//   data: () => ({
-//     value: 0,
-//   }),
-//   template: `<var-counter v-model="value" />`,
-// }
-
-// test('test counter increment & decrement', async () => {
-//   const wrapper = mount(Wrapper)
-
-//   await wrapper.find('.var-counter__increment-button').trigger('click')
-//   expect(wrapper.vm.value).toBe(1)
-//   await wrapper.find('.var-counter__decrement-button').trigger('click')
-//   expect(wrapper.vm.value).toBe(0)
-
-//   wrapper.destroy()
-// })
-
-// test('test counter initial value over max', async () => {
-//   const wrapper = mount({
-//     ...Wrapper,
-//     data: () => ({
-//       value: 11,
-//     }),
-//     template: `<var-counter :max="10" v-model="value" />`,
-//   })
-
-//   expect(wrapper.vm.value).toBe(10)
-
-//   wrapper.destroy()
-// })
-
-// test('test counter initial value less min', async () => {
-//   const wrapper = mount({
-//     ...Wrapper,
-//     data: () => ({
-//       value: -1,
-//     }),
-//     template: `<var-counter :min="0" v-model="value" />`,
-//   })
-
-//   expect(wrapper.vm.value).toBe(0)
-
-//   wrapper.destroy()
-// })
-
-// test('test counter onChange', async () => {
-//   const onChange = jest.fn()
-
-//   const wrapper = mount({
-//     ...Wrapper,
-//     methods: {
-//       onChange,
-//     },
-//     template: `<var-counter v-model="value" @change="onChange" />`,
-//   })
-
-//   wrapper.find('.var-counter__input').setValue('1')
-//   await wrapper.find('.var-counter__input').trigger('change')
-//   expect(onChange).lastCalledWith(1)
-
-//   wrapper.destroy()
-// })
-
-// test('test counter press increment', async () => {
-//   const wrapper = mount(Wrapper)
-
-//   await trigger(wrapper.find('.var-counter__increment-button'), 'touchstart')
-//   await delay(800)
-
-//   const current = wrapper.vm.value
-//   expect(current).toBeGreaterThan(0)
-
-//   await trigger(wrapper.find('.var-counter__increment-button'), 'touchend')
-//   await delay(100)
-//   expect(wrapper.vm.value).toBe(current)
-
-//   wrapper.destroy()
-// })
-
-// test('test counter press decrement', async () => {
-//   const wrapper = mount(Wrapper)
-
-//   await trigger(wrapper.find('.var-counter__decrement-button'), 'touchstart')
-//   await delay(750)
-
-//   const current = wrapper.vm.value
-//   expect(current).toBeLessThan(0)
-
-//   await trigger(wrapper.find('.var-counter__decrement-button'), 'touchend')
-//   await delay(750)
-//   expect(wrapper.vm.value).toBe(current)
-
-//   wrapper.destroy()
-// })
-
-// test('test counter lazy change', async () => {
-//   const wrapper = mount({
-//     ...Wrapper,
-//     methods: {
-//       onBeforeChange(value, change) {
-//         const isInc = value > wrapper.vm.value
-//         change(isInc ? value + 1 : value - 1)
-//       },
-//     },
-//     template: `<var-counter lazy-change v-model="value" @before-change="onBeforeChange" />`,
-//   })
-
-//   await wrapper.find('.var-counter__increment-button').trigger('click')
-//   expect(wrapper.vm.value).toBe(2)
-
-//   await wrapper.find('.var-counter__decrement-button').trigger('click')
-//   expect(wrapper.vm.value).toBe(0)
+test('test counter increment & decrement', async () => {
+  const wrapper = mount({
+    components: {
+      [VarCounter.name]: VarCounter,
+    },
+    data: () => ({
+      value: 0,
+    }),
+    template: `<var-counter v-model="value" />`,
+  })
+
+  await wrapper.find('.var-counter__increment-button').trigger('click')
+  expect(wrapper.vm.value).toBe(1)
+  await wrapper.find('.var-counter__decrement-button').trigger('click')
+  expect(wrapper.vm.value).toBe(0)
 
-//   wrapper.destroy()
-// })
-
-// test('test counter disabled', async () => {
-//   const wrapper = mount({
-//     ...Wrapper,
-//     template: `<var-counter disabled v-model="value" />`,
-//   })
+  wrapper.destroy()
+})
+
+test('test counter initial value over max', async () => {
+  const wrapper = mount({
+    components: {
+      [VarCounter.name]: VarCounter,
+    },
+    data: () => ({
+      value: 11,
+    }),
+    template: `<var-counter :max="10" v-model="value" />`,
+  })
+  expect(wrapper.vm.value).toBe(10)
+
+  wrapper.destroy()
+})
+
+test('test counter initial value less min', async () => {
+  const Wrapper = {
+    components: {
+      [VarCounter.name]: VarCounter,
+    },
+    data: () => ({
+      value: -1,
+    }),
+    template: `<var-counter :min="0" v-model="value" />`,
+  }
+  const wrapper = mount(Wrapper)
+  expect(wrapper.vm.value).toBe(0)
+
+  wrapper.destroy()
+})
+
+test('test counter onChange', async () => {
+  const onChange = jest.fn()
+  const Wrapper = {
+    components: {
+      [VarCounter.name]: VarCounter,
+    },
+    data: () => ({
+      value: 0,
+    }),
+    methods: {
+      onChange,
+    },
+    template: `<var-counter v-model="value" @change="onChange" />`,
+  }
+  const wrapper = mount(Wrapper)
+
+  wrapper.find('.var-counter__input').setValue('1')
+  await wrapper.find('.var-counter__input').trigger('change')
+  expect(onChange).lastCalledWith(1)
+
+  wrapper.destroy()
+})
+
+test('test counter press increment', async () => {
+  const wrapper = mount({
+    components: {
+      [VarCounter.name]: VarCounter,
+    },
+    data: () => ({
+      value: 0,
+    }),
+    template: `<var-counter v-model="value" />`,
+  })
+
+  await trigger(wrapper.find('.var-counter__increment-button'), 'touchstart')
+  await delay(800)
+
+  const current = wrapper.vm.value
+  expect(current).toBeGreaterThan(0)
 
-//   await wrapper.find('.var-counter__increment-button').trigger('click')
-//   expect(wrapper.vm.value).toBe(0)
+  await trigger(wrapper.find('.var-counter__increment-button'), 'touchend')
+  await delay(100)
+  expect(wrapper.vm.value).toBe(current)
 
-//   await wrapper.find('.var-counter__decrement-button').trigger('click')
-//   expect(wrapper.vm.value).toBe(0)
-// })
+  wrapper.destroy()
+})
+
+test('test counter press decrement', async () => {
+  const wrapper = mount({
+    components: {
+      [VarCounter.name]: VarCounter,
+    },
+    data: () => ({
+      value: 0,
+    }),
+    template: `<var-counter v-model="value" />`,
+  })
 
-// test('test counter validation', async () => {
-//   const wrapper = mount({
-//     ...Wrapper,
-//     template: `<var-counter ref="counter" :rules="[v => v > 0 || '必须大于0']" v-model="value" />`,
-//   })
+  await trigger(wrapper.find('.var-counter__decrement-button'), 'touchstart')
+  await delay(750)
 
-//   const { counter } = wrapper.vm.$refs
+  const current = wrapper.vm.value
+  expect(current).toBeLessThan(0)
 
-//   counter.validate()
-//   await delay(16)
+  await trigger(wrapper.find('.var-counter__decrement-button'), 'touchend')
+  await delay(750)
+  expect(wrapper.vm.value).toBe(current)
 
-//   expect(wrapper.html()).toMatchSnapshot()
-//   expect(wrapper.find('.var-form-details__message').text()).toBe('必须大于0')
+  wrapper.destroy()
+})
 
-//   await wrapper.find('.var-counter__increment-button').trigger('click')
-//   await delay(16)
-//   expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy()
+test('test counter lazy change', async () => {
+  const wrapper = mount({
+    components: {
+      [VarCounter.name]: VarCounter,
+    },
+    data: () => ({
+      value: 0,
+    }),
+    methods: {
+      onBeforeChange(value, change) {
+        const isInc = value > wrapper.vm.value
+        change(isInc ? value + 1 : value - 1)
+      },
+    },
+    template: `<var-counter lazy-change v-model="value" @before-change="onBeforeChange" />`,
+  })
+
+  await wrapper.find('.var-counter__increment-button').trigger('click')
+  expect(wrapper.vm.value).toBe(2)
+
+  await wrapper.find('.var-counter__decrement-button').trigger('click')
+  expect(wrapper.vm.value).toBe(0)
 
-//   counter.reset()
-//   await delay(16)
-//   expect(wrapper.vm.value).toBe(0)
-// })
+  wrapper.destroy()
+})
+
+test('test counter disabled', async () => {
+  const wrapper = mount({
+    components: {
+      [VarCounter.name]: VarCounter,
+    },
+    data: () => ({
+      value: 0,
+    }),
+    template: `<var-counter disabled v-model="value" />`,
+  })
+
+  await wrapper.find('.var-counter__increment-button').trigger('click')
+  expect(wrapper.vm.value).toBe(0)
+
+  await wrapper.find('.var-counter__decrement-button').trigger('click')
+  expect(wrapper.vm.value).toBe(0)
+})
+
+test('test counter validation', async () => {
+  const wrapper = mount({
+    components: {
+      [VarCounter.name]: VarCounter,
+    },
+    data: () => ({
+      value: 0,
+    }),
+    template: `<var-counter ref="counter" :rules="[v => v > 0 || '必须大于0']" v-model="value" />`,
+  })
+
+  const { counter } = wrapper.vm.$refs
+
+  counter.validate()
+  await delay(16)
+
+  expect(wrapper.html()).toMatchSnapshot()
+  expect(wrapper.find('.var-form-details__message').text()).toBe('必须大于0')
+
+  await wrapper.find('.var-counter__increment-button').trigger('click')
+  await delay(16)
+  expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy()
+
+  counter.reset()
+  await delay(16)
+  expect(wrapper.vm.value).toBe(0)
+})