feat(shortpassword,drag): add test (#1000)

* fix: 新增drag，shortpassword单元测试

src/packages/__VUE/actionsheet/__test__/index.spec.ts

@@ -0,0 +1,4 @@
+import { mount } from '@vue/test-utils';
+import ActionSheet from '../index.vue';
+
+test('');

src/packages/__VUE/drag/__test__/index.spec.ts

@@ -0,0 +1,11 @@
+import { mount } from '@vue/test-utils';
+import Drag from '../index.vue';
+
+test('should render default slot correctly', () => {
+  const wrapper = mount(Drag, {
+    slots: {
+      default: () => 'Custom Message'
+    }
+  });
+  expect(wrapper.find('.nut-drag').html()).toMatchSnapshot();
+});

src/packages/__VUE/shortpassword/__tests__/index.spec.ts

@@ -0,0 +1,108 @@
+import { config, DOMWrapper, mount } from '@vue/test-utils';
+import ShortPassword from '../index.vue';
+import { nextTick } from 'vue';
+import NutIcon from '../../icon/index.vue';
+import NutPopup from '../../icon/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon,
+    NutPopup
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
+test('should render shortpassword when visible is true', async () => {
+  const wrapper = mount(ShortPassword, {
+    props: {
+      visible: true,
+      modelValue: '123'
+    }
+  });
+  const input: DOMWrapper<Element> = wrapper.find('.nut-input-real');
+  expect(input.exists()).toBe(true);
+  expect(input.attributes('maxlength')).toBe('6');
+  const psdLength = wrapper.findAll('.nut-shortpsd-li');
+  expect(psdLength.length).toBe(6);
+  expect((input.element as HTMLInputElement).value).toBe('123');
+});
+test('should render buttonShortpassword and error msg when noButton is false ', () => {
+  const wrapper = mount(ShortPassword, {
+    props: {
+      visible: true,
+      errorMsg: '错误信息',
+      length: 4,
+      modelValue: '123',
+      noButton: false
+    }
+  });
+  const input = wrapper.find('.nut-input-real');
+  expect(input.exists()).toBe(true);
+  const psdLength = wrapper.findAll('.nut-shortpsd-li');
+  expect(psdLength.length).toBe(4);
+  const error = wrapper.find('.nut-shortpsd-error');
+  expect(error.exists()).toBe(true);
+  expect(error.text()).toBe('错误信息');
+  const cancle = wrapper.find('.nut-shortpsd-cancle');
+  expect(cancle.exists()).toBe(true);
+  const sure = wrapper.find('.nut-shortpsd-sure');
+  expect(sure.exists()).toBe(true);
+  cancle.trigger('click');
+  expect(wrapper.emitted('cancel')).toBeTruthy();
+  sure.trigger('click');
+  expect((wrapper.emitted('ok') as any)[0][0]).toBe('123');
+});
+
+test('should allow to format value with formatter prop', async () => {
+  const wrapper = mount(ShortPassword, {
+    props: {
+      visible: true,
+      modelValue: '777'
+    }
+  });
+  expect((wrapper.emitted('update:modelValue') as any)[0][0]).toEqual('777');
+  await wrapper.setProps({ modelValue: '456' });
+  expect((wrapper.emitted('update:modelValue') as any)[1][0]).toEqual('456');
+});
+
+test('should format input value when input', async () => {
+  const wrapper = mount(ShortPassword, {
+    props: {
+      visible: true,
+      modelValue: ''
+    }
+  });
+  const div: DOMWrapper<Element> = wrapper.find('.nut-shortpsd-fake');
+  const input: DOMWrapper<Element> = wrapper.find('.nut-input-real');
+  (input.element as HTMLInputElement).value = '123';
+  div.trigger('click');
+  input.trigger('input');
+  await nextTick();
+  expect((wrapper.emitted('update:modelValue') as any)[0][0]).toEqual('');
+  expect((wrapper.emitted('update:modelValue') as any)[1][0]).toEqual('123');
+  (input.element as HTMLInputElement).value = '456';
+  input.trigger('input');
+  expect((wrapper.emitted('update:modelValue') as any)[2][0]).toEqual('456');
+  (input.element as HTMLInputElement).value = 'abc';
+  input.trigger('input');
+  expect((wrapper.emitted('update:modelValue') as any)[3][0]).toEqual('');
+});
+
+test('should output input value when finish', async () => {
+  const wrapper = mount(ShortPassword, {
+    props: {
+      visible: true,
+      modelValue: ''
+    }
+  });
+  const div: DOMWrapper<Element> = wrapper.find('.nut-shortpsd-fake');
+  const input: DOMWrapper<Element> = wrapper.find('.nut-input-real');
+  (input.element as HTMLInputElement).value = '321123';
+  div.trigger('click');
+  input.trigger('input');
+  await nextTick();
+  expect((wrapper.emitted('complete') as any)[0][0]).toEqual('321123');
+});

src/packages/__VUE/shortpassword/__tests__/shortpassword.spec.ts

@@ -1,79 +0,0 @@
-import { mount } from '@vue/test-utils';
-import ShortPassword from '../index.vue';
-import Icon from '../../icon/index.vue';
-
-test('base', () => {
-  const wrapper = mount(ShortPassword, {
-    props: {
-      visible: true,
-      value: 123
-    }
-  });
-  const input: any = wrapper.find('.nut-input-real');
-  expect(input.exists()).toBe(true);
-  expect(input.attributes('maxlength')).toBe('6');
-  //expect(input.element.value).toBe('123');
-  //代码还没处理modelvalue值
-});
-test('base length and error', () => {
-  const wrapper = mount(ShortPassword, {
-    props: {
-      visible: true,
-      length: 4,
-      errorMsg: '错误信息',
-      noButton: false,
-      value: 'qwe'
-    }
-  });
-  const input = wrapper.find('.nut-input-real');
-  expect(input.exists()).toBe(true);
-  // expect(input.attributes("maxlength")).toBe("4");
-  const error = wrapper.find('.nut-shortpsd-error');
-  expect(error.exists()).toBe(true);
-  expect(error.text()).toBe('错误信息');
-  const cancle = wrapper.find('.nut-shortpsd-cancle');
-  expect(cancle.exists()).toBe(true);
-  const sure = wrapper.find('.nut-shortpsd-sure');
-  expect(sure.exists()).toBe(true);
-  cancle.trigger('click');
-  expect(wrapper.emitted('cancel')).toBeTruthy();
-  sure.trigger('click');
-  // expect((wrapper.emitted('ok') as any)[0][0]).toBe('qwe');
-});
-
-test('event callback', async () => {
-  const wrapper = mount(ShortPassword, {
-    props: {
-      visible: true
-    }
-  });
-  const input: any = wrapper.find('.nut-input-real');
-  await input.trigger('click');
-  await input.trigger('input');
-  await wrapper.trigger('keydown', {
-    key: '123'
-  });
-  setTimeout(() => {
-    expect(wrapper.emitted('change') as any).toBe('123');
-  }, 400);
-
-  //代码还没处理modelvalue值
-});
-test('event callback', async () => {
-  const wrapper = mount(ShortPassword, {
-    props: {
-      visible: true
-    }
-  });
-  const input: any = wrapper.find('.nut-input-real');
-  await input.trigger('click');
-  await input.trigger('input');
-  await wrapper.trigger('keydown', {
-    key: '123456'
-  });
-  setTimeout(() => {
-    expect(wrapper.emitted('complete') as any).toBe('123456');
-  }, 400);
-
-  //代码还没处理modelvalue值
-});

src/packages/__VUE/shortpassword/index.vue

@@ -112,7 +112,11 @@ export default create({
       () => props.modelValue,
       (value) => {
         realInput.value = value;
-        // console.log('watch', value);
+        emit('update:modelValue', value);
+      },
+      {
+        deep: true,
+        immediate: true
       }
     );
     function changeValue(e: Event) {