refactor testing

test/nuxt/useLiveSessions.spec.js

@@ -3,55 +3,56 @@ import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
 import { defineComponent, h } from 'vue'
 import { useLiveSessions } from '../../app/composables/useLiveSessions.js'
 
+const wait = (ms = 100) => new Promise(r => setTimeout(r, ms))
+
+const createTestComponent = (setupFn) => {
+  return defineComponent({
+    setup: setupFn,
+  })
+}
+
+const setupEndpoints = (liveResponse) => {
+  registerEndpoint('/api/live', liveResponse)
+  registerEndpoint('/api/me', () => ({ id: '1', identifier: 'u', role: 'member' }), { method: 'GET' })
+}
+
 describe('useLiveSessions', () => {
   it('fetches sessions from API and returns sessions ref', async () => {
-    registerEndpoint('/api/live', () => [
-      { id: 's1', label: 'Live 1', hasStream: true, lat: 37, lng: -122 },
-    ])
-    registerEndpoint('/api/me', () => ({ id: '1', identifier: 'u', role: 'member' }), { method: 'GET' })
-    const TestComponent = defineComponent({
-      setup() {
-        const { sessions } = useLiveSessions()
-        return () => h('div', { 'data-sessions': JSON.stringify(sessions.value) })
-      },
+    setupEndpoints(() => [{ id: 's1', label: 'Live 1', hasStream: true, lat: 37, lng: -122 }])
+    const TestComponent = createTestComponent(() => {
+      const { sessions } = useLiveSessions()
+      return () => h('div', { 'data-sessions': JSON.stringify(sessions.value) })
     })
     const wrapper = await mountSuspended(TestComponent)
-    await new Promise(r => setTimeout(r, 100))
+    await wait()
     expect(wrapper.find('[data-sessions]').exists()).toBe(true)
   })
 
   it('returns empty array when fetch fails', async () => {
-    registerEndpoint('/api/live', () => {
+    setupEndpoints(() => {
       throw new Error('fetch failed')
     })
-    registerEndpoint('/api/me', () => ({ id: '1', identifier: 'u', role: 'member' }), { method: 'GET' })
-    const TestComponent = defineComponent({
-      setup() {
-        const { sessions } = useLiveSessions()
-        return () => h('div', { 'data-sessions': JSON.stringify(sessions.value) })
-      },
+    const TestComponent = createTestComponent(() => {
+      const { sessions } = useLiveSessions()
+      return () => h('div', { 'data-sessions': JSON.stringify(sessions.value) })
     })
     const wrapper = await mountSuspended(TestComponent)
-    await new Promise(r => setTimeout(r, 150))
-    const el = wrapper.find('[data-sessions]')
-    expect(el.exists()).toBe(true)
-    expect(JSON.parse(el.attributes('data-sessions'))).toEqual([])
+    await wait(150)
+    const sessions = JSON.parse(wrapper.find('[data-sessions]').attributes('data-sessions'))
+    expect(sessions).toEqual([])
   })
 
   it('startPolling and stopPolling manage interval', async () => {
-    registerEndpoint('/api/live', () => [])
-    registerEndpoint('/api/me', () => ({ id: '1', identifier: 'u', role: 'member' }), { method: 'GET' })
-    const TestComponent = defineComponent({
-      setup() {
-        const { startPolling, stopPolling } = useLiveSessions()
-        return () => h('div', {
-          onClick: () => {
-            startPolling()
-            startPolling()
-            stopPolling()
-          },
-        })
-      },
+    setupEndpoints(() => [])
+    const TestComponent = createTestComponent(() => {
+      const { startPolling, stopPolling } = useLiveSessions()
+      return () => h('div', {
+        onClick: () => {
+          startPolling()
+          startPolling()
+          stopPolling()
+        },
+      })
     })
     const wrapper = await mountSuspended(TestComponent)
     await wrapper.trigger('click')