@navios/di-react 0.1.0

package/src/hooks/__tests__/use-invalidate.spec.mts

@@ -0,0 +1,216 @@
+import { Container, Injectable, InjectionToken, Registry } from '@navios/di'
+
+import { act, render, screen, waitFor } from '@testing-library/react'
+import { createElement, useMemo } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { z } from 'zod/v4'
+
+import { ContainerProvider } from '../../providers/container-provider.mjs'
+import { useInvalidate, useInvalidateInstance } from '../use-invalidate.mjs'
+import { useService } from '../use-service.mjs'
+
+describe('useInvalidate', () => {
+  let container: Container
+  let registry: Registry
+
+  beforeEach(() => {
+    registry = new Registry()
+    container = new Container(registry)
+  })
+
+  afterEach(async () => {
+    await container.dispose()
+    vi.clearAllMocks()
+  })
+
+  const createWrapper = (children: React.ReactNode) =>
+    createElement(ContainerProvider, { container, children })
+
+  describe('with class tokens', () => {
+    it('should invalidate a service and trigger re-fetch', async () => {
+      let instanceCount = 0
+
+      @Injectable({ registry })
+      class CounterService {
+        public readonly id: number
+
+        constructor() {
+          instanceCount++
+          this.id = instanceCount
+        }
+      }
+
+      let invalidateFn: (() => Promise<void>) | null = null
+
+      function TestComponent() {
+        const { data, isSuccess } = useService(CounterService)
+        const invalidate = useInvalidate(CounterService)
+        invalidateFn = invalidate
+
+        if (!isSuccess) {
+          return createElement('div', { 'data-testid': 'loading' }, 'Loading...')
+        }
+
+        return createElement('div', { 'data-testid': 'counter' }, String(data!.id))
+      }
+
+      render(createWrapper(createElement(TestComponent)))
+
+      // Wait for initial load
+      await waitFor(() => {
+        expect(screen.getByTestId('counter')).toBeDefined()
+      })
+
+      expect(screen.getByTestId('counter').textContent).toBe('1')
+
+      // Invalidate the service
+      await act(async () => {
+        await invalidateFn!()
+      })
+
+      // Wait for re-fetch
+      await waitFor(() => {
+        expect(screen.getByTestId('counter').textContent).toBe('2')
+      })
+
+      expect(instanceCount).toBe(2)
+    })
+  })
+
+  describe('with injection tokens and args', () => {
+    it('should invalidate a service with specific args', async () => {
+      let instanceCount = 0
+      const instances = new Map<string, number>()
+
+      const UserSchema = z.object({ userId: z.string() })
+      const UserToken = InjectionToken.create<
+        { userId: string; instanceId: number },
+        typeof UserSchema
+      >('User', UserSchema)
+
+      @Injectable({ registry, token: UserToken })
+      class _UserService {
+        public userId: string
+        public instanceId: number
+
+        constructor(args: z.infer<typeof UserSchema>) {
+          this.userId = args.userId
+          const currentCount = instances.get(args.userId) ?? 0
+          instanceCount++
+          this.instanceId = instanceCount
+          instances.set(args.userId, this.instanceId)
+        }
+      }
+
+      let invalidateUser1: (() => Promise<void>) | null = null
+
+      function TestComponent() {
+        const args1 = useMemo(() => ({ userId: 'user1' }), [])
+        const args2 = useMemo(() => ({ userId: 'user2' }), [])
+
+        const { data: user1, isSuccess: isSuccess1 } = useService(UserToken, args1)
+        const { data: user2, isSuccess: isSuccess2 } = useService(UserToken, args2)
+        const invalidate1 = useInvalidate(UserToken, args1)
+        invalidateUser1 = invalidate1
+
+        if (!isSuccess1 || !isSuccess2) {
+          return createElement('div', { 'data-testid': 'loading' }, 'Loading...')
+        }
+
+        return createElement('div', null, [
+          createElement('span', { key: '1', 'data-testid': 'user1' }, String(user1!.instanceId)),
+          createElement('span', { key: '2', 'data-testid': 'user2' }, String(user2!.instanceId)),
+        ])
+      }
+
+      render(createWrapper(createElement(TestComponent)))
+
+      await waitFor(() => {
+        expect(screen.getByTestId('user1')).toBeDefined()
+        expect(screen.getByTestId('user2')).toBeDefined()
+      })
+
+      expect(screen.getByTestId('user1').textContent).toBe('1')
+      expect(screen.getByTestId('user2').textContent).toBe('2')
+
+      // Invalidate only user1
+      await act(async () => {
+        await invalidateUser1!()
+      })
+
+      // Wait for user1 to be re-fetched
+      await waitFor(() => {
+        expect(screen.getByTestId('user1').textContent).toBe('3')
+      })
+
+      // user2 should still be the same
+      expect(screen.getByTestId('user2').textContent).toBe('2')
+    })
+  })
+})
+
+describe('useInvalidateInstance', () => {
+  let container: Container
+  let registry: Registry
+
+  beforeEach(() => {
+    registry = new Registry()
+    container = new Container(registry)
+  })
+
+  afterEach(async () => {
+    await container.dispose()
+    vi.clearAllMocks()
+  })
+
+  const createWrapper = (children: React.ReactNode) =>
+    createElement(ContainerProvider, { container, children })
+
+  it('should invalidate a service instance directly', async () => {
+    let instanceCount = 0
+
+    @Injectable({ registry })
+    class CounterService {
+      public readonly id: number
+
+      constructor() {
+        instanceCount++
+        this.id = instanceCount
+      }
+    }
+
+    let invalidateInstanceFn: ((instance: unknown) => Promise<void>) | null = null
+    let currentInstance: CounterService | undefined
+
+    function TestComponent() {
+      const { data, isSuccess } = useService(CounterService)
+      const invalidateInstance = useInvalidateInstance()
+      invalidateInstanceFn = invalidateInstance
+      currentInstance = data
+
+      if (!isSuccess) {
+        return createElement('div', { 'data-testid': 'loading' }, 'Loading...')
+      }
+
+      return createElement('div', { 'data-testid': 'counter' }, String(data!.id))
+    }
+
+    render(createWrapper(createElement(TestComponent)))
+
+    await waitFor(() => {
+      expect(screen.getByTestId('counter')).toBeDefined()
+    })
+
+    expect(screen.getByTestId('counter').textContent).toBe('1')
+
+    // Invalidate the instance directly
+    await act(async () => {
+      await invalidateInstanceFn!(currentInstance!)
+    })
+
+    // Wait for re-fetch
+    await waitFor(() => {
+      expect(screen.getByTestId('counter').textContent).toBe('2')
+    })
+  })
+})

