test(image): add unit test

src/image/__test__/__snapshots__/index.test.js.snap

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`image :base 1`] = `
+<main>
+  <t-image>
+    <wx-view
+      class="t-class t-image t-image__mask t-image--faild t-image--shape-square"
+    >
+      <wx-view
+        class="t-class-load"
+        style="font-size: 40rpx; color: #999"
+      >
+        <t-icon>
+          <wx-label
+            class="t-class t-icon t-icon-close t-icon-base"
+            style=";;"
+            bind:tap="onTap"
+          />
+        </t-icon>
+      </wx-view>
+    </wx-view>
+    <wx-image
+      class="t-class t-image t-image--shape-square"
+      hidden="{{true}}"
+      id="image"
+      lazyLoad="{{false}}"
+      mode="scaleToFill"
+      showMenuByLongpress="{{false}}"
+      src=""
+      style=""
+      webp="{{false}}"
+      bind:error="onLoadError"
+      bind:load="onLoaded"
+    />
+  </t-image>
+</main>
+`;
+
+exports[`image :success 1`] = `
+<main>
+  <t-image
+    id="root"
+    bind:load="handleLoad"
+  >
+    <wx-image
+      class="t-class t-image t-image--shape-square"
+      hidden="{{false}}"
+      id="image"
+      lazyLoad="{{false}}"
+      mode="heightFix"
+      showMenuByLongpress="{{false}}"
+      src="https://www.tencent.com/img/index/menu_logo.png"
+      style="width: 0.00px;"
+      webp="{{false}}"
+      bind:error="onLoadError"
+      bind:load="onLoaded"
+    />
+  </t-image>
+</main>
+`;

src/image/__test__/index.test.js

@@ -0,0 +1,65 @@
+import simulate from 'miniprogram-simulate';
+import path from 'path';
+
+describe('image', () => {
+  const image = simulate.load(path.resolve(__dirname, `../image`), 't-image', {
+    less: true,
+    rootPath: path.resolve(__dirname, '../..'),
+  });
+
+  it(':base', () => {
+    const id = simulate.load({
+      template: `<t-image></t-image>`,
+      usingComponents: {
+        't-image': image,
+      },
+    });
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    expect(comp.toJSON()).toMatchSnapshot();
+  });
+
+  it(':success', async () => {
+    const handleLoad = jest.fn();
+    const id = simulate.load({
+      template: `<t-image 
+      id="root"
+      mode="{{mode}}"
+      src="https://www.tencent.com/img/index/menu_logo.png"
+      bind:load="handleLoad"
+      />`,
+      data: {
+        mode: 'widthFix',
+      },
+      methods: {
+        handleLoad,
+      },
+      usingComponents: {
+        't-image': image,
+      },
+    });
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const $image = comp.querySelector('#root >>> #image');
+
+    $image.dispatchEvent('load', { detail: { width: 100, height: 100 } });
+
+    await simulate.sleep();
+
+    expect(handleLoad).toHaveBeenCalled();
+
+    // height fixed
+    const mock = jest.spyOn(wx, 'getSystemInfoSync');
+    mock.mockImplementation(() => ({ SDKVersion: '2.10.2' }));
+
+    comp.setData({ mode: 'heightFix' });
+    $image.dispatchEvent('load', { detail: { width: 100, height: 100 } });
+
+    await simulate.sleep();
+    expect(comp.toJSON()).toMatchSnapshot();
+
+    mock.mockRestore();
+  });
+});

src/image/image.ts

@@ -37,17 +37,17 @@ export default class Image extends SuperComponent {
     },
   };
 
-  onLoaded(e: any) {
-    const sdkVersion = wx.getSystemInfoSync().SDKVersion;
-    const versionArray = sdkVersion.split('.').map((v) => parseInt(v, 10));
-    // 版本号低于2.10.3时组件内部实现heightFix模式
-    if (
-      versionArray[0] < 2 ||
-      (versionArray[0] === 2 && versionArray[1] < 10) ||
-      (versionArray[0] === 2 && versionArray[1] === 10 && versionArray[2] < 3)
-    ) {
-      const mode = this.properties.mode as any as string;
-      if (mode === 'heightFix') {
+  methods = {
+    onLoaded(e: any) {
+      const sdkVersion = wx.getSystemInfoSync().SDKVersion;
+      const versionArray = sdkVersion.split('.').map((v) => parseInt(v, 10));
+      const { mode } = this.properties;
+      const isInCompatible =
+        versionArray[0] < 2 ||
+        (versionArray[0] === 2 && versionArray[1] < 10) ||
+        (versionArray[0] === 2 && versionArray[1] === 10 && versionArray[2] < 3);
+      // 版本号低于2.10.3时组件内部实现heightFix模式
+      if (mode === 'heightFix' && isInCompatible) {
         // 实现heightFix模式，保持高度和宽高比，设置对应的宽度
         const { height: picHeight, width: picWidth } = e.detail;
         const query = this.createSelectorQuery();
@@ -60,33 +60,33 @@ export default class Image extends SuperComponent {
           })
           .exec();
       }
-    }
-    this.setData({
-      isLoading: false,
-      isFailed: false,
-    });
-    this.triggerEvent('load', e.detail);
-  }
-
-  onLoadError(e: any) {
-    this.setData({
-      isLoading: false,
-      isFailed: true,
-    });
-    this.triggerEvent('error', e.detail);
-  }
-
-  update() {
-    const { src } = this.properties as any;
-    this.preSrc = src;
-    if (!src) {
-      // 链接为空时直接触发加载失败
-      this.onLoadError({ errMsg: '图片链接为空' });
-    } else {
       this.setData({
-        isLoading: true,
+        isLoading: false,
         isFailed: false,
       });
-    }
-  }
+      this.triggerEvent('load', e.detail);
+    },
+
+    onLoadError(e: any) {
+      this.setData({
+        isLoading: false,
+        isFailed: true,
+      });
+      this.triggerEvent('error', e.detail);
+    },
+
+    update() {
+      const { src } = this.properties as any;
+      this.preSrc = src;
+      if (!src) {
+        // 链接为空时直接触发加载失败
+        this.onLoadError({ errMsg: '图片链接为空' });
+      } else {
+        this.setData({
+          isLoading: true,
+          isFailed: false,
+        });
+      }
+    },
+  };
 }

src/image/image.wxml

@@ -39,7 +39,7 @@
   mode="{{mode}}"
   webp="{{webp}}"
   lazy-load="{{lazy}}"
-  bindload="onLoaded"
-  binderror="onLoadError"
+  bind:load="onLoaded"
+  bind:error="onLoadError"
   show-menu-by-longpress="{{showMenuByLongpress}}"
 />