improvement(useFetch): Added tests to useFetch

Author: microcipcip

src/functions/useFetch/stories/UseFetchDemo.vue

@@ -48,7 +48,7 @@
       </use-fetch-demo-table>
 
       <!--  Fetched  -->
-      <use-fetch-demo-table status="Success" v-else>
+      <use-fetch-demo-table status="Success" v-else-if="data">
         <p>
           Resource fetched successfully with status code
           <strong>{{ status }}</strong> and message
@@ -71,8 +71,8 @@ export default Vue.extend({
   components: { UseFetchDemoTable },
   setup() {
     const isInit = ref(false)
-    const slowApi = 'http://slowwly.robertomurray.co.uk/delay/1000/url'
-    const randomDogUrl = `${slowApi}/https://dog.ceo/api/breeds/image/random`
+    const delayUrl = 'http://deelay.me/2000'
+    const randomDogUrl = `${delayUrl}/https://dog.ceo/api/breeds/image/random`
     const url = ref(randomDogUrl)
     const {
       data,
@@ -93,7 +93,7 @@ export default Vue.extend({
 
     const startWithFailed = () => {
       isInit.value = true
-      url.value = `${slowApi}/https://dog.ceo`
+      url.value = `${delayUrl}/https://dog.ceo`
       start()
     }
 

src/functions/useFetch/stories/useFetch.md

@@ -49,7 +49,9 @@ function useFetch(
   <div>
     <div v-if="isFailed">Failed!</div>
     <div v-else-if="isLoading">Loading...</div>
-    <div v-else><img :src="data.message" alt="" /></div>
+    <div v-else-if="data">
+      <img :src="data.message" alt="" />
+    </div>
   </div>
 </template>
 

src/functions/useFetch/useFetch.spec.ts

@@ -1,12 +1,85 @@
-// import { mount } from '@src/helpers/test'
-// import { useFetch } from '@src/vue-use-kit'
+import { mount, flushPromises } from '@src/helpers/test'
+import { useFetch } from '@src/vue-use-kit'
 
 afterEach(() => {
   jest.clearAllMocks()
 })
 
+const abortError = 'AbortError'
+
+const mockFetch = ({
+  data = { text: 'Message here' },
+  header = 'abcd;application/json',
+  isAborted = false
+} = {}) => {
+  ;(window as any).fetch = () => {
+    if (isAborted) {
+      const err = new Error()
+      err.name = abortError
+      throw err
+    }
+
+    return {
+      headers: {
+        get: () => header
+      },
+      json: () => data
+    }
+  }
+}
+
+const testComponent = (url = '', opts: RequestInit = {}, onMount = true) => ({
+  template: `
+    <div>
+      <div id="isLoading" v-if="isLoading"></div>
+      <div id="isFailed" v-if="isFailed"></div>
+      <div id="isAborted" v-if="isAborted"></div>
+      <div id="data" v-if="data" v-text="data.text"></div>
+      <button id="start" @click="start"></button>
+      <button id="stop" @click="stop"></button>
+    </div>
+  `,
+  setup() {
+    const { data, isLoading, isFailed, isAborted, start, stop } = useFetch(
+      url,
+      opts,
+      onMount
+    )
+    return { data, isLoading, isFailed, isAborted, start, stop }
+  }
+})
+
 describe('useFetch', () => {
-  it('should do something', () => {
-    // Add test here
+  const url = 'http://test.com'
+
+  it('should show #isLoading in the correct order', async () => {
+    mockFetch()
+    const wrapper = mount(testComponent(url))
+    expect(wrapper.find('#isLoading').exists()).toBe(false)
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#isLoading').exists()).toBe(true)
+  })
+
+  it('should show #data when provided', async () => {
+    const data = { text: 'Here is some data' }
+    mockFetch({ data })
+    const wrapper = mount(testComponent(url))
+    await flushPromises()
+    expect(wrapper.find('#data').text()).toBe(data.text)
+  })
+
+  it('should show #isFailed when the header is not of json type', async () => {
+    mockFetch({ header: 'brokenHeader' })
+    const wrapper = mount(testComponent(url))
+    await flushPromises()
+    expect(wrapper.find('#isFailed').exists()).toBe(true)
+  })
+
+  it('should show #isAborted when aborted is triggered', async () => {
+    mockFetch({ isAborted: true })
+    const wrapper = mount(testComponent(url))
+    await flushPromises()
+    expect(wrapper.find('#isFailed').exists()).toBe(true)
+    expect(wrapper.find('#isAborted').exists()).toBe(true)
   })
 })

src/helpers/test.ts

@@ -82,3 +82,5 @@ export const checkElementExistenceOnMount = async (
   await wrapper.vm.$nextTick()
   expect(wrapper.find(elementName).exists()).toBe(mountType)
 }
+
+export const flushPromises = () => new Promise(setImmediate)