feat(useInterval): Adding useInterval function

Author: microcipcip

README.md

@@ -70,6 +70,8 @@ Vue.use(VueCompositionAPI);
   - [`useMouseElement`](./src/components/useMouseElement/stories/useMouseElement.md) — tracks the mouse position relative to given element.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseelement--demo)
 - Animations
+  - [`useInterval`](./src/components/useInterval/stories/useInterval.md) — updates the `counter` value repeatedly on a fixed time delay.
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useinterval--demo)
   - [`useIntervalFn`](./src/components/useIntervalFn/stories/useIntervalFn.md) — calls function repeatedly on a fixed time delay.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useintervalfn--demo)
   - [`useRaf`](./src/components/useRaf/stories/useRaf.md) — returns `elapsedTime` with requestAnimationFrame.

src/components/useInterval/index.ts

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

src/components/useInterval/stories/UseIntervalDemo.vue

@@ -0,0 +1,41 @@
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>counter</td>
+        <td>
+          <span>{{ counter }}</span>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button class="button is-primary" @click="start" v-if="!isRunning">
+            Start Interval
+          </button>
+          <button class="button is-danger" @click="stop" v-else>
+            Stop Interval
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { useInterval } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'useIntervalDemo',
+  setup() {
+    const { isRunning, counter, start, stop } = useInterval(300)
+    return { isRunning, counter, start, stop }
+  }
+})
+</script>

src/components/useInterval/stories/useInterval.md

@@ -0,0 +1,58 @@
+# useInterval
+
+Vue function that updates the `counter` value repeatedly on a fixed time delay.
+
+## Reference
+
+```typescript
+useInterval(
+    ms?: number,
+    runOnMount?: boolean
+): {
+    isRunning: Ref<boolean>;
+    counter: Ref<number>;
+    start: () => void;
+    stop: () => void;
+ };
+```
+
+### Parameters
+
+- `ms: number` how many milliseconds to wait before updating the counter
+- `runOnMount: boolean` whether to run the interval on mount, `true` by default
+
+### Returns
+
+- `isRunning: Ref<boolean>` this value is `true` if the interval is running, `false` otherwise
+- `counter: Ref<number>` the number of times the interval has run
+- `start: Function` the function used for starting the interval
+- `stop: Function` the function used for stopping the interval
+
+## Usage
+
+```html
+<template>
+  <div>
+    <p>counter: {{ counter }}</p>
+
+    <button @click="start" v-if="!isRunning">Start Interval</button>
+    <button @click="stop" v-else>Stop Interval</button>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { useInterval } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseIntervalDemo',
+    setup() {
+      const ms = 300
+
+      const { isRunning, counter, start, stop } = useInterval(ms)
+
+      return { isRunning, counter, start, stop }
+    }
+  })
+</script>
+```

src/components/useInterval/stories/useInterval.story.ts

