test(Sticky): update test cases

src/index-bar/test/index.spec.js

@@ -1,5 +1,11 @@
 import { nextTick, onMounted, ref } from 'vue';
-import { mount, trigger, triggerDrag, mockScrollIntoView } from '../../../test';
+import {
+  mount,
+  trigger,
+  triggerDrag,
+  mockScrollTop,
+  mockScrollIntoView,
+} from '../../../test';
 import IndexBar from '..';
 import IndexAnchor from '../../index-anchor';
 
@@ -108,8 +114,7 @@ test('should update active anchor after page scroll', async () => {
     },
   });
 
-  window.scrollTop = 0;
+  await mockScrollTop(0);
-  await trigger(window, 'scroll');
   expect(wrapper.html()).toMatchSnapshot();
 
   wrapper.vm.sticky = true;
@@ -146,13 +151,11 @@ test('should emit change event when active index changed', async () => {
     },
   });
 
-  window.scrollTop = 0;
+  await mockScrollTop(0);
-  await trigger(window, 'scroll');
   expect(onChange).toHaveBeenCalledTimes(1);
   expect(onChange).toHaveBeenLastCalledWith('B');
 
-  window.scrollTop = 100;
+  await mockScrollTop(100);
-  await trigger(window, 'scroll');
   expect(onChange).toHaveBeenCalledTimes(2);
   expect(onChange).toHaveBeenLastCalledWith('D');
 

src/pull-refresh/test/index.spec.js

@@ -1,5 +1,11 @@
 import PullRefresh from '..';
