mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Image): update test cases (#8007)
This commit is contained in:
neverland
GitHub
parent
351755b506
commit
9b6b4b0d57
@ -1,72 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`apply icon-prefix prop to error-icon 1`] = `
|
|
||||||
<div class="van-image">
|
|
||||||
<div class="van-image__error"><i class="my-icon my-icon-error van-image__error-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`apply icon-prefix prop to loading-icon 1`] = `
|
|
||||||
<div class="van-image"><img class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="my-icon my-icon-success van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`default slot 1`] = `
|
|
||||||
<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
|
|
||||||
<!----></i></div>Custom Default
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`error-icon prop 1`] = `
|
|
||||||
<div class="van-image">
|
|
||||||
<div class="van-image__error"><i class="van-icon van-icon-error van-image__error-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`lazy load 1`] = `
|
|
||||||
<div class="van-image"><img class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`lazy-load error event 1`] = `
|
|
||||||
<div class="van-image">
|
|
||||||
<div class="van-image__error"><i class="van-icon van-icon-photo-fail van-image__error-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`lazy-load load event 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
|
|
||||||
|
|
||||||
exports[`load event 1`] = `<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img"></div>`;
|
|
||||||
|
|
||||||
exports[`load event 2`] = `
|
|
||||||
<div class="van-image"><img src="" class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`loading-icon prop 1`] = `
|
|
||||||
<div class="van-image"><img class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-success van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`radius prop 1`] = `
|
|
||||||
<div class="van-image" style="overflow: hidden; border-radius: 3px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`show-error prop 1`] = `<div class="van-image"></div>`;
|
|
||||||
|
|
||||||
exports[`show-loading prop 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
|
|
||||||
51
src/image/test/__snapshots__/index.spec.js.snap
Normal file
51
src/image/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should apply icon-prefix prop to error-icon 1`] = `
|
||||||
|
<i class="van-badge__wrapper my-icon my-icon-error van-image__error-icon">
|
||||||
|
</i>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should apply icon-prefix prop to loading-icon 1`] = `
|
||||||
|
<i class="van-badge__wrapper my-icon my-icon-success van-image__loading-icon">
|
||||||
|
</i>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should emit load event after image loaded 1`] = `
|
||||||
|
<div class="van-image">
|
||||||
|
<img src="https://img.com"
|
||||||
|
class="van-image__img"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render default slot correctly 1`] = `
|
||||||
|
<div class="van-image">
|
||||||
|
<img src="https://img.com"
|
||||||
|
class="van-image__img"
|
||||||
|
>
|
||||||
|
<div class="van-image__loading">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
Custom Default
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render loading placeholder when using lazy-load prop 1`] = `
|
||||||
|
<div class="van-image">
|
||||||
|
<img class="van-image__img">
|
||||||
|
<div class="van-image__loading">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should watch src and reset 1`] = `
|
||||||
|
<div class="van-image">
|
||||||
|
<div class="van-image__loading">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,197 +0,0 @@
|
|||||||
import { mount } from '@vue/test-utils';
|
|
||||||
import VanImage from '..';
|
|
||||||
|
|
||||||
test('click event', () => {
|
|
||||||
const wrapper = mount(VanImage);
|
|
||||||
|
|
||||||
wrapper.trigger('click');
|
|
||||||
expect(wrapper.emitted('click')[0][0]).toBeTruthy();
|
|
||||||
wrapper.unmount();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('load event', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('img').trigger('load');
|
|
||||||
|
|
||||||
expect(wrapper.emitted('load')[0][0]).toBeTruthy();
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
|
|
||||||
wrapper.setProps({ src: '' });
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('error event', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('img').trigger('error');
|
|
||||||
|
|
||||||
expect(wrapper.emitted('error')[0][0]).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('lazy load', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
lazyLoad: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('lazy-load load event', (done) => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
lazyLoad: true,
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
mocks: {
|
|
||||||
$Lazyload: {
|
|
||||||
$on(eventName, hanlder) {
|
|
||||||
if (eventName === 'loaded') {
|
|
||||||
setTimeout(() => {
|
|
||||||
hanlder({ el: null });
|
|
||||||
hanlder({ el: wrapper.find('img').element });
|
|
||||||
expect(wrapper.emitted('load').length).toEqual(1);
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
wrapper.unmount();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
$off() {
|
|
||||||
done();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('lazy-load error event', (done) => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
lazyLoad: true,
|
|
||||||
},
|
|
||||||
mocks: {
|
|
||||||
$Lazyload: {
|
|
||||||
$on(eventName, hanlder) {
|
|
||||||
if (eventName === 'error') {
|
|
||||||
setTimeout(() => {
|
|
||||||
hanlder({ el: null });
|
|
||||||
hanlder({ el: wrapper.find('img').element });
|
|
||||||
expect(wrapper.emitted('error').length).toEqual(1);
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
wrapper.unmount();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
$off() {
|
|
||||||
done();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('show-loading prop', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
showLoading: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('show-error prop', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
showError: false,
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('img').trigger('error');
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('error-icon prop', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
errorIcon: 'error',
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('img').trigger('error');
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('loading-icon prop', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
loadingIcon: 'success',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('apply icon-prefix prop to error-icon', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
errorIcon: 'error',
|
|
||||||
iconPrefix: 'my-icon',
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('img').trigger('error');
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('apply icon-prefix prop to loading-icon', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
loadingIcon: 'success',
|
|
||||||
iconPrefix: 'my-icon',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('radius prop', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
radius: 3,
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('default slot', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
props: {
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
slots: {
|
|
||||||
default: () => 'Custom Default',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
208
src/image/test/index.spec.js
Normal file
208
src/image/test/index.spec.js
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
import { mount } from '@vue/test-utils';
|
||||||
|
import VanImage from '..';
|
||||||
|
import Lazyload from '../../lazyload';
|
||||||
|
|
||||||
|
const IMAGE_URL = 'https://img.com';
|
||||||
|
|
||||||
|
test('should emit load event after image loaded', async () => {
|
||||||
|
const wrapper = mount(VanImage, {
|
||||||
|
props: {
|
||||||
|
src: IMAGE_URL,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await wrapper.find('img').trigger('load');
|
||||||
|
|
||||||
|
expect(wrapper.emitted('load')[0][0]).toBeTruthy();
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should watch src and reset', async () => {
|
||||||
|
const wrapper = mount(VanImage, {
|
||||||
|
props: {
|
||||||
|
src: IMAGE_URL,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await wrapper.find('img').trigger('load');
|
||||||
|
await wrapper.setProps({ src: '' });
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit error event when load image failed', () => {
|
||||||
|
const wrapper = mount(VanImage, {
|
||||||
|
props: {
|
||||||
|
src: IMAGE_URL,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.find('img').trigger('error');
|
||||||
|
expect(wrapper.emitted('error')[0][0]).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render loading placeholder when using lazy-load prop', () => {
|
||||||
|
const wrapper = mount(VanImage, {
|
||||||
|
props: {
|
||||||
|
src: IMAGE_URL,
|
||||||
|
lazyLoad: true,
|
||||||
|
},
|
||||||
|
global: {
|
||||||
|
plugins: [Lazyload],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not render loading placeholder when show-loading prop is false', async () => {
|
||||||
|
const wrapper = mount(VanImage);
|
||||||
|
expect(wrapper.find('.van-image__loading').exists()).toBeTruthy();
|
||||||
|
|
||||||
|
await wrapper.setProps({
|
||||||
|
showLoading: false,
|
||||||
|
});
|
||||||
|
expect(wrapper.find('.van-image__loading').exists()).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not render error placeholder when show-error prop is false', async () => {
|
||||||
|
const wrapper = mount(VanImage, {
|
||||||
|
props: {
|
||||||
|
src: IMAGE_URL,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await wrapper.find('img').trigger('error');
|
||||||
|
expect(wrapper.find('.van-image__error').exists()).toBeTruthy();
|
||||||
|
|
||||||
|
await wrapper.setProps({
|
||||||
|
showError: false,
|
||||||
|
});
|
||||||
|
expect(wrapper.find('.van-image__error').exists()).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should change error icon when using error-icon prop', async () => {
|
||||||
|
const wrapper = mount(VanImage, {
|
||||||
|
props: {
|
||||||
|
errorIcon: 'error',
|
||||||
|
src: IMAGE_URL,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await wrapper.find('img').trigger('error');
|
||||||
|
expect(wrapper.find('.van-icon-error').exists()).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should change loading icon when using loading-icon prop', () => {
|
||||||
|
const wrapper = mount(VanImage, {
|
||||||
|
props: {
|
||||||
|
loadingIcon: 'success',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.find('.van-icon-success').exists()).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should apply icon-prefix prop to error-icon', async () => {
|
||||||
|
const wrapper = mount(VanImage, {
|
||||||
|
props: {
|
||||||
|
errorIcon: 'error',
|
||||||
|
iconPrefix: 'my-icon',
|
||||||
|
src: IMAGE_URL,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await wrapper.find('img').trigger('error');
|
||||||
|
expect(wrapper.find('.van-image__error-icon').html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should apply icon-prefix prop to loading-icon', () => {
|
||||||
|
const wrapper = mount(VanImage, {
|
||||||
|
props: {
|
||||||
|
loadingIcon: 'success',
|
||||||
|
iconPrefix: 'my-icon',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.find('.van-image__loading-icon').html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should change border radius when using border-radius prop', () => {
|
||||||
|
const wrapper = mount(VanImage, {
|
||||||
|
props: {
|
||||||
|
radius: 3,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.element.style.overflow).toEqual('hidden');
|
||||||
|
expect(wrapper.element.style.borderRadius).toEqual('3px');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render default slot correctly', () => {
|
||||||
|
const wrapper = mount(VanImage, {
|
||||||
|
props: {
|
||||||
|
src: IMAGE_URL,
|
||||||
|
},
|
||||||
|
slots: {
|
||||||
|
default: () => 'Custom Default',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
// TODO
|
||||||
|
// test('should emit load event when using lazy-load prop and image loaded', (done) => {
|
||||||
|
// const wrapper = mount(VanImage, {
|
||||||
|
// props: {
|
||||||
|
// lazyLoad: true,
|
||||||
|
// src: IMAGE_URL,
|
||||||
|
// },
|
||||||
|
// global: {
|
||||||
|
// mocks: {
|
||||||
|
// $Lazyload: {
|
||||||
|
// $on(eventName, hanlder) {
|
||||||
|
// console.log('on ', eventName);
|
||||||
|
// if (eventName === 'loaded') {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// hanlder({ el: null });
|
||||||
|
// hanlder({ el: wrapper.find('img').element });
|
||||||
|
// expect(wrapper.emitted('load').length).toEqual(1);
|
||||||
|
// expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
// wrapper.unmount();
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// $off() {
|
||||||
|
// done();
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
// test('lazy-load error event', (done) => {
|
||||||
|
// const wrapper = mount(VanImage, {
|
||||||
|
// props: {
|
||||||
|
// lazyLoad: true,
|
||||||
|
// },
|
||||||
|
// mocks: {
|
||||||
|
// $Lazyload: {
|
||||||
|
// $on(eventName, hanlder) {
|
||||||
|
// if (eventName === 'error') {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// hanlder({ el: null });
|
||||||
|
// hanlder({ el: wrapper.find('img').element });
|
||||||
|
// expect(wrapper.emitted('error').length).toEqual(1);
|
||||||
|
// expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
// wrapper.unmount();
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// $off() {
|
||||||
|
// done();
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// });
|
||||||
Loading…
x
Reference in New Issue
Block a user