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