-import { mount, later, trigger, triggerDrag } from '../../../test';
+import {
+  mount,
+  later,
+  trigger,
+  triggerDrag,
+  mockScrollTop,
+} from '../../../test';
 
 test('should render different head content in different pulling status', async () => {
   const wrapper = mount(PullRefresh);
@@ -82,11 +88,11 @@ test('should not trigger pull refresh when not in page top', async () => {
   const track = wrapper.find('.van-pull-refresh__track');
 
   // ignore touch event when not at page top
-  window.scrollTop = 1;
+  await mockScrollTop(1);
   triggerDrag(track, 0, 100);
   expect(wrapper.emitted('update:modelValue')).toBeFalsy();
 
-  window.scrollTop = 0;
+  await mockScrollTop(0);
   triggerDrag(track, 0, 100);
   expect(wrapper.emitted('update:modelValue')).toBeTruthy();
 });

src/sticky/test/__snapshots__/index.legacy.js.snap

@@ -1,69 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`container prop 1`] = `
-<div style="height: 20px;">
-  <div style="height: 10px;">
-    <div class="van-sticky van-sticky--fixed" style="transform: translate3d(0, -5px, 0);">
-      Content
-    </div>
-  </div>
-</div>
-`;
-
-exports[`container prop 2`] = `
-<div style="height: 20px;">
-  <div style="height: 10px;">
-    <div class="van-sticky" style="">
-      Content
-    </div>
-  </div>
-</div>
-`;
-
-exports[`offset-top prop 1`] = `
-<div style="height: 10px;">
-  <div class="van-sticky van-sticky--fixed" style="top: 10px;">
-    Content
-  </div>
-</div>
-`;
-
-exports[`offset-top with rem unit 1`] = `
-<div style="height: 10px;">
-  <div class="van-sticky van-sticky--fixed" style="top: 16px;">
-    Content
-  </div>
-</div>
-`;
-
-exports[`offset-top with vw unit 1`] = `
-<div style="height: 10px;">
-  <div class="van-sticky van-sticky--fixed" style="top: 30px;">
-    Content
-  </div>
-</div>
-`;
-
-exports[`sticky to top 1`] = `
-<div style="height: 10px;">
-  <div class="van-sticky">
-    Content
-  </div>
-</div>
-`;
-
-exports[`sticky to top 2`] = `
-<div style="height: 10px;">
-  <div class="van-sticky van-sticky--fixed">
-    Content
-  </div>
-</div>
-`;
-
-exports[`z-index prop 1`] = `
-<div style="height: 10px;">
-  <div class="van-sticky van-sticky--fixed" style="z-index: 0;">
-    Content
-  </div>
-</div>
-`;

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

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should add offset top when using offset-top prop 1`] = `
+<div style="height: 10px;">
+  <div class="van-sticky van-sticky--fixed"
+       style="top: 10px;"
+  >
+    Content
+  </div>
+</div>
+`;
+
+exports[`should allow to using offset-top prop with rem unit 1`] = `
+<div style="height: 10px;">
+  <div class="van-sticky van-sticky--fixed"
+       style="top: 32px;"
+  >
+    Content
+  </div>
+</div>
+`;
+
+exports[`should allow to using offset-top prop with vw unit 1`] = `
+<div style="height: 10px;">
+  <div class="van-sticky van-sticky--fixed"
+       style="top: 30px;"
+  >
+    Content
+  </div>
+</div>
+`;
+
+exports[`should sticky inside container when using container prop 1`] = `
+<div style="height: 20px;">
+  <div style="height: 10px;">
+    <div class="van-sticky van-sticky--fixed"
+         style="transform: translate3d(0, -5px, 0);"
+    >
+      Content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should sticky inside container when using container prop 2`] = `
+<div style="height: 20px;">
+  <div style="height: 10px;">
+    <div class="van-sticky">
+      Content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should sticky to top after scrolling 1`] = `
+<div style="height: 10px;">
+  <div class="van-sticky">
+    Content
+  </div>
+</div>
+`;
+
+exports[`should sticky to top after scrolling 2`] = `
+<div style="height: 10px;">
+  <div class="van-sticky van-sticky--fixed">
+    Content
+  </div>
+</div>
+`;
+
+exports[`should update z-index when using z-index prop 1`] = `
+<div style="height: 10px;">
+  <div class="van-sticky van-sticky--fixed"
+       style="z-index: 0;"
+  >
+    Content
+  </div>
+</div>
+`;

src/sticky/test/index.legacy.js

@@ -1,171 +0,0 @@
-import { mount, mockScrollTop } from '../../../test';
-
-test('sticky to top', () => {
-  const wrapper = mount({
-    template: `
-      <van-sticky style="height: 10px;">
-        Content
-      </van-sticky>
-    `,
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-  mockScrollTop(100);
-  expect(wrapper.html()).toMatchSnapshot();
-  mockScrollTop(0);
-});
-
-test('z-index prop', () => {
-  const wrapper = mount({
-    template: `
-      <van-sticky style="height: 10px;" :z-index="0">
-        Content
-      </van-sticky>
-    `,
-  });
-
-  mockScrollTop(100);
-  expect(wrapper.html()).toMatchSnapshot();
-  mockScrollTop(0);
-});
-
-test('offset-top prop', () => {
-  const wrapper = mount({
-    template: `
-      <van-sticky style="height: 10px;" :offset-top="10">
-        Content
-      </van-sticky>
-    `,
-  });
-
-  mockScrollTop(100);
-  expect(wrapper.html()).toMatchSnapshot();
-  mockScrollTop(0);
-});
-
-test('offset-top with rem unit', () => {
-  const originGetComputedStyle = window.getComputedStyle;
-
-  window.getComputedStyle = () => ({ fontSize: '16px' });
-
-  const wrapper = mount({
-    template: `
-      <van-sticky style="height: 10px;" offset-top="1rem">
-        Content
-      </van-sticky>
-    `,
-  });
-
-  mockScrollTop(100);
-  expect(wrapper.html()).toMatchSnapshot();
-  mockScrollTop(0);
-
-  window.getComputedStyle = originGetComputedStyle;
-});
-
-test('offset-top with vw unit', () => {
-  window.innerWidth = 300;
-
-  const wrapper = mount({
-    template: `
-      <van-sticky style="height: 10px;" offset-top="10vw">
-        Content
-      </van-sticky>
-    `,
-  });
-
-  mockScrollTop(100);
-  expect(wrapper.html()).toMatchSnapshot();
-  mockScrollTop(0);
-});
-
-test('should not trigger scroll event when hidden', () => {
-  const scroll = jest.fn();
-  mount({
-    template: `
-      <van-sticky style="height: 10px; display: none;" @scroll="scroll">
-        Content
-      </van-sticky>
-    `,
-    methods: {
-      scroll,
-    },
-  });
-
-  expect(scroll).toHaveBeenCalledTimes(0);
-});
-
-test('container prop', () => {
-  const wrapper = mount({
-    template: `
-      <div ref="container" style="height: 20px;">
-        <van-sticky ref="sticky" style="height: 10px;" :container="container">
-          Content
-        </van-sticky>
-      </div>
-    `,
-    data() {
-      return {
-        container: null,
-      };
-    },
-    mounted() {
-      this.container = this.$refs.container;
-    },
-  });
-
-  mockScrollTop(15);
-  expect(wrapper.html()).toMatchSnapshot();
-  mockScrollTop(25);
-  expect(wrapper.html()).toMatchSnapshot();
-  mockScrollTop(0);
-});
-
-test('trigger scroll when visibility changed', () => {
-  const originIntersectionObserver = window.IntersectionObserver;
-
-  const observe = jest.fn();
-  const unobserve = jest.fn();
-  const scroll = jest.fn();
-
-  let observerCallback;
-
-  window.IntersectionObserver = class IntersectionObserver {
-    constructor(callback) {
-      observerCallback = callback;
-    }
-
-    observe() {
-      observe();
-    }
-
-    unobserve() {
-      unobserve();
-    }
-  };
-
-  const wrapper = mount({
-    template: `
-      <van-sticky style="height: 10px;" @scroll="scroll">
-        Content
-      </van-sticky>
-    `,
-    methods: {
-      scroll,
-    },
-  });
-
-  expect(observe).toHaveBeenCalledTimes(1);
-  expect(scroll).toHaveBeenCalledTimes(1);
-
-  observerCallback([{ intersectionRatio: 1 }]);
-  expect(scroll).toHaveBeenCalledTimes(2);
-
-  observerCallback([{ intersectionRatio: 0 }]);
-  expect(scroll).toHaveBeenCalledTimes(2);
-
-  wrapper.unmount();
-  expect(unobserve).toHaveBeenCalledTimes(1);
-
-  window.IntersectionObserver = originIntersectionObserver;
-});

src/sticky/test/index.spec.js

@@ -0,0 +1,184 @@
+import { nextTick, ref } from 'vue';
+import { mount, mockScrollTop } from '../../../test';
+import Sticky from '..';
+
+test('should sticky to top after scrolling', async () => {
+  const wrapper = mount({
+    render() {
+      return <Sticky style="height: 10px;">Content</Sticky>;
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+
+  await mockScrollTop(100);
+  expect(wrapper.html()).toMatchSnapshot();
+  await mockScrollTop(0);
+});
+
+test('should update z-index when using z-index prop', async () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Sticky style="height: 10px;" zIndex={0}>
+          Content
+        </Sticky>
+      );
+    },
+  });
+
+  await mockScrollTop(100);
+  expect(wrapper.html()).toMatchSnapshot();
+  await mockScrollTop(0);
+});
+
+test('should add offset top when using offset-top prop', async () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Sticky style="height: 10px;" offsetTop={10}>
+          Content
+        </Sticky>
+      );
+    },
+  });
+
+  await mockScrollTop(100);
+  expect(wrapper.html()).toMatchSnapshot();
+  await mockScrollTop(0);
+});
+
+test('should allow to using offset-top prop with rem unit', async () => {
+  const originGetComputedStyle = window.getComputedStyle;
+
+  window.getComputedStyle = () => ({ fontSize: '16px' });
+
+  const wrapper = mount({
+    render() {
+      return (
+        <Sticky style="height: 10px;" offsetTop="2rem">
+          Content
+        </Sticky>
+      );
+    },
+  });
+
+  await mockScrollTop(100);
+  expect(wrapper.html()).toMatchSnapshot();
+
+  await mockScrollTop(0);
+  window.getComputedStyle = originGetComputedStyle;
+});
+
+test('should allow to using offset-top prop with vw unit', async () => {
+  window.innerWidth = 300;
+
+  const wrapper = mount({
+    render() {
+      return (
+        <Sticky style="height: 10px;" offsetTop="10vw">
+          Content
+        </Sticky>
+      );
+    },
+  });
+
+  await mockScrollTop(100);
+  expect(wrapper.html()).toMatchSnapshot();
+  await mockScrollTop(0);
+});
+
+test('should not trigger scroll event when hidden', () => {
+  const onScroll = jest.fn();
+
+  mount({
+    render() {
+      return (
+        <Sticky style="height: 10px; display: none;" onScroll={onScroll}>
+          Content
+        </Sticky>
+      );
+    },
+  });
+
+  expect(onScroll).toHaveBeenCalledTimes(0);
+});
+
+test('should sticky inside container when using container prop', async () => {
+  const wrapper = mount({
+    setup() {
+      const container = ref();
+      return {
+        container,
+      };
+    },
+    render() {
+      return (
+        <div ref="container" style="height: 20px;">
+          <Sticky ref="sticky" style="height: 10px;" container={this.container}>
+            Content
+          </Sticky>
+        </div>
+      );
+    },
+  });
+
+  await nextTick();
+  await mockScrollTop(15);
+  expect(wrapper.html()).toMatchSnapshot();
+  await mockScrollTop(25);
+  expect(wrapper.html()).toMatchSnapshot();
+  await mockScrollTop(0);
+});
+
+test('should emit scroll event when visibility changed', async () => {
+  const originIntersectionObserver = window.IntersectionObserver;
+
+  const observe = jest.fn();
+  const unobserve = jest.fn();
+  const onScroll = jest.fn();
+
+  let observerCallback;
+
+  window.IntersectionObserver = class IntersectionObserver {
+    constructor(callback) {
+      observerCallback = callback;
+    }
+
+    observe() {
+      observe();
+    }
+
+    unobserve() {
+      unobserve();
+    }
+  };
+
+  const wrapper = mount({
+    render() {
+      return (
+        <Sticky style="height: 10px;" onScroll={onScroll}>
+          Content
+        </Sticky>
+      );
+    },
+  });
+
+  await nextTick();
+  await mockScrollTop(0);
+
+  expect(observe).toHaveBeenCalledTimes(1);
+  expect(onScroll).toHaveBeenCalledTimes(1);
+
+  observerCallback([{ intersectionRatio: 1 }]);
+  expect(onScroll).toHaveBeenCalledTimes(2);
+
+  wrapper.element.style.display = 'none';
+  observerCallback([{ intersectionRatio: 0 }]);
+  expect(onScroll).toHaveBeenCalledTimes(2);
+
+  wrapper.unmount();
+  expect(unobserve).toHaveBeenCalledTimes(1);
+
+  window.IntersectionObserver = originIntersectionObserver;
+});

test/dom.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { trigger } from './event';
 
 function mockHTMLElementOffset() {
@@ -36,9 +37,7 @@ export function mockScrollIntoView() {
   return fn;
 }
 
-export function mockGetBoundingClientRect(
+export function mockGetBoundingClientRect(rect: DOMRect): () => void {
-  rect: DOMRect
-): () => void {
   const originMethod = Element.prototype.getBoundingClientRect;
 
   Element.prototype.getBoundingClientRect = jest.fn(() => rect);
@@ -48,9 +47,10 @@ export function mockGetBoundingClientRect(
   };
 }
 
-export function mockScrollTop(value: number) {
+export async function mockScrollTop(value: number) {
   Object.defineProperty(window, 'scrollTop', { value, writable: true });
   trigger(window, 'scroll');
+  return nextTick();
 }
 
 mockScrollIntoView();