package/src/hooks/__tests__/use-optional-service.spec.mts

@@ -0,0 +1,233 @@
+import { Container, Injectable, InjectionToken, Registry } from '@navios/di'
+
+import { render, screen, waitFor } from '@testing-library/react'
+import { createElement, useMemo } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { z } from 'zod/v4'
+
+import { ContainerProvider } from '../../providers/container-provider.mjs'
+import { useOptionalService } from '../use-optional-service.mjs'
+
+describe('useOptionalService', () => {
+  let container: Container
+  let registry: Registry
+
+  beforeEach(() => {
+    registry = new Registry()
+    container = new Container(registry)
+  })
+
+  afterEach(async () => {
+    await container.dispose()
+    vi.clearAllMocks()
+  })
+
+  const createWrapper = (children: React.ReactNode) =>
+    createElement(ContainerProvider, { container, children })
+
+  describe('when service is registered', () => {
+    it('should load the service successfully', async () => {
+      @Injectable({ registry })
+      class TestService {
+        getValue() {
+          return 'test-value'
+        }
+      }
+
+      function TestComponent() {
+        const { data, isSuccess, isNotFound, isLoading } = useOptionalService(TestService)
+
+        if (isLoading) {
+          return createElement('div', { 'data-testid': 'loading' }, 'Loading...')
+        }
+
+        if (isNotFound) {
+          return createElement('div', { 'data-testid': 'not-found' }, 'Not Found')
+        }
+
+        if (isSuccess) {
+          return createElement('div', { 'data-testid': 'result' }, data!.getValue())
+        }
+
+        return createElement('div', { 'data-testid': 'idle' }, 'Idle')
+      }
+
+      render(createWrapper(createElement(TestComponent)))
+
+      await waitFor(() => {
+        expect(screen.getByTestId('result')).toBeDefined()
+      })
+
+      expect(screen.getByTestId('result').textContent).toBe('test-value')
+    })
+
+    it('should load service with injection token and args', async () => {
+      const UserSchema = z.object({ userId: z.string() })
+      const UserToken = InjectionToken.create<
+        { userId: string; name: string },
+        typeof UserSchema
+      >('User', UserSchema)
+
+      @Injectable({ registry, token: UserToken })
+      class _UserService {
+        public userId: string
+        public name: string
+
+        constructor(args: z.infer<typeof UserSchema>) {
+          this.userId = args.userId
+          this.name = `User ${args.userId}`
+        }
+      }
+
+      function TestComponent() {
+        const args = useMemo(() => ({ userId: '123' }), [])
+        const { data, isSuccess, isNotFound } = useOptionalService(UserToken, args)
+
+        if (isNotFound) {
+          return createElement('div', { 'data-testid': 'not-found' }, 'Not Found')
+        }
+
+        if (isSuccess) {
+          return createElement('div', { 'data-testid': 'result' }, data!.name)
+        }
+
+        return createElement('div', { 'data-testid': 'loading' }, 'Loading...')
+      }
+
+      render(createWrapper(createElement(TestComponent)))
+
+      await waitFor(() => {
+        expect(screen.getByTestId('result')).toBeDefined()
+      })
+
+      expect(screen.getByTestId('result').textContent).toBe('User 123')
+    })
+  })
+
+  describe('when service is not registered', () => {
+    it('should return isNotFound true for unregistered class token', async () => {
+      // Create a class that is NOT registered with Injectable
+      class UnregisteredService {
+        getValue() {
+          return 'value'
+        }
+      }
+
+      function TestComponent() {
+        const { isSuccess, isNotFound, isError, isLoading } =
+          useOptionalService(UnregisteredService)
+
+        if (isLoading) {
+          return createElement('div', { 'data-testid': 'loading' }, 'Loading...')
+        }
+
+        if (isNotFound) {
+          return createElement('div', { 'data-testid': 'not-found' }, 'Service Not Found')
+        }
+
+        if (isError) {
+          return createElement('div', { 'data-testid': 'error' }, 'Error')
+        }
+
+        if (isSuccess) {
+          return createElement('div', { 'data-testid': 'success' }, 'Success')
+        }
+
+        return createElement('div', { 'data-testid': 'idle' }, 'Idle')
+      }
+
+      render(createWrapper(createElement(TestComponent)))
+
+      await waitFor(() => {
+        const notFound = screen.queryByTestId('not-found')
+        const error = screen.queryByTestId('error')
+        // Either not-found or error is acceptable for unregistered services
+        expect(notFound || error).toBeTruthy()
+      })
+    })
+
+    it('should return isNotFound true for unregistered injection token', async () => {
+      const UnregisteredToken = InjectionToken.create<{ value: string }>('Unregistered')
+
+      function TestComponent() {
+        const { isSuccess, isNotFound, isError, isLoading } =
+          useOptionalService(UnregisteredToken)
+
+        if (isLoading) {
+          return createElement('div', { 'data-testid': 'loading' }, 'Loading...')
+        }
+
+        if (isNotFound) {
+          return createElement('div', { 'data-testid': 'not-found' }, 'Token Not Found')
+        }
+
+        if (isError) {
+          return createElement('div', { 'data-testid': 'error' }, 'Error')
+        }
+
+        if (isSuccess) {
+          return createElement('div', { 'data-testid': 'success' }, 'Success')
+        }
+
+        return createElement('div', { 'data-testid': 'idle' }, 'Idle')
+      }
+
+      render(createWrapper(createElement(TestComponent)))
+
+      await waitFor(() => {
+        const notFound = screen.queryByTestId('not-found')
+        const error = screen.queryByTestId('error')
+        // Either not-found or error is acceptable for unregistered tokens
+        expect(notFound || error).toBeTruthy()
+      })
+    })
+  })
+
+  describe('refetch functionality', () => {
+    it('should allow manual refetch', async () => {
+      let instanceCount = 0
+
+      @Injectable({ registry })
+      class CounterService {
+        public readonly id: number
+
+        constructor() {
+          instanceCount++
+          this.id = instanceCount
+        }
+      }
+
+      let refetchFn: (() => void) | null = null
+
+      function TestComponent() {
+        const { data, isSuccess, refetch } = useOptionalService(CounterService)
+        refetchFn = refetch
+
+        if (!isSuccess) {
+          return createElement('div', { 'data-testid': 'loading' }, 'Loading...')
+        }
+
+        return createElement('div', { 'data-testid': 'counter' }, String(data!.id))
+      }
+
+      render(createWrapper(createElement(TestComponent)))
+
+      await waitFor(() => {
+        expect(screen.getByTestId('counter')).toBeDefined()
+      })
+
+      expect(screen.getByTestId('counter').textContent).toBe('1')
+
+      // Note: refetch alone won't create a new instance since the service is cached
+      // It will return the same cached instance
+      refetchFn!()
+
+      await waitFor(() => {
+        expect(screen.getByTestId('counter')).toBeDefined()
+      })
+
+      // Same instance because it's cached
+      expect(screen.getByTestId('counter').textContent).toBe('1')
+    })
+  })
+})

