blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] IndexBar: add test cases

Browse Source
This commit is contained in:
陈嘉涵 2019-05-30 20:44:05 +08:00
parent a412c605d1
commit cc36334625
2 changed files with 86 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/index-bar/test/__snapshots__/index.spec.js.snap
View File

@ -11,3 +11,39 @@ exports[`custom anchor text 1`] = `
</div>
</div>
`;
exports[`scroll and update active anchor 1`] = `
<div class="van-index-bar">
<div class="van-index-bar__sidebar" style="z-index: 1;"><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 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[`scroll and update active anchor 2`] = `
<div class="van-index-bar">
<div class="van-index-bar__sidebar" style="z-index: 1;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index" style="color: rgb(7, 193, 96);">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="transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96); z-index: 1;">1</div>
</div>
<div data-index="1" style="height: 10px;">
<div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="transform: translate3d(0, 10px, 0); color: rgb(7, 193, 96); z-index: 1;">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>
`;

51
packages/index-bar/test/index.spec.js
View File

@ -1,7 +1,7 @@
import { mount, trigger, triggerDrag } from '../../../test/utils';
import Vue from 'vue';
import IndexBar from '..';
import IndexAnchor from '../../index-anchor';
import { mount, trigger, triggerDrag } from '../../../test/utils';
Vue.use(IndexBar);
Vue.use(IndexAnchor);
@ -12,6 +12,14 @@ function mockScrollIntoView() {
return fn;
}
function mockOffsetHeight(offsetHeight) {
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
get() {
return offsetHeight;
}
});
}
test('custom anchor text', () => {
const wrapper = mount({
template: `
@ -94,3 +102,44 @@ test('touch and scroll to anchor', () => {
expect(fn).toHaveBeenCalledTimes(1);
expect(onSelect).toHaveBeenCalledWith('B');
});
test('scroll and update active anchor', () => {
const nativeRect = Element.prototype.getBoundingClientRect;
Element.prototype.getBoundingClientRect = function () {
const { index } = this.dataset;
return {
top: index ? index * 10 : 0
};
};
mockOffsetHeight(10);
const wrapper = mount({
template: `
<van-index-bar :sticky="sticky">
<van-index-anchor
v-for="index in 4"
:key="index"
:index="index"
:data-index="index - 1"
/>
</van-index-bar>
`,
data() {
return {
sticky: false
};
}
});
window.scrollTop = 0;
trigger(window, 'scroll');
expect(wrapper).toMatchSnapshot();
wrapper.setData({ sticky: true });
trigger(window, 'scroll');
expect(wrapper).toMatchSnapshot();
wrapper.vm.$destroy();
Element.prototype.getBoundingClientRect = nativeRect;
});