Merge pull request #454

chore(22652): Rename hook file to TS when appropriate

* chore(22652): change TypeScript hooks file extension

* chore(22652): change TypeScript hooks file extension

* chore(22652): change TypeScript hooks file extension

* chore(22652): change TypeScript hooks file extension

* test(22652): add tests

* chore(22652): fix gitignore

* test(22652): fix intercepts

* test(22652): change unhandled intercept warning

* chore(22652): update MSW

* chore(22652): fix coverage

* test(22652): add tests

* test(22652): fix test and coverage

* chore(22652): fix type

* chore(22652): update vite (fix #451)

* test(22652): export the hook testing wrapper

Author: vanch3d

hivemq-edge/src/frontend/.gitignore

@@ -25,5 +25,8 @@ cypress/screenshots
 
 # Exclude test-results
 test-results
+
+# Local dev fixes
 /public/app/
 /public/images/
+/public/module/

hivemq-edge/src/frontend/package.json

@@ -115,15 +115,15 @@
     "eslint-plugin-react-refresh": "^0.3.4",
     "i18next-pseudo": "^2.2.1",
     "jsdom": "^24.0.0",
-    "msw": "^2.2.14",
+    "msw": "^2.3.1",
     "openapi-typescript-codegen": "^0.25.0",
     "prettier": "2.8.8",
     "sass": "^1.70.0",
     "stylelint": "^15.6.2",
     "stylelint-config-standard": "^33.0.0",
     "stylelint-config-standard-scss": "^9.0.0",
     "typescript": "^5.0.4",
-    "vite": "^5.2.7",
+    "vite": "^5.2.13",
     "vitest": "^1.5.3"
   },
   "msw": {

hivemq-edge/src/frontend/pnpm-lock.yaml

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.2.14'
+const PACKAGE_VERSION = '2.3.1'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

hivemq-edge/src/frontend/public/mockServiceWorker.js

@@ -0,0 +1,11 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { AuthProvider } from '@/modules/Auth/AuthProvider.tsx'
+import { MemoryRouter } from 'react-router-dom'
+
+export const SimpleWrapper: React.JSXElementConstructor<{ children: React.ReactElement }> = ({ children }) => (
+  <QueryClientProvider client={new QueryClient()}>
+    <AuthProvider>
+      <MemoryRouter>{children}</MemoryRouter>
+    </AuthProvider>
+  </QueryClientProvider>
+)

hivemq-edge/src/frontend/src/__test-utils__/hooks/SimpleWrapper.tsx

@@ -8,7 +8,7 @@ window.crypto.randomUUID = randomUUID
 
 // Establish API mocking before all tests.
 beforeAll(() => {
-  server.listen({ onUnhandledRequest: 'error' })
+  server.listen({ onUnhandledRequest: 'warn' })
 })
 
 // Reset any request handlers that we may add during the tests,

hivemq-edge/src/frontend/src/__test-utils__/setup.ts

@@ -27,7 +27,7 @@ export const handlers = [
   http.get('*/management/protocol-adapters/status', () => {
     return HttpResponse.json<StatusList>(
       {
-        items: [mockBridgeConnectionStatus],
+        items: [mockAdapterConnectionStatus],
       },
       { status: 200 }
     )

hivemq-edge/src/frontend/src/api/hooks/useConnection/__handlers__/index.ts

@@ -0,0 +1,31 @@
+import { expect } from 'vitest'
+import { renderHook, waitFor } from '@testing-library/react'
+
+import { server } from '@/__test-utils__/msw/mockServer.ts'
+import { SimpleWrapper as wrapper } from '@/__test-utils__/hooks/SimpleWrapper.tsx'
+
+import { handlers } from './__handlers__'
+import { useGetAdaptersStatus } from '@/api/hooks/useConnection/useGetAdaptersStatus.ts'
+
+describe('useGetAdaptersStatus', () => {
+  afterEach(() => {
+    server.resetHandlers()
+  })
+
+  it('should load the data', async () => {
+    server.use(...handlers)
+
+    const { result } = renderHook(useGetAdaptersStatus, { wrapper })
+    await waitFor(() => {
+      expect(result.current.isLoading).toBeFalsy()
+      expect(result.current.isSuccess).toBeTruthy()
+    })
+    expect(result.current.data?.items).toStrictEqual([
+      {
+        connection: 'CONNECTED',
+        id: 'my-adapter',
+        type: 'adapter',
+      },
+    ])
+  })
+})

hivemq-edge/src/frontend/src/api/hooks/useConnection/useGetAdaptersStatus.spec.tsx

@@ -0,0 +1,31 @@
+import { expect } from 'vitest'
+import { renderHook, waitFor } from '@testing-library/react'
+
+import { server } from '@/__test-utils__/msw/mockServer.ts'
+import { SimpleWrapper as wrapper } from '@/__test-utils__/hooks/SimpleWrapper.tsx'
+
+import { handlers } from './__handlers__'
+import { useGetBridgesStatus } from '@/api/hooks/useConnection/useGetBridgesStatus.ts'
+
+describe('useGetBridgesStatus', () => {
+  afterEach(() => {
+    server.resetHandlers()
+  })
+
+  it('should load the data', async () => {
+    server.use(...handlers)
+
+    const { result } = renderHook(useGetBridgesStatus, { wrapper })
+    await waitFor(() => {
+      expect(result.current.isLoading).toBeFalsy()
+      expect(result.current.isSuccess).toBeTruthy()
+    })
+    expect(result.current.data?.items).toStrictEqual([
+      {
+        connection: 'CONNECTED',
+        id: 'first-bridge',
+        type: 'bridge',
+      },
+    ])
+  })
+})