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 @@
Placeholder
- + @@ -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) })