@@ -0,0 +1,28 @@
+import { storiesOf } from '@storybook/vue'
+import path from 'path'
+import StoryTitle from '@src/helpers/StoryTitle.vue'
+import UseIntervalDemo from './UseIntervalDemo.vue'
+
+const functionName = 'useInterval'
+const functionPath = path.resolve(__dirname, '..')
+const notes = require(`./${functionName}.md`).default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseIntervalDemo },
+  template: `
+    <div class="container">
+      <story-title 
+        function-path="${functionPath}" 
+        source-name="${functionName}" 
+        demo-name="UseIntervalDemo.vue"
+      >
+        <template v-slot:title></template>
+        <template v-slot:intro></template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('animations|useInterval', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)

src/components/useInterval/useInterval.spec.ts

@@ -0,0 +1,33 @@
+import { mount } from '@src/helpers/test'
+import { useInterval } from '@src/vue-use-kit'
+
+beforeEach(() => {
+  jest.useFakeTimers()
+})
+
+afterEach(() => {
+  jest.clearAllTimers()
+})
+
+const testComponent = () => ({
+  template: `
+    <div>
+      <div id="isRunning" v-if="isRunning"></div>
+    </div>
+  `,
+  setup() {
+    const { isRunning } = useInterval(1000)
+    return { isRunning }
+  }
+})
+
+describe('useInterval', () => {
+  it('should show #isRunning when the intervals are called', async () => {
+    const wrapper = mount(testComponent())
+    jest.advanceTimersByTime(1500)
+
+    // Wait for Vue to append #isReady in the DOM
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isRunning').exists()).toBe(true)
+  })
+})

src/components/useInterval/useInterval.ts

@@ -0,0 +1,11 @@
+import { ref } from '@src/api'
+import { useIntervalFn } from '@src/vue-use-kit'
+
+export function useInterval(ms = 0, runOnMount = true) {
+  const counter = ref(0)
+  const animHandler = () => {
+    counter.value = counter.value + 1
+  }
+  const { isRunning, start, stop } = useIntervalFn(animHandler, ms, runOnMount)
+  return { isRunning, counter, start, stop }
+}

src/components/useIntervalFn/useIntervalFn.spec.ts

@@ -1,8 +1,97 @@
-// import { mount } from '@src/helpers/test'
-// import { useIntervalFn } from '@src/vue-use-kit'
+import { mount } from '@src/helpers/test'
+import { ref } from '@src/api'
+import { useIntervalFn } from '@src/vue-use-kit'
+
+beforeEach(() => {
+  jest.useFakeTimers()
+})
+
+afterEach(() => {
+  jest.clearAllTimers()
+})
+
+const testComponent = (onMount = true) => ({
+  template: `
+    <div>
+      <div id="callbackCounter" v-text="callbackCounter" />
+      <div id="isRunning" v-if="isRunning"></div>
+      <button id="stop" @click="stop"></button>
+      <button id="start" @click="start"></button>
+    </div>
+  `,
+  setup() {
+    const callbackCounter = ref(0)
+    const { isRunning, start, stop } = useIntervalFn(
+      () => {
+        callbackCounter.value = callbackCounter.value + 1
+      },
+      1000,
+      onMount
+    )
+    return { isRunning, start, stop, callbackCounter }
+  }
+})
 
 describe('useIntervalFn', () => {
-  it('should do something', () => {
-    // Add test here
+  it('should call setInterval when initialized', () => {
+    expect(setInterval).toHaveBeenCalledTimes(0)
+    mount(testComponent())
+    jest.advanceTimersByTime(1500)
+    expect(setInterval).toHaveBeenCalled()
+  })
+
+  it('should call callback several times', async () => {
+    const wrapper = mount(testComponent())
+    jest.advanceTimersByTime(25500)
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#callbackCounter').text()).toBe('25')
+  })
+
+  it('should not show #isRunning when onMount is false', async () => {
+    const wrapper = mount(testComponent(false))
+    jest.advanceTimersByTime(1500)
+
+    // Wait for Vue rerender
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isRunning').exists()).toBe(false)
+  })
+
+  it('should show #isRunning when the intervals are called', async () => {
+    const wrapper = mount(testComponent())
+    jest.advanceTimersByTime(1500)
+
+    // Wait for Vue to append #isReady in the DOM
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isRunning').exists()).toBe(true)
+  })
+
+  it('should show #isRunning when start is called', async () => {
+    const wrapper = mount(testComponent(false))
+    jest.advanceTimersByTime(1500)
+
+    // Wait for Vue to append #isRunning in the DOM
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isRunning').exists()).toBe(false)
+    wrapper.find('#start').trigger('click')
+    jest.advanceTimersByTime(2500)
+
+    // Wait for Vue to remove #isRunning from the DOM
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isRunning').exists()).toBe(true)
+  })
+
+  it('should hide #isRunning when stop is called', async () => {
+    const wrapper = mount(testComponent())
+    jest.advanceTimersByTime(1500)
+
+    // Wait for Vue to append #isRunning in the DOM
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isRunning').exists()).toBe(true)
+    wrapper.find('#stop').trigger('click')
+    jest.advanceTimersByTime(2500)
+
+    // Wait for Vue to remove #isRunning from the DOM
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isRunning').exists()).toBe(false)
   })
 })

src/components/useRaf/useRaf.spec.ts

@@ -35,15 +35,15 @@ const testComponent = (onMount = false) => ({
 })
 
 describe('useRaf', () => {
-  it('should not display #isRunning when onMount is false', async () => {
+  it('should not show #isRunning when onMount is false', async () => {
     const wrapper = mount(testComponent(false))
     await wrapper.vm.$nextTick()
     expect(rafSpy).not.toHaveBeenCalled()
     expect(wrapper.find('#isRunning').exists()).toBe(false)
     expect(wrapper.find('#elapsed').text()).toBe('0')
   })
 
-  it('should display #isRunning when onMount is true', async () => {
+  it('should show #isRunning when onMount is true', async () => {
     const wrapper = mount(testComponent(true))
     await wrapper.vm.$nextTick()
     expect(rafSpy).toHaveBeenCalled()