avatar单元测试 (#1046)

* fix: avatar单元测试

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

@@ -0,0 +1,60 @@
+import { config, mount } from '@vue/test-utils';
+import Avatar from '../index.vue';
+import NutIcon from '../../icon/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
+test('size props', () => {
+  const wrapper = mount(Avatar, {
+    props: {
+      size: 'small'
+    }
+  });
+  const avatar: any = wrapper.find('.nut-avatar');
+  expect(avatar.classes()).toContain('avatar-small');
+});
+
+test('shape props', () => {
+  const wrapper = mount(Avatar, {
+    props: {
+      size: 'square'
+    }
+  });
+  const avatar: any = wrapper.find('.nut-avatar');
+  expect(avatar.classes()).toContain('avatar-square');
+});
+
+test('shape props', () => {
+  const wrapper = mount(Avatar, {
+    props: {
+      bgColor: '#000000'
+    }
+  });
+  const avatar: any = wrapper.find('.nut-avatar');
+  expect(avatar.element.style.backgroundColor).toBe('rgb(0, 0, 0)');
+});
+
+test('icon props', () => {
+  const wrapper = mount(Avatar, {
+    props: {
+      icon: 'my'
+    }
+  });
+  const icon: any = wrapper.find('.nut-icon');
+  expect(icon.classes()).toContain('nut-icon-my');
+});
+
+// 点击事件
+test('should emit active-avatarror event', () => {
+  const wrapper = mount(Avatar);
+  wrapper.trigger('click');
+  expect(wrapper.emitted('click')).toHaveLength(1);
+});

src/packages/__VUE/avatar/doc.md

@@ -107,4 +107,4 @@ app.use(Icon);
 
 | 字段             | 说明         | 类型     | 回调参数 |
 | ---------------- | ------------ | -------- | -------- |
-| active-avatarror | 点击触发事件 | Function | event    |
+| active-avatar | 点击触发事件 | Function | event    |

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

@@ -28,11 +28,29 @@ test('should emit blur event when input is blur', () => {
   wrapper.find('input').trigger('blur');
   expect(wrapper.emitted('blur')).toBeTruthy();
 });
-test('should emit blur event when input is blur', () => {
+test('should emit change event when input is change', () => {
   const wrapper = mount(Input);
   wrapper.find('input').trigger('input');
   expect(wrapper.emitted('change')).toBeTruthy();
 });
+
+test('should render clear icon when using clearable prop', async () => {
+  const wrapper = mount(Input, {
+    props: {
+      clearable: true,
+      modelValue: 'test'
+    }
+  });
+
+  const clearBtn = wrapper.find('.nut-textinput-clear');
+  const input = wrapper.find('input');
+  await input.trigger('focus');
+  // expect(wrapper.find('.nut-textinput-clear').exists()).toBeTruthy();
+
+  wrapper.find('.nut-textinput-clear').trigger('click');
+  // expect((wrapper.emitted('update:modelValue') as any)[0][0]).toEqual('');
+  // expect((wrapper.emitted('handleClear') as any)[0][0]).toBeTruthy();
+});
 test('should clear  when event clear', () => {
   const wrapper = mount(Input, { props: { modelValue: 3 } });
   const input = wrapper.find('input');
@@ -44,7 +62,7 @@ test('should clear  when event clear', () => {
     expect(input.element.value).toBe('');
   });
 });
-// //测试只能是数字
+// 测试只能是数字
 test('should format input value when type is number', () => {
   const wrapper = mount(Input, {
     props: {
@@ -60,6 +78,10 @@ test('should format input value when type is number', () => {
   input.element.value = '1.2';
   input.trigger('input');
   expect((wrapper.emitted('change') as any)[1][0]).toEqual('12');
+
+  // input.element.value = '111qwe';
+  // input.trigger('input');
+  // expect((wrapper.emitted('change') as any)[1][0]).toEqual('111');
 });
 test('should format input value when type is number', () => {
   const wrapper = mount(Input, {
@@ -72,7 +94,8 @@ test('should format input value when type is number', () => {
   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: {
@@ -105,6 +128,15 @@ test('should limit maxlength of input value when using maxlength prop', async ()
   input.trigger('input');
   expect((wrapper.emitted('change') as any)[0][0]).toEqual('123');
 });
+
+test('should no label', () => {
+  const wrapper = mount(Input, {
+    props: {}
+  });
+  const label = wrapper.find('.label-string');
+  expect(label.exists()).toBe(false);
+});
+
 test('should label', () => {
   const wrapper = mount(Input, {
     props: {
@@ -112,9 +144,19 @@ test('should label', () => {
     }
   });
   const label = wrapper.find('.label-string');
-
   expect(label.text()).toBe('文本');
 });
+
+test('should require', () => {
+  const wrapper = mount(Input, {
+    props: {
+      requireShow: true
+    }
+  });
+  const input = wrapper.find('.nut-input');
+  expect(input.classes()).toContain('nut-input-require');
+});
+
 test('should disabled', () => {
   const wrapper = mount(Input, {
     props: {
@@ -124,6 +166,7 @@ test('should disabled', () => {
   const input = wrapper.find('input');
   expect(input.attributes('disabled')).toBe('');
 });
+
 test('should readonly', () => {
   const wrapper = mount(Input, {
     props: {
@@ -133,3 +176,31 @@ test('should readonly', () => {
   const input = wrapper.find('input');
   expect(input.attributes('readonly')).toBe('');
 });
+
+test('should text-align left', () => {
+  const wrapper = mount(Input, {
+    props: {
+      textAlign: 'center'
+    }
+  });
+  const input = wrapper.find('input').element;
+  expect(input.style.textAlign).toEqual('center');
+});
+
+test('should render clear icon when using clearable prop', async () => {
+  const wrapper = mount(Input, {
+    props: {
+      clearable: true,
+      modelValue: 'test'
+    }
+  });
+
+  const clearBtn = wrapper.find('.nut-textinput-clear');
+  const input = wrapper.find('input');
+  await input.trigger('focus');
+  // expect(wrapper.find('.nut-textinput-clear').exists()).toBeTruthy();
+
+  wrapper.find('.nut-textinput-clear').trigger('click');
+  // expect((wrapper.emitted('update:modelValue') as any)[0][0]).toEqual('');
+  // expect((wrapper.emitted('handleClear') as any)[0][0]).toBeTruthy();
+});

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

@@ -0,0 +1,34 @@
+import { config, mount } from '@vue/test-utils';
+import Price from '../index.vue';
+import NutIcon from '../../icon/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
+test('size props', () => {
+  const wrapper = mount(Price, {
+    props: {
+      size: 'small'
+    }
+  });
+  const avatar: any = wrapper.find('.nut-avatar');
+  expect(avatar.classes()).toContain('avatar-small');
+  expect(avatar.classes());
+});
+
+test('shape props', () => {
+  const wrapper = mount(Price, {
+    props: {
+      bgColor: '#000000'
+    }
+  });
+  const avatar: any = wrapper.find('.nut-avatar');
+  expect(avatar.element.style.backgroundColor).toBe('rgb(0, 0, 0)');
+});