From 2f37247f66deb9d3b9d93927a159e8dcaabdc94c Mon Sep 17 00:00:00 2001
From: YuShifan <894402575bt@gmail.com>
Date: Tue, 15 Oct 2024 16:33:05 +0800
Subject: [PATCH 1/4] feat(desktop): support expand and collapse all tree nodes

---
 src/components/widgets/TreeView.vue | 45 +++++++++++++++++++++++++++--
 src/utils/topicTree.ts              | 17 +++++++++++
 2 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/components/widgets/TreeView.vue b/src/components/widgets/TreeView.vue
index 5da4fafc7..056b9a717 100644
--- a/src/components/widgets/TreeView.vue
+++ b/src/components/widgets/TreeView.vue
@@ -1,7 +1,25 @@
 <template>
   <div class="tree-view">
-    <div class="tree-view-header">
-      <el-input :placeholder="$t('viewer.filterDesc')" size="small" v-model="filterText" class="mb-3" clearable />
+    <div class="tree-view-header mb-3">
+      <el-input :placeholder="$t('viewer.filterDesc')" size="small" v-model="filterText" clearable class="mr-3" />
+      <div class="tree-view-header-actions">
+        <el-tooltip
+          :effect="currentTheme !== 'light' ? 'light' : 'dark'"
+          placement="top"
+          :content="$t('viewer.expendAll')"
+          :open-delay="500"
+        >
+          <el-button size="small" @click="expandAll" icon="el-icon-arrow-down"> </el-button>
+        </el-tooltip>
+        <el-tooltip
+          :effect="currentTheme !== 'light' ? 'light' : 'dark'"
+          placement="top"
+          :content="$t('viewer.collapseAll')"
+          :open-delay="500"
+        >
+          <el-button size="small" @click="collapseAll" icon="el-icon-arrow-up"> </el-button>
+        </el-tooltip>
+      </div>
     </div>
     <el-tree
       ref="tree"
@@ -38,12 +56,16 @@
 
 <script lang="ts">
 import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
 import { Tree } from 'element-ui'
+import { getAllLabels } from '@/utils/topicTree'
 
 @Component
 export default class TreeView extends Vue {
   @Prop({ default: () => [] }) public data!: TopicTreeData[]
 
+  @Getter('currentTheme') private currentTheme!: Theme
+
   private expandedKeys: string[] = []
   private filterText = ''
 
@@ -102,6 +124,13 @@ export default class TreeView extends Vue {
     }
   }
 
