upd: tag/badge/backtop/skeleton test (#1032)

* upd: tag，badge，skeleton  test

src/packages/__VUE/badge/__test__/__snapshots__/badge.spec.ts.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should change dot position when using offset prop: -2px 1`] = `""`;
+
+exports[`should change dot position when using offset prop: 4px 1`] = `""`;
+
+exports[`should render content slot correctly 1`] = `
+"<view class=\\"nut-badge\\">
+  <view class=\\"slot-icons\\"></view>
+  <view class=\\"nut-badge__content sup\\" style=\\"top: 0px; right: 0px; z-index: 9; display: none;\\"></view>
+</view>"
+`;
+
+exports[`should render nothing when content is empty string 1`] = `
+"<view class=\\"nut-badge\\" content=\\"\\">
+  <view class=\\"slot-icons\\"></view>
+  <view class=\\"nut-badge__content sup\\" style=\\"top: 0px; right: 0px; z-index: 9; display: none;\\"></view>
+</view>"
+`;
+
+exports[`should render nothing when content is undefined 1`] = `
+"<view class=\\"nut-badge\\">
+  <view class=\\"slot-icons\\"></view>
+  <view class=\\"nut-badge__content sup\\" style=\\"top: 0px; right: 0px; z-index: 9; display: none;\\"></view>
+</view>"
+`;
+
+exports[`should render nothing when content is zero 1`] = `
+"<view class=\\"nut-badge\\" content=\\"0\\">
+  <view class=\\"slot-icons\\"></view>
+  <view class=\\"nut-badge__content sup\\" style=\\"top: 0px; right: 0px; z-index: 9; display: none;\\"></view>
+</view>"
+`;

src/packages/__VUE/badge/__test__/badge.spec.ts

@@ -0,0 +1,55 @@
+import Badge from '../index.vue';
+import { mount } from '@vue/test-utils';
+
+test('should render nothing when content is empty string', () => {
+  const wrapper = mount(Badge, {
+    props: {
+      content: ''
+    }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render nothing when content is undefined', () => {
+  const wrapper = mount(Badge, {
+    props: {
+      content: undefined
+    }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render nothing when content is zero', () => {
+  const wrapper = mount(Badge, {
+    props: {
+      content: 0
+    }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render content slot correctly', () => {
+  const wrapper = mount(Badge, {
+    slots: {
+      content: () => 'Custom Content'
+    }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should change dot position when using offset prop', () => {
+  const wrapper = mount(Badge, {
+    props: {
+      top: 4,
+      right: -2
+    }
+  });
+
+  const badge: any = wrapper.find('.nut-badge');
+  expect(badge.element.style.top).toMatchSnapshot('4px');
+  expect(badge.element.style.right).toMatchSnapshot('-2px');
+});

src/packages/__VUE/skeleton/__test__/__snapshots__/skeleton.spec.ts.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should change avatar shape when using avatar-shape prop 1`] = `"<nut-avatar class=\\"avatarClass avatarClass--square\\" shape=\\"square\\" style=\\"width: 50px; height: 50px;\\" bg-color=\\"rgb(239, 239, 239)\\"></nut-avatar>"`;
+
+exports[`should change avatar size when using avatar-size prop: 20px 1`] = `"20px"`;
+
+exports[`should change avatar size when using avatar-size prop: 20px 2`] = `"20px"`;
+
+exports[`should render with row width array correctly 1`] = `
+"<view class=\\"skeleton\\" rowwidth=\\"100%,30,5rem\\">
+  <view class=\\"skeleton-animation\\"></view>
+  <view class=\\"content\\">
+    <!--v-if-->
+    <!--v-if-->
+    <view class=\\"content-line\\">
+      <view class=\\"title\\"></view>
+      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
+      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
+      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
+      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
+    </view>
+  </view>
+</view>"
+`;

src/packages/__VUE/skeleton/__test__/skeleton.spec.ts

