test: input function (#478)

Co-authored-by: guoxiaoxiao8 <guoxiao158@126.com>

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

@@ -0,0 +1,124 @@
+import { mount } from '@vue/test-utils';
+import Input from '../index.vue';
+
+test('base', () => {
+  const wrapper = mount(Input, { props: { modelValue: 3 } });
+  const input = wrapper.find('input');
+  expect(input.exists()).toBe(true);
+  expect(input.element.value).toBe('3');
+});
+test('should emit focuse event when input is focus', () => {
+  const wrapper = mount(Input);
+  wrapper.find('input').trigger('focus');
+  expect(wrapper.emitted('focus')).toBeTruthy();
+});
+test('should emit blur event when input is blur', () => {
+  const wrapper = mount(Input);
+  wrapper.find('input').trigger('blur');
+  expect(wrapper.emitted('blur')).toBeTruthy();
+});
+test('should emit blur event when input is blur', () => {
+  const wrapper = mount(Input);
+  wrapper.find('input').trigger('input');
+  expect(wrapper.emitted('change')).toBeTruthy();
+});
+test('should clear  when event clear', () => {
+  const wrapper = mount(Input, { props: { modelValue: 3 } });
+  const input = wrapper.find('input');
+  const clear = wrapper.find('.nut-textinput-clear');
+  wrapper.find('input').trigger('input');
+  clear.trigger('click');
+  expect(clear.exists()).toBe(true);
+  setTimeout(() => {
+    expect(input.element.value).toBe('');
+  });
+});
+// //测试只能是数字
+test('should format input value when type is number', () => {
+  const wrapper = mount(Input, {
+    props: {
+      type: 'number',
+      modelValue: ''
+    }
+  });
+  const input = wrapper.find('input');
+  input.element.value = '1';
+  input.trigger('input');
+  expect((wrapper.emitted('change') as any)[0][0]).toEqual('1');
+
+  input.element.value = '1.2';
+  input.trigger('input');
+  expect((wrapper.emitted('change') as any)[1][0]).toEqual('12');
+});
+test('should format input value when type is number', () => {
+  const wrapper = mount(Input, {
+    props: {
+      type: 'number',
+      modelValue: '123abc'
+    }
+  });
+  const input = wrapper.find('input');
+  input.trigger('blur');
+  expect((wrapper.emitted('blur') as any)[0][0]).toEqual('');
+});
+// //测试小数
+test('should format input value when type is digit', () => {
+  const wrapper = mount(Input, {
+    props: {
+      type: 'digit',
+      modelValue: ''
+    }
+  });
+  const input = wrapper.find('input');
+  input.element.value = '1';
+  input.trigger('input');
+  expect((wrapper.emitted('change') as any)[0][0]).toEqual('1');
+
+  input.element.value = '1.2';
+  input.trigger('input');
+  expect((wrapper.emitted('change') as any)[1][0]).toEqual('1.2');
+});
+
+test('should limit maxlength of input value when using maxlength prop', async () => {
+  const wrapper = mount(Input, {
+    props: {
+      maxLength: 3,
+      modelValue: '1234'
+    }
+  });
+
+  const input = wrapper.find('input');
+  input.trigger('input');
+  expect((wrapper.emitted('change') as any)[0][0]).toEqual('123');
+  input.element.value = '1234';
+  input.trigger('input');
+  expect((wrapper.emitted('change') as any)[0][0]).toEqual('123');
+});
+test('should label', () => {
+  const wrapper = mount(Input, {
+    props: {
+      label: '文本'
+    }
+  });
+  const label = wrapper.find('.label-string');
+
+  expect(label.text()).toBe('文本');
+});
+test('should disabled', () => {
+  const wrapper = mount(Input, {
+    props: {
+      disabled: true
+    }
+  });
+  const input = wrapper.find('input');
+  expect(input.attributes('disabled')).toBe('');
+});
+test('should readonly', () => {
+  const wrapper = mount(Input, {
+    props: {
+      readonly: true
+    }
+  });
+  const input = wrapper.find('input');
+  expect(input.attributes('readonly')).toBe('');
+});

src/packages/__VUE/input/index.vue

@@ -104,15 +104,15 @@ export default create({
       const input = event.target as HTMLInputElement;
       let val = input.value;
 
-      if (props.maxLength && val.length > Number(props.maxLength)) {
-        val = val.slice(0, Number(props.maxLength));
-      }
       if (props.type === 'digit') {
         val = formatNumber(val, true);
       }
       if (props.type === 'number') {
         val = formatNumber(val, false);
       }
+      if (props.maxLength && val.length > Number(props.maxLength)) {
+        val = val.slice(0, Number(props.maxLength));
+      }
       emit('change', val, event);
       emit('update:modelValue', val, event);
     };
@@ -131,6 +131,9 @@ export default create({
 
       const input = event.target as HTMLInputElement;
       let value = input.value;
+      if (props.maxLength && value.length > Number(props.maxLength)) {
+        value = value.slice(0, Number(props.maxLength));
+      }
       emit('blur', value, event);
     };
 

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

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+
+import Textarea from '../index.vue';
+
+test('Textarea base', () => {
+  const wrapper = mount(Textarea);
+  // const input = wrapper.find('input');
+  // expect(input.exists()).toBe(true);
+  // expect(input.element.value).toBe("3");
+});