138 lines
3.2 KiB
Vue
138 lines
3.2 KiB
Vue
import { createTest, createVue, destroyVM, wait } from '../util';
|
|
import Image from 'packages/image';
|
|
import { IMAGE_SUCCESS, IMAGE_FAIL } from '../mocks/uri';
|
|
|
|
const src = IMAGE_SUCCESS;
|
|
|
|
describe('Image', () => {
|
|
let vm;
|
|
|
|
afterEach(() => {
|
|
destroyVM(vm);
|
|
});
|
|
|
|
it('create', async() => {
|
|
vm = createTest(Image, {
|
|
src,
|
|
fit: 'fill'
|
|
}, true);
|
|
const placeholder = vm.$el.querySelector('.el-image__placeholder');
|
|
const error = vm.$el.querySelector('.el-image__error');
|
|
let img = vm.$el.querySelector('.el-image__inner');
|
|
expect(placeholder).to.exist;
|
|
expect(error).to.be.null;
|
|
expect(img).to.be.null;
|
|
|
|
await wait();
|
|
img = vm.$el.querySelector('.el-image__inner');
|
|
expect(img.style.objectFit).to.equal('fill');
|
|
});
|
|
|
|
it('load failed', async() => {
|
|
vm = createTest(Image, {
|
|
src: IMAGE_FAIL
|
|
}, true);
|
|
await wait();
|
|
const error = vm.$el.querySelector('.el-image__error');
|
|
expect(error).to.be.exist;
|
|
});
|
|
|
|
it('lazy load', async() => {
|
|
vm = createVue({
|
|
template: `
|
|
<div ref="wrapper" style="height: 200px; overflow: auto;">
|
|
<el-image
|
|
v-for="item in 2"
|
|
:key="item"
|
|
:src="src"
|
|
ref="image"
|
|
style="display: block; height: 200px;"
|
|
lazy></el-image>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
src
|
|
};
|
|
}
|
|
}, true);
|
|
const { image, wrapper } = vm.$refs;
|
|
const [image1, image2] = image;
|
|
|
|
await wait();
|
|
expect(image1.loading).to.be.false;
|
|
expect(image2.loading).to.be.true;
|
|
wrapper.scrollTop = 10;
|
|
|
|
await wait();
|
|
expect(image2.loading).to.be.false;
|
|
});
|
|
|
|
it('$attrs', async() => {
|
|
vm = createVue({
|
|
template: `
|
|
<el-image
|
|
alt="$attrs test"
|
|
referrerpolicy="origin"
|
|
:src="src"></el-image>
|
|
`,
|
|
data() {
|
|
return {
|
|
src
|
|
};
|
|
}
|
|
}, true);
|
|
|
|
await wait();
|
|
const $img = vm.$el.querySelector('.el-image__inner');
|
|
expect($img.getAttribute('alt')).to.be.equal('$attrs test');
|
|
expect($img.getAttribute('referrerpolicy')).to.be.equal('origin');
|
|
});
|
|
|
|
it('pass event listeners', async() => {
|
|
let result;
|
|
vm = createVue({
|
|
template: `
|
|
<el-image @click="handleClick" :src="src"></el-image>
|
|
`,
|
|
data() {
|
|
return {
|
|
src
|
|
};
|
|
},
|
|
methods: {
|
|
handleClick(e) {
|
|
result = e;
|
|
}
|
|
}
|
|
}, true);
|
|
await wait();
|
|
vm.$el.querySelector('.el-image__inner').click();
|
|
await wait();
|
|
expect(result).to.exist;
|
|
});
|
|
|
|
it('big image preview', async() => {
|
|
vm = createVue({
|
|
template: `
|
|
<el-image :src="src" :preview-src-list="srcList"></el-image>
|
|
`,
|
|
data() {
|
|
return {
|
|
src: src,
|
|
srcList: [src]
|
|
};
|
|
}
|
|
}, true);
|
|
await wait();
|
|
vm.$el.querySelector('.el-image__inner').click();
|
|
await wait();
|
|
|
|
expect(document.querySelector('.el-image-viewer__wrapper')).to.exist;
|
|
document.querySelector('.el-image-viewer__close').click();
|
|
await wait(1000);
|
|
expect(document.querySelector('.el-image-viewer__wrapper')).to.not.exist;
|
|
});
|
|
});
|
|
|