Twitter

IntersectionComponent.spec.js

/// <reference types="jest" />

import { mount } from '@vue/test-utils'
import IntersectionComponent from './IntersectionComponent.vue'

const mountComponent = props =>
    mount(IntersectionComponent, {
        propsData: {
            callback: jest.fn().mockImplementation(isVisible => isVisible),
            ...props
        }
    })

describe('IntersectionComponent', () => {
    let wrapper
    beforeEach(() => {
        wrapper = mountComponent()
    })
    it('reacts after the callback is called (by the directive)', () => {
        // act
      	wrapper.vm.visibilityOptions.callback(true)
        // assert
        expect(wrapper.emitted()['visibility-changed'][0]).toEqual([true])
        expect(wrapper.vm.isVisible).toBe(true)
    })
})

IntersectionComponent.vue

<template>
    <component :is="tag" v-observe-visibility="!disable && visibilityOptions">
        <slot />
    </component>
</template>

<script>
import { pipe } from '../utils.js'
import { ObserveVisibility } from 'vue-observe-visibility'

export default {
    name: 'IntersectionComponent',
    directives: {
        ObserveVisibility
    },
    props: {
        tag: {
            type: String,
            default: 'div'
        },
        // from here on, you'll find all the options from
        // https://github.com/Akryum/vue-observe-visibility#usage
        callback: {
            type: Function,
            required: true
        },
        once: {
            type: Boolean,
            default: true
        },
        throttle: {
            type: Number,
            default: 300
        },
        throttleOptions: {
            type: Object,
            default: () => null
        },
        intersection: {
            type: Object,
            default: () => ({
                rootMargin: '100px'
            })
        },
        disable: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isVisible: false
        }
    },
    computed: {
        visibilityOptions() {
            return {
                callback: pipe(this.saveState, this.emit, this.callback),
                once: this.once,
                throttle: this.throttle,
                throttleOptions: this.throttleOptions,
                intersection: this.intersection
            }
        }
    },
    methods: {
        emit(isVisible) {
            this.$emit('visibility-changed', isVisible)
            return isVisible // for "chaining" executions
        },
        saveState(isVisible) {
            this.isVisible = isVisible
            return isVisible // for "chaining" executions
        }
    }
}
</script>

vue-shims.d.ts

declare module '*.vue' {
  import Vue from 'vue';

  namespace $store {
    import { Store } from 'vuex';
  }

  namespace $router {
    import Router from 'vue-router';
  }

  export default Vue;
}