test(139): fix test for topic rendering

hivemq-edge/src/frontend/src/components/MQTT/Topic.spec.cy.tsx

@@ -2,6 +2,8 @@
 
 import { MOCK_TOPIC_REF1 } from '@/__test-utils__/react-flow/topics.ts'
 
+import { formatTopicString } from '@/components/MQTT/topic-utils.ts'
+
 import Topic from './Topic.tsx'
 
 describe('Topic', () => {
@@ -12,7 +14,7 @@ describe('Topic', () => {
   it('should render', () => {
     cy.mountWithProviders(<Topic topic={MOCK_TOPIC_REF1} />)
 
-    cy.getByTestId('topic-wrapper').should('contain.text', 'root/topic/ref/1')
+    cy.getByTestId('topic-wrapper').should('contain.text', formatTopicString('root/topic/ref/1'))
   })
 
   it('should be accessible', () => {

hivemq-edge/src/frontend/src/components/MQTT/Topic.tsx

@@ -2,14 +2,15 @@ import { FC, ReactNode } from 'react'
 import { Tag, TagLabel, TagProps } from '@chakra-ui/react'
 
 import TopicIcon from '@/components/Icons/TopicIcon.tsx'
+import { formatTopicString } from '@/components/MQTT/topic-utils.ts'
 
 // TODO[NVL] Not sure adding ReactNode as possible children is a good move.
 interface TopicProps extends TagProps {
   topic: ReactNode
 }
 
 const Topic: FC<TopicProps> = ({ topic, ...rest }) => {
-  const expandedTopic = typeof topic === 'string' ? topic.split('/').join(' / ') : topic
+  const expandedTopic = typeof topic === 'string' ? formatTopicString(topic) : topic
   return (
     <Tag data-testid={'topic-wrapper'} {...rest} letterSpacing={'-0.05rem'}>
       <TopicIcon boxSize="12px" mr={2} />

hivemq-edge/src/frontend/src/components/MQTT/topic-utils.spec.ts

@@ -0,0 +1,19 @@
+import { expect } from 'vitest'
+import { formatTopicString } from '@/components/MQTT/topic-utils.ts'
+
+interface TestEachSuite {
+  topic: string
+  expected: string
+}
+
+describe('formatTopicString', () => {
+  it.each<TestEachSuite>([
+    { topic: '', expected: '' },
+    { topic: '12345', expected: '12345' },
+    { topic: '123/45', expected: '123 / 45' },
+    { topic: '12/3/45', expected: '12 / 3 / 45' },
+    { topic: '12/3/45/', expected: '12 / 3 / 45 / ' },
+  ])('should returns $expected with $topic', ({ topic, expected }) => {
+    expect(formatTopicString(topic)).toStrictEqual(expected)
+  })
+})

hivemq-edge/src/frontend/src/components/MQTT/topic-utils.ts

@@ -0,0 +1,3 @@
+const TOPIC_SEPARATOR = ' / '
+
+export const formatTopicString = (topic: string) => topic.split('/').join(TOPIC_SEPARATOR)

hivemq-edge/src/frontend/src/modules/EdgeVisualisation/components/nodes/NodeAdapter.spec.cy.tsx

@@ -4,7 +4,9 @@ import { mockReactFlow } from '@/__test-utils__/react-flow/providers.tsx'
 import { MOCK_NODE_ADAPTER } from '@/__test-utils__/react-flow/nodes.ts'
 import { MOCK_TOPIC_REF1, MOCK_TOPIC_REF2 } from '@/__test-utils__/react-flow/topics.ts'
 import { MOCK_ADAPTER_ID } from '@/__test-utils__/mocks.ts'
+
 import { mockProtocolAdapter } from '@/api/hooks/useProtocolAdapters/__handlers__'
+import { formatTopicString } from '@/components/MQTT/topic-utils.ts'
 
 import NodeAdapter from './NodeAdapter.tsx'
 
@@ -21,8 +23,8 @@ describe('NodeAdapter', () => {
     cy.getByTestId('connection-status').should('contain.text', 'Connected')
     cy.getByTestId('topics-container')
       .should('be.visible')
-      .should('contain.text', MOCK_TOPIC_REF1)
-      .should('contain.text', MOCK_TOPIC_REF2)
+      .should('contain.text', formatTopicString(MOCK_TOPIC_REF1))
+      .should('contain.text', formatTopicString(MOCK_TOPIC_REF2))
   })
 
   it('should be accessible', () => {

hivemq-edge/src/frontend/src/modules/EdgeVisualisation/components/nodes/NodeBridge.spec.cy.tsx

@@ -2,10 +2,12 @@
 
 import { MOCK_NODE_BRIDGE } from '@/__test-utils__/react-flow/nodes.ts'
 import { mockReactFlow } from '@/__test-utils__/react-flow/providers.tsx'
+import { MOCK_TOPIC_ACT1, MOCK_TOPIC_ALL } from '@/__test-utils__/react-flow/topics.ts'
 
 import { mockProtocolAdapter } from '@/api/hooks/useProtocolAdapters/__handlers__'
+import { formatTopicString } from '@/components/MQTT/topic-utils.ts'
+
 import NodeBridge from './NodeBridge.tsx'
-import { MOCK_TOPIC_ACT1, MOCK_TOPIC_ALL } from '@/__test-utils__/react-flow/topics.ts'
 
 describe('NodeBridge', () => {
   beforeEach(() => {
@@ -24,8 +26,14 @@ describe('NodeBridge', () => {
     //   .should('contain.text', MOCK_TOPIC_REF2)
 
     cy.getByTestId('topics-container').should('have.length', 2)
-    cy.getByTestId('topics-container').eq(0).should('be.visible').should('contain.text', MOCK_TOPIC_ACT1)
-    cy.getByTestId('topics-container').eq(1).should('be.visible').should('contain.text', MOCK_TOPIC_ALL)
+    cy.getByTestId('topics-container')
+      .eq(0)
+      .should('be.visible')
+      .should('contain.text', formatTopicString(MOCK_TOPIC_ACT1))
+    cy.getByTestId('topics-container')
+      .eq(1)
+      .should('be.visible')
+      .should('contain.text', formatTopicString(MOCK_TOPIC_ALL))
   })
 
   it('should be accessible', () => {

hivemq-edge/src/frontend/src/modules/EdgeVisualisation/components/parts/TopicsContainer.spec.cy.tsx

@@ -1,8 +1,10 @@
 /// <reference types="cypress" />
 
+import { formatTopicString } from '@/components/MQTT/topic-utils.ts'
+
 import TopicsContainer from './TopicsContainer.tsx'
 
-describe('NodeListener', () => {
+describe('TopicsContainer', () => {
   beforeEach(() => {
     cy.viewport(400, 400)
   })
@@ -22,8 +24,8 @@ describe('NodeListener', () => {
     )
 
     cy.getByTestId('topic-wrapper').should('have.length', 2)
-    cy.getByTestId('topic-wrapper').eq(0).should('contain.text', 'my/first/topic')
-    cy.getByTestId('topic-wrapper').eq(1).should('contain.text', 'my/second/topic')
+    cy.getByTestId('topic-wrapper').eq(0).should('contain.text', formatTopicString('my/first/topic'))
+    cy.getByTestId('topic-wrapper').eq(1).should('contain.text', formatTopicString('my/second/topic'))
 
     cy.getByTestId('topics-show-more').should('not.exist')
   })
@@ -46,8 +48,8 @@ describe('NodeListener', () => {
     )
 
     cy.getByTestId('topic-wrapper').should('have.length', 2)
-    cy.getByTestId('topic-wrapper').eq(0).should('contain.text', 'my/first/topic')
-    cy.getByTestId('topic-wrapper').eq(1).should('contain.text', 'my/second/topic')
+    cy.getByTestId('topic-wrapper').eq(0).should('contain.text', formatTopicString('my/first/topic'))
+    cy.getByTestId('topic-wrapper').eq(1).should('contain.text', formatTopicString('my/second/topic'))
 
     cy.getByTestId('topics-show-more').should('be.visible').should('contain.text', '+1')
   })