test(IndexBar): update test cases

src/index-bar/test/__snapshots__/index.legacy.js.snap

@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should allow to custom anchor text 1`] = `
-<div class="van-index-bar">
-  <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
-  <div>
-    <div class="van-index-anchor">Title A</div>
-  </div>
-  <div>
-    <div class="van-index-anchor">Title B</div>
-  </div>
-</div>
-`;
-
-exports[`should update active anchor after page scroll 1`] = `
-<div class="van-index-bar">
-  <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index van-index-bar__index--active">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
-  <div data-index="0">
-    <div class="van-index-anchor">1</div>
-  </div>
-  <div data-index="1">
-    <div class="van-index-anchor">2</div>
-  </div>
-  <div data-index="2">
-    <div class="van-index-anchor">3</div>
-  </div>
-  <div data-index="3">
-    <div class="van-index-anchor">4</div>
-  </div>
-</div>
-`;
-
-exports[`should update active anchor after page scroll 2`] = `
-<div class="van-index-bar">
-  <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index van-index-bar__index--active">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
-  <div data-index="0" style="height: 10px;">
-    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: undefined; transform: translate3d(0, 0px, 0);">1</div>
-  </div>
-  <div data-index="1" style="height: 10px;">
-    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: undefined; transform: translate3d(0, 10px, 0);">2</div>
-  </div>
-  <div data-index="2">
-    <div class="van-index-anchor">3</div>
-  </div>
-  <div data-index="3">
-    <div class="van-index-anchor">4</div>
-  </div>
-</div>
-`;

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

@@ -0,0 +1,329 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should allow to custom anchor content 1`] = `
+<div class="van-index-anchor">
+  Title A
+</div>
+`;
+
+exports[`should update active anchor after page scroll 1`] = `
+<div class="van-index-bar">
+  <div class="van-index-bar__sidebar">
+    <span class="van-index-bar__index van-index-bar__index--active"
+          data-index="A"
+    >
+      A
+    </span>
+    <span class="van-index-bar__index"
+          data-index="B"
+    >
+      B
+    </span>
+    <span class="van-index-bar__index"
+          data-index="C"
+    >
+      C
+    </span>
+    <span class="van-index-bar__index"
+          data-index="D"
+    >
+      D
+    </span>
+    <span class="van-index-bar__index"
+          data-index="E"
+    >
+      E
+    </span>
+    <span class="van-index-bar__index"
+          data-index="F"
+    >
+      F
+    </span>
+    <span class="van-index-bar__index"
+          data-index="G"
+    >
+      G
+    </span>
+    <span class="van-index-bar__index"
+          data-index="H"
+    >
+      H
+    </span>
+    <span class="van-index-bar__index"
+          data-index="I"
+    >
+      I
+    </span>
+    <span class="van-index-bar__index"
+          data-index="J"
+    >
+      J
+    </span>
+    <span class="van-index-bar__index"
+          data-index="K"
+    >
+      K
+    </span>
+    <span class="van-index-bar__index"
+          data-index="L"
+    >
+      L
+    </span>
+    <span class="van-index-bar__index"
+          data-index="M"
+    >
+      M
+    </span>
+    <span class="van-index-bar__index"
+          data-index="N"
+    >
+      N
+    </span>
+    <span class="van-index-bar__index"
+          data-index="O"
+    >
+      O
+    </span>
+    <span class="van-index-bar__index"
+          data-index="P"
+    >
+      P
+    </span>
+    <span class="van-index-bar__index"
+          data-index="Q"
+    >
+      Q
+    </span>
+    <span class="van-index-bar__index"
+          data-index="R"
+    >
+      R
+    </span>
+    <span class="van-index-bar__index"
+          data-index="S"
+    >
+      S
+    </span>
+    <span class="van-index-bar__index"
+          data-index="T"
+    >
+      T
+    </span>
+    <span class="van-index-bar__index"
+          data-index="U"
+    >
+      U
+    </span>
+    <span class="van-index-bar__index"
+          data-index="V"
+    >
+      V
+    </span>
+    <span class="van-index-bar__index"
+          data-index="W"
+    >
+      W
+    </span>
+    <span class="van-index-bar__index"
+          data-index="X"
+    >
+      X
+    </span>
+    <span class="van-index-bar__index"
+          data-index="Y"
+    >
+      Y
+    </span>
+    <span class="van-index-bar__index"
+          data-index="Z"
+    >
+      Z
+    </span>
+  </div>
+  <div data-index="0">
+    <div class="van-index-anchor">
+      1
+    </div>
+  </div>
+  <div data-index="1">
+    <div class="van-index-anchor">
+      2
+    </div>
+  </div>
+  <div data-index="2">
+    <div class="van-index-anchor">
+      3
+    </div>
+  </div>
+  <div data-index="3">
+    <div class="van-index-anchor">
+      4
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should update active anchor after page scroll 2`] = `
+<div class="van-index-bar">
+  <div class="van-index-bar__sidebar">
+    <span class="van-index-bar__index"
+          data-index="A"
+    >
+      A
+    </span>
+    <span class="van-index-bar__index van-index-bar__index--active"
+          data-index="B"
+    >
+      B
+    </span>
+    <span class="van-index-bar__index"
+          data-index="C"
+    >
+      C
+    </span>
+    <span class="van-index-bar__index"
+          data-index="D"
+    >
+      D
+    </span>
+    <span class="van-index-bar__index"
+          data-index="E"
+    >
+      E
+    </span>
+    <span class="van-index-bar__index"
+          data-index="F"
+    >
+      F
+    </span>
+    <span class="van-index-bar__index"
+          data-index="G"
+    >
+      G
+    </span>
+    <span class="van-index-bar__index"
+          data-index="H"
+    >
+      H
+    </span>
+    <span class="van-index-bar__index"
+          data-index="I"
+    >
+      I
+    </span>
+    <span class="van-index-bar__index"
+          data-index="J"
+    >
+      J
+    </span>
+    <span class="van-index-bar__index"
+          data-index="K"
+    >
+      K
+    </span>
+    <span class="van-index-bar__index"
+          data-index="L"
+    >
+      L
+    </span>
+    <span class="van-index-bar__index"
+          data-index="M"
+    >
+      M
+    </span>
+    <span class="van-index-bar__index"
+          data-index="N"
+    >
+      N
+    </span>
+    <span class="van-index-bar__index"
+          data-index="O"
+    >
+      O
+    </span>
+    <span class="van-index-bar__index"
+          data-index="P"
+    >
+      P
+    </span>
+    <span class="van-index-bar__index"
+          data-index="Q"
+    >
+      Q
+    </span>
+    <span class="van-index-bar__index"
+          data-index="R"
+    >
+      R
+    </span>
+    <span class="van-index-bar__index"
+          data-index="S"
+    >
+      S
+    </span>
+    <span class="van-index-bar__index"
+          data-index="T"
+    >
+      T
+    </span>
+    <span class="van-index-bar__index"
+          data-index="U"
+    >
+      U
+    </span>
+    <span class="van-index-bar__index"
+          data-index="V"
+    >
+      V
+    </span>
+    <span class="van-index-bar__index"
+          data-index="W"
+    >
+      W
+    </span>
+    <span class="van-index-bar__index"
+          data-index="X"
+    >
+      X
+    </span>
+    <span class="van-index-bar__index"
+          data-index="Y"
+    >
+      Y
+    </span>
+    <span class="van-index-bar__index"
+          data-index="Z"
+    >
+      Z
+    </span>
+  </div>
+  <div data-index="0"
+       style="height: 10px;"
+  >
+    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom"
+         style="z-index: undefined;"
+    >
+      1
+    </div>
+  </div>
+  <div data-index="1"
+       style="height: 10px;"
+  >
+    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom"
+         style="z-index: undefined; transform: translate3d(0, 10px, 0);"
+    >
+      2
+    </div>
+  </div>
+  <div data-index="2">
+    <div class="van-index-anchor">
+      3
+    </div>
+  </div>
+  <div data-index="3">
+    <div class="van-index-anchor">
+      4
+    </div>
+  </div>
+</div>
+`;

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

@@ -1,30 +1,29 @@
+import { nextTick, onMounted, ref } from 'vue';
 import { mount, trigger, triggerDrag, mockScrollIntoView } from '../../../test';
+import IndexBar from '..';
+import IndexAnchor from '../../index-anchor';
 
-test('should allow to custom anchor text', () => {
+test('should allow to custom anchor content', () => {
   const wrapper = mount({
-    template: `
+    render: () => (
-      <van-index-bar>
+      <IndexBar>
-        <van-index-anchor index="A">Title A</van-index-anchor>
+        <IndexAnchor index="A">Title A</IndexAnchor>
-        <van-index-anchor index="B">Title B</van-index-anchor>
+      </IndexBar>
-      </van-index-bar>
+    ),
-    `,
   });
 
-  expect(wrapper.html()).toMatchSnapshot();
+  expect(wrapper.find('.van-index-anchor').html()).toMatchSnapshot();
 });
 
 test('should scroll to anchor and emit select event after clicking the index-bar', () => {
   const onSelect = jest.fn();
   const wrapper = mount({
-    template: `
+    render: () => (
-      <van-index-bar @select="onSelect">
+      <IndexBar onSelect={onSelect}>
-        <van-index-anchor index="A" />
+        <IndexAnchor index="A" />
-        <van-index-anchor index="B" />
+        <IndexAnchor index="B" />
-      </van-index-bar>
+      </IndexBar>
-    `,
+    ),
-    methods: {
-      onSelect,
-    },
   });
 
   const fn = mockScrollIntoView();
@@ -38,16 +37,13 @@ test('should scroll to anchor and emit select event after clicking the index-bar
 test('should scroll to anchor after touching the index-bar', () => {
   const onSelect = jest.fn();
   const wrapper = mount({
-    template: `
+    render: () => (
-      <van-index-bar @select="onSelect">
+      <IndexBar onSelect={onSelect}>
-        <van-index-anchor index="A" />
+        <IndexAnchor index="A" />
-        <van-index-anchor index="B" />
+        <IndexAnchor index="B" />
-        <van-index-anchor index="XXX" />
+        <IndexAnchor index="XXX" />
-      </van-index-bar>
+      </IndexBar>
-    `,
+    ),
-    methods: {
-      onSelect,
-    },
   });
 
   const fn = mockScrollIntoView();
@@ -58,7 +54,7 @@ test('should scroll to anchor after touching the index-bar', () => {
     const index = y / 100;
 
     if (index === 1 || index === 2) {
-      return indexes.at(index).element;
+      return indexes[index].element;
     }
 
     if (index === 3) {
@@ -83,7 +79,7 @@ test('should scroll to anchor after touching the index-bar', () => {
   expect(onSelect).toHaveBeenCalledWith('B');
 });
 
-test('should update active anchor after page scroll', () => {
+test('should update active anchor after page scroll', async () => {
   const nativeRect = Element.prototype.getBoundingClientRect;
   Element.prototype.getBoundingClientRect = function () {
     const { index } = this.dataset;
@@ -94,36 +90,38 @@ test('should update active anchor after page scroll', () => {
   };
 
   const wrapper = mount({
-    template: `
+    setup() {
-      <van-index-bar :sticky="sticky">
+      const sticky = ref(false);
-        <van-index-anchor
-          v-for="index in 4"
-          :key="index"
-          :index="index"
-          :data-index="index - 1"
-        />
-      </van-index-bar>
-    `,
-    data() {
       return {
-        sticky: false,
+        sticky,
       };
     },
+    render() {
+      return (
+        <IndexBar sticky={this.sticky}>
+          <IndexAnchor index={1} data-index="0" />
+          <IndexAnchor index={2} data-index="1" />
+          <IndexAnchor index={3} data-index="2" />
+          <IndexAnchor index={4} data-index="3" />
+        </IndexBar>
+      );
+    },
   });
 
   window.scrollTop = 0;
-  trigger(window, 'scroll');
+  await trigger(window, 'scroll');
   expect(wrapper.html()).toMatchSnapshot();
 
-  wrapper.setData({ sticky: true });
+  wrapper.vm.sticky = true;
-  trigger(window, 'scroll');
+  await nextTick();
+  await trigger(window, 'scroll');
   expect(wrapper.html()).toMatchSnapshot();
-  wrapper.vm.$unmount();
+  wrapper.unmount();
 
   Element.prototype.getBoundingClientRect = nativeRect;
 });
 
-test('should emit change event when active index changed', () => {
+test('should emit change event when active index changed', async () => {
   const nativeRect = Element.prototype.getBoundingClientRect;
   Element.prototype.getBoundingClientRect = function () {
     const { index } = this.dataset;
@@ -136,58 +134,59 @@ test('should emit change event when active index changed', () => {
   const onChange = jest.fn();
 
   mount({
-    template: `
+    render() {
-      <van-index-bar @change="onChange">
+      return (
-        <van-index-anchor
+        <IndexBar onChange={onChange}>
-          v-for="index in 4"
+          <IndexAnchor index={1} data-index="0" />
-          :key="index"
+          <IndexAnchor index={2} data-index="1" />
-          :index="index"
+          <IndexAnchor index={3} data-index="2" />
-          :data-index="index - 1"
+          <IndexAnchor index={4} data-index="3" />
-        />
+        </IndexBar>
-      </van-index-bar>
+      );
-    `,
-    methods: {
-      onChange,
     },
   });
 
   window.scrollTop = 0;
-  trigger(window, 'scroll');
+  await trigger(window, 'scroll');
   expect(onChange).toHaveBeenCalledTimes(1);
   expect(onChange).toHaveBeenLastCalledWith('B');
 
   window.scrollTop = 100;
-  trigger(window, 'scroll');
+  await trigger(window, 'scroll');
   expect(onChange).toHaveBeenCalledTimes(2);
   expect(onChange).toHaveBeenLastCalledWith('D');
 
   Element.prototype.getBoundingClientRect = nativeRect;
 });
 
-test('scroll to target element', () => {
+test('should scroll to target element after calling scrollTo method', () => {
   const onSelect = jest.fn();
+  const scrollIntoView = mockScrollIntoView();
+
   mount({
-    template: `
+    setup() {
-      <van-index-bar ref="anchorRef" @select="onSelect">
+      const anchorRef = ref();
-        <van-index-anchor index="A" />
+
-        <van-index-anchor index="B" />
+      onMounted(() => {
-        <van-index-anchor index="C" />
+        anchorRef.value.scrollTo('C');
-        <van-index-anchor index="D" />
+      });
-        <van-index-anchor index="E" />
+
-        <van-index-anchor index="F" />
+      return {
-        <van-index-anchor index="XXX" />
+        anchorRef,
-      </van-index-bar>
+      };
-    `,
-    methods: {
-      onSelect,
     },
-    mounted() {
+    render() {
-      this.$refs.anchorRef.scrollTo('C');
+      return (
+        <IndexBar ref="anchorRef" onSelect={onSelect}>
+          <IndexAnchor index="A" />
+          <IndexAnchor index="B" />
+          <IndexAnchor index="C" />
+          <IndexAnchor index="D" />
+        </IndexBar>
+      );
     },
   });
 
-  const fn = mockScrollIntoView();
+  expect(scrollIntoView).toHaveBeenCalledTimes(1);
-
-  expect(fn).toHaveBeenCalledTimes(1);
   expect(onSelect).toHaveBeenCalledWith('C');
 });

test/event.ts

@@ -1,4 +1,4 @@
-import { ComponentPublicInstance } from 'vue';
+import { ComponentPublicInstance, nextTick } from 'vue';
 import { VueWrapper } from '@vue/test-utils';
 
 function getTouch(el: Element | Window, x: number, y: number) {
@@ -43,6 +43,8 @@ export function trigger(
   });
 
   el.dispatchEvent(event);
+
+  return nextTick();
 }
 
 // simulate drag gesture