mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(List): update test cases
This commit is contained in:
chenjiahan
parent
b79c32183f
commit
1ff0c18d15
@ -1,15 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`error slot 1`] = `
|
|
||||||
<div role="feed" class="van-list">
|
|
||||||
<div class="van-list__error-text">Custom Error</div>
|
|
||||||
<div class="van-list__placeholder"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`finished slot 1`] = `
|
|
||||||
<div role="feed" class="van-list">
|
|
||||||
<div class="van-list__finished-text">Custom Finished</div>
|
|
||||||
<div class="van-list__placeholder"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
27
src/list/test/__snapshots__/index.spec.js.snap
Normal file
27
src/list/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should render error slot correctly 1`] = `
|
||||||
|
<div role="feed"
|
||||||
|
class="van-list"
|
||||||
|
aria-busy="false"
|
||||||
|
>
|
||||||
|
<div class="van-list__error-text">
|
||||||
|
Custom Error
|
||||||
|
</div>
|
||||||
|
<div class="van-list__placeholder">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render finished slot correctly 1`] = `
|
||||||
|
<div role="feed"
|
||||||
|
class="van-list"
|
||||||
|
aria-busy="false"
|
||||||
|
>
|
||||||
|
<div class="van-list__finished-text">
|
||||||
|
Custom Finished
|
||||||
|
</div>
|
||||||
|
<div class="van-list__placeholder">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,159 +0,0 @@
|
|||||||
import List from '..';
|
|
||||||
import { mount, later, mockGetBoundingClientRect } from '../../../test';
|
|
||||||
|
|
||||||
test('load event', async () => {
|
|
||||||
const wrapper = mount(List);
|
|
||||||
|
|
||||||
wrapper.vm.$on('input', (value) => {
|
|
||||||
wrapper.vm.loading = value;
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.emitted('load')).toBeTruthy();
|
|
||||||
expect(wrapper.emitted('input')).toBeTruthy();
|
|
||||||
|
|
||||||
wrapper.vm.loading = false;
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.emitted('input')[1]).toBeTruthy();
|
|
||||||
wrapper.destroy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('error loaded, click error-text and reload', async () => {
|
|
||||||
const wrapper = mount(List, {
|
|
||||||
props: {
|
|
||||||
errorText: 'Request failed. Click to reload...',
|
|
||||||
error: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
|
|
||||||
expect(wrapper.emitted('load')).toBeFalsy();
|
|
||||||
expect(wrapper.emitted('input')).toBeFalsy();
|
|
||||||
|
|
||||||
// simulate the behavior of clicking error-text
|
|
||||||
wrapper.vm.$on('update:error', (val) => {
|
|
||||||
wrapper.setProps({
|
|
||||||
error: val,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('.van-list__error-text').trigger('click');
|
|
||||||
|
|
||||||
await later();
|
|
||||||
|
|
||||||
expect(wrapper.vm.$props.error).toBeFalsy();
|
|
||||||
expect(wrapper.emitted('load')).toBeTruthy();
|
|
||||||
expect(wrapper.emitted('input')).toBeTruthy();
|
|
||||||
|
|
||||||
wrapper.destroy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('finished', async () => {
|
|
||||||
const wrapper = mount(List, {
|
|
||||||
props: {
|
|
||||||
finished: true,
|
|
||||||
finishedText: 'Finished',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.emitted('load')).toBeFalsy();
|
|
||||||
expect(wrapper.emitted('input')).toBeFalsy();
|
|
||||||
expect(wrapper.contains('.van-list__finished-text')).toBeTruthy();
|
|
||||||
wrapper.vm.finished = false;
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.emitted('load')).toBeTruthy();
|
|
||||||
expect(wrapper.emitted('input')).toBeTruthy();
|
|
||||||
expect(wrapper.contains('.van-list__finished-text')).toBeFalsy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('finished slot', async () => {
|
|
||||||
const wrapper = mount(List, {
|
|
||||||
props: {
|
|
||||||
finished: true,
|
|
||||||
},
|
|
||||||
slots: {
|
|
||||||
finished: () => 'Custom Finished',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('error slot', async () => {
|
|
||||||
const wrapper = mount(List, {
|
|
||||||
props: {
|
|
||||||
error: true,
|
|
||||||
},
|
|
||||||
slots: {
|
|
||||||
error: () => 'Custom Error',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('immediate check false', async () => {
|
|
||||||
const wrapper = mount(List, {
|
|
||||||
props: {
|
|
||||||
immediateCheck: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper.emitted('load')).toBeFalsy();
|
|
||||||
expect(wrapper.emitted('input')).toBeFalsy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('check the case that scroller is not window', async () => {
|
|
||||||
const restoreMock = mockGetBoundingClientRect({
|
|
||||||
top: 0,
|
|
||||||
bottom: 200,
|
|
||||||
});
|
|
||||||
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<div style="overflow-y: scroll;">
|
|
||||||
<list ref="list"/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
components: { List },
|
|
||||||
});
|
|
||||||
|
|
||||||
const listRef = wrapper.find({
|
|
||||||
ref: 'list',
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(listRef.emitted('load')).toBeTruthy();
|
|
||||||
expect(listRef.emitted('input')).toBeTruthy();
|
|
||||||
|
|
||||||
restoreMock();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('check the direction props', () => {
|
|
||||||
const wrapper = mount(List, {
|
|
||||||
slots: {
|
|
||||||
default: '<div class="list-item">list item</div>',
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
direction: 'up',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
let children = wrapper.findAll('.van-list > div');
|
|
||||||
expect(children[0].is('.van-list__placeholder')).toBeTruthy();
|
|
||||||
expect(children[1].is('.list-item')).toBeTruthy();
|
|
||||||
|
|
||||||
// change the direction's value
|
|
||||||
wrapper.setProps({
|
|
||||||
direction: 'down',
|
|
||||||
});
|
|
||||||
|
|
||||||
children = wrapper.findAll('.van-list > div');
|
|
||||||
expect(children[0].is('.list-item')).toBeTruthy();
|
|
||||||
expect(children[1].is('.van-list__placeholder')).toBeTruthy();
|
|
||||||
});
|
|
||||||
136
src/list/test/index.spec.js
Normal file
136
src/list/test/index.spec.js
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
import List from '..';
|
||||||
|
import { mount, later, mockGetBoundingClientRect } from '../../../test';
|
||||||
|
|
||||||
|
test('should emit load event when reaching bottom', async () => {
|
||||||
|
const wrapper = mount(List);
|
||||||
|
|
||||||
|
await later();
|
||||||
|
expect(wrapper.emitted('load')).toBeTruthy();
|
||||||
|
expect(wrapper.emitted('update:loading')).toBeTruthy();
|
||||||
|
wrapper.unmount();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should reload after clicking the error text', async () => {
|
||||||
|
const wrapper = mount(List, {
|
||||||
|
props: {
|
||||||
|
error: true,
|
||||||
|
errorText: 'Request failed. Click to reload...',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
|
||||||
|
expect(wrapper.emitted('load')).toBeFalsy();
|
||||||
|
expect(wrapper.emitted('update:loading')).toBeFalsy();
|
||||||
|
|
||||||
|
wrapper.find('.van-list__error-text').trigger('click');
|
||||||
|
expect(wrapper.emitted('update:error')[0][0]).toEqual(false);
|
||||||
|
|
||||||
|
await wrapper.setProps({ error: false });
|
||||||
|
await later();
|
||||||
|
expect(wrapper.emitted('load')).toBeTruthy();
|
||||||
|
expect(wrapper.emitted('update:loading')).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render finished text when finished prop is true', async () => {
|
||||||
|
const wrapper = mount(List, {
|
||||||
|
props: {
|
||||||
|
finished: true,
|
||||||
|
finishedText: 'Finished',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
expect(wrapper.emitted('load')).toBeFalsy();
|
||||||
|
expect(wrapper.emitted('update:loading')).toBeFalsy();
|
||||||
|
expect(wrapper.find('.van-list__finished-text').exists()).toBeTruthy();
|
||||||
|
|
||||||
|
await wrapper.setProps({ finished: false });
|
||||||
|
await later();
|
||||||
|
expect(wrapper.emitted('load')).toBeTruthy();
|
||||||
|
expect(wrapper.emitted('update:loading')).toBeTruthy();
|
||||||
|
expect(wrapper.find('.van-list__finished-text').exists()).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render finished slot correctly', async () => {
|
||||||
|
const wrapper = mount(List, {
|
||||||
|
props: {
|
||||||
|
finished: true,
|
||||||
|
},
|
||||||
|
slots: {
|
||||||
|
finished: () => 'Custom Finished',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render error slot correctly', async () => {
|
||||||
|
const wrapper = mount(List, {
|
||||||
|
props: {
|
||||||
|
error: true,
|
||||||
|
},
|
||||||
|
slots: {
|
||||||
|
error: () => 'Custom Error',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not emit load event after mounted when immediate-check prop is false', async () => {
|
||||||
|
const wrapper = mount(List, {
|
||||||
|
props: {
|
||||||
|
immediateCheck: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
expect(wrapper.emitted('load')).toBeFalsy();
|
||||||
|
expect(wrapper.emitted('update:loading')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit load event when the scroll parent is not window', async () => {
|
||||||
|
const restoreMock = mockGetBoundingClientRect({
|
||||||
|
top: 0,
|
||||||
|
bottom: 200,
|
||||||
|
height: 100,
|
||||||
|
});
|
||||||
|
const onLoad = jest.fn();
|
||||||
|
|
||||||
|
mount({
|
||||||
|
render: () => (
|
||||||
|
<div style="overflow-y: scroll;">
|
||||||
|
<List onLoad={onLoad} />
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
expect(onLoad).toHaveBeenCalledTimes(1);
|
||||||
|
restoreMock();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render correctly when direction is up', async () => {
|
||||||
|
const wrapper = mount(List, {
|
||||||
|
slots: {
|
||||||
|
default: () => <div class="list-item">list item</div>,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
direction: 'up',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
let children = wrapper.findAll('.van-list > div');
|
||||||
|
expect(children[0].classes()).toContain('van-list__placeholder');
|
||||||
|
expect(children[1].classes()).toContain('list-item');
|
||||||
|
|
||||||
|
// change the direction's value
|
||||||
|
await wrapper.setProps({
|
||||||
|
direction: 'down',
|
||||||
|
});
|
||||||
|
|
||||||
|
children = wrapper.findAll('.van-list > div');
|
||||||
|
expect(children[0].classes()).toContain('list-item');
|
||||||
|
expect(children[1].classes()).toContain('van-list__placeholder');
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user