improvement(useIntersection): Adding tests

Author: microcipcip

src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue

@@ -4,7 +4,7 @@
       <use-intersection-element-demo
         class="intersection__el"
         :options="intersectionOpts"
-        @change="handleIntersectionChange"
+        @changed="handleIntersectionChange"
       >
         <video controls loop>
           <source :src="getAlternateVideoUrl(index)" type="video/mp4" />

src/components/useIntersection/stories/UseIntersectionDemo.vue

@@ -4,7 +4,7 @@
       <use-intersection-element-demo
         class="intersection__el"
         :options="intersectionOpts"
-        @change="handleIntersectionChange"
+        @changed="handleIntersectionChange"
         @paused="handleIntersectionPaused"
       />
     </div>

src/components/useIntersection/stories/UseIntersectionElementDemo.vue

@@ -3,15 +3,15 @@
     <slot></slot>
     <button
       class="button is-primary"
-      @click="handleObserverState"
+      @click="handleStart"
       v-if="!isObserving"
       title="Start observing"
     >
       <span class="icon"><i class="fas fa-play"></i></span>
     </button>
     <button
       class="button is-warning"
-      @click="handleObserverState"
+      @click="handleStop"
       v-else
       title="Stop observing"
     >
@@ -45,24 +45,25 @@ export default Vue.extend({
 
     watch(() => {
       if (!observedEntry.value) return
-      emit('change', observedEntry.value)
+      emit('changed', observedEntry.value)
     })
 
     let isObserving = ref(true)
-    const handleObserverState = () => {
+    const handleStart = () => {
       if (!observedEntry.value) return
-      if (isObserving.value) {
-        stop()
-        emit('paused', observedEntry.value.target, true)
-        isObserving.value = false
-      } else {
-        start()
-        emit('paused', observedEntry.value.target, false)
-        isObserving.value = true
-      }
+      start()
+      emit('paused', observedEntry.value.target, false)
+      isObserving.value = true
+    }
+
+    const handleStop = () => {
+      if (!observedEntry.value) return
+      stop()
+      emit('paused', observedEntry.value.target, true)
+      isObserving.value = false
     }
 
-    return { handleObserverState, isObserving, elRef }
+    return { handleStart, handleStop, isObserving, elRef }
   }
 })
 </script>

src/components/useIntersection/useIntersection.spec.ts

@@ -1,8 +1,49 @@
-// import { mount } from '@src/helpers/test'
-// import { useIntersection } from '@src/vue-use-kit'
+import { mount } from '@src/helpers/test'
+import { ref } from '@src/api'
+import { useIntersection } from '@src/vue-use-kit'
+
+let observe: any
+let unobserve: any
+let disconnect: any
+beforeEach(() => {
+  observe = jest.fn()
+  unobserve = jest.fn()
+  disconnect = jest.fn()
+  ;(window as any).IntersectionObserver = jest.fn(() => ({
+    observe,
+    unobserve,
+    disconnect
+  }))
+})
+
+const testComponent = (onMount = true) => ({
+  template: `
+    <div ref="elRef">
+      <button id="stop" @click="stop"></button>
+      <button id="start" @click="start"></button>
+    </div>
+  `,
+  setup() {
+    const elRef = ref(null)
+    const { start, stop } = useIntersection(elRef, {}, onMount)
+    return { start, stop, elRef }
+  }
+})
 
 describe('useIntersection', () => {
-  it('should do something', () => {
-    // Add test here
+  it('should call IntersectionObserver when initialized', () => {
+    expect(observe).toHaveBeenCalledTimes(0)
+    mount(testComponent())
+    expect(observe).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call IntersectionObserver again when start is called', async () => {
+    expect(observe).toHaveBeenCalledTimes(0)
+    const wrapper = mount(testComponent())
+    expect(observe).toHaveBeenCalledTimes(1)
+    wrapper.find('#stop').trigger('click')
+    wrapper.find('#start').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(observe).toHaveBeenCalledTimes(2)
   })
 })

src/components/useIntersection/useIntersection.ts

@@ -20,6 +20,7 @@ export function useIntersection(
     if (!('IntersectionObserver' in window)) throw new Error(errorMsg)
 
     // Do not start if the observer is already initialized
+    // or the elRef does not exist
     if (observer || !elRef.value) return
     observer = new IntersectionObserver(handleObserver, options)
     observer.observe(elRef.value)