diff --git a/src/index-bar/test/__snapshots__/index.legacy.js.snap b/src/index-bar/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index 2891d0dfb..000000000 --- a/src/index-bar/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,49 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`should allow to custom anchor text 1`] = ` -
-
ABCDEFGHIJKLMNOPQRSTUVWXYZ
-
-
Title A
-
-
-
Title B
-
-
-`; - -exports[`should update active anchor after page scroll 1`] = ` -
-
ABCDEFGHIJKLMNOPQRSTUVWXYZ
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-`; - -exports[`should update active anchor after page scroll 2`] = ` -
-
ABCDEFGHIJKLMNOPQRSTUVWXYZ
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-`; diff --git a/src/index-bar/test/__snapshots__/index.spec.js.snap b/src/index-bar/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..53de77a0a --- /dev/null +++ b/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`] = ` +
+ Title A +
+`; + +exports[`should update active anchor after page scroll 1`] = ` +
+
+ + A + + + B + + + C + + + D + + + E + + + F + + + G + + + H + + + I + + + J + + + K + + + L + + + M + + + N + + + O + + + P + + + Q + + + R + + + S + + + T + + + U + + + V + + + W + + + X + + + Y + + + Z + +
+
+
+ 1 +
+
+
+
+ 2 +
+
+
+
+ 3 +
+
+
+
+ 4 +
+
+
+`; + +exports[`should update active anchor after page scroll 2`] = ` +
+
+ + A + + + B + + + C + + + D + + + E + + + F + + + G + + + H + + + I + + + J + + + K + + + L + + + M + + + N + + + O + + + P + + + Q + + + R + + + S + + + T + + + U + + + V + + + W + + + X + + + Y + + + Z + +
+
+
+ 1 +
+
+
+
+ 2 +
+
+
+
+ 3 +
+
+
+
+ 4 +
+
+
+`; diff --git a/src/index-bar/test/index.legacy.js b/src/index-bar/test/index.spec.js similarity index 52% rename from src/index-bar/test/index.legacy.js rename to src/index-bar/test/index.spec.js index cccfb1ef7..c7c59c2fd 100644 --- a/src/index-bar/test/index.legacy.js +++ b/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: ` - - Title A - Title B - - `, + render: () => ( + + Title A + + ), }); - 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: ` - - - - - `, - methods: { - onSelect, - }, + render: () => ( + + + + + ), }); 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: ` - - - - - - `, - methods: { - onSelect, - }, + render: () => ( + + + + + + ), }); 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: ` - - - - `, - data() { + setup() { + const sticky = ref(false); return { - sticky: false, + sticky, }; }, + render() { + return ( + + + + + + + ); + }, }); window.scrollTop = 0; - trigger(window, 'scroll'); + await trigger(window, 'scroll'); expect(wrapper.html()).toMatchSnapshot(); - wrapper.setData({ sticky: true }); - trigger(window, 'scroll'); + wrapper.vm.sticky = true; + 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: ` - - - - `, - methods: { - onChange, + render() { + return ( + + + + + + + ); }, }); 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: ` - - - - - - - - - - `, - methods: { - onSelect, + setup() { + const anchorRef = ref(); + + onMounted(() => { + anchorRef.value.scrollTo('C'); + }); + + return { + anchorRef, + }; }, - mounted() { - this.$refs.anchorRef.scrollTo('C'); + render() { + return ( + + + + + + + ); }, }); - const fn = mockScrollIntoView(); - - expect(fn).toHaveBeenCalledTimes(1); + expect(scrollIntoView).toHaveBeenCalledTimes(1); expect(onSelect).toHaveBeenCalledWith('C'); }); diff --git a/test/event.ts b/test/event.ts index d85c38fd9..71ce14608 100644 --- a/test/event.ts +++ b/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