test(123): add tests for status rendering in workspace

hivemq · Oct 12, 2023 · 38b66e1 · 38b66e1
1 parent 9666d47
commit 38b66e1
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/hivemq-edge/src/frontend/src/__test-utils__/react-flow/utils.ts b/hivemq-edge/src/frontend/src/__test-utils__/react-flow/utils.ts
@@ -22,6 +22,9 @@ export const MOCK_THEME: Partial<WithCSSVar<Dict>> = {
       error: {
         500: '#E53E3E',
       },
+      stateless: {
+        500: '#38A169',
+      },
     },
   },
 }

diff --git a/hivemq-edge/src/frontend/src/modules/EdgeVisualisation/utils/status-utils.spec.ts b/hivemq-edge/src/frontend/src/modules/EdgeVisualisation/utils/status-utils.spec.ts
@@ -1,13 +1,17 @@
 import { expect } from 'vitest'
 import { Node, NodeProps } from 'reactflow'
+import * as CSS from 'csstype'
+import { ResponsiveValue, ThemeTypings } from '@chakra-ui/react'
+
+import { MOCK_NODE_ADAPTER, MOCK_NODE_BRIDGE, MOCK_NODE_LISTENER } from '@/__test-utils__/react-flow/nodes.ts'
+import { MOCK_ADAPTER_ID } from '@/__test-utils__/mocks.ts'
+import { MOCK_THEME } from '@/__test-utils__/react-flow/utils.ts'
 
 import { Adapter, Bridge, Status } from '@/api/__generated__'
+import { mockBridgeId } from '@/api/hooks/useGetBridges/__handlers__'
 
-import { MOCK_NODE_ADAPTER, MOCK_NODE_BRIDGE, MOCK_NODE_LISTENER } from '@/__test-utils__/react-flow/nodes.ts'
-import { updateNodeStatus } from '@/modules/EdgeVisualisation/utils/status-utils.ts'
+import { getThemeForStatus, updateNodeStatus } from '@/modules/EdgeVisualisation/utils/status-utils.ts'
 import { NodeTypes } from '@/modules/EdgeVisualisation/types.ts'
-import { mockBridgeId } from '@/api/hooks/useGetBridges/__handlers__'
-import { MOCK_ADAPTER_ID } from '@/__test-utils__/mocks.ts'
 
 const disconnectedBridge: NodeProps<Bridge> = {
   ...MOCK_NODE_BRIDGE,
@@ -97,3 +101,27 @@ describe('updateNodeStatus', () => {
     expect(updatedNodes).toStrictEqual(expected)
   })
 })
+
+type Token<CSSType, ThemeKey = unknown> = ThemeKey extends keyof ThemeTypings
+  ? ResponsiveValue<CSSType | ThemeTypings[ThemeKey]>
+  : ResponsiveValue<CSSType>
+
+interface StatusSuite {
+  status?: Status
+  expected: Token<CSS.Property.Color, 'colors'>
+}
+
+describe('getThemeForStatus', () => {
+  it.each<StatusSuite>([
+    { status: undefined, expected: '#E53E3E' },
+    { status: { runtime: Status.runtime.STOPPED }, expected: '#E53E3E' },
+    { status: { connection: Status.connection.CONNECTED }, expected: '#38A169' },
+    { status: { connection: Status.connection.DISCONNECTED }, expected: '#718096' },
+    { status: { connection: Status.connection.ERROR }, expected: '#E53E3E' },
+    { status: { connection: Status.connection.UNKNOWN }, expected: '#E53E3E' },
+    { status: { connection: Status.connection.STATELESS }, expected: '#38A169' },
+  ])('should return $expected for $status', ({ status, expected }) => {
+    const color = getThemeForStatus(MOCK_THEME, status)
+    expect(color).toBe(expected)
+  })
+})