chore: fix tests

Author: AlemTuzlak

packages/event-bus-client/src/plugin.ts

@@ -15,10 +15,10 @@ type AllDevtoolsEvents<TEventMap extends Record<string, any>> = {
 export class EventClient<
   TEventMap extends Record<string, any>,
   TPluginId extends string = TEventMap extends Record<infer P, any>
-    ? P extends `${infer Id}:${string}`
-      ? Id
-      : never
-    : never,
+  ? P extends `${infer Id}:${string}`
+  ? Id
+  : never
+  : never,
 > {
   #pluginId: TPluginId
   #eventTarget: () => EventTarget
@@ -29,7 +29,18 @@ export class EventClient<
   #connectEveryMs: number
   #retryCount = 0
   #maxRetries = 5
-
+  #onConnected = () => {
+    this.debugLog('Connected to event bus')
+    this.#connected = true
+    this.debugLog('Emitting queued events', this.#queuedEvents)
+    this.#queuedEvents.forEach((event) => this.emitEventToBus(event))
+    this.#queuedEvents = []
+    this.stopConnectLoop()
+    this.#eventTarget().removeEventListener(
+      'tanstack-connect-success',
+      this.#onConnected,
+    )
+  }
   #connectFunction = () => {
     if (this.#retryCount < this.#maxRetries) {
       this.#retryCount++
@@ -41,8 +52,9 @@ export class EventClient<
       this.#connectFunction,
     )
     this.debugLog('Max retries reached, giving up on connection')
-    clearInterval(this.#connectIntervalId!)
+    this.stopConnectLoop()
   }
+
   constructor({
     pluginId,
     debug = false,
@@ -58,28 +70,22 @@ export class EventClient<
     this.#connected = false
     this.#connectIntervalId = null
     this.#connectEveryMs = 600
+
+    this.#eventTarget().addEventListener(
+      'tanstack-connect-success',
+      this.#onConnected,
+    )
+    this.#connectFunction()
     this.startConnectLoop()
   }
 
+  onConnected(cb: () => void) {
+    this.#eventTarget().addEventListener('tanstack-connect-success', cb)
+  }
+
   private startConnectLoop() {
-    if (this.#connectIntervalId !== null) return
+    if (this.#connectIntervalId !== null || this.#connected) return
     this.debugLog(`Starting connect loop (every ${this.#connectEveryMs}ms)`)
-    const onConnected = () => {
-      this.debugLog('Connected to event bus')
-      this.#connected = true
-      this.debugLog('Emitting queued events', this.#queuedEvents)
-      this.#queuedEvents.forEach((event) => this.emitEventToBus(event))
-      this.#queuedEvents = []
-      this.stopConnectLoop()
-      this.#eventTarget().removeEventListener(
-        'tanstack-connect-success',
-        onConnected,
-      )
-    }
-    this.#eventTarget().addEventListener(
-      'tanstack-connect-success',
-      onConnected,
-    )
 
     this.#connectIntervalId = setInterval(
       this.#connectFunction,
@@ -107,7 +113,7 @@ export class EventClient<
       typeof globalThis !== 'undefined' &&
       globalThis.__TANSTACK_EVENT_TARGET__
     ) {
-      this.debugLog('Using global event target')
+      this.debugLog('Using global event target',)
       return globalThis.__TANSTACK_EVENT_TARGET__
     }
     // CLient event target is the window object
@@ -137,8 +143,8 @@ export class EventClient<
       keyof TEventMap,
       `${TPluginId & string}:${string}`
     > extends `${TPluginId & string}:${infer S}`
-      ? S
-      : never,
+    ? S
+    : never,
   >(
     eventSuffix: TSuffix,
     payload: TEventMap[`${TPluginId & string}:${TSuffix}`],
@@ -165,8 +171,8 @@ export class EventClient<
       keyof TEventMap,
       `${TPluginId & string}:${string}`
     > extends `${TPluginId & string}:${infer S}`
-      ? S
-      : never,
+    ? S
+    : never,
   >(
     eventSuffix: TSuffix,
     cb: (

packages/event-bus-client/tests/index.test.ts

@@ -1,15 +1,14 @@
-import { describe, expect, it, vi } from 'vitest'
-import { EventClient } from '../src'
+import { describe, expect, it, vi, } from 'vitest'
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client'
+import { EventClient } from '../src'
 
 // start the client bus for testing
 new ClientEventBus().start()
 // client bus uses window to dispatch events
 const clientBusEmitTarget = window
-
 describe('EventClient', () => {
   describe('debug config', () => {
-    it('should emit logs when debug set to true and have the correct plugin name', () => {
+    it('should emit logs when debug set to true and have the correct plugin name', async () => {
       const consoleSpy = vi.spyOn(console, 'log')
       new EventClient({
         debug: true,
@@ -35,15 +34,25 @@ describe('EventClient', () => {
   describe('getGlobalTarget', () => {
     it('if the global target is set it should re-use it for emitting/listening/removing of events', () => {
       const target = new EventTarget()
-      globalThis.__TANSTACK_EVENT_TARGET__ = target
+      const handleSuccessConnection = vi.fn()
+      target.addEventListener("tanstack-connect", () => {
+        target.dispatchEvent(
+          new CustomEvent("tanstack-connect-success")
+        )
+      })
+      globalThis.__TANSTACK_EVENT_TARGET__ = null
+
+      vi.spyOn(globalThis, '__TANSTACK_EVENT_TARGET__', 'get').mockImplementation(() => {
+        return target
+      })
       const client = new EventClient({
         debug: false,
         pluginId: 'test',
       })
       const targetEmitSpy = vi.spyOn(target, 'dispatchEvent')
       const targetListenSpy = vi.spyOn(target, 'addEventListener')
       const targetRemoveSpy = vi.spyOn(target, 'removeEventListener')
-      const cleanup = client.on('test:event', () => {})
+      const cleanup = client.on('test:event', () => { })
       cleanup()
       client.emit('test:event', { foo: 'bar' })
       expect(targetEmitSpy).toHaveBeenCalledWith(expect.any(Event))
@@ -55,9 +64,9 @@ describe('EventClient', () => {
         expect.any(String),
         expect.any(Function),
       )
-      globalThis.__TANSTACK_EVENT_TARGET__ = null
+      vi.resetAllMocks()
+      target.removeEventListener("tanstack-connect", handleSuccessConnection)
     })
-
     it('should use the window object if the globalTarget is not set for emitting/listening/removing of events', () => {
       const target = window
       const client = new EventClient({
@@ -67,7 +76,7 @@ describe('EventClient', () => {
       const targetEmitSpy = vi.spyOn(target, 'dispatchEvent')
       const targetListenSpy = vi.spyOn(target, 'addEventListener')
       const targetRemoveSpy = vi.spyOn(target, 'removeEventListener')
-      const cleanup = client.on('test:event', () => {})
+      const cleanup = client.on('test:event', () => { })
       cleanup()
       client.emit('test:event', { foo: 'bar' })
       expect(targetEmitSpy).toHaveBeenCalledWith(expect.any(Event))
@@ -80,6 +89,7 @@ describe('EventClient', () => {
         expect.any(Function),
       )
     })
+
   })
 
   describe('on', () => {
@@ -90,7 +100,7 @@ describe('EventClient', () => {
       })
 
       const eventBusSpy = vi.spyOn(clientBusEmitTarget, 'addEventListener')
-      client.on('event', () => {})
+      client.on('event', () => { })
       expect(eventBusSpy).toHaveBeenCalledWith(
         'test:event',
         expect.any(Function),