+  private expandAll() {
+    this.expandedKeys = getAllLabels(this.data)
+  }
+
+  private collapseAll() {
+    this.expandedKeys = []
+  }
   mounted() {
     // Keep the filter text when data changes
     this.$nextTick(() => {
@@ -115,6 +144,18 @@ export default class TreeView extends Vue {
 
 <style lang="scss">
 .tree-view {
+  .tree-view-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .tree-view-header-actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
   .el-tree-node__content {
     border-radius: 8px;
     height: 32px;
diff --git a/src/utils/topicTree.ts b/src/utils/topicTree.ts
index 6102dc9a9..2882fa343 100644
--- a/src/utils/topicTree.ts
+++ b/src/utils/topicTree.ts
@@ -158,3 +158,20 @@ export function findFullTopicPath(treeData: TopicTreeData[], targetLabel: string
   }
   return null
 }
+
+/**
+ * Retrieves all labels from the given topic tree nodes and their children.
+ *
+ * @param nodes - An array of TopicTreeData representing the topic tree nodes.
+ * @returns An array of strings containing all labels from the nodes and their children.
+ */
+export function getAllLabels(nodes: TopicTreeData[]): string[] {
+  let labels: string[] = []
+  for (const node of nodes) {
+    labels.push(node.label)
+    if (node.children && node.children.length > 0) {
+      labels = labels.concat(getAllLabels(node.children))
+    }
+  }
+  return labels
+}

From c1ed45e2b1596ca6e75c3b784d98cac51307df8b Mon Sep 17 00:00:00 2001
From: YuShifan <894402575bt@gmail.com>
Date: Tue, 15 Oct 2024 23:37:01 +0800
Subject: [PATCH 2/4] test(desktop): add topic tree utils test cases

---
 tests/unit/utils/topicTree.spec.ts | 301 +++++++++++++++++++++++++++++
 1 file changed, 301 insertions(+)
 create mode 100644 tests/unit/utils/topicTree.spec.ts

diff --git a/tests/unit/utils/topicTree.spec.ts b/tests/unit/utils/topicTree.spec.ts
new file mode 100644
index 000000000..4d4f9a37c
--- /dev/null
+++ b/tests/unit/utils/topicTree.spec.ts
@@ -0,0 +1,301 @@
+import { expect } from 'chai'
+import {
+  updateTopicTreeData,
+  updateSubTopicCounts,
+  findSubTopics,
+  findFullTopicPath,
+  getAllLabels,
+} from '@/utils/topicTree'
+import { IPublishPacket } from 'mqtt-packet'
+
+const connectionInfo: ConnectionModel = {
+  clientId: 'mqttx_2b6060e3',
+  name: 'test',
+  clean: true,
+  protocol: 'wss',
+  host: 'broker.emqx.io',
+  port: 8084,
+  keepalive: 60,
+  connectTimeout: 10,
+  reconnect: true,
+  reconnectPeriod: 4000,
+  username: '',
+  password: '',
+  path: '/mqtt',
+  certType: 'server',
+  ssl: true,
+  mqttVersion: '5.0',
+  unreadMessageCount: 0,
+  clientIdWithTime: false,
+  parentId: 'collection_a457e1fe-1ab8-47a4-9b38-d168b603333e',
+  orderId: 0,
+  rejectUnauthorized: true,
+  ALPNProtocols: '',
+  ca: '',
+  cert: '',
+  key: '',
+  isCollection: false,
+  createAt: '2024-07-29T09:51:12.751Z',
+  updateAt: '2024-10-15T08:39:43.870Z',
+  messages: [],
+  subscriptions: [],
+}
+
+describe('Topic Tree Functions', () => {
+  it('should update topic tree data', () => {
+    const currentTree: TopicTreeData[] = []
+    const packet: IPublishPacket = {
+      cmd: 'publish',
+      topic: 'sensors/temperature/living-room',
+      payload: Buffer.from('25.5'),
+      qos: 1,
+      dup: false,
+      retain: false,
+    }
+
+    const updatedTree = updateTopicTreeData(currentTree, { packet, connectionInfo })
+
+    expect(updatedTree).to.have.lengthOf(1)
+    expect(updatedTree[0].label).to.equal('broker.emqx.io')
+    expect(updatedTree[0].children).to.have.lengthOf(1)
+    expect(updatedTree[0].children?.[0].label).to.equal('sensors')
+  })
+
+  it('should update sub topic counts', () => {
+    const tree: TopicTreeData = {
+      label: 'root',
+      latestMessage: '',
+      messageCount: 0,
+      subTopicCount: 0,
+      children: [
+        {
+          label: 'child1',
+          latestMessage: '',
+          messageCount: 0,
+          subTopicCount: 0,
+          children: [],
+        },
+        {
+          label: 'child2',
+          latestMessage: '',
+          messageCount: 0,
+          subTopicCount: 0,
+          children: [
+            {
+              label: 'grandchild',
+              latestMessage: '',
+              messageCount: 0,
+              subTopicCount: 0,
+              children: [],
+            },
+          ],
+        },
+      ],
+    }
+
+    updateSubTopicCounts(tree)
+
+    expect(tree.subTopicCount).to.equal(3)
+    if (tree.children) {
+      expect(tree.children[0].subTopicCount).to.equal(0)
+      expect(tree.children[1].subTopicCount).to.equal(1)
+    }
+  })
+
+  it('should find sub topics', () => {
+    const tree: TopicTreeData = {
+      label: 'root',
+      latestMessage: '',
+      messageCount: 0,
+      subTopicCount: 0,
+      children: [
+        { label: 'child1', latestMessage: '', messageCount: 0, subTopicCount: 0, children: [] },
+        {
+          label: 'child2',
+          latestMessage: '',
+          messageCount: 0,
+          subTopicCount: 0,
+          children: [{ label: 'grandchild', latestMessage: '', messageCount: 0, subTopicCount: 0, children: [] }],
+        },
+      ],
+    }
+
+    const subTopics = findSubTopics(tree)
+    expect(subTopics).to.deep.equal(['child1', 'child2', 'grandchild'])
+  })
+
+  it('should find full topic path', () => {
+    const tree: TopicTreeData[] = [
+      {
+        label: 'broker.emqx.io',
+        latestMessage: '',
+        messageCount: 0,
+        subTopicCount: 0,
+        children: [
+          {
+            label: 'sensors',
+            latestMessage: '',
+            messageCount: 0,
+            subTopicCount: 0,
+            children: [
+              {
+                label: 'temperature',
+                latestMessage: '',
+                messageCount: 0,
+                subTopicCount: 0,
+                children: [
+                  { label: 'living-room', latestMessage: '', messageCount: 0, subTopicCount: 0, children: [] },
+                ],
+              },
+            ],
+          },
+        ],
+        connectionInfo: connectionInfo,
+      },
+    ]
+
+    const fullPath = findFullTopicPath(tree, 'living-room')
+    expect(fullPath).to.equal('sensors/temperature/living-room')
+  })
+
+  it('should get all labels', () => {
+    const tree: TopicTreeData[] = [
+      {
+        label: 'root',
+        latestMessage: '',
+        messageCount: 0,
+        subTopicCount: 0,
+        children: [
+          { label: 'child1', latestMessage: '', messageCount: 0, subTopicCount: 0, children: [] },
+          {
+            label: 'child2',
+            latestMessage: '',
+            messageCount: 0,
+            subTopicCount: 0,
+            children: [{ label: 'grandchild', latestMessage: '', messageCount: 0, subTopicCount: 0, children: [] }],
+          },
+        ],
+      },
+    ]
+
+    const labels = getAllLabels(tree)
+    expect(labels).to.deep.equal(['root', 'child1', 'child2', 'grandchild'])
+  })
+
+  it('should update existing tree node', () => {
+    const currentTree: TopicTreeData[] = [
+      {
+        label: 'broker.emqx.io',
+        latestMessage: '',
+        messageCount: 0,
+        subTopicCount: 0,
+        children: [],
+        connectionInfo: connectionInfo,
+      },
+    ]
+    const packet: IPublishPacket = {
+      cmd: 'publish',
+      topic: 'sensors/temperature',
+      payload: Buffer.from('20.5'),
+      qos: 0,
+      dup: false,
+      retain: false,
+    }
+
+    const updatedTree = updateTopicTreeData(currentTree, { packet, connectionInfo })
+
+    expect(updatedTree[0].messageCount).to.equal(1)
+    expect(updatedTree[0].children?.[0].label).to.equal('sensors')
+    expect(updatedTree[0].children?.[0].children?.[0].label).to.equal('temperature')
+    expect(updatedTree[0].children?.[0].children?.[0].latestMessage).to.equal('20.5')
+  })
+
+  it('should not update tree for non-publish packets', () => {
+    const currentTree: TopicTreeData[] = []
+    const packet = { cmd: 'subscribe' } as any
+
+    const updatedTree = updateTopicTreeData(currentTree, { packet, connectionInfo })
+
+    expect(updatedTree).to.deep.equal(currentTree)
+  })
+
+  it('should update sub topic counts for deep nested tree', () => {
+    const tree: TopicTreeData = {
+      label: 'root',
+      latestMessage: '',
+      messageCount: 0,
+      subTopicCount: 0,
+      children: [
+        {
+          label: 'level1',
+          latestMessage: '',
+          messageCount: 0,
+          subTopicCount: 0,
+          children: [
+            {
+              label: 'level2',
+              latestMessage: '',
+              messageCount: 0,
+              subTopicCount: 0,
+              children: [
+                {
+                  label: 'level3',
+                  latestMessage: '',
+                  messageCount: 0,
+                  subTopicCount: 0,
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    }
+
+    updateSubTopicCounts(tree)
+
+    expect(tree.subTopicCount).to.equal(3)
+    expect(tree.children?.[0].subTopicCount).to.equal(2)
+    expect(tree.children?.[0].children?.[0].subTopicCount).to.equal(1)
+    expect(tree.children?.[0].children?.[0].children?.[0].subTopicCount).to.equal(0)
+  })
+
+  it('should find sub topics for root node', () => {
+    const tree: TopicTreeData = {
+      label: 'root',
+      latestMessage: '',
+      messageCount: 0,
+      subTopicCount: 0,
+      children: [
+        { label: 'child1', latestMessage: '', messageCount: 0, subTopicCount: 0, children: [] },
+        { label: 'child2', latestMessage: '', messageCount: 0, subTopicCount: 0, children: [] },
+      ],
+    }
+
+    const subTopics = findSubTopics(tree)
+    expect(subTopics).to.deep.equal(['child1', 'child2'])
+  })
+
+  it('should return null for non-existent topic path', () => {
+    const tree: TopicTreeData[] = [
+      {
+        label: 'broker.emqx.io',
+        latestMessage: '',
+        messageCount: 0,
+        subTopicCount: 0,
+        children: [],
+        connectionInfo: connectionInfo,
+      },
+    ]
+
+    const fullPath = findFullTopicPath(tree, 'non-existent')
+    expect(fullPath).to.be.null
+  })
+
+  it('should get all labels for empty tree', () => {
+    const tree: TopicTreeData[] = []
+
+    const labels = getAllLabels(tree)
+    expect(labels).to.deep.equal([])
+  })
+})

From a68f27800ed4983e964c341444339a1925bf9c1c Mon Sep 17 00:00:00 2001
From: YuShifan <894402575bt@gmail.com>
Date: Tue, 15 Oct 2024 23:57:45 +0800
Subject: [PATCH 3/4] fix(desktop): fix action button on topic tree

---
 src/components/widgets/TreeView.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/widgets/TreeView.vue b/src/components/widgets/TreeView.vue
index 056b9a717..32f541b72 100644
--- a/src/components/widgets/TreeView.vue
+++ b/src/components/widgets/TreeView.vue
@@ -153,6 +153,13 @@ export default class TreeView extends Vue {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      .el-button {
+        border: 1px solid var(--color-border-default);
+        background: transparent;
+        &:hover {
+          border: 1px solid var(--color-main-green);
+        }
+      }
     }
   }
 

From 98bcb90500f0334dd0ed919e8f87a9295650b05e Mon Sep 17 00:00:00 2001
From: YuShifan <894402575bt@gmail.com>
Date: Wed, 16 Oct 2024 00:06:03 +0800
Subject: [PATCH 4/4] test(desktop): add unit tests for globalEventBus

---
 tests/unit/utils/globalEventBus.spec.ts | 112 ++++++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 tests/unit/utils/globalEventBus.spec.ts

diff --git a/tests/unit/utils/globalEventBus.spec.ts b/tests/unit/utils/globalEventBus.spec.ts
new file mode 100644
index 000000000..b521f5b66
--- /dev/null
+++ b/tests/unit/utils/globalEventBus.spec.ts
@@ -0,0 +1,112 @@
+import { expect } from 'chai'
+import { globalEventBus } from '@/utils/globalEventBus'
+
+describe('globalEventBus', () => {
+  it('should emit and listen to events', () => {
+    const testData = { message: 'Hello, World!' }
+    let receivedData: any = null
+
+    globalEventBus.on('testEvent', (data) => {
+      receivedData = data
+    })
+
+    globalEventBus.emit('testEvent', testData)
+
+    expect(receivedData).to.deep.equal(testData)
+  })
+
+  it('should remove event listener', () => {
+    let counter = 0
+    const incrementCounter = () => {
+      counter++
+    }
+
+    globalEventBus.on('incrementEvent', incrementCounter)
+
+    globalEventBus.emit('incrementEvent')
+    expect(counter).to.equal(1)
+
+    globalEventBus.removeListener('incrementEvent', incrementCounter)
+
+    globalEventBus.emit('incrementEvent')
+    expect(counter).to.equal(1)
+  })
+
+  it('should handle multiple listeners for the same event', () => {
+    let count1 = 0
+    let count2 = 0
+    const listener1 = () => {
+      count1++
+    }
+    const listener2 = () => {
+      count2++
+    }
+
+    globalEventBus.on('multipleListeners', listener1)
+    globalEventBus.on('multipleListeners', listener2)
+
+    globalEventBus.emit('multipleListeners')
+
+    expect(count1).to.equal(1)
+    expect(count2).to.equal(1)
+  })
+
+  it('should not throw error when emitting event with no listeners', () => {
+    expect(() => {
+      globalEventBus.emit('nonExistentEvent')
+    }).to.not.throw()
+  })
+
+  it('should handle removal of non-existent listener', () => {
+    const listener = () => {}
+    expect(() => {
+      globalEventBus.removeListener('someEvent', listener)
+    }).to.not.throw()
+  })
+
+  it('should handle multiple removals of the same listener', () => {
+    const listener = () => {}
+    globalEventBus.on('multiRemoval', listener)
+
+    globalEventBus.removeListener('multiRemoval', listener)
+    globalEventBus.removeListener('multiRemoval', listener) // Second removal
+
+    // This should not throw an error
+    expect(() => {
+      globalEventBus.emit('multiRemoval')
+    }).to.not.throw()
+  })
+
+  it('should correctly handle listeners that throw errors', () => {
+    const errorListener = () => {
+      throw new Error('Test error')
+    }
+    globalEventBus.on('errorEvent', errorListener)
+
+    expect(() => {
+      globalEventBus.emit('errorEvent')
+    }).to.throw('Test error')
+
+    // Clean up
+    globalEventBus.removeListener('errorEvent', errorListener)
+  })
+
+  it('should maintain separate listener lists for different events', () => {
+    let count1 = 0
+    let count2 = 0
+    globalEventBus.on('event1', () => {
+      count1++
+    })
+    globalEventBus.on('event2', () => {
+      count2++
+    })
+
+    globalEventBus.emit('event1')
+    expect(count1).to.equal(1)
+    expect(count2).to.equal(0)
+
+    globalEventBus.emit('event2')
+    expect(count1).to.equal(1)
+    expect(count2).to.equal(1)
+  })
+})