[new feature] add IndexBar component

packages/index-bar/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div class="van-tabs van-tabs--line">
+    <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__nav van-tabs__nav--line">
+        <div class="van-tabs__line"></div>
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div class="van-tab__pane" style="display:none;">
+        <!---->
+      </div>
+      <div class="van-tab__pane" style="display:none;">
+        <!---->
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`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 class="van-index-anchor">Title A</div>
+  <div class="van-index-anchor">Title B</div>
+</div>
+`;

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

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+
+demoTest(Demo);

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