test(ImagePreview): sort test cases

packages/vant-cli/package.json

@@ -52,7 +52,7 @@
     "@vitejs/plugin-vue": "^1.9.0",
     "@vitejs/plugin-vue-jsx": "^1.1.8",
     "@vue/babel-plugin-jsx": "^1.0.7",
-    "@vue/test-utils": "2.0.0-rc.6",
+    "@vue/test-utils": "2.0.0-rc.14",
     "autoprefixer": "^10.3.4",
     "babel-jest": "^27.2.1",
     "clean-css": "^5.1.5",

packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap

@@ -69,7 +69,7 @@ exports[`should render index slot correctly 1`] = `
 </div>
 `;
 
-exports[`should swipe to currect index after calling the swipeTo method 1`] = `
+exports[`should swipe to current index after calling the swipeTo method 1`] = `
 <div class="van-image-preview__index">
   3 / 3
 </div>

packages/vant/src/image-preview/test/function-call.spec.ts

@@ -1,6 +1,8 @@
-import { createApp } from 'vue';
+import { later, triggerDrag, mockGetBoundingClientRect } from '../../../test';
+import { createApp, nextTick } from 'vue';
 import { ImagePreview } from '../function-call';
 import ImagePreviewComponent from '../ImagePreview';
+import { images, triggerZoom } from './shared';
 
 test('should expose ImagePreviewComponent in ImagePreview.Component', () => {
   expect(ImagePreview.Component.name).toEqual('van-image-preview');
@@ -11,3 +13,59 @@ test('should register component to app', () => {
   app.use(ImagePreview);
   expect(app.component(ImagePreviewComponent.name)).toBeTruthy();
 });
+
+test('should allow to use the teleport option', async () => {
+  const root = document.createElement('div');
+  ImagePreview({ images: [], teleport: root });
+
+  await later();
+  expect(root.querySelector('.van-image-preview')).toBeTruthy();
+});
+
+test('should trigger onClose option correctly', async () => {
+  const onClose = jest.fn();
+  const instance = ImagePreview({
+    images,
+    startPosition: 1,
+    onClose,
+  });
+
+  await instance?.close();
+
+  expect(onClose).toHaveBeenCalledTimes(1);
+  expect(onClose).toHaveBeenCalledWith({
+    index: 0,
+    url: images[0],
+  });
+});
+
+test('should trigger onChange option correctly', async () => {
+  const onChange = jest.fn();
+  ImagePreview({
+    images,
+    startPosition: 0,
+    onChange,
+  });
+
+  await nextTick();
+  const swipe = document.querySelector('.van-swipe__track') as HTMLDivElement;
+  triggerDrag(swipe, 1000, 0);
+  expect(onChange).toHaveBeenCalledWith(2);
+});
+
+test('should trigger onScale option correctly', async () => {
+  const restore = mockGetBoundingClientRect({ width: 100 });
+  ImagePreview({
+    images,
+    startPosition: 0,
+    onScale({ index, scale }) {
+      expect(index).toEqual(2);
+      expect(scale <= 2).toBeTruthy();
+    },
+  });
+
+  await later();
+  const image = document.querySelector('img') as HTMLImageElement;
+  triggerZoom(image, 300, 300);
+  restore();
+});

packages/vant/src/image-preview/test/index.spec.ts

@@ -1,53 +1,13 @@
-import { nextTick } from 'vue';
-import { DOMWrapper } from '@vue/test-utils/dist/domWrapper';
 import {
   mount,
   later,
-  trigger,
   triggerDrag,
   mockGetBoundingClientRect,
 } from '../../../test';
-import { ImagePreview } from '../function-call';
 import ImagePreviewComponent from '../ImagePreview';
+import { images, triggerZoom } from './shared';
 
-const images = [
-  'https://img.yzcdn.cn/1.png',
-  'https://img.yzcdn.cn/2.png',
-  'https://img.yzcdn.cn/3.png',
-];
-
-function triggerTwoFingerTouchmove(
-  el: Element | DOMWrapper<Element>,
-  x: number,
-  y: number
-) {
-  trigger(el, 'touchmove', -x, -y, { x, y });
-}
-
-function triggerZoom(
-  el: Element | DOMWrapper<Element>,
-  x: number,
-  y: number,
-  direction = 'in'
-) {
-  trigger(el, 'touchstart', 0, 0, { x, y });
-
-  if (direction === 'in') {
-    triggerTwoFingerTouchmove(el, x / 4, y / 4);
-    triggerTwoFingerTouchmove(el, x / 3, y / 3);
-    triggerTwoFingerTouchmove(el, x / 2, y / 2);
-    triggerTwoFingerTouchmove(el, x, y);
-  } else if (direction === 'out') {
-    triggerTwoFingerTouchmove(el, x, y);
-    triggerTwoFingerTouchmove(el, x / 2, y / 2);
-    triggerTwoFingerTouchmove(el, x / 3, y / 3);
-    triggerTwoFingerTouchmove(el, x / 4, y / 4);
-  }
-
-  trigger(el, 'touchend', 0, 0, { touchList: [] });
-}
-
-test('should swipe to currect index after calling the swipeTo method', async () => {
+test('should swipe to current index after calling the swipeTo method', async () => {
   const wrapper = mount(ImagePreviewComponent, {
     props: {
       show: true,
@@ -218,21 +178,6 @@ test('before close prop', async () => {
   expect(wrapper.emitted('close')![0]).toBeTruthy();
 });
 
-test('function call', async () => {
-  ImagePreview({ images });
-  ImagePreview({ images: images.slice(0, 1) });
-
-  await later();
-  await nextTick();
-  const wrapper = document.querySelector(
-    '.van-image-preview'
-  ) as HTMLDivElement;
-  const swipe = wrapper.querySelector('.van-swipe__track') as HTMLDivElement;
-  triggerDrag(swipe, 0, 0);
-
-  expect(wrapper.querySelectorAll('img').length).toEqual(1);
-});
-
 test('double click', async () => {
   const onScale = jest.fn();
   const wrapper = mount(ImagePreviewComponent, {
@@ -261,54 +206,6 @@ test('double click', async () => {
   });
 });
 
-test('onClose option', async () => {
-  const onClose = jest.fn();
-  const instance = ImagePreview({
-    images,
-    startPosition: 1,
-    onClose,
-  });
-
-  await instance?.close();
-
-  expect(onClose).toHaveBeenCalledTimes(1);
-  expect(onClose).toHaveBeenCalledWith({
-    index: 0,
-    url: images[0],
-  });
-});
-
-test('onChange option', async () => {
-  const onChange = jest.fn();
-  ImagePreview({
-    images,
-    startPosition: 0,
-    onChange,
-  });
-
-  await nextTick();
-  const swipe = document.querySelector('.van-swipe__track') as HTMLDivElement;
-  triggerDrag(swipe, 1000, 0);
-  expect(onChange).toHaveBeenCalledWith(2);
-});
-
-test('onScale option', async () => {
-  const restore = mockGetBoundingClientRect({ width: 100 });
-  ImagePreview({
-    images,
-    startPosition: 0,
-    onScale({ index, scale }) {
-      expect(index).toEqual(2);
-      expect(scale <= 2).toBeTruthy();
-    },
-  });
-
-  await later();
-  const image = document.querySelector('img') as HTMLImageElement;
-  triggerZoom(image, 300, 300);
-  restore();
-});
-
 test('zoom in and drag image to move', async () => {
   const restore = mockGetBoundingClientRect({ width: 100, height: 100 });
 
@@ -357,27 +254,3 @@ test('zoom out', async () => {
 
   restore();
 });
-
-test('should allow to use the teleport option', async () => {
-  const element = document.createElement('div');
-  element.id = 'parent-node';
-  document.body.appendChild(element);
-  ImagePreview({ images, teleport: element });
-
-  await later();
-  await nextTick();
-  const wrapperDiv = document.querySelector(
-    '.van-image-preview'
-  ) as HTMLDivElement;
-  expect(wrapperDiv.parentElement?.parentElement?.id).toEqual(element.id);
-  document.body.removeChild(element);
-
-  ImagePreview(images);
-
-  await later();
-  await nextTick();
-  const wrapperBody = document.querySelector(
-    '.van-image-preview'
-  ) as HTMLDivElement;
-  expect(wrapperBody.parentElement?.parentElement).toEqual(document.body);
-});

packages/vant/src/image-preview/test/shared.ts

@@ -0,0 +1,39 @@
+import { DOMWrapper } from '@vue/test-utils/dist/domWrapper';
+import { trigger } from '../../../test';
+
+export const images = [
+  'https://img.yzcdn.cn/1.png',
+  'https://img.yzcdn.cn/2.png',
+  'https://img.yzcdn.cn/3.png',
+];
+
+function triggerTwoFingerTouchmove(
+  el: Element | DOMWrapper<Element>,
+  x: number,
+  y: number
+) {
+  trigger(el, 'touchmove', -x, -y, { x, y });
+}
+
+export function triggerZoom(
+  el: Element | DOMWrapper<Element>,
+  x: number,
+  y: number,
+  direction = 'in'
+) {
+  trigger(el, 'touchstart', 0, 0, { x, y });
+
+  if (direction === 'in') {
+    triggerTwoFingerTouchmove(el, x / 4, y / 4);
+    triggerTwoFingerTouchmove(el, x / 3, y / 3);
+    triggerTwoFingerTouchmove(el, x / 2, y / 2);
+    triggerTwoFingerTouchmove(el, x, y);
+  } else if (direction === 'out') {
+    triggerTwoFingerTouchmove(el, x, y);
+    triggerTwoFingerTouchmove(el, x / 2, y / 2);
+    triggerTwoFingerTouchmove(el, x / 3, y / 3);
+    triggerTwoFingerTouchmove(el, x / 4, y / 4);
+  }
+
+  trigger(el, 'touchend', 0, 0, { touchList: [] });
+}

packages/vant/src/overlay/Overlay.tsx

@@ -54,6 +54,10 @@ export default defineComponent({
       );
     });
 
-    return () => <Transition name="van-fade">{renderOverlay()}</Transition>;
+    return () => (
+      <Transition name="van-fade" appear>
+        {renderOverlay()}
+      </Transition>
+    );
   },
 });

packages/vant/src/utils/mount-component.ts

@@ -1,4 +1,4 @@
-import { createApp, reactive, Component, nextTick } from 'vue';
+import { createApp, reactive, Component } from 'vue';
 import { extend } from '../utils';
 import { useExpose } from '../composables/use-expose';
 
@@ -15,8 +15,8 @@ export function usePopupState() {
   };
 
   const open = (props: Record<string, any>) => {
-    extend(state, props);
-    nextTick(() => toggle(true));
+    extend(state, props, { transitionAppear: true });
+    toggle(true);
   };
 
   const close = () => toggle(false);

yarn.lock

@@ -1930,10 +1930,10 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.12.tgz#304064a4b56fc6c7b9169d80e9ee62ecb4bf0a1c"
   integrity sha512-5CkaifUCJwcTuru7FDwKFacPJuEoGUTw0LKSa5bw40B23s0TS+MGlYR1285nbV/ju3QUGlA6d6PD+GJkWy7uFg==
 
-"@vue/test-utils@2.0.0-rc.6":
-  version "2.0.0-rc.6"
-  resolved "https://registry.nlark.com/@vue/test-utils/download/@vue/test-utils-2.0.0-rc.6.tgz?cache=0&sync_timestamp=1630892900586&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Ftest-utils%2Fdownload%2F%40vue%2Ftest-utils-2.0.0-rc.6.tgz#d0aac24d20450d379e183f70542c0822670b8783"
-  integrity sha1-0KrCTSBFDTeeGD9wVCwIImcLh4M=
+"@vue/test-utils@2.0.0-rc.14":
+  version "2.0.0-rc.14"
+  resolved "https://registry.npmmirror.com/@vue/test-utils/download/@vue/test-utils-2.0.0-rc.14.tgz#9da1be7b0e365ff5f945677da17bf6c8a7a83abd"
+  integrity sha1-naG+ew42X/X5RWd9oXv2yKeoOr0=
 
 JSONStream@^1.0.4:
   version "1.3.5"