diff --git a/package.json b/package.json
index 898eb6e..42a8b2b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-image-kit",
- "version": "0.1.1",
+ "version": "0.1.2",
"private": false,
"description": "Vue.js Image Kit Component with Lazy Load built in and Responsive Images",
"homepage": "https://github.com/guastallaigor/vue-image-kit#readme",
diff --git a/src/components/VueImageKit.vue b/src/components/VueImageKit.vue
index 790dfb0..76c7bc2 100644
--- a/src/components/VueImageKit.vue
+++ b/src/components/VueImageKit.vue
@@ -3,7 +3,7 @@
-
+
@@ -75,13 +75,6 @@ export default {
return canvas.toDataURL()
},
- getSrc () {
- const { showCanvas, dataUrl, imageKitPrefix, hash, src } = this
-
- return showCanvas
- ? dataUrl
- : `${imageKitPrefix}/${hash}/${src}`
- },
getSrcset () {
const { srcset, imageKitPrefix, hash, customTransform, src } = this
diff --git a/tests/unit/__snapshots__/vue-image-kit.spec.js.snap b/tests/unit/__snapshots__/vue-image-kit.spec.js.snap
index 9b3d9ed..05a5b83 100644
--- a/tests/unit/__snapshots__/vue-image-kit.spec.js.snap
+++ b/tests/unit/__snapshots__/vue-image-kit.spec.js.snap
@@ -2,5 +2,5 @@
exports[`When I create the VueImageKit component should match snapshot 1`] = `
-
![]()
+
`;
diff --git a/tests/unit/vue-image-kit.spec.js b/tests/unit/vue-image-kit.spec.js
index 79e7cf1..65b5879 100644
--- a/tests/unit/vue-image-kit.spec.js
+++ b/tests/unit/vue-image-kit.spec.js
@@ -122,26 +122,32 @@ describe('When I create the VueImageKit component', () => {
expect(placeholder.attributes().style).toBe('background-color: rgb(255, 68, 0);') // #f40
})
- it('should have different srcset from default', () => {
+ it('should have different srcset from default', async () => {
const wrapper = createComponent({ ...item, srcset: [400, 600, 900] })
const main = wrapper.find('.vue-image-kit > .vue-image-kit__img')
expect(main.exists()).toBe(true)
+ wrapper.vm.triggerIntersection({ isIntersecting: true })
+ await wrapper.vm.$nextTick()
const expected = 'https://ik.imagekit.io/6xhf1gnexgdgk/tr:w-400/lion_BllLvaqVn.jpg 400w, https://ik.imagekit.io/6xhf1gnexgdgk/tr:w-600/lion_BllLvaqVn.jpg 600w, https://ik.imagekit.io/6xhf1gnexgdgk/tr:w-900/lion_BllLvaqVn.jpg 900w'
expect(main.attributes().srcset).toBe(expected)
})
- it('should have different sizes from default', () => {
+ it('should have different sizes from default', async () => {
const wrapper = createComponent({ ...item, srcset: [200, 250, 300] })
const main = wrapper.find('.vue-image-kit > .vue-image-kit__img')
expect(main.exists()).toBe(true)
+ wrapper.vm.triggerIntersection({ isIntersecting: true })
+ await wrapper.vm.$nextTick()
const expected = '(max-width: 200px) 160px, (max-width: 250px) 210px, (max-width: 300px) 260px 1080px'
expect(main.attributes().sizes).toBe(expected)
})
- it('should have different sizes and srcset from default', () => {
+ it('should have different sizes and srcset from default', async () => {
const wrapper = createComponent({ ...item, srcset: [210, 220, 230], sizes: [210, 220, 230] })
const main = wrapper.find('.vue-image-kit > .vue-image-kit__img')
expect(main.exists()).toBe(true)
+ wrapper.vm.triggerIntersection({ isIntersecting: true })
+ await wrapper.vm.$nextTick()
const expected = '(max-width: 210px) 210px, (max-width: 220px) 220px, (max-width: 230px) 230px 1080px'
expect(main.attributes().sizes).toBe(expected)
const expectedSrcset = 'https://ik.imagekit.io/6xhf1gnexgdgk/tr:w-210/lion_BllLvaqVn.jpg 210w, https://ik.imagekit.io/6xhf1gnexgdgk/tr:w-220/lion_BllLvaqVn.jpg 220w, https://ik.imagekit.io/6xhf1gnexgdgk/tr:w-230/lion_BllLvaqVn.jpg 230w'
@@ -155,12 +161,14 @@ describe('When I create the VueImageKit component', () => {
expect(main.attributes().sizes).toContain('1366px')
})
- it('should have a custom transform', () => {
+ it('should have a custom transform', async () => {
// https://imagekit.io/features/advanced-image-manipulation-blur-rotate-crop-background-radius
const customTransform = 'c-at_max,bl-1:r-20,bg-FFCFA1'
const wrapper = createComponent({ ...item, customTransform })
const main = wrapper.find('.vue-image-kit > .vue-image-kit__img')
expect(main.exists()).toBe(true)
+ wrapper.vm.triggerIntersection({ isIntersecting: true })
+ await wrapper.vm.$nextTick()
expect(main.attributes().srcset).toContain(customTransform)
})