fix: fix duplicated loading. refactor a few tests

Author: guastallaigor

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",

src/components/VueImageKit.vue

@@ -3,7 +3,7 @@
     <div v-if="dataUrl" class="vue-image-kit__placeholder" :style="{ backgroundColor }">
       <img :src="placeholder || dataUrl" alt="Placeholder" :style="{ width: `${width}px`, height: `${height}px` }"/>
     </div>
-    <img class="vue-image-kit__img" :srcset="getSrcset" :sizes="getSizes" :src="getSrc" :alt="alt" :style="{ width: `${width}px`, height: `${height}px` }"/>
+    <img class="vue-image-kit__img" :sizes="getSizes" :alt="alt" :style="{ width: `${width}px`, height: `${height}px` }"/>
   </div>
 </template>
 
@@ -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
 

tests/unit/__snapshots__/vue-image-kit.spec.js.snap

@@ -2,5 +2,5 @@
 
 exports[`When I create the VueImageKit component should match snapshot 1`] = `
 <div class="vue-image-kit">
-  <!----> <img srcset="https://ik.imagekit.io/6xhf1gnexgdgk/tr:w-320/lion_BllLvaqVn.jpg 320w, https://ik.imagekit.io/6xhf1gnexgdgk/tr:w-480/lion_BllLvaqVn.jpg 480w, https://ik.imagekit.io/6xhf1gnexgdgk/tr:w-800/lion_BllLvaqVn.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, (max-width: 800px) 760px 1080px" src="" alt="" class="vue-image-kit__img"></div>
+  <!----> <img sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, (max-width: 800px) 760px 1080px" alt="" class="vue-image-kit__img"></div>
 `;

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)
   })