Merge pull request #7 from microcipcip/feature/useLocation

Feature/use location

Author: microcipcip

README.md

@@ -68,6 +68,8 @@ Vue.use(VueCompositionAPI);
   - [`useIntersection`](./src/components/useIntersection/stories/useIntersection.md) — tracks intersection of target element with an ancestor element.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--demo)
     [![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--advanced-demo)
+  - [`useLocation`](./src/components/useLocation/stories/useLocation.md) — tracks bar navigation location state.
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-uselocation--demo)
   - [`useMedia`](./src/components/useMedia/stories/useMedia.md) — tracks state of a CSS media query.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--demo)
     [![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--advanced-demo)

src/components/useClickAway/useClickAway.spec.ts

@@ -28,8 +28,8 @@ const testComponent = () => ({
 describe('useClickAway', () => {
   it('should call document.addEventListener', async () => {
     const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
-    const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
     expect(addEventListenerSpy).not.toHaveBeenCalled()
+    const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
     const wrapper = mount(testComponent())
     await wrapper.vm.$nextTick()
     expect(addEventListenerSpy).toHaveBeenCalled()

src/components/useGeolocation/stories/useGeolocation.md

@@ -38,8 +38,8 @@ function useGeolocation(
 
 ### Returns
 
-- `isTracking: Ref<boolean>` whether the function is tracking the user's location or not
 - `geo: Ref<UseGeolocation>` the geolocation object
+- `isTracking: Ref<boolean>` whether the function is tracking the user's location or not
 - `start: Function` the function used for starting the geolocation tracking
 - `stop: Function` the function used for stopping the geolocation tracking
 

src/components/useIdle/useIdle.spec.ts

@@ -25,8 +25,8 @@ describe('useIdle', () => {
 
   it('should call document.addEventListener', async () => {
     const addEventListenerSpy = jest.spyOn(document, 'addEventListener')
-    const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
     expect(addEventListenerSpy).not.toHaveBeenCalled()
+    const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
     const wrapper = mount(testComponent())
     await wrapper.vm.$nextTick()
     expect(addEventListenerSpy).toHaveBeenCalledTimes(totEvents)

src/components/useLocation/index.ts

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

src/components/useLocation/stories/UseLocationDemo.vue

@@ -0,0 +1,62 @@
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>locationState</td>
+        <td>
+          <pre>{{ JSON.stringify(locationState, null, 2) }}</pre>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button class="button is-primary" @click="push">
+            Fire push event
+          </button>
+          <button class="button is-info" @click="replace">
+            Fire replace event
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button class="button is-primary" @click="start" v-if="!isTracking">
+            Start tracking location
+          </button>
+          <button class="button is-danger" @click="stop" v-else>
+            Stop tracking location
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { useLocation } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseLocationDemo',
+  setup() {
+    let count = 0
+    const url = location.origin + location.pathname + location.search
+    const push = () => {
+      count++
+      history.pushState({ page: count }, '', `${url}&page=${count}`)
+    }
+    const replace = () => {
+      count--
+      history.replaceState({ page: count }, '', `${url}&page=${count}`)
+    }
+
+    const { locationState, isTracking, start, stop } = useLocation()
+    return { locationState, isTracking, start, stop, push, replace }
+  }
+})
+</script>

src/components/useLocation/stories/useLocation.md

@@ -0,0 +1,88 @@
+# useLocation
+
+Vue function that tracks bar navigation location state.
+
+## Reference
+
+```typescript
+interface UseLocationState {
+  trigger: string
+  state: any
+  length: number
+  hash: string
+  host: string
+  hostname: string
+  href: string
+  origin: string
+  pathname: string
+  port: string
+  protocol: string
+  search: string
+}
+```
+
+```typescript
+function useLocation(
+  runOnMount?: boolean
+): {
+  locationState: Ref<UseLocationState>
+  isTracking: Ref<boolean>
+  start: () => void
+  stop: () => void
+}
+```
+
+### Parameters
+
+- `runOnMount: boolean` whether to start tracking the bar navigation location state on mount, `true` by default
+
+### Returns
+
+- `locationState: Ref<object>` the location object
+- `isTracking: Ref<UseLocationState>` whether the location state is being currently tracked or not
+- `start: Function` the function used for starting the location tracking
+- `stop: Function` the function used for stopping the location tracking
+
+## Usage
+
+```html
+<template>
+  <div>
+    <div>
+      locationState:
+      <pre>{{ JSON.stringify(locationState, null, 2) }}</pre>
+    </div>
+    <div>
+      <button @click="push">Fire push event</button>
+      <button @click="replace">Fire replace event</button>
+    </div>
+    <div>
+      <button @click="start" v-if="!isTracking">Start tracking location</button>
+      <button @click="stop" v-else>Stop tracking location</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { useLocation } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseLocationDemo',
+    setup() {
+      let count = 0
+      const url = location.origin + location.pathname + location.search
+      const push = () => {
+        count++
+        history.pushState({ page: count }, '', `${url}&page=${count}`)
+      }
+      const replace = () => {
+        count--
+        history.replaceState({ page: count }, '', `${url}&page=${count}`)
+      }
+      const { locationState, isTracking, start, stop } = useLocation()
+      return { locationState, isTracking, start, stop, push, replace }
+    }
+  })
+</script>
+```

src/components/useLocation/stories/useLocation.story.ts

@@ -0,0 +1,38 @@
+import { storiesOf } from '@storybook/vue'
+import path from 'path'
+import StoryTitle from '@src/helpers/StoryTitle.vue'
+import UseLocationDemo from './UseLocationDemo.vue'
+
+const functionName = 'useLocation'
+const functionPath = path.resolve(__dirname, '..')
+const notes = require(`./${functionName}.md`).default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseLocationDemo },
+  template: `
+    <div class="container">
+      <story-title 
+        function-path="${functionPath}" 
+        source-name="${functionName}" 
+        demo-name="UseLocationDemo.vue"
+      >
+        <template v-slot:title></template>
+        <template v-slot:intro>
+          <p>
+            <strong>Try pressing the 'Fire push event' and 'Fire replace event' buttons</strong> to see the state change
+            on the fly. 
+          </p>
+          <p>
+            <strong>Please note that in this demo you won't see the browser's bar navigation change</strong> 
+            because this example is within an iframe. Click the "Open canvas in new tab" button on the 
+            top right hand corner to see the demo without iframe.
+          </p>
+        </template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('sensors|useLocation', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)

src/components/useLocation/useLocation.spec.ts

@@ -0,0 +1,100 @@
+import { mount } from '@src/helpers/test'
+import { useLocation } from '@src/vue-use-kit'
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+const testComponent = (onMount = true) => ({
+  template: `
+    <div>
+      <div id="isTracking" v-if="isTracking"></div>
+      <div id="locationState">{{JSON.stringify(locationState)}}</div>
+      <button id="start" @click="start"></button>
+      <button id="stop" @click="stop"></button>
+    </div>
+  `,
+  setup() {
+    const { locationState, isTracking, start, stop } = useLocation(onMount)
+    return { locationState, isTracking, start, stop }
+  }
+})
+
+describe('useLocation', () => {
+  const locationStateKeys = [
+    'trigger',
+    'state',
+    'length',
+    'hash',
+    'host',
+    'hostname',
+    'href',
+    'origin',
+    'pathname',
+    'port',
+    'protocol',
+    'search'
+  ]
+  const events = ['popstate', 'pushstate', 'replacestate']
+
+  it('should call popstate, pushstate and replacestate onMounted', async () => {
+    const addEventListenerSpy = jest.spyOn(window, 'addEventListener')
+    expect(addEventListenerSpy).not.toHaveBeenCalled()
+    const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')
+    const wrapper = mount(testComponent())
+    await wrapper.vm.$nextTick()
+    expect(addEventListenerSpy).toHaveBeenCalledTimes(events.length)
+    events.forEach(event => {
+      expect(addEventListenerSpy).toBeCalledWith(event, expect.any(Function))
+    })
+
+    // Destroy instance to check if the remove event listener is being called
+    wrapper.destroy()
+    expect(removeEventListenerSpy).toHaveBeenCalledTimes(events.length)
+    events.forEach(event => {
+      expect(removeEventListenerSpy).toBeCalledWith(event, expect.any(Function))
+    })
+  })
+
+  it('should call document.addEventListener again when start is called', async () => {
+    const addEventListenerSpy = jest.spyOn(window, 'addEventListener')
+    const wrapper = mount(testComponent())
+    expect(addEventListenerSpy).toHaveBeenCalledTimes(events.length)
+    wrapper.find('#stop').trigger('click')
+
+    // Wait for Vue to append #start in the DOM
+    await wrapper.vm.$nextTick()
+    wrapper.find('#start').trigger('click')
+    expect(addEventListenerSpy).toHaveBeenCalledTimes(events.length * 2)
+  })
+
+  it('should call document.removeEventListener when stop is called', async () => {
+    const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener')
+    const wrapper = mount(testComponent())
+    wrapper.find('#stop').trigger('click')
+
+    // Wait for Vue to append #start in the DOM
+    await wrapper.vm.$nextTick()
+    expect(removeEventListenerSpy).toHaveBeenCalledTimes(events.length)
+  })
+
+  it('should show #isTracking when onMount is true', async () => {
+    const wrapper = mount(testComponent(true))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isTracking').exists()).toBe(true)
+  })
+
+  it('should not show #isTracking when onMount is false', async () => {
+    const wrapper = mount(testComponent(false))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isTracking').exists()).toBe(false)
+  })
+
+  it('should display the locationState object', async () => {
+    const wrapper = mount(testComponent(true))
+    await wrapper.vm.$nextTick()
+    locationStateKeys.forEach(locationKey => {
+      expect(wrapper.text().includes(locationKey)).toBe(true)
+    })
+  })
+})