@@ -0,0 +1,68 @@
+import { mount } from '@vue/test-utils';
+import Skeleton from '../index.vue';
+
+test('should render with row width array correctly', () => {
+  const wrapper = mount(Skeleton, {
+    props: {
+      width: '100px'
+    }
+  });
+  const skeleton: any = wrapper.find('.blockClass');
+  expect(skeleton.element.style.width).toBe('100px');
+});
+
+test('should allow to disable animation', async () => {
+  const wrapper = mount(Skeleton, {
+    props: {
+      row: '1'
+    }
+  });
+
+  expect(wrapper.find('.skeleton').exists()).toBeTruthy();
+
+  await wrapper.setProps({ animated: false });
+  expect(wrapper.find('.skeleton-animation').exists()).toBeFalsy();
+});
+
+test('should change avatar size when using avatarSize prop', () => {
+  const wrapper = mount(Skeleton, {
+    props: {
+      avatar: true,
+      avatarSize: '20px'
+    }
+  });
+
+  const avatar: any = wrapper.find('.avatarClass');
+  expect(avatar.element.style.width).toMatchSnapshot('20px');
+  expect(avatar.element.style.height).toMatchSnapshot('20px');
+});
+
+test('should change avatar shape when using avatarShape prop', () => {
+  const wrapper = mount(Skeleton, {
+    props: {
+      avatar: true,
+      avatarShape: 'square'
+    }
+  });
+  expect(wrapper.find('.avatarClass').html()).toMatchSnapshot();
+});
+
+test('should be round when using round prop', () => {
+  const wrapper = mount(Skeleton, {
+    props: {
+      title: true,
+      round: true,
+      avatar: true
+    }
+  });
+  expect(wrapper.find('.avatarClass').exists()).toBeTruthy();
+});
+
+test('should render default slot', () => {
+  const wrapper = mount(Skeleton, {
+    slots: {
+      default: 'default'
+    }
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});

src/packages/__VUE/skeleton/common.ts

@@ -79,7 +79,7 @@ export const component = {
 
     const getStyle = (): CSSProperties => {
       const style: CSSProperties = {};
-      if (avatarSize?.value) {
+      if (avatarSize.value) {
         return {
           width: avatarSize.value,
           height: avatarSize.value

src/packages/__VUE/skeleton/demo.vue

@@ -3,13 +3,14 @@
     <h2>基础用法</h2>
 
     <nut-skeleton width="250px" height="15px" animated> </nut-skeleton>
+    <nut-skeleton width="250px" height="15px"> </nut-skeleton>
 
     <h2>传入多行</h2>
 
     <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
 
     <h2>显示头像</h2>
-    <nut-skeleton width="250px" height="15px" title animated avatar row="3"> </nut-skeleton>
+    <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="100px" row="3"> </nut-skeleton>
 
     <h2>标题段落圆角风格</h2>
     <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>

src/packages/__VUE/skeleton/doc.md

@@ -49,7 +49,7 @@ app.use(Skeleton);
 :::demo
 ```html
 <template>
-  <nut-skeleton width="250px" height="15px" title animated avatar row="3"> </nut-skeleton>
+  <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="100px" row="3"> </nut-skeleton>
 </template>
 ```
 :::

src/packages/__VUE/skeleton/index.vue

@@ -3,7 +3,7 @@
     <slot></slot>
   </view>
   <view v-else class="skeleton">
-    <view class="skeleton-animation"></view>
+    <view class="skeleton-animation" v-if="animated"></view>
     <view class="content">
       <nut-avatar
         v-if="avatar"

src/packages/__VUE/tag/__test__/__snapshots__/tag.spec.ts.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should hide tag when the show prop is false 1`] = `
+"<view class=\\"nut-tag nut-tag--default\\" show=\\"false\\">
+  <!--v-if-->
+</view>"
+`;
+
+exports[`should render border-color correctly 1`] = `
+"<view class=\\"nut-tag nut-tag--default nut-tag--plain\\" style=\\"background: red; color: blue;\\">
+  <!--v-if-->
+</view>"
+`;

src/packages/__VUE/tag/__test__/tag.spec.ts

@@ -0,0 +1,50 @@
+import Tag from '../index.vue';
+import { mount } from '@vue/test-utils';
+
+test('should emit close event when clicking the close icon', () => {
+  const wrapper = mount(Tag, {
+    props: {
+      closeable: true
+    }
+  });
+
+  wrapper.find('.nut-tag--close').trigger('click');
+  expect(wrapper.emitted('close')!.length).toEqual(1);
+});
+
+test('should hide tag when the show prop is false', () => {
+  const wrapper = mount(Tag, {
+    props: {
+      show: false
+    }
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should not trigger click event when clicking the close icon', () => {
+  const onClick = jest.fn();
+  const wrapper = mount(Tag, {
+    props: {
+      onClick,
+      closeable: true
+    }
+  });
+
+  wrapper.find('.nut-tag--close').trigger('click');
+  expect(onClick).toHaveBeenCalledTimes(0);
+
+  wrapper.trigger('click');
+  expect(onClick).toHaveBeenCalledTimes(1);
+});
+
+test('should render textColor correctly', () => {
+  const wrapper = mount(Tag, {
+    props: {
+      plain: true,
+      color: 'red',
+      textColor: 'blue'
+    }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});