feat: 添加form组件单元测试

affects: @varlet/ui

packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test form with input 1`] = `
+"<div class=\\"var-form\\">
+  <div class=\\"var-input var--box\\">
+    <div class=\\"var-input__controller var-input--error\\">
+      <div class=\\"var-input__icon\\"></div>
+      <div class=\\"var-input__wrap\\"><input class=\\"var-input__input var-input--caret-error\\" autocomplete=\\"off\\" id=\\"var-input-3\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-3\\"></label></div>
+      <div class=\\"var-input__icon\\"><i class=\\"var-icon var-icon--set var-icon-close-circle var-input__clear-icon\\" style=\\"transition: all 0ms; font-size: 14px;\\" var-input-cover=\\"\\"></i></div>
+    </div>
+    <div class=\\"var-input__line var-input--line-error\\">
+      <div class=\\"var-input__dot var-input--line-error\\"></div>
+    </div>
+    <transition-stub>
+      <div class=\\"var-form-details\\">
+        <div class=\\"var-form-details__message\\">不能为空</div>
+        <div class=\\"var-form-details__length\\"></div>
+      </div>
+    </transition-stub>
+  </div>
+</div>"
+`;
+
+exports[`test form with input 2`] = `
+"<div class=\\"var-form\\">
+  <div class=\\"var-input var--box\\">
+    <div class=\\"var-input__controller\\">
+      <div class=\\"var-input__icon\\"></div>
+      <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-3\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-3\\"></label></div>
+      <div class=\\"var-input__icon\\"><i class=\\"var-icon var-icon--set var-icon-close-circle var-input__clear-icon\\" style=\\"transition: all 0ms; font-size: 14px;\\" var-input-cover=\\"\\"></i></div>
+    </div>
+    <div class=\\"var-input__line\\">
+      <div class=\\"var-input__dot\\"></div>
+    </div>
+    <transition-stub>
+      <!--v-if-->
+    </transition-stub>
+  </div>
+</div>"
+`;

packages/varlet-ui/src/form/__tests__/index.spec.js

@@ -0,0 +1,90 @@
+import Form from '..'
+import VarForm from '../Form'
+import VarInput from '../../input/Input'
+import { mount } from '@vue/test-utils'
+import { createApp } from 'vue'
+import { delay } from '../../utils/jest'
+
+test('test form plugin', () => {
+  const app = createApp({}).use(Form)
+  expect(app.component(Form.name)).toBeTruthy()
+})
+
+const expectValidate = async (form, wrapper, message) => {
+  form.validate()
+  await delay(16)
+  expect(wrapper.find('.var-form-details__message').text()).toBe(message)
+  expect(wrapper.html()).toMatchSnapshot()
+}
+
+const expectReset = async (form, wrapper) => {
+  form.reset()
+  await delay(16)
+  expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy()
+  expect(wrapper.html()).toMatchSnapshot()
+}
+
+test('test form with input', async () => {
+  const onClear = jest.fn()
+  const onClick = jest.fn()
+  const onInput = jest.fn()
+  const onChange = jest.fn()
+
+  const wrapper = mount({
+    components: {
+      [VarInput.name]: VarInput,
+      [VarForm.name]: VarForm,
+    },
+    data: () => ({
+      disabled: true,
+      readonly: false,
+      value: '',
+    }),
+    methods: {
+      onClear,
+      onClick,
+      onInput,
+      onChange,
+    },
+    template: `
+      <var-form ref="form" :disabled="disabled" :readonly="readonly">
+        <var-input
+          clearable
+          :rules="[v => !!v || '不能为空']"
+          v-model="value"
+          @click="onClick"
+          @clear="onClear"
+          @input="onInput"
+          @change="onChange"
+        />
+      </var-form>
+    `,
+  })
+
+  const triggerEvents = async () => {
+    await wrapper.find('.var-input__input').trigger('input')
+    await wrapper.find('.var-input__input').trigger('change')
+    await wrapper.find('.var-input__clear-icon').trigger('click')
+    await wrapper.trigger('click')
+  }
+
+  await triggerEvents()
+  expect(onInput).toHaveBeenCalledTimes(0)
+  expect(onClear).toHaveBeenCalledTimes(0)
+  expect(onClick).toHaveBeenCalledTimes(0)
+  expect(onChange).toHaveBeenCalledTimes(0)
+
+  await wrapper.setData({ disabled: false, readonly: true })
+
+  await triggerEvents()
+  expect(onInput).toHaveBeenCalledTimes(0)
+  expect(onClear).toHaveBeenCalledTimes(0)
+  expect(onClick).toHaveBeenCalledTimes(1)
+  expect(onChange).toHaveBeenCalledTimes(0)
+
+  const { form } = wrapper.vm.$refs
+  await expectValidate(form, wrapper, '不能为空')
+  await expectReset(form, wrapper)
+
+  wrapper.unmount()
+})