feat: image与ellipsis添加单元测试 (#1411)

* feat: image新增单元测试

* feat: ellipsis添加单元测试

src/packages/__VUE/ellipsis/__tests__/__snapshots__/ellipsis.spec.ts.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ellipsis Props Direction Middle 1`] = `
+"<view class=\\"nut-ellipsis\\">
+  <!--v-if-->
+  <view>NutUI3.0上线后我们研发团队...
+    <!--v-if-->...UI 中增加小程序多端适配的能力。
+  </view>
+  <!--v-if-->
+</view>"
+`;
+
+exports[`Ellipsis Props Direction Start 1`] = `
+"<view class=\\"nut-ellipsis\\">
+  <!--v-if-->
+  <view>
+    <!--v-if-->...多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。
+  </view>
+  <!--v-if-->
+</view>"
+`;
+
+exports[`Ellipsis Props Rows 1`] = `
+"<view class=\\"nut-ellipsis\\">
+  <!--v-if-->
+  <view>
+    <!--v-if-->... 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。
+  </view>
+  <!--v-if-->
+</view>"
+`;

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

@@ -1 +1,65 @@
-import { mount } from '@vue/test-utils';
+import { config, mount } from '@vue/test-utils';
+import { h, nextTick } from 'vue';
+import Ellipsis from '../index.vue';
+
+const originGetComputedStyle = window.getComputedStyle;
+
+const lineHeight = 19.5;
+
+const content =
+  'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。';
+
+beforeAll(() => {
+  window.getComputedStyle = (el) => {
+    const style = originGetComputedStyle(el);
+    style.lineHeight = `${lineHeight}px`;
+    return style;
+  };
+  Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+    get() {
+      if (this.innerText.includes('...')) {
+        const row = Math.ceil((this.innerText.replace(/\.\.\./g, '中').length / content.length) * 4);
+        return lineHeight * row;
+      }
+      return lineHeight * 4;
+    }
+  });
+});
+
+afterAll(() => {
+  window.getComputedStyle = originGetComputedStyle;
+});
+
+test('Ellipsis Props Direction Start', async () => {
+  const wrapper = mount(Ellipsis, {
+    props: {
+      content: content,
+      direction: 'start'
+    }
+  });
+  await nextTick();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('Ellipsis Props Direction Middle', async () => {
+  const wrapper = mount(Ellipsis, {
+    props: {
+      content: content,
+      direction: 'middle'
+    }
+  });
+  await nextTick();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('Ellipsis Props Rows', async () => {
+  const wrapper = mount(Ellipsis, {
+    props: {
+      content: content,
+      direction: 'start',
+      rows: 3
+    }
+  });
+  await nextTick();
+  expect(wrapper.html()).toMatchSnapshot();
+});

src/packages/__VUE/image/__tests__/__snapshots__/image.spec.ts.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`image load error 1`] = `
+"<view class=\\"nut-image\\" style=\\"width: 100px; height: 100px;\\"><img class=\\"nut-img\\" src=\\"https://x\\" alt=\\"\\" style=\\"object-fit: fill; object-position: center;\\">
+  <!--v-if-->
+  <view class=\\"nut-img-error\\"><i class=\\"nutui-iconfont nut-icon nut-icon-image-error\\" src=\\"\\"></i></view>
+</view>"
+`;
+
+exports[`image loading 1`] = `
+"<view class=\\"nut-image\\" style=\\"width: 100px; height: 100px;\\"><img class=\\"nut-img\\" src=\\"\\" alt=\\"\\" style=\\"object-fit: fill; object-position: center;\\">
+  <view class=\\"nut-img-loading\\"><i class=\\"nutui-iconfont nut-icon nut-icon-image\\" src=\\"\\"></i></view>
+  <!--v-if-->
+</view>"
+`;
+
+exports[`image render 1`] = `
+"<view class=\\"nut-image\\" style=\\"width: 100px; height: 100px;\\"><img class=\\"nut-img\\" src=\\"//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg\\" alt=\\"\\" style=\\"object-fit: fill; object-position: center;\\">
+  <!--v-if-->
+  <!--v-if-->
+</view>"
+`;
+
+exports[`image render Round 1`] = `
+"<view class=\\"nut-image nut-image-round\\" style=\\"width: 100px; height: 100px;\\"><img class=\\"nut-img\\" src=\\"//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg\\" alt=\\"\\" style=\\"object-fit: fill; object-position: center;\\">
+  <!--v-if-->
+  <!--v-if-->
+</view>"
+`;

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

@@ -1 +1,69 @@
-import { mount } from '@vue/test-utils';
+import { config, mount } from '@vue/test-utils';
+import { h, nextTick } from 'vue';
+import Image from '../index.vue';
+import NutIcon from '../../icon/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
+test('image render', async () => {
+  const wrapper = mount(Image, {
+    props: {
+      src: '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg',
+      width: '100',
+      height: '100',
+      showLoading: false
+    }
+  });
+  await wrapper.find('img').trigger('load');
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('image load error', async () => {
+  const wrapper = mount(Image, {
+    props: {
+      src: 'https://x',
+      width: '100',
+      height: '100',
+      showError: true
+    }
+  });
+  await wrapper.find('img').trigger('error');
+  expect(wrapper.find('.nut-img-error').exists()).toBeTruthy();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('image loading', async () => {
+  const wrapper = mount(Image, {
+    props: {
+      src: '',
+      width: '100',
+      height: '100',
+      showLoading: true
+    }
+  });
+  // await wrapper.find('img').trigger('load');
+  expect(wrapper.find('.nut-img-loading').exists()).toBeTruthy();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('image render Round', async () => {
+  const wrapper = mount(Image, {
+    props: {
+      src: '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg',
+      width: '100',
+      height: '100',
+      round: true
+    }
+  });
+  await wrapper.find('img').trigger('load');
+  expect(wrapper.find('.nut-image-round').exists()).toBeTruthy();
+  expect(wrapper.html()).toMatchSnapshot();
+});

src/packages/__VUE/image/doc.md

@@ -111,7 +111,7 @@ app.use();
 
 ```html
 <template>
-  <nut-image src="https://x" width="100" height="100" showLoading>
+  <nut-image src="https://x" width="100" height="100" showError>
     <template #error> 加载失败 </template>
   </nut-image>
 </template>

src/packages/__VUE/overlay/index.vue

@@ -38,7 +38,7 @@ const overlayProps = {
   },
   lockScroll: {
     type: Boolean,
-    default: true
+    default: false
   },
   overlayStyle: {
     type: Object as PropType<CSSProperties>