[bugfix] Tabs: incorrect line position in some cases (#3961)

test/utils/dom.ts

@@ -0,0 +1,48 @@
+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;
+      }
+    }
+  });
+}
+
+mockHTMLElementOffset();
+
+export function mockGetBoundingClientRect(rect: ClientRect | DOMRect): Function {
+  const originMethod = Element.prototype.getBoundingClientRect;
+
+  Element.prototype.getBoundingClientRect = <any>jest.fn(() => rect);
+
+  return function () {
+    Element.prototype.getBoundingClientRect = originMethod;
+  };
+}
+
+export function mockScrollTop(value: number) {
+  Object.defineProperty(window, 'scrollTop', { value, writable: true });
+  trigger(window, 'scroll');
+}

test/utils/event.ts

@@ -0,0 +1,56 @@
+import Vue from 'vue';
+import { Wrapper } from '@vue/test-utils';
+
+function getTouch(el: HTMLElement | 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: Wrapper<Vue> | HTMLElement | Window,
+  eventName: string,
+  x: number = 0,
+  y: number = 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);
+}
+
+// simulate drag gesture
+export function triggerDrag(el: Wrapper<Vue> | HTMLElement, x = 0, y = 0): void {
+  trigger(el, 'touchstart', 0, 0);
+  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);
+}

test/utils/index.ts

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import './transition';
+import { mount } from '@vue/test-utils';
+import { trigger, triggerDrag } from './event';
+import { mockScrollTop, mockGetBoundingClientRect } from './dom';
+
+// prevent vue warning log
+Vue.config.silent = true;
+
+// promisify setTimeout
+function later(delay: number = 0): Promise<void> {
+  return new Promise(resolve => {
+    setTimeout(resolve, delay);
+  });
+}
+
+export { mount, later, trigger, triggerDrag, mockScrollTop, mockGetBoundingClientRect };

test/utils/transition.ts

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import { TransitionStub } from '@vue/test-utils';
+
+Vue.component('transition', TransitionStub as any);