[new feature] add IndexBar component

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

@@ -0,0 +1,85 @@
+import { mount, trigger, triggerDrag } from '../../../test/utils';
+import Vue from 'vue';
+import IndexBar from '..';
+import IndexAnchor from '../../index-anchor';
+
+Vue.use(IndexBar);
+Vue.use(IndexAnchor);
+
+function mockScrollIntoView() {
+  const fn = jest.fn();
+  Element.prototype.scrollIntoView = fn;
+  return fn;
+}
+
+test('custom anchor text', () => {
+  const wrapper = mount({
+    template: `
+      <van-index-bar>
+        <van-index-anchor index="A">Title A</van-index-anchor>
+        <van-index-anchor index="B">Title B</van-index-anchor>
+      </van-index-bar>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('click and scroll to anchor', () => {
+  const wrapper = mount({
+    template: `
+      <van-index-bar>
+        <van-index-anchor index="A" />
+        <van-index-anchor index="B" />
+      </van-index-bar>
+    `
+  });
+
+  const fn = mockScrollIntoView();
+  const indexes = wrapper.findAll('.van-index-bar__index');
+  indexes.at(0).trigger('click');
+  expect(fn).toHaveBeenCalledTimes(1);
+});
+
+test('touch and scroll to anchor', () => {
+  const wrapper = mount({
+    template: `
+      <van-index-bar>
+        <van-index-anchor index="A" />
+        <van-index-anchor index="B" />
+        <van-index-anchor index="XXX" />
+      </van-index-bar>
+    `
+  });
+
+  const fn = mockScrollIntoView();
+  const sidebar = wrapper.find('.van-index-bar__sidebar');
+  const indexes = wrapper.findAll('.van-index-bar__index');
+
+  document.elementFromPoint = function (x, y) {
+    const index = y / 100;
+
+    if (index === 1 || index === 2) {
+      return indexes.at(index).element;
+    }
+
+    if (index === 3) {
+      return {
+        dataset: {}
+      };
+    }
+  };
+
+  // horizontal drag
+  triggerDrag(sidebar, 100, 0);
+  expect(fn).toHaveBeenCalledTimes(0);
+
+  // vertiacl drag
+  trigger(sidebar, 'touchstart', 0, 0);
+  trigger(sidebar, 'touchmove', 0, 100);
+  trigger(sidebar, 'touchmove', 0, 200);
+  trigger(sidebar, 'touchmove', 0, 300);
+  trigger(sidebar, 'touchmove', 0, 400);
+  trigger(sidebar, 'touchend', 0, 400);
+  expect(fn).toHaveBeenCalledTimes(1);
+});