Aw/ct 2264 app tests

src/context/ApiContext-test.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, waitFor } from 'src/utilities/testingLibrary'
+import { initialState } from 'src/services/mockedData'
+import { ApiProvider, useApi } from 'src/context/ApiContext'
+import { CreateMemberForm } from 'src/views/credentials/CreateMemberForm'
+import { apiValue as apiValueMock } from 'src/const/apiProviderMock'
+
+describe('ApiContext', () => {
+  const preloadedState = {
+    ...initialState,
+    connect: {
+      ...initialState.connect,
+      current_institution_guid: 'INS-123',
+      selectedInstitution: {
+        guid: 'INS-123',
+        code: 'mxbank',
+        name: 'MX Bank',
+      },
+      institutions: [
+        {
+          guid: 'INS-123',
+          code: 'mxbank',
+          name: 'MX Bank',
+        },
+      ],
+    },
+  }
+
+  const defaultProps = {
+    onError: () => {},
+    onSuccess: () => {},
+  }
+
+  it('provides API to child components', async () => {
+    const mockGetInstitutionCredentials = vi.fn().mockResolvedValue([
+      {
+        guid: 'CRD-1',
+        label: 'Username',
+        field_name: 'username',
+        field_type: 'TEXT',
+      },
+    ])
+
+    render(
+      <ApiProvider
+        apiValue={{ ...apiValueMock, getInstitutionCredentials: mockGetInstitutionCredentials }}
+      >
+        <CreateMemberForm {...defaultProps} />
+      </ApiProvider>,
+      { preloadedState },
+    )
+
+    await waitFor(() => {
+      expect(mockGetInstitutionCredentials).toHaveBeenCalledWith('INS-123')
+    })
+
+    expect(screen.getByText('Username')).toBeInTheDocument()
+  })
+
+  it('allows custom API values to be provided', async () => {
+    const customGetInstitutionCredentials = vi.fn().mockResolvedValue([
+      {
+        guid: 'CRD-2',
+        label: 'Password',
+        field_name: 'password',
+        field_type: 'PASSWORD',
+      },
+    ])
+
+    render(
+      <ApiProvider
+        apiValue={{
+          ...apiValueMock,
+          getInstitutionCredentials: customGetInstitutionCredentials,
+        }}
+      >
+        <CreateMemberForm {...defaultProps} />
+      </ApiProvider>,
+      { preloadedState },
+    )
+
+    await waitFor(() => {
+      expect(customGetInstitutionCredentials).toHaveBeenCalledWith('INS-123')
+    })
+
+    expect(screen.getByText('Password')).toBeInTheDocument()
+  })
+
+  it('provides default API values when used outside provider', () => {
+    const TestComponent = () => {
+      const { api } = useApi()
+      return (
+        <div>
+          <div data-test="has-api">{typeof api.loadMembers === 'function' ? 'yes' : 'no'}</div>
+        </div>
+      )
+    }
+
+    render(<TestComponent />, { preloadedState })
+
+    expect(screen.getByTestId('has-api')).toHaveTextContent('yes')
+  })
+})

src/context/ApiContext.tsx

@@ -141,9 +141,6 @@ const ApiProvider = ({ apiValue, children }: ApiProviderTypes) => {
 
 const useApi = () => {
   const context = React.useContext(ApiContext)
-  if (context === undefined) {
-    throw new Error('useApi must be used within a ApiProvider')
-  }
   return { api: context }
 }
 

src/context/WebSocketContext-test.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { renderHook } from '@testing-library/react'
+import { of } from 'rxjs'
+import { WebSocketProvider, useWebSocket, WebSocketConnection } from 'src/context/WebSocketContext'
+
+describe('WebSocketContext', () => {
+  it('should return undefined when no WebSocket connection is provided', () => {
+    const { result } = renderHook(() => useWebSocket(), {
+      wrapper: ({ children }) => <WebSocketProvider>{children}</WebSocketProvider>,
+    })
+
+    expect(result.current).toBeUndefined()
+  })
+
+  it('should return the WebSocket connection when provided', () => {
+    const mockConnection: WebSocketConnection = {
+      isConnected: () => true,
+      webSocketMessages$: of({ type: 'test' }),
+    }
+
+    const { result } = renderHook(() => useWebSocket(), {
+      wrapper: ({ children }) => (
+        <WebSocketProvider value={mockConnection}>{children}</WebSocketProvider>
+      ),
+    })
+
+    expect(result.current).toBe(mockConnection)
+    expect(result.current?.isConnected()).toBe(true)
+  })
+
+  it('should allow accessing webSocketMessages$ observable', () => {
+    const mockConnection: WebSocketConnection = {
+      isConnected: () => false,
+      webSocketMessages$: of({ event: 'test', payload: { id: 123 } }),
+    }
+
+    const { result } = renderHook(() => useWebSocket(), {
+      wrapper: ({ children }) => (
+        <WebSocketProvider value={mockConnection}>{children}</WebSocketProvider>
+      ),
+    })
+
+    expect(result.current?.webSocketMessages$).toBeDefined()
+
+    let receivedMessage: unknown
+    result.current?.webSocketMessages$.subscribe((msg) => {
+      receivedMessage = msg
+    })
+
+    expect(receivedMessage).toEqual({ event: 'test', payload: { id: 123 } })
+  })
+
+  it('should provide the same connection to multiple consumers', () => {
+    const mockConnection: WebSocketConnection = {
+      isConnected: vi.fn(() => true),
+      webSocketMessages$: of({}),
+    }
+
+    const { result: result1 } = renderHook(() => useWebSocket(), {
+      wrapper: ({ children }) => (
+        <WebSocketProvider value={mockConnection}>{children}</WebSocketProvider>
+      ),
+    })
+
+    const { result: result2 } = renderHook(() => useWebSocket(), {
+      wrapper: ({ children }) => (
+        <WebSocketProvider value={mockConnection}>{children}</WebSocketProvider>
+      ),
+    })
+
+    expect(result1.current).toBe(mockConnection)
+    expect(result2.current).toBe(mockConnection)
+  })
+})