test: fix tests, snapshot and minor component change. version 0.2.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-image-kit",
-  "version": "0.2.1",
+  "version": "0.2.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

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="{ 'vue-image-kit--loaded': !lazyLoad }"
+    :class="{ 'vue-image-kit--loaded': isImageLoaded }"
     class="vue-image-kit"
     ref="main"
   >
@@ -93,6 +93,7 @@ export default {
   data: () => ({
     imageKitPrefix: 'https://ik.imagekit.io',
     showCanvas: true,
+    isImageLoaded: false,
     observer: null,
     timeOut: null
   }),
@@ -149,6 +150,7 @@ export default {
   methods: {
     initNormalLoad () {
       const img = this.$refs.normalLoad
+      this.isImageLoaded = true;
       this.setImgAttributes(img)
     },
     initLazyLoad () {
@@ -167,11 +169,8 @@ export default {
     },
     onloadImage (imgEl) {
       delete imgEl.onload
-      const { main, placeholder } = this.$refs
-
-      if (main) {
-        main.classList.add('vue-image-kit--loaded')
-      }
+      const { placeholder } = this.$refs
+      this.isImageLoaded = true
 
       if (placeholder) {
         this.timeOut = setTimeout(() => {
@@ -182,11 +181,7 @@ export default {
     setImgAttributes (img) {
       const { srcset, getSrcset, imageKitPrefix, hash, src } = this
       this.showCanvas = false
-
-      if (srcset) {
-        img.srcset = getSrcset
-      }
-
+      img.srcset = srcset && getSrcset
       img.src = `${imageKitPrefix}/${hash}/${src}`
     },
     triggerIntersection (entry = {}) {

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

@@ -2,6 +2,6 @@
 
 exports[`When I create the VueImageKit component should match snapshot 1`] = `
 <div class="vue-image-kit">
-  <!----> <img sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, (max-width: 800px) 760px 1080px" alt="" class="vue-image-kit__img">
+  <!----> <img sizes="(max-width: 320px) 320px, (max-width: 480px) 480px, (max-width: 800px) 800px 1080px" alt="" class="vue-image-kit__img">
 </div>
 `;

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

@@ -25,8 +25,10 @@ function setupIntersectionObserverMock ({
 
 describe('When I create the VueImageKit component', () => {
   const item = { hash: '6xhf1gnexgdgk', src: 'lion_BllLvaqVn.jpg' }
+  let timeout
 
   beforeEach(() => {
+    timeout = (ms) => new Promise(resolve => setTimeout(resolve, ms))
     setupIntersectionObserverMock()
   })
 
@@ -114,7 +116,7 @@ describe('When I create the VueImageKit component', () => {
     expect(main.attributes().alt).toBe('Lion image')
   })
 
-  it('should have background color in the placeholder', () => {
+  it('should have background color in the placeholder', async () => {
     const wrapper = createComponent({ ...item, width: 300, height: 300, placeholder: 'https://ik.imagekit.io/6xhf1gnexgdgk/igor2_HJhiHMa54.png', backgroundColor: '#f40' })
     const placeholder = wrapper.find('.vue-image-kit > .vue-image-kit__placeholder')
     expect(placeholder.exists()).toBe(true)
@@ -137,7 +139,7 @@ describe('When I create the VueImageKit component', () => {
     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'
+    const expected = '(max-width: 200px) 200px, (max-width: 250px) 250px, (max-width: 300px) 300px 1080px'
     expect(main.attributes().sizes).toBe(expected)
   })
 
@@ -160,10 +162,11 @@ describe('When I create the VueImageKit component', () => {
     expect(main.attributes().sizes).toContain('1366px')
   })
 
-  it('should not have lazy load', () => {
+  it('should not have lazy load', async () => {
     const wrapper = createComponent({ ...item, lazyLoad: false })
     const main = wrapper.find('.vue-image-kit')
     expect(main.exists()).toBe(true)
+    await timeout(1)
     expect(main.classes()).toContain('vue-image-kit--loaded')
     const placeholder = wrapper.find('.vue-image-kit__placeholder')
     expect(placeholder.exists()).toBe(false)
@@ -184,6 +187,7 @@ describe('When I create the VueImageKit component', () => {
 
   it('should disconnect the observer on destroy', () => {
     const wrapper = createComponent({ ...item })
+    wrapper.vm.timeOut = 300
     expect(wrapper.vm.observer).toStrictEqual(new IntersectionObserver({ observe: () => jest.fn(), unobserve: () => jest.fn() }))
     wrapper.destroy()
     expect(wrapper.vm.observer).toStrictEqual(new IntersectionObserver({ observe: () => jest.fn(), unobserve: () => jest.fn() }))
@@ -226,9 +230,79 @@ describe('When I create the VueImageKit component', () => {
     const placeholderAgain = wrapper.find('.vue-image-kit__placeholder')
     expect(placeholderAgain.exists()).toBe(false)
     expect(wrapper.vm.timeOut).not.toBeNull()
+    await timeout(350)
     expect(wrapper.vm.$el.querySelector('.vue-image-kit__placeholder')).toBeNull()
   })
 
+  it('should trigger intersection - method testing', () => {
+    const localVue = createLocalVue()
+    const wrapper = mount(VueImageKit, {
+      propsData: { ...item, width: 300, height: 300, placeholder: 'https://ik.imagekit.io/6xhf1gnexgdgk/igor2_HJhiHMa54.png' },
+      localVue,
+      stubs: {
+        transition: false
+      }
+    })
+    const observe = jest.fn();
+    const unobserve = jest.fn();
+    const disconnect = jest.fn();
+    const takeRecords = jest.fn();
+    window.IntersectionObserver = jest.fn(() => ({
+      observe,
+      unobserve,
+      disconnect,
+      takeRecords,
+    }))
+    expect(wrapper.exists()).toBe(true)
+    wrapper.vm.initLazyLoad()
+    wrapper.vm.triggerIntersection = jest.fn()
+    wrapper.vm.setImgAttributes = jest.fn()
+    expect(wrapper.vm.observer).not.toBeNull()
+    expect(wrapper.vm.showCanvas).toBeTruthy()
+    const img = wrapper.find('.vue-image-kit__img')
+    expect(img.exists()).toBe(true)
+    const placeholder = wrapper.find('.vue-image-kit__placeholder')
+    expect(placeholder.exists()).toBe(true)
+    expect(wrapper.vm.$el.querySelector('.vue-image-kit__placeholder')).toBeDefined()
+    const observerCallback = window.IntersectionObserver.mock.calls[0][0]
+    const mockEntry = { isIntersecting: true }
+    observerCallback([mockEntry])
+    expect(wrapper.vm.observer.observe).toHaveBeenCalled();
+    expect(wrapper.vm.triggerIntersection).toHaveBeenCalledTimes(1);
+  })
+
+  it('should not trigger intersection', () => {
+    const localVue = createLocalVue()
+    const wrapper = mount(VueImageKit, {
+      propsData: { ...item, width: 300, height: 300, placeholder: 'https://ik.imagekit.io/6xhf1gnexgdgk/igor2_HJhiHMa54.png' },
+      localVue,
+      stubs: {
+        transition: false
+      }
+    })
+    const observe = jest.fn();
+    const unobserve = jest.fn();
+    const disconnect = jest.fn();
+    const takeRecords = jest.fn();
+    window.IntersectionObserver = jest.fn(() => ({
+      observe,
+      unobserve,
+      disconnect,
+      takeRecords,
+    }))
+    expect(wrapper.exists()).toBe(true)
+    wrapper.vm.initLazyLoad()
+    wrapper.vm.setImgAttributes = jest.fn()
+    wrapper.vm.triggerIntersection = jest.fn()
+    expect(wrapper.vm.observer).not.toBeNull()
+    expect(wrapper.vm.showCanvas).toBeTruthy()
+    const observerCallback = window.IntersectionObserver.mock.calls[0][0]
+    const mockEntry = { isIntersecting: false }
+    observerCallback([mockEntry])
+    expect(wrapper.vm.setImgAttributes).not.toHaveBeenCalled();
+    expect(wrapper.vm.observer.disconnect).not.toHaveBeenCalled();
+  })
+
   it('should match snapshot', () => {
     const wrapper = createComponent({
       ...item,