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

src/address-edit/test/index.spec.js

@@ -1,9 +1,7 @@
 /* eslint-disable camelcase */
 import AddressEdit from '..';
 import areaList from '../../area/demo/area.simple';
-import { mount, later, transitionStub } from '../../../test/utils';
-
-transitionStub();
+import { mount, later } from '../../../test/utils';
 
 const addressInfo = {
   name: '测试',

src/dialog/test/index.spec.js

@@ -1,9 +1,7 @@
 import Vue from 'vue';
 import Dialog from '..';
 import DialogVue from '../Dialog';
-import { mount, later, trigger, transitionStub } from '../../../test/utils';
-
-transitionStub();
+import { mount, later, trigger } from '../../../test/utils';
 
 test('Dialog function call', async () => {
   Dialog.close();

src/dropdown-menu/test/__snapshots__/index.spec.js.snap

@@ -27,7 +27,7 @@ exports[`close-on-click-outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
+    <div class="van-overlay" style="z-index: 2006; position: absolute; animation-duration: 0.2s; display: none;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
@@ -86,7 +86,7 @@ exports[`disable close-on-click-outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2008; position: absolute; animation-duration: 0.2s;"></div>
+    <div class="van-overlay" style="z-index: 2008; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
@@ -118,7 +118,7 @@ exports[`render option icon 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
+    <div class="van-overlay" style="z-index: 2004; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"><i class="van-icon van-icon-success van-cell__left-icon">
           <!----></i>
@@ -143,7 +143,7 @@ exports[`show dropdown item 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
+    <div class="van-overlay" style="z-index: 2000; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
@@ -178,7 +178,7 @@ exports[`show dropdown item 2`] = `
     </div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
+    <div class="van-overlay" style="z-index: 2001; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
@@ -210,7 +210,7 @@ exports[`show dropdown item 3`] = `
     </div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
+    <div class="van-overlay" style="z-index: 2001; position: absolute; animation-duration: 0.2s; display: none;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
@@ -242,7 +242,7 @@ exports[`toggle method 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay van-fade-enter-active van-fade-enter-to" style="z-index: 2014; position: absolute; animation-duration: 0s;"></div>
+    <div class="van-overlay" style="z-index: 2014; position: absolute; animation-duration: 0s;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2015;" name="van-popup-slide-top"></div>
   </div>
 </div>

src/image-preview/test/index.spec.js

@@ -1,9 +1,7 @@
 import Vue from 'vue';
 import ImagePreview from '..';
 import ImagePreviewVue from '../ImagePreview';
-import { mount, trigger, triggerDrag, transitionStub, later } from '../../../test/utils';
-
-transitionStub();
+import { mount, trigger, triggerDrag, later } from '../../../test/utils';
 
 function triggerZoom(el, x, y) {
   trigger(el, 'touchstart', 0, 0, { x, y });

src/list/index.js

@@ -1,7 +1,8 @@
 import { createNamespace } from '../utils';
-import Loading from '../loading';
+import { isHidden } from '../utils/dom/style';
 import { BindEventMixin } from '../mixins/bind-event';
 import { getScrollEventTarget } from '../utils/dom/scroll';
+import Loading from '../loading';
 
 const [createComponent, bem, t] = createNamespace('list');
 
@@ -78,11 +79,7 @@ export default createComponent({
       const scrollerHeight = scrollerRect.bottom - scrollerRect.top;
 
       /* istanbul ignore next */
-      if (
-        !scrollerHeight ||
-        window.getComputedStyle(el).display === 'none' ||
-        el.offsetParent === null
-      ) {
+      if (!scrollerHeight || isHidden(el)) {
         return false;
       }
 

src/list/test/__snapshots__/demo.spec.js.snap

@@ -15,7 +15,10 @@ exports[`renders demo correctly 1`] = `
         <div class="van-pull-refresh">
           <div class="van-pull-refresh__track" style="transition: 0ms;">
             <div class="van-pull-refresh__head"></div>
-            <div role="feed" class="van-list">
+            <div role="feed" class="van-list" aria-busy="true">
+              <div class="van-list__loading">
+                <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 16px; height: 16px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">加载中...</span></div>
+              </div>
               <div class="van-list__placeholder"></div>
             </div>
           </div>

src/list/test/index.spec.js

@@ -1,14 +1,6 @@
 import List from '..';
 import { mount, later, mockGetBoundingClientRect } from '../../../test/utils';
 
-function mockOffsetParent(el) {
-  Object.defineProperty(el, 'offsetParent', {
-    get() {
-      return {};
-    }
-  });
-}
-
 test('load event', async () => {
   const wrapper = mount(List);
 
@@ -16,8 +8,6 @@ test('load event', async () => {
     wrapper.vm.loading = value;
   });
 
-  mockOffsetParent(wrapper.vm.$el);
-
   await later();
   expect(wrapper.emitted('load')).toBeTruthy();
   expect(wrapper.emitted('input')).toBeTruthy();
@@ -37,8 +27,6 @@ test('error loaded, click error-text and reload', async () => {
     }
   });
 
-  mockOffsetParent(wrapper.vm.$el);
-
   await later();
 
   expect(wrapper.emitted('load')).toBeFalsy();
@@ -70,8 +58,6 @@ test('finished', async () => {
     }
   });
 
-  mockOffsetParent(wrapper.vm.$el);
-
   await later();
   expect(wrapper.emitted('load')).toBeFalsy();
   expect(wrapper.emitted('input')).toBeFalsy();
@@ -114,7 +100,6 @@ test('check the case that scroller is not window', async () => {
   const listRef = wrapper.find({
     ref: 'list'
   });
-  mockOffsetParent(listRef.vm.$el);
 
   await later();
   expect(listRef.emitted('load')).toBeTruthy();
@@ -133,8 +118,6 @@ test('check the direction props', async () => {
     }
   });
 
-  mockOffsetParent(wrapper.vm.$el);
-
   await later();
 
   let children = wrapper.findAll('.van-list > div');

src/notify/test/index.spec.js

@@ -1,7 +1,5 @@
 import Notify from '..';
-import { transitionStub, later } from '../../../test/utils';
-
-transitionStub();
+import { later } from '../../../test/utils';
 
 test('create a notify', async () => {
   // should not cause error when call clear before show notify

src/popup/test/index.spec.js

@@ -1,7 +1,5 @@
 import Popup from '..';
-import { mount, triggerDrag, transitionStub } from '../../../test/utils';
-
-transitionStub();
+import { mount, triggerDrag } from '../../../test/utils';
 
 let wrapper;
 afterEach(() => {

src/sticky/test/demo.spec.js

@@ -1,6 +1,4 @@
 import Demo from '../demo';
 import demoTest from '../../../test/demo-test';
-import { mockHTMLElementOffset } from '../../../test/utils';
 
-mockHTMLElementOffset();
 demoTest(Demo);

src/sticky/test/index.spec.js

@@ -1,4 +1,4 @@
-import { mount, mockScrollTop, mockHTMLElementOffset } from '../../../test/utils';
+import { mount, mockScrollTop } from '../../../test/utils';
 import Vue from 'vue';
 import Sticky from '..';
 
@@ -28,7 +28,6 @@ test('z-index prop', () => {
     `
   });
 
-  mockHTMLElementOffset();
   mockScrollTop(100);
   expect(wrapper).toMatchSnapshot();
   mockScrollTop(0);
@@ -43,7 +42,6 @@ test('offset-top prop', () => {
     `
   });
 
-  mockHTMLElementOffset();
   mockScrollTop(100);
   expect(wrapper).toMatchSnapshot();
   mockScrollTop(0);
@@ -65,7 +63,6 @@ test('container prop', () => {
     },
     mounted() {
       this.container = this.$refs.container;
-      mockHTMLElementOffset();
     }
   });
 

src/tabs/index.js

@@ -1,5 +1,6 @@
 import { createNamespace, isDef, addUnit } from '../utils';
 import { scrollLeftTo } from './utils';
+import { isHidden } from '../utils/dom/style';
 import { ParentMixin } from '../mixins/relation';
 import { BindEventMixin } from '../mixins/bind-event';
 import { setRootScrollTop, getElementTop } from '../utils/dom/scroll';
@@ -149,7 +150,7 @@ export default createComponent({
       this.$nextTick(() => {
         const { titles } = this.$refs;
 
-        if (!titles || !titles[this.currentIndex] || this.type !== 'line') {
+        if (!titles || !titles[this.currentIndex] || this.type !== 'line' || isHidden(this.$el)) {
           return;
         }
 

src/toast/test/index.spec.js

@@ -1,9 +1,7 @@
 import Vue from 'vue';
 import Toast from '..';
 import ToastVue from '../Toast';
-import { transitionStub, later } from '../../../test/utils';
-
-transitionStub();
+import { later } from '../../../test/utils';
 
 test('create a forbidClick toast', async () => {
   const toast = Toast({

src/uploader/test/__snapshots__/index.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`click to preview image 1`] = `
 <div
   class="van-image-preview"
+  name="van-fade"
 >
   <div
     class="van-image-preview__index"

src/utils/dom/style.ts

@@ -0,0 +1,5 @@
+export function isHidden(element: HTMLElement) {
+  return (
+    window.getComputedStyle(element).display === 'none' || element.offsetParent === null
+  );
+}

test/utils.ts

@@ -1,112 +0,0 @@
-import Vue from 'vue';
-import { mount, TransitionStub, Wrapper } from '@vue/test-utils';
-
-// prevent vue warning log
-Vue.config.silent = true;
-
-export { mount };
-
-function getTouch(el: HTMLElement, 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);
-}
-
-// promisify setTimeout
-export function later(delay: number = 0): Promise<void> {
-  return new Promise(resolve => {
-    setTimeout(resolve, delay);
-  });
-}
-
-export function transitionStub(): void {
-  Vue.component('transition', TransitionStub as any);
-}
-
-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 mockHTMLElementOffset() {
-  Object.defineProperties(HTMLElement.prototype, {
-    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 mockScrollTop(value: number) {
-  Object.defineProperty(window, 'scrollTop', { value, writable: true });
-  trigger(window, 'scroll');
-}

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);