diff --git a/src/pull-refresh/test/__snapshots__/index.legacy.js.snap b/src/pull-refresh/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index 63c569f79..000000000 --- a/src/pull-refresh/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,115 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`change head content when pulling down 1`] = ` -
-
-
-
下拉即可刷新...
-
-
-
-`; - -exports[`change head content when pulling down 2`] = ` -
-
-
-
释放即可刷新...
-
-
-
-`; - -exports[`change head content when pulling down 3`] = ` -
-
-
-
加载中...
-
-
-
-`; - -exports[`change head content when pulling down 4`] = ` -
-
-
-
加载中...
-
-
-
-`; - -exports[`change head content when pulling down 5`] = ` -
-
-
-
-
-`; - -exports[`custom content by slots 1`] = ` -
-
-
pulling 20
-
-
-`; - -exports[`custom content by slots 2`] = ` -
-
-
loosing 75
-
-
-`; - -exports[`custom content by slots 3`] = ` -
-
-
loading 50
-
-
-`; - -exports[`not in page top 1`] = ` -
-
-
-
-
-`; - -exports[`render success slot 1`] = ` -
-
-
Custom Success
-
-
-`; - -exports[`render success text 1`] = ` -
-
-
-
success
-
-
-
-`; - -exports[`render success text 2`] = ` -
-
-
-
-
-`; - -exports[`should set height when using head-height 1`] = ` -
-
-
-
-
-`; diff --git a/src/pull-refresh/test/__snapshots__/index.spec.js.snap b/src/pull-refresh/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..1ac507b8d --- /dev/null +++ b/src/pull-refresh/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,173 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render different head content in different pulling status 1`] = ` +
+
+
+
+ 下拉即可刷新... +
+
+
+
+`; + +exports[`should render different head content in different pulling status 2`] = ` +
+
+
+
+ 释放即可刷新... +
+
+
+
+`; + +exports[`should render different head content in different pulling status 3`] = ` +
+
+
+
+ + + 加载中... + +
+
+
+
+`; + +exports[`should render different head content in different pulling status 4`] = ` +
+
+
+
+ + + 加载中... + +
+
+
+
+`; + +exports[`should render different head content in different pulling status 5`] = ` +
+
+
+
+
+
+`; + +exports[`should render status slots correctly 1`] = ` +
+
+
+ pulling 20 +
+
+
+`; + +exports[`should render status slots correctly 2`] = ` +
+
+
+ loosing 75 +
+
+
+`; + +exports[`should render status slots correctly 3`] = ` +
+
+
+ loading 50 +
+
+
+`; + +exports[`should render success slot correctly 1`] = ` +
+
+
+ Custom Success +
+
+
+`; + +exports[`should render success text correctly 1`] = ` +
+
+
+
+ success +
+
+
+
+`; + +exports[`should render success text correctly 2`] = ` +
+
+
+
+
+
+`; diff --git a/src/pull-refresh/test/index.legacy.js b/src/pull-refresh/test/index.spec.js similarity index 62% rename from src/pull-refresh/test/index.legacy.js rename to src/pull-refresh/test/index.spec.js index a4007aa21..e2590c3b1 100644 --- a/src/pull-refresh/test/index.legacy.js +++ b/src/pull-refresh/test/index.spec.js @@ -1,49 +1,41 @@ import PullRefresh from '..'; import { mount, later, trigger, triggerDrag } from '../../../test'; -test('change head content when pulling down', async () => { - const wrapper = mount(PullRefresh, { - props: { - value: false, - }, - listeners: { - input(value) { - wrapper.setProps({ value }); - }, - }, - }); - +test('should render different head content in different pulling status', async () => { + const wrapper = mount(PullRefresh); const track = wrapper.find('.van-pull-refresh__track'); // pulling trigger(track, 'touchstart', 0, 0); trigger(track, 'touchmove', 0, 20); + await later(); expect(wrapper.html()).toMatchSnapshot(); // loosing trigger(track, 'touchmove', 0, 100); + await later(); expect(wrapper.html()).toMatchSnapshot(); // loading trigger(track, 'touchend', 0, 100); + await later(); expect(wrapper.html()).toMatchSnapshot(); // still loading triggerDrag(track, 0, 100); + await later(); expect(wrapper.html()).toMatchSnapshot(); - expect(wrapper.emitted('input')).toBeTruthy(); - expect(wrapper.emitted('refresh')).toBeFalsy(); - - await later(); + expect(wrapper.emitted('update:modelValue')).toBeTruthy(); expect(wrapper.emitted('refresh')).toBeTruthy(); - // end loading - wrapper.vm.value = false; + // // end loading + await wrapper.setProps({ modelValue: true }); + await wrapper.setProps({ modelValue: false }); expect(wrapper.html()).toMatchSnapshot(); }); -test('custom content by slots', async () => { +test('should render status slots correctly', async () => { const wrapper = mount(PullRefresh, { slots: { pulling({ distance }) { @@ -63,59 +55,48 @@ test('custom content by slots', async () => { // pulling trigger(track, 'touchstart', 0, 0); trigger(track, 'touchmove', 0, 20); + await later(); expect(wrapper.html()).toMatchSnapshot(); // loosing trigger(track, 'touchmove', 0, 75); trigger(track, 'touchmove', 0, 100); + await later(); expect(wrapper.html()).toMatchSnapshot(); // loading trigger(track, 'touchend', 0, 100); + await later(); expect(wrapper.html()).toMatchSnapshot(); }); -test('pull a short distance', () => { - const wrapper = mount(PullRefresh, { - props: { - value: false, - }, - }); - +test('shoud not emit update:modelValue event after pulling a short distance', () => { + const wrapper = mount(PullRefresh); const track = wrapper.find('.van-pull-refresh__track'); triggerDrag(track, 0, 10); - expect(wrapper.emitted('input')).toBeFalsy(); + expect(wrapper.emitted('update:modelValue')).toBeFalsy(); }); -test('not in page top', () => { - const wrapper = mount(PullRefresh, { - props: { - value: false, - }, - }); - - window.scrollTop = 100; - +test('should not trigger pull refresh when not in page top', async () => { + const wrapper = mount(PullRefresh); const track = wrapper.find('.van-pull-refresh__track'); - // ignore touch event when not at page top - triggerDrag(track, 0, 100); - window.scrollTop = 0; - trigger(track, 'touchmove', 0, 100); - expect(wrapper.html()).toMatchSnapshot(); + // ignore touch event when not at page top + window.scrollTop = 1; + triggerDrag(track, 0, 100); + expect(wrapper.emitted('update:modelValue')).toBeFalsy(); + + window.scrollTop = 0; + triggerDrag(track, 0, 100); + expect(wrapper.emitted('update:modelValue')).toBeTruthy(); }); -test('render success text', async () => { +test('should render success text correctly', async () => { const wrapper = mount(PullRefresh, { props: { successText: 'success', successDuration: 0, }, - listeners: { - input(value) { - wrapper.setProps({ value }); - }, - }, }); const track = wrapper.find('.van-pull-refresh__track'); @@ -124,10 +105,11 @@ test('render success text', async () => { await later(); // loading - expect(wrapper.vm.value).toBeTruthy(); - wrapper.setProps({ value: false }); + expect(wrapper.emitted('update:modelValue')[0][0]).toBeTruthy(); + await wrapper.setProps({ modelValue: true }); // success + await wrapper.setProps({ modelValue: false }); expect(wrapper.html()).toMatchSnapshot(); // normal @@ -135,25 +117,21 @@ test('render success text', async () => { expect(wrapper.html()).toMatchSnapshot(); }); -test('render success slot', async () => { +test('should render success slot correctly', async () => { const wrapper = mount(PullRefresh, { slots: { success: () => 'Custom Success', }, - listeners: { - input(value) { - wrapper.setProps({ value }); - }, - }, }); + // loading const track = wrapper.find('.van-pull-refresh__track'); triggerDrag(track, 0, 100); + expect(wrapper.emitted('update:modelValue')[0][0]).toBeTruthy(); + await wrapper.setProps({ modelValue: true }); - await later(); - - expect(wrapper.vm.value).toBeTruthy(); - wrapper.setProps({ value: false }); + // success + await wrapper.setProps({ modelValue: false }); expect(wrapper.html()).toMatchSnapshot(); }); @@ -163,6 +141,6 @@ test('should set height when using head-height', async () => { headHeight: 100, }, }); - - expect(wrapper.html()).toMatchSnapshot(); + const head = wrapper.find('.van-pull-refresh__head'); + expect(head.element.style.height).toEqual('100px'); });