test(websocket): enable websocket indicator test in App.test.tsx

src/components/App.test.tsx

@@ -58,20 +58,31 @@ describe('<App />', () => {
     expect(screen.getByText('footer.warning_alert_button_ok')).toBeInTheDocument()
   })
 
-  /*it('should display a websocket connection indicator', async () => {
+  it('should display websocket connection indicator as CONNECTED', async () => {
     global.__DEV__.addToAppSettings({ showOnboarding: false })
 
     await act(async () => {
       render(<App />)
     })
 
-    expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-secondary')).toBe(true)
-    expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(false)
+    await global.__DEV__.JM_WEBSOCKET_SERVER_MOCK.connected
 
-    await act(async () => {
-      await global.__DEV__.JM_WEBSOCKET_SERVER_MOCK.connected
-    })
     expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(true)
     expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-secondary')).toBe(false)
-  })*/
+  })
+
+  it('should display websocket connection indicator AS DISCONNECTED', async () => {
+    global.__DEV__.addToAppSettings({ showOnboarding: false })
+
+    await act(async () => {
+      render(<App />)
+    })
+
+    await act(async () => {
+      global.__DEV__.JM_WEBSOCKET_SERVER_MOCK.close()
+    })
+
+    expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(false)
+    expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-secondary')).toBe(true)
+  })
 })

src/context/WebsocketContext.tsx

@@ -47,8 +47,6 @@ const createWebSocket = () => {
   return websocket
 }
 
-const initialWebsocket = createWebSocket()
-
 export interface WebsocketContextEntry {
   websocket: WebSocket
   websocketState: number
@@ -62,8 +60,8 @@ const WebsocketContext = createContext<WebsocketContextEntry | undefined>(undefi
  * See Websocket docs: https://github.com/JoinMarket-Org/joinmarket-clientserver/blob/v0.9.5/docs/JSON-RPC-API-using-jmwalletd.md#websocket
  */
 const WebsocketProvider = ({ children }: PropsWithChildren<{}>) => {
-  const [websocket, setWebsocket] = useState(initialWebsocket)
-  const [websocketState, setWebsocketState] = useState(initialWebsocket.readyState)
+  const [websocket, setWebsocket] = useState(createWebSocket())
+  const [websocketState, setWebsocketState] = useState(websocket.readyState)
   const [isWebsocketHealthy, setIsWebsocketHealthy] = useState(false)
   const setConnectionErrorCount = useState(0)[1]
   const currentWallet = useCurrentWallet()

src/setupTests.ts

@@ -23,11 +23,8 @@ global.__DEV__.addToAppSettings = () => {
   )
 }
 ;(function setupWebsocketServerMock() {
-  global.__DEV__.JM_WEBSOCKET_SERVER_MOCK = new WebSocketServer('ws://localhost/jmws', { jsonProtocol: true })
-
-  afterEach(() => {
-    // gracefully close all open connections and reset the environment between test runs
-    WebSocketServer.clean()
+  beforeAll(() => {
+    global.__DEV__.JM_WEBSOCKET_SERVER_MOCK = new WebSocketServer('ws://localhost/jmws', { jsonProtocol: true })
   })
 
   afterAll(() => {