test(ImagePreview): update test cases

This commit is contained in:
chenjiahan 2020-11-14 14:45:09 +08:00
parent a1aed76a48
commit 9bd38cf446
4 changed files with 80 additions and 59 deletions

View File

@ -1,5 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should change close icon position when using close-icon-position prop 1`] = `
<i class="van-badge__wrapper van-icon van-icon-clear van-image-preview__close-icon van-image-preview__close-icon--top-left" role="button">
<!---->
<!---->
<!----></i>
`;
exports[`should change close icon when using close-icon prop 1`] = `
<i class="van-badge__wrapper van-icon van-icon-success van-image-preview__close-icon van-image-preview__close-icon--top-right" role="button">
<!---->
<!---->
<!----></i>
`;
exports[`should render cover slot correctly 1`] = `
<transition-stub class="van-image-preview__overlay">
<div class="van-overlay">
@ -20,6 +34,6 @@ exports[`should render cover slot correctly 1`] = `
</transition-stub>
`;
exports[`should render index slot correctly 1`] = `<div class="van-image-preview__index">Custom Index</div>`;
exports[`should render index slot correctly 1`] = `<div class="van-image-preview__index">Custom Index: 0</div>`;
exports[`should swipe to currect index after calling the swipeTo method 1`] = `<div class="van-image-preview__index">3 / 3</div>`;

View File

@ -0,0 +1,13 @@
import { createApp } from 'vue';
import ImagePreview from '..';
import ImagePreviewComponent from '../ImagePreview';
test('should expose ImagePreviewComponent in ImagePreview.Component', () => {
expect(ImagePreview.Component).toEqual(ImagePreviewComponent);
});
test('should register component to app', () => {
const app = createApp();
app.use(ImagePreview);
expect(app.component(ImagePreviewComponent.name)).toBeTruthy();
});

View File

@ -56,44 +56,6 @@ test('render image', async () => {
expect(wrapper.emitted('input')[0][0]).toEqual(false);
});
test('closeable prop', () => {
const wrapper = mount(ImagePreviewVue, {
props: {
images,
value: true,
closeable: true,
},
});
wrapper.find('.van-image-preview__close-icon').trigger('click');
expect(wrapper.emitted('input')[0][0]).toEqual(false);
});
test('close-icon prop', () => {
const wrapper = mount(ImagePreviewVue, {
props: {
value: true,
closeable: true,
closeIcon: 'close',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('close-icon-position prop', () => {
const wrapper = mount(ImagePreviewVue, {
props: {
value: true,
closeable: true,
closeIcon: 'close',
closeIconPosition: 'top-left',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('async close prop', async () => {
const wrapper = mount(ImagePreviewVue, {
props: {
@ -213,11 +175,6 @@ test('onScale option', async (done) => {
restore();
});
test('register component', () => {
Vue.use(ImagePreview);
expect(Vue.component(ImagePreviewVue.name)).toBeTruthy();
});
test('zoom in and drag image to move', async () => {
const restore = mockGetBoundingClientRect({ width: 100, height: 100 });
@ -266,17 +223,6 @@ test('zoom out', async () => {
restore();
});
test('set show-index prop to false', () => {
const wrapper = mount(ImagePreviewVue, {
props: {
value: true,
showIndex: false,
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('closeOnPopstate', () => {
const wrapper = mount(ImagePreviewVue, {
props: {

View File

@ -1,5 +1,4 @@
import { mount } from '@vue/test-utils';
import ImagePreview from '..';
import ImagePreviewComponent from '../ImagePreview';
import { later } from '../../../test';
@ -54,13 +53,62 @@ test('should render index slot correctly', () => {
show: true,
},
slots: {
index: () => `Custom Index`,
index: ({ index }) => `Custom Index: ${index}`,
},
});
expect(wrapper.find('.van-image-preview__index').html()).toMatchSnapshot();
});
test('should expose ImagePreviewComponent in ImagePreview.Component', () => {
expect(ImagePreview.Component).toEqual(ImagePreviewComponent);
test('should render close icon when using closeable prop', () => {
const wrapper = mount(ImagePreviewComponent, {
props: {
show: true,
images,
closeable: true,
},
});
wrapper.find('.van-image-preview__close-icon').trigger('click');
expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
});
test('should change close icon when using close-icon prop', () => {
const wrapper = mount(ImagePreviewComponent, {
props: {
show: true,
closeable: true,
closeIcon: 'success',
},
});
expect(
wrapper.find('.van-image-preview__close-icon').html()
).toMatchSnapshot();
});
test('should change close icon position when using close-icon-position prop', () => {
const wrapper = mount(ImagePreviewComponent, {
props: {
show: true,
closeable: true,
closeIconPosition: 'top-left',
},
});
expect(
wrapper.find('.van-image-preview__close-icon').html()
).toMatchSnapshot();
});
test('should hide index when show-index prop is false', async () => {
const wrapper = mount(ImagePreviewComponent, {
props: {
show: true,
},
});
expect(wrapper.find('.van-image-preview__index').exists()).toBeTruthy();
await wrapper.setProps({ showIndex: false });
expect(wrapper.find('.van-image-preview__index').exists()).toBeFalsy();
});