diff --git a/src/components/VueImageKit.vue b/src/components/VueImageKit.vue index 9332936..52e2f06 100644 --- a/src/components/VueImageKit.vue +++ b/src/components/VueImageKit.vue @@ -1,9 +1,9 @@ @@ -77,35 +77,37 @@ export default { }, getSrc () { const { showCanvas, dataUrl, imageKitPrefix, hash, src } = this + return showCanvas ? dataUrl : `${imageKitPrefix}/${hash}/${src}` }, getSrcset () { - return this.srcset - .map(size => `${this.imageKitPrefix}/${this.hash}/tr:w-${size}${this.customTransform ? ',' + this.customTransform : ''}/${this.src} ${size}w`) + const { srcset, imageKitPrefix, hash, customTransform, src } = this + + return srcset + .map(size => `${imageKitPrefix}/${hash}/tr:w-${size}${customTransform ? ',' + customTransform : ''}/${src} ${size}w`) .join(', ') }, getSizes () { - let sizes = '' - if (this.sizes && this.sizes.length && (this.sizes.length === this.srcset.length)) { - sizes = this.srcset.map((size, idx) => `(max-width: ${size}px) ${this.sizes[idx]}px`).join(', ') + const { sizes, srcset, defaultSize } = this + let sizesString = '' + if (sizes && sizes.length && (sizes.length === srcset.length)) { + sizesString = srcset.map((size, idx) => `(max-width: ${size}px) ${sizes[idx]}px`).join(', ') } - sizes = this.srcset.map(size => `(max-width: ${size}px) ${parseInt(size, 10) - 40}px`).join(', ') - sizes += ` ${this.defaultSize}px` + sizesString = srcset.map(size => `(max-width: ${size}px) ${parseInt(size, 10) - 40}px`).join(', ') + sizesString += ` ${defaultSize}px` - return sizes + return sizesString } }, mounted () { this.showCanvas = true - this.observer = new IntersectionObserver(([entry]) => { this.triggerIntersection(entry) }) this.observer.observe(this.$el) - this.$once('hook:beforeDestroy', () => { this.observer.disconnect() @@ -116,27 +118,29 @@ export default { }, methods: { triggerIntersection(entry = {}) { - const img = this.$el.querySelector('.vue-image-kit__img') - const placeholder = this.$el.querySelector('.vue-image-kit__placeholder') + const { $el, timeOut, srcset, getSrcset, imageKitPrefix, hash, src } = this + const img = $el.querySelector('.vue-image-kit__img') + const placeholder = $el.querySelector('.vue-image-kit__placeholder') img.onload = function () { delete img.onload - this.$el.classList.add('vue-image-kit--loaded') + $el.classList.add('vue-image-kit--loaded') if (placeholder) { - this.timeOut = setTimeout(() => { + timeOut = setTimeout(() => { placeholder.remove() }, 300) } } + if (entry.isIntersecting) { this.showCanvas = false - if (this.srcset) { - img.srcset = this.getSrcset + if (srcset) { + img.srcset = getSrcset } - img.src = `${this.imageKitPrefix}/${this.hash}/${this.src}` + img.src = `${imageKitPrefix}/${hash}/${src}` this.observer.disconnect() } } diff --git a/tests/unit/vue-image-kit.spec.js b/tests/unit/vue-image-kit.spec.js index 0d75e0c..7e74e77 100644 --- a/tests/unit/vue-image-kit.spec.js +++ b/tests/unit/vue-image-kit.spec.js @@ -23,6 +23,10 @@ function setupIntersectionObserverMock({ ) } +function waitForImageToLoad(imageElement) { + return new Promise(resolve => { imageElement.onload = resolve }) +} + describe('When I create the VueImageKit component', () => { const item = { hash: '6xhf1gnexgdgk', src: 'lion_BllLvaqVn.jpg' } @@ -173,7 +177,8 @@ describe('When I create the VueImageKit component', () => { }, 500) }) - it('should set the src and srcset methods', (done) => { + it('should trigger intersection', (done) => { + // ! WIP const localVue = createLocalVue() const wrapper = mount(VueImageKit, { propsData: { ...item, width: 300, height: 300, placeholder: 'https://ik.imagekit.io/6xhf1gnexgdgk/igor2_HJhiHMa54.png' }, @@ -183,7 +188,6 @@ describe('When I create the VueImageKit component', () => { } }) wrapper.vm.observer.disconnect = jest.fn() - wrapper.vm.observer.disconnect = jest.fn() expect(wrapper.exists()).toBe(true) wrapper.vm.triggerIntersection({ isIntersecting: true }) expect(wrapper.vm.timeOut).toBeNull() @@ -192,10 +196,16 @@ describe('When I create the VueImageKit component', () => { 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() setTimeout(() => { + const imgQuerySelector = wrapper.vm.$el.querySelector('.vue-image-kit__img') + waitForImageToLoad(imgQuerySelector) + // expect(imgQuerySelector.classList).toContainEqual(['vue-image-kit--loaded']) const placeholderAgain = wrapper.find('.vue-image-kit__placeholder') expect(placeholderAgain.exists()).toBe(false) expect(wrapper.vm.timeOut).toBeNull() + expect(wrapper.vm.$el.querySelector('.vue-image-kit__placeholder')).toBeNull() + // expect(wrapper.vm.$el.querySelector('.vue-image-kit__img').onload).toHaveBeenCalled() done() }, 301) })