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

chenjiahan · web-flow · commit 3c2270a5ad7b · 2019-07-25T19:03:16.000+08:00
diff --git a/src/address-edit/test/index.spec.js b/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: '测试',
diff --git a/src/dialog/test/index.spec.js b/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();
diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/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>
diff --git a/src/image-preview/test/index.spec.js b/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 });
diff --git a/src/list/index.js b/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;
       }
 
diff --git a/src/list/test/__snapshots__/demo.spec.js.snap b/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>
diff --git a/src/list/test/index.spec.js b/src/list/test/index.spec.js
@@ -1,23 +1,13 @@
 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);
 
   wrapper.vm.$on('input', value => {
     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');
diff --git a/src/notify/test/index.spec.js b/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
diff --git a/src/popup/test/index.spec.js b/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(() => {
diff --git a/src/sticky/test/demo.spec.js b/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);
diff --git a/src/sticky/test/index.spec.js b/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();
     }
   });
 
diff --git a/src/tabs/index.js b/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;
         }
 
diff --git a/src/toast/test/index.spec.js b/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({
diff --git a/src/uploader/test/__snapshots__/index.spec.js.snap b/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"
diff --git a/src/utils/dom/style.ts b/src/utils/dom/style.ts
@@ -0,0 +1,5 @@
+export function isHidden(element: HTMLElement) {
+  return (
+    window.getComputedStyle(element).display === 'none' || element.offsetParent === null
+  );
+}
diff --git a/test/utils.ts b/test/utils.ts
diff --git a/test/utils/dom.ts b/test/utils/dom.ts
diff --git a/test/utils/event.ts b/test/utils/event.ts
diff --git a/test/utils/index.ts b/test/utils/index.ts
diff --git a/test/utils/transition.ts b/test/utils/transition.ts