package/src/hooks/__tests__/use-service.spec.mts

@@ -0,0 +1,212 @@
+import { Container, Injectable, InjectionToken, Registry } from '@navios/di'
+
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { createElement, useMemo } from 'react'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { z } from 'zod/v4'
+
+import { ContainerProvider } from '../../providers/container-provider.mjs'
+import { useService } from '../use-service.mjs'
+
+describe('useService', () => {
+  let container: Container
+  let registry: Registry
+
+  beforeEach(() => {
+    registry = new Registry()
+    container = new Container(registry)
+  })
+
+  afterEach(async () => {
+    await container.clear()
+  })
+
+  const createWrapper = () => {
+    return ({ children }: { children: React.ReactNode }) =>
+      // @ts-expect-error - container is required
+      createElement(ContainerProvider, { container }, children)
+  }
+
+  describe('with class tokens', () => {
+    it('should load a service and return success state', async () => {
+      @Injectable({ registry })
+      class TestService {
+        getValue() {
+          return 'test-value'
+        }
+      }
+
+      const { result } = renderHook(() => useService(TestService), {
+        wrapper: createWrapper(),
+      })
+
+      // Initially loading
+      expect(result.current.isLoading).toBe(true)
+      expect(result.current.data).toBeUndefined()
+
+      // Wait for success
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBe(true)
+      })
+
+      expect(result.current.data).toBeInstanceOf(TestService)
+      expect(result.current.data?.getValue()).toBe('test-value')
+      expect(result.current.isLoading).toBe(false)
+      expect(result.current.isError).toBe(false)
+    })
+
+    it('should return error state when service fails to load', async () => {
+      @Injectable({ registry })
+      class FailingService {
+        constructor() {
+          throw new Error('Service initialization failed')
+        }
+      }
+
+      const { result } = renderHook(() => useService(FailingService), {
+        wrapper: createWrapper(),
+      })
+
+      await waitFor(() => {
+        expect(result.current.isError).toBe(true)
+      })
+
+      expect(result.current.error?.message).toBe(
+        'Service initialization failed',
+      )
+      expect(result.current.data).toBeUndefined()
+      expect(result.current.isLoading).toBe(false)
+      expect(result.current.isSuccess).toBe(false)
+    })
+
+    it.skip('should refetch service when refetch is called', async () => {
+      let callCount = 0
+
+      @Injectable({ registry })
+      class CountingService {
+        public count: number
+
+        constructor() {
+          callCount++
+          this.count = callCount
+        }
+      }
+
+      const { result } = renderHook(() => useService(CountingService), {
+        wrapper: createWrapper(),
+      })
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBe(true)
+      })
+
+      expect(result.current.data?.count).toBe(1)
+
+      // Invalidate the service first so refetch creates a new instance
+      await container.invalidate(result.current.data)
+
+      // Trigger refetch
+      await act(async () => {
+        result.current.refetch()
+      })
+
+      await waitFor(() => {
+        expect(result.current.data?.count).toBe(2)
+      })
+    })
+  })
+
+  describe('with injection tokens', () => {
+    it('should load a service with injection token', async () => {
+      const TestToken = InjectionToken.create<{ value: string }>('TestToken')
+
+      @Injectable({ registry, token: TestToken })
+      class TestService {
+        value = 'token-value'
+      }
+
+      const { result } = renderHook(() => useService(TestToken), {
+        wrapper: createWrapper(),
+      })
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBe(true)
+      })
+
+      expect(result.current.data?.value).toBe('token-value')
+    })
+
+    it('should load a service with injection token and args', async () => {
+      const UserSchema = z.object({ userId: z.string() })
+      const UserToken = InjectionToken.create<
+        { userId: string; name: string },
+        typeof UserSchema
+      >('User', UserSchema)
+
+      @Injectable({ registry, token: UserToken })
+      class UserService {
+        public userId: string
+        public name: string
+
+        constructor(args: z.infer<typeof UserSchema>) {
+          this.userId = args.userId
+          this.name = `User-${args.userId}`
+        }
+      }
+
+      const { result } = renderHook(
+        () => {
+          const args = useMemo(() => ({ userId: '123' }), [])
+          return useService(UserToken, args)
+        },
+        { wrapper: createWrapper() },
+      )
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBe(true)
+      })
+
+      expect(result.current.data?.userId).toBe('123')
+      expect(result.current.data?.name).toBe('User-123')
+    })
+  })
+
+  describe('service invalidation', () => {
+    it('should re-fetch when service is invalidated', async () => {
+      let instanceCount = 0
+
+      @Injectable({ registry })
+      class InvalidatableService {
+        public instanceId: number
+
+        constructor() {
+          instanceCount++
+          this.instanceId = instanceCount
+        }
+      }
+
+      const { result } = renderHook(() => useService(InvalidatableService), {
+        wrapper: createWrapper(),
+      })
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBe(true)
+      })
+
+      expect(result.current.data?.instanceId).toBe(1)
+
+      // Invalidate the service
+      await act(async () => {
+        await container.invalidate(result.current.data)
+      })
+
+      // Wait for re-fetch with increased timeout for event propagation
+      await waitFor(
+        () => {
+          expect(result.current.data?.instanceId).toBe(2)
+        },
+        { timeout: 2000 },
+      )
+    })
+  })
+})