Merge pull request #11 from microcipcip/feature/useBeforeUnload

Feature/use before unload

Author: microcipcip

README.md

@@ -102,6 +102,9 @@ Vue.use(VueCompositionAPI);
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeout--demo)
   - [`useTimeoutFn`](./src/components/useTimeoutFn/stories/useTimeoutFn.md) — calls function when timer is completed.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeoutfn--demo)
+- Side Effects
+  - [`useBeforeUnload`](./src/components/useBeforeUnload/stories/useBeforeUnload.md) — shows browser alert when user try to reload or close the page.
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-useclickaway--demo)
 - UI
   - [`useClickAway`](./src/components/useClickAway/stories/useClickAway.md) — triggers callback when user clicks outside target area.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-useclickaway--demo)
@@ -113,7 +116,7 @@ Vue.use(VueCompositionAPI);
 
 ## Inspiration
 
-- [react-use](https://github.com/streamich/react-use)
+- [react-use 👍](https://github.com/streamich/react-use)
 - [vue-hooks](https://github.com/u3u/vue-hooks)
 - [vue-use-web](https://github.com/logaretm/vue-use-web)
 

src/components/useBeforeUnload/index.ts

@@ -0,0 +1 @@
+export * from './useBeforeUnload'

src/components/useBeforeUnload/stories/UseBeforeUnloadDemo.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="form">
+    <div class="field">
+      <label class="label">Name</label>
+      <div class="control">
+        <input class="input" type="text" v-model="nameFld" />
+      </div>
+    </div>
+
+    <div class="field">
+      <p>
+        <a class="button is-primary" href="https://google.com">
+          <span>Change page</span>
+          <span class="icon is-small">
+            <i class="fas fa-external-link-alt"></i>
+          </span>
+        </a>
+      </p>
+    </div>
+
+    <div class="field">
+      <button class="button is-primary" @click="start" v-if="!isTracking">
+        Start checking beforeUnload event
+      </button>
+      <button class="button is-danger" @click="stop" v-else>
+        Stop checking beforeUnload event
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ref, watch } from '@vue/composition-api'
+import { useBeforeUnload } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseBeforeUnloadDemo',
+  setup() {
+    const isPageDirty = ref(false)
+    const nameFld = ref('')
+
+    watch(nameFld, newVal => {
+      isPageDirty.value = !!newVal
+    })
+
+    const { isTracking, start, stop } = useBeforeUnload(isPageDirty)
+    return { isTracking, start, stop, isPageDirty, nameFld }
+  }
+})
+</script>

src/components/useBeforeUnload/stories/useBeforeUnload.md

@@ -0,0 +1,60 @@
+# useBeforeUnload
+
+Vue function that shows browser alert when user try to reload or close the page.
+
+## Reference
+
+```typescript
+function useBeforeUnload(
+  isPageDirty: Ref<boolean>,
+  runOnMount?: boolean
+): {
+  isTracking: Ref<boolean>
+  start: () => void
+  stop: () => void
+}
+```
+
+### Parameters
+
+- `isPageDirty: Ref<boolean>` when this value is `true` value, it will show the browser alert on page change
+- `runOnMount: boolean` whether to listen to the 'beforeunload' event on mount, `true` by default
+
+### Returns
+
+- `isTracking: Ref<boolean>` whether this function events are running or not
+- `start: Function` the function used to start tracking page change or reload
+- `stop: Function` the function used to stop tracking page change or reload
+
+## Usage
+
+```html
+<template>
+  <div>
+    <div>
+      <a href="https://google.com">Change page</a>
+    </div>
+    <div>
+      <button @click="start" v-if="!isTracking">
+        Start tracking page change or reload
+      </button>
+      <button @click="stop" v-else>Stop tracking page change or reload</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { ref, watch } from '@vue/composition-api'
+  import { useBeforeUnload } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseBeforeUnloadDemo',
+    setup() {
+      const isPageDirty = ref(true)
+      const { isTracking, start, stop } = useBeforeUnload(isPageDirty)
+      return { isTracking, start, stop, isPageDirty }
+    }
+  })
+</script>
+```

src/components/useBeforeUnload/stories/useBeforeUnload.story.ts

@@ -0,0 +1,37 @@
+import { storiesOf } from '@storybook/vue'
+import path from 'path'
+import StoryTitle from '@src/helpers/StoryTitle.vue'
+import UseBeforeUnloadDemo from './UseBeforeUnloadDemo.vue'
+
+const functionName = 'useBeforeUnload'
+const functionPath = path.resolve(__dirname, '..')
+const notes = require(`./${functionName}.md`).default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseBeforeUnloadDemo },
+  template: `
+    <div class="container">
+      <story-title 
+        function-path="${functionPath}" 
+        source-name="${functionName}" 
+        demo-name="UseBeforeUnloadDemo.vue"
+      >
+        <template v-slot:title></template>
+        <template v-slot:intro>
+          <p>
+            <strong>Try typing some text in the field below</strong> then hit the 'Change page' 
+            button to see the alert message. 
+          </p>
+          <p>
+            You can also try to leave the field empty and hit again the 'Change page' button and you'll 
+            be able to change page without any confirmation message.
+          </p>
+        </template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('side effects|useBeforeUnload', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)

src/components/useBeforeUnload/useBeforeUnload.spec.ts

@@ -0,0 +1,51 @@
+import {
+  checkElementExistenceOnMount,
+  checkOnMountAndUnmountEvents,
+  checkOnStartEvents,
+  checkOnStopEvents
+} from '@src/helpers/test'
+import { ref } from '@vue/composition-api'
+import { useBeforeUnload } from '@src/vue-use-kit'
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+const testComponent = (onMount = true) => ({
+  template: `
+    <div>
+      <div id="isTracking" v-if="isTracking"></div>
+      <button id="start" @click="start"></button>
+      <button id="stop" @click="stop"></button>
+    </div>
+  `,
+  setup() {
+    const isDirty = ref(false)
+    const { isTracking, start, stop } = useBeforeUnload(isDirty, onMount)
+    return { isTracking, start, stop }
+  }
+})
+
+describe('useBeforeUnload', () => {
+  const events = ['beforeunload']
+
+  it('should add events on mounted and remove them on unmounted', async () => {
+    await checkOnMountAndUnmountEvents(window, events, testComponent)
+  })
+
+  it('should add events again when start is called', async () => {
+    await checkOnStartEvents(window, events, testComponent)
+  })
+
+  it('should remove events when stop is called', async () => {
+    await checkOnStopEvents(window, events, testComponent)
+  })
+
+  it('should show #isTracking when runOnMount is true', async () => {
+    await checkElementExistenceOnMount(true, testComponent)
+  })
+
+  it('should not show #isTracking when runOnMount is false', async () => {
+    await checkElementExistenceOnMount(false, testComponent)
+  })
+})

src/components/useBeforeUnload/useBeforeUnload.ts

@@ -0,0 +1,27 @@
+import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+
+export function useBeforeUnload(isPageDirty: Ref<boolean>, runOnMount = true) {
+  const isTracking = ref(false)
+
+  const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+    // Show alert message only when isPageDirty is true
+    if (isPageDirty.value) e.preventDefault()
+  }
+
+  const start = () => {
+    if (isTracking.value) return
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    isTracking.value = true
+  }
+
+  const stop = () => {
+    if (!isTracking.value) return
+    window.removeEventListener('beforeunload', handleBeforeUnload)
+    isTracking.value = false
+  }
+
+  onMounted(() => runOnMount && start())
+  onUnmounted(stop)
+
+  return { isTracking, start, stop }
+}

src/components/useClickAway/useClickAway.spec.ts

@@ -1,4 +1,4 @@
-import { mount } from '@src/helpers/test'
+import { checkOnMountAndUnmountEvents, mount } from '@src/helpers/test'
 import { ref } from '@vue/composition-api'
 import { useClickAway } from '@src/vue-use-kit'
 
@@ -26,23 +26,9 @@ const testComponent = () => ({
 })
 
 describe('useClickAway', () => {
-  it('should call document.addEventListener', async () => {
-    const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
-    const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
-    const wrapper = mount(testComponent())
-    await wrapper.vm.$nextTick()
-    expect(addEventListenerSpy).toHaveBeenCalled()
-    expect(addEventListenerSpy).toBeCalledWith(
-      'mousedown',
-      expect.any(Function)
-    )
+  const events = ['mousedown', 'touchstart']
 
-    // Destroy instance to check if the remove event listener is being called
-    wrapper.destroy()
-    expect(removeEventListenerSpy).toHaveBeenCalled()
-    expect(removeEventListenerSpy).toBeCalledWith(
-      'mousedown',
-      expect.any(Function)
-    )
+  it('should call addEventListener on mount and unmount', async () => {
+    await checkOnMountAndUnmountEvents(document, events, testComponent)
   })
 })

src/components/useGeolocation/useGeolocation.spec.ts

@@ -44,15 +44,15 @@ const testComponent = () => ({
 })
 
 describe('useGeolocation', () => {
-  it('should call getCurrentPosition and watchPosition onMounted', () => {
+  it('should call getCurrentPosition and watchPosition on mounted', () => {
     expect(getCurrentPosition).toHaveBeenCalledTimes(0)
     expect(watchPosition).toHaveBeenCalledTimes(0)
     mount(testComponent())
     expect(getCurrentPosition).toHaveBeenCalledTimes(1)
     expect(watchPosition).toHaveBeenCalledTimes(1)
   })
 
-  it('should call clearWatch onUnmounted', () => {
+  it('should call clearWatch on unmounted', () => {
     expect(clearWatch).toHaveBeenCalledTimes(0)
     const wrapper = mount(testComponent())
     wrapper.vm.$destroy()

src/components/useHover/useHover.spec.ts

@@ -1,4 +1,4 @@
-import { mount } from '@src/helpers/test'
+import { checkOnMountAndUnmountEvents, mount } from '@src/helpers/test'
 import { ref } from '@vue/composition-api'
 import { useHover } from '@src/vue-use-kit'
 
@@ -18,25 +18,10 @@ const testComponent = () => ({
 })
 
 describe('useHover', () => {
-  it('should call document.body hover events', () => {
-    const addEventListenerSpy = jest.spyOn(document.body, 'addEventListener')
-    const removeEventListenerSpy = jest.spyOn(
-      document.body,
-      'removeEventListener'
-    )
-    const wrapper = mount(testComponent())
-    expect(addEventListenerSpy).toHaveBeenCalled()
-    expect(addEventListenerSpy).toBeCalledWith(
-      'mouseenter',
-      expect.any(Function)
-    )
-    expect(removeEventListenerSpy).not.toHaveBeenCalled()
-    wrapper.destroy()
-    expect(removeEventListenerSpy).toHaveBeenCalled()
-    expect(removeEventListenerSpy).toBeCalledWith(
-      'mouseenter',
-      expect.any(Function)
-    )
+  const events = ['mouseenter', 'mouseleave']
+
+  it('should add events on mounted and remove them on unmounted', async () => {
+    await checkOnMountAndUnmountEvents(document.body, events, testComponent)
   })
 
   it('should return isHovered false by default', () => {