chore: move vant to packages folder (#9384)

packages/vant/test/demo.ts

@@ -0,0 +1,42 @@
+import { h, defineComponent } from 'vue';
+import Locale from '../src/locale';
+import { mount, later } from '.';
+import { initDemoLocale } from '../docs/site/demo-locale';
+
+initDemoLocale();
+
+const EmptyComponent = defineComponent({
+  inheritAttrs: false,
+  render() {
+    return h('div', [this.$slots.default?.()]);
+  },
+});
+
+export function snapshotDemo(Demo: any, option: any = {}) {
+  test('should render demo and match snapshot', async () => {
+    if (option.beforeTest) {
+      option.beforeTest();
+    }
+
+    if (Demo.i18n) {
+      Locale.add(Demo.i18n);
+    }
+
+    const wrapper = mount(Demo, {
+      global: {
+        components: {
+          'demo-block': EmptyComponent,
+        },
+        plugins: [(window as any).vant],
+      },
+    });
+
+    await later();
+
+    expect(wrapper.html()).toMatchSnapshot();
+
+    if (option.afterTest) {
+      option.afterTest();
+    }
+  });
+}

packages/vant/test/dom.ts

@@ -0,0 +1,53 @@
+import { nextTick } from 'vue';
+import { trigger } from './event';
+
+function mockHTMLElementOffset() {
+  Object.defineProperties(HTMLElement.prototype, {
+    offsetParent: {
+      get() {
+        return this.parentNode || {};
+      },
+    },
+    offsetLeft: {
+      get() {
+        return parseFloat(window.getComputedStyle(this).marginLeft) || 0;
+      },
+    },
+    offsetTop: {
+      get() {
+        return parseFloat(window.getComputedStyle(this).marginTop) || 0;
+      },
+    },
+    offsetHeight: {
+      get() {
+        return parseFloat(window.getComputedStyle(this).height) || 0;
+      },
+    },
+    offsetWidth: {
+      get() {
+        return parseFloat(window.getComputedStyle(this).width) || 0;
+      },
+    },
+  });
+}
+
+export function mockScrollIntoView() {
+  const fn = jest.fn();
+  Element.prototype.scrollIntoView = fn;
+  return fn;
+}
+
+export function mockGetBoundingClientRect(rect: Partial<DOMRect>): () => void {
+  const spy = jest.spyOn(Element.prototype, 'getBoundingClientRect');
+  spy.mockReturnValue(rect as DOMRect);
+  return () => spy.mockRestore();
+}
+
+export async function mockScrollTop(value: number) {
+  Object.defineProperty(window, 'scrollTop', { value, writable: true });
+  trigger(window, 'scroll');
+  return nextTick();
+}
+
+mockScrollIntoView();
+mockHTMLElementOffset();

packages/vant/test/event.ts

@@ -0,0 +1,83 @@
+import { ComponentPublicInstance, nextTick } from 'vue';
+import { VueWrapper, DOMWrapper } from '@vue/test-utils';
+
+function getTouch(el: Element | Window, x: number, y: number) {
+  return {
+    identifier: Date.now(),
+    target: el,
+    pageX: x,
+    pageY: y,
+    clientX: x,
+    clientY: y,
+    radiusX: 2.5,
+    radiusY: 2.5,
+    rotationAngle: 10,
+    force: 0.5,
+  };
+}
+
+// Trigger pointer/touch event
+export function trigger(
+  wrapper:
+    | VueWrapper<ComponentPublicInstance<any, any, any>>
+    | DOMWrapper<Element>
+    | Element
+    | Window,
+  eventName: string,
+  x = 0,
+  y = 0,
+  options: any = {}
+) {
+  const el = 'element' in wrapper ? wrapper.element : wrapper;
+  const touchList = options.touchList || [getTouch(el, x, y)];
+
+  if (options.x || options.y) {
+    touchList.push(getTouch(el, options.x, options.y));
+  }
+
+  const event = document.createEvent('CustomEvent');
+  event.initCustomEvent(eventName, true, true, {});
+
+  Object.assign(event, {
+    clientX: x,
+    clientY: y,
+    touches: touchList,
+    targetTouches: touchList,
+    changedTouches: touchList,
+  });
+
+  el.dispatchEvent(event);
+
+  return nextTick();
+}
+
+// simulate drag gesture
+export function triggerDrag(
+  el:
+    | VueWrapper<ComponentPublicInstance<any, any, any>>
+    | DOMWrapper<Element>
+    | HTMLElement,
+  relativeX = 0,
+  relativeY = 0
+) {
+  let x = relativeX;
+  let y = relativeY;
+  let startX = 0;
+  let startY = 0;
+  if (relativeX < 0) {
+    startX = Math.abs(relativeX);
+    x = 0;
+  }
+  if (relativeY < 0) {
+    startY = Math.abs(relativeY);
+    y = 0;
+  }
+  trigger(el, 'touchstart', startX, startY);
+  trigger(el, 'touchmove', x / 4, y / 4);
+  trigger(el, 'touchmove', x / 3, y / 3);
+  trigger(el, 'touchmove', x / 2, y / 2);
+  trigger(el, 'touchmove', x, y);
+  trigger(el, 'touchend', x, y);
+
+  return nextTick();
+}

packages/vant/test/index.ts

@@ -0,0 +1,16 @@
+import './plugin';
+import Locale from '../src/locale';
+import enUS from '../src/locale/lang/en-US';
+
+Locale.use('en-US', enUS);
+
+// promisify setTimeout
+export function later(delay = 0): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+}
+
+export * from './dom';
+export * from './event';
+export { mount } from '@vue/test-utils';

packages/vant/test/plugin.ts

@@ -0,0 +1,24 @@
+/* eslint-disable max-classes-per-file */
+import { ComponentPublicInstance } from 'vue';
+import { config, VueWrapper, DOMWrapper } from '@vue/test-utils';
+
+declare module '@vue/test-utils' {
+  // eslint-disable-next-line
+  export class DOMWrapper<ElementType extends Element> {
+    style: CSSStyleDeclaration;
+  }
+
+  // eslint-disable-next-line
+  class VueWrapper<T extends ComponentPublicInstance> {
+    style: CSSStyleDeclaration;
+  }
+}
+
+const stylePlugin = (
+  wrapper: VueWrapper<ComponentPublicInstance> | DOMWrapper<Element>
+) => ({
+  style: (wrapper.element as HTMLElement).style,
+});
+
+config.plugins.DOMWrapper.install(stylePlugin);
+config.plugins.VueWrapper.install(stylePlugin);