luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add observability for LLM topic context inclusion (#1038)

Browse Source 
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>
Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>
This commit is contained in:
Copilot
2026-01-30 20:53:29 +01:00
committed by GitHub
parent 080a773dbd
commit ed8a7f559e
194 changed files with 35234 additions and 4085 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/spec/SceneBuilder.spec.ts
View File

@@ -4,46 +4,46 @@ import { SceneBuilder, SCENE_TITLES } from './SceneBuilder'
describe('SceneBuilder', () => {
it('should record scenes with titles', async () => {
const builder = new SceneBuilder()
await builder.record('connect', async () => {
// Simulate some work
await new Promise(resolve => setTimeout(resolve, 100))
})
expect(builder.scenes).to.have.length(1)
expect(builder.scenes[0].name).to.equal('connect')
expect(builder.scenes[0].title).to.equal('Connecting to MQTT Broker')
expect(builder.scenes[0].duration).to.be.greaterThan(90)
})
it('should have titles for all scene types', () => {
const sceneNames = Object.keys(SCENE_TITLES)
expect(sceneNames.length).to.be.greaterThan(0)
// Verify each scene has a non-empty title
sceneNames.forEach(name => {
expect(SCENE_TITLES[name as keyof typeof SCENE_TITLES]).to.be.a('string')
expect(SCENE_TITLES[name as keyof typeof SCENE_TITLES].length).to.be.greaterThan(0)
})
})
it('should record multiple scenes in sequence', async () => {
const builder = new SceneBuilder()
await builder.record('connect', async () => {
await new Promise(resolve => setTimeout(resolve, 50))
})
await builder.record('numeric_plots', async () => {
await new Promise(resolve => setTimeout(resolve, 50))
})
expect(builder.scenes).to.have.length(2)
expect(builder.scenes[0].name).to.equal('connect')
expect(builder.scenes[0].title).to.equal('Connecting to MQTT Broker')
expect(builder.scenes[1].name).to.equal('numeric_plots')
expect(builder.scenes[1].title).to.equal('Plot Topic History')
// Second scene should start at or after first one ends
expect(builder.scenes[1].start).to.be.at.least(builder.scenes[0].stop)
})

1
src/spec/SceneBuilder.ts
View File

@@ -59,6 +59,7 @@ export const SCENE_TITLES: Record<SceneNames, string> = {
export class SceneBuilder {
public scenes: Array<Scene> = []
public offset = Date.now()
public async record(name: SceneNames, callback: () => Promise<any>): Promise<any> {

35
src/spec/demoVideoMobile.ts
View File

@@ -24,7 +24,7 @@ import { selectTopic } from './util/selectTopic'
/**
* Mobile Demo Video - Pixel 6 viewport
*
*
* This demo showcases MQTT Explorer running in a mobile browser viewport
* simulating a Google Pixel 6 (412x915px portrait mode)
*/
@@ -66,8 +66,8 @@ async function doStuff() {
args: [
'--no-sandbox',
'--disable-dev-shm-usage',
'--app=http://localhost:3000', // App mode - no browser UI
'--window-size=412,914', // Match the mobile viewport size
'--app=http://localhost:3000', // App mode - no browser UI
'--window-size=412,914', // Match the mobile viewport size
'--window-position=0,0',
'--disable-features=TranslateUI',
'--no-first-run',
@@ -87,7 +87,8 @@ async function doStuff() {
deviceScaleFactor: 2.625,
isMobile: true,
hasTouch: true,
userAgent: 'Mozilla/5.0 (Linux; Android 12; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Mobile Safari/537.36',
userAgent:
'Mozilla/5.0 (Linux; Android 12; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Mobile Safari/537.36',
})
const page = await context.newPage()
@@ -99,17 +100,17 @@ async function doStuff() {
// Print the title
console.log(await page.title())
// Try to capture a screenshot (may fail in headed mode, but that's ok)
try {
await page.screenshot({ path: 'intro-mobile.png' })
} catch (error) {
console.log('Screenshot skipped (headed mode)')
}
// Direct console to Node terminal
page.on('console', console.log)
// Enable the fake mouse pointer for visual cursor tracking
await createFakeMousePointer(page)
@@ -145,7 +146,7 @@ async function doStuff() {
await page.locator('//label[contains(text(), "Host")]/..//input').waitFor({ timeout: 10000 })
const scenes = new SceneBuilder()
await scenes.record('mobile_intro', async () => {
await showText('MQTT Explorer on Mobile', 2000, page, 'middle')
await sleep(2500)
@@ -170,7 +171,7 @@ async function doStuff() {
console.log('Tree nodes not found, continuing...')
})
await sleep(1000)
try {
// Expand topics using the expandTopic utility
// On mobile, this clicks expand buttons (▶/▼) to navigate the tree
@@ -181,14 +182,14 @@ async function doStuff() {
} catch (error) {
console.log('Topic expansion failed, continuing...', error)
}
await hideText(page)
})
await scenes.record('mobile_view_message', async () => {
await showText('Tap Topic to View Details', 1500, page, 'top')
await sleep(1000)
try {
// Select a topic by clicking its text
// On mobile, this will switch to the Details tab automatically
@@ -200,7 +201,7 @@ async function doStuff() {
} catch (error) {
console.log('Topic selection failed, continuing...', error)
}
await hideText(page)
})
@@ -219,7 +220,7 @@ async function doStuff() {
await scenes.record('mobile_json_view', async () => {
await showText('JSON Message Formatting', 1500, page, 'top')
await sleep(1000)
try {
// Navigate back to Topics tab to show tree navigation
const topicsTab = page.locator('button:has-text("TOPICS"), button:has-text("Topics")')
@@ -228,19 +229,19 @@ async function doStuff() {
await topicsTab.click()
await sleep(1000)
}
// Expand and select kitchen/coffee_maker to show JSON
await expandTopic('kitchen/coffee_maker', page)
await sleep(1000)
await selectTopic('kitchen/coffee_maker', page)
await sleep(2000)
await showText('JSON Payload View', 1000, page, 'top')
await sleep(1500)
} catch (error) {
console.log('JSON view navigation failed, continuing...', error)
}
await hideText(page)
})
@@ -276,7 +277,7 @@ async function doStuff() {
console.log('Forced quit')
process.exit(0)
}, 10 * 1000)
stopMqtt()
console.log('Stopped mqtt client')

20
src/spec/expandTopic.spec.ts
View File

@@ -1,11 +1,11 @@
import 'mocha'
import { expect } from 'chai'
import { ElectronApplication, Page, _electron as electron } from 'playwright'
import type { MqttClient } from 'mqtt'
import { createTestMock, stopTestMock } from './mock-mqtt-test'
import { sleep } from './util'
import { connectTo } from './scenarios/connect'
import { expandTopic } from './util/expandTopic'
import type { MqttClient } from 'mqtt'
/**
* Isolated Test for expandTopic UI Helper
@@ -72,7 +72,7 @@ describe('expandTopic UI Helper - Isolated Test', function () {
})
describe('Single Level Topics', () => {
it('should expand a single-level topic (kitchen)', async function () {
it('should expand a single-level topic (kitchen)', async () => {
// Given: Topics are loaded
// When: Expand single-level topic
await expandTopic('kitchen', page)
@@ -85,7 +85,7 @@ describe('expandTopic UI Helper - Isolated Test', function () {
await page.screenshot({ path: 'test-expand-single-level.png' })
})
it('should expand another single-level topic (livingroom)', async function () {
it('should expand another single-level topic (livingroom)', async () => {
// Given: Topics are loaded
// When: Expand single-level topic
await expandTopic('livingroom', page)
@@ -100,7 +100,7 @@ describe('expandTopic UI Helper - Isolated Test', function () {
})
describe('Two Level Topics', () => {
it('should expand a two-level topic (kitchen/lamp)', async function () {
it('should expand a two-level topic (kitchen/lamp)', async () => {
// Given: Topics are loaded
// When: Expand two-level topic
await expandTopic('kitchen/lamp', page)
@@ -115,7 +115,7 @@ describe('expandTopic UI Helper - Isolated Test', function () {
await page.screenshot({ path: 'test-expand-two-level-kitchen-lamp.png' })
})
it('should expand a different two-level topic (kitchen/temperature)', async function () {
it('should expand a different two-level topic (kitchen/temperature)', async () => {
// Given: Topics are loaded
// When: Expand two-level topic
await expandTopic('kitchen/temperature', page)
@@ -130,7 +130,7 @@ describe('expandTopic UI Helper - Isolated Test', function () {
})
describe('Three Level Topics', () => {
it('should expand a three-level topic (kitchen/lamp/state)', async function () {
it('should expand a three-level topic (kitchen/lamp/state)', async () => {
// Given: Topics are loaded
// When: Expand three-level topic
await expandTopic('kitchen/lamp/state', page)
@@ -147,7 +147,7 @@ describe('expandTopic UI Helper - Isolated Test', function () {
await page.screenshot({ path: 'test-expand-three-level.png' })
})
it('should expand kitchen/lamp/brightness (different leaf same parent)', async function () {
it('should expand kitchen/lamp/brightness (different leaf same parent)', async () => {
// Given: Topics are loaded
// When: Expand another three-level topic under same parent
await expandTopic('kitchen/lamp/brightness', page)
@@ -162,7 +162,7 @@ describe('expandTopic UI Helper - Isolated Test', function () {
})
describe('Different Branches', () => {
it('should correctly expand livingroom/lamp (different branch, same name)', async function () {
it('should correctly expand livingroom/lamp (different branch, same name)', async () => {
// Given: Topics are loaded (kitchen/lamp also exists)
// When: Expand livingroom/lamp (note: lamp exists under both kitchen and livingroom)
await expandTopic('livingroom/lamp', page)
@@ -178,7 +178,7 @@ describe('expandTopic UI Helper - Isolated Test', function () {
await page.screenshot({ path: 'test-expand-different-branch.png' })
})
it('should expand livingroom/lamp/state (full path in different branch)', async function () {
it('should expand livingroom/lamp/state (full path in different branch)', async () => {
// Given: kitchen/lamp/state also exists
// When: Expand livingroom/lamp/state
await expandTopic('livingroom/lamp/state', page)
@@ -193,7 +193,7 @@ describe('expandTopic UI Helper - Isolated Test', function () {
})
describe('Error Handling', () => {
it('should throw error for non-existent topic', async function () {
it('should throw error for non-existent topic', async () => {
// Given: Topics are loaded
// When: Try to expand non-existent topic
// Then: Should throw error

26
src/spec/inspect-chart-settings.ts
View File

@@ -3,29 +3,29 @@ import { chromium, Page } from 'playwright'
async function inspect() {
const browser = await chromium.launch({ headless: true })
const page = await browser.newPage()
console.log('Navigating to localhost:3000...')
await page.goto('http://localhost:3000')
await page.waitForTimeout(2000)
// Login
console.log('Logging in...')
await page.fill('[name="username"]', 'test')
await page.fill('[name="password"]', 'test123')
await page.locator('[type="submit"]').click()
await page.waitForTimeout(3000)
// Expand kitchen/coffee_maker topic
console.log('Expanding kitchen topic...')
const kitchenTopic = page.locator('[data-test-topic="kitchen"]').first()
await kitchenTopic.click()
await page.waitForTimeout(500)
console.log('Clicking coffee_maker topic...')
const coffeeMakerTopic = page.locator('[data-test-topic="kitchen/coffee_maker"]').first()
await coffeeMakerTopic.click()
await page.waitForTimeout(1500)
// Look for ShowChart icons
console.log('\n=== ShowChart Elements ===')
const showCharts = await page.locator('//*[contains(@data-test-type, "ShowChart")]').all()
@@ -35,14 +35,16 @@ async function inspect() {
const isVisible = await showCharts[i].isVisible()
console.log(` [${i}] data-test="${dataTest}", visible=${isVisible}`)
}
// Click heater ShowChart icon
console.log('\n=== Clicking heater ShowChart ===')
const heaterChart = page.locator('//*[contains(@data-test-type, "ShowChart")][contains(@data-test, "heater")]').first()
const heaterChart = page
.locator('//*[contains(@data-test-type, "ShowChart")][contains(@data-test, "heater")]')
.first()
await heaterChart.waitFor({ state: 'visible', timeout: 5000 })
await heaterChart.click()
await page.waitForTimeout(2000)
// Check for ChartPanel
console.log('\n=== Looking for ChartPanel ===')
const chartPanels = await page.locator('[data-test-type="ChartPaper"]').all()
@@ -51,7 +53,7 @@ async function inspect() {
const dataTest = await chartPanels[i].getAttribute('data-test')
console.log(` [${i}] data-test="${dataTest}"`)
}
// Look for ChartSettings buttons
console.log('\n=== Looking for ChartSettings Elements ===')
const allSettings = await page.locator('//*[@data-test-type="ChartSettings"]').all()
@@ -62,7 +64,7 @@ async function inspect() {
const box = await allSettings[i].boundingBox()
console.log(` [${i}] data-test="${dataTest}", visible=${isVisible}, box=${JSON.stringify(box)}`)
}
// Try different locator strategies
console.log('\n=== Trying contains query for ChartSettings with "heater" ===')
const heaterSettings = page.locator('//*[contains(@data-test-type, "ChartSettings")][contains(@data-test, "heater")]')
@@ -73,11 +75,11 @@ async function inspect() {
const isVisible = await heaterSettings.first().isVisible()
console.log(` data-test="${dataTest}", visible=${isVisible}`)
}
// Take screenshot
await page.screenshot({ path: '/tmp/chart-settings-inspection.png', fullPage: true })
console.log('\nScreenshot saved to /tmp/chart-settings-inspection.png')
await browser.close()
}

8
src/spec/mock-mqtt-test.ts
View File

@@ -30,19 +30,19 @@ export async function createTestMock(): Promise<mqtt.MqttClient> {
connectTimeout: 10000,
reconnectPeriod: 0, // Disable reconnect in tests
})
client.once('connect', () => {
console.log('Successfully connected to MQTT broker')
mqttClient = client
console.log(`Connected to MQTT broker at ${brokerUrl}`)
resolve(client)
})
client.once('error', (err) => {
client.once('error', err => {
console.error('MQTT connection error:', err.message)
reject(new Error(`Failed to connect to MQTT broker: ${err.message}`))
})
// Timeout after 15 seconds
setTimeout(() => {
if (!mqttClient) {

4
src/spec/mock-mqtt.ts
View File

@@ -15,9 +15,9 @@ function connectMqtt(): Promise<mqtt.MqttClient> {
const brokerHost = process.env.TESTS_MQTT_BROKER_HOST || '127.0.0.1'
const brokerPort = process.env.TESTS_MQTT_BROKER_PORT || '1883'
const brokerUrl = `mqtt://${brokerHost}:${brokerPort}`
console.log(`Connecting to MQTT broker at ${brokerUrl}`)
const client = mqtt.connect(brokerUrl, {
username: '',
password: '',

396
src/spec/mock-sparkplugb.ts
View File

@@ -1,4 +1,4 @@
/********************************************************************************
/** ******************************************************************************
* Copyright (c) 2016-2018 Cirrus Link Solutions and others
*
* This program and the accompanying materials are made available under the
@@ -9,7 +9,7 @@
*
* Contributors:
* Cirrus Link Solutions - initial implementation
********************************************************************************/
******************************************************************************* */
import * as SparkplugClient from 'sparkplug-client'
import type { UPayload } from 'sparkplug-client'
import type { UMetric } from 'sparkplug-payload/lib/sparkplugbpayload'
@@ -25,221 +25,221 @@ export interface MockSparkplugClient {
const sample = (function () {
const brokerHost = process.env.TESTS_MQTT_BROKER_HOST || '127.0.0.1'
const brokerPort = process.env.TESTS_MQTT_BROKER_PORT || '1883'
let config = {
serverUrl: `tcp://${brokerHost}:${brokerPort}`,
username: '',
password: '',
groupId: 'Sparkplug Devices',
edgeNode: 'JavaScript Edge Node',
clientId: 'JavaScriptSimpleEdgeNode',
version: 'spBv1.0',
},
hwVersion = 'Emulated Hardware',
swVersion = 'v1.0.0',
deviceId = 'Emulated Device',
sparkPlugClient,
publishPeriod = 5000,
// Generates a random integer
randomInt = function () {
return 1 + Math.floor(Math.random() * 10)
},
// Get BIRTH payload for the edge node
getNodeBirthPayload = function (): UPayload {
return {
timestamp: new Date().getTime(),
metrics: [
{
name: 'Node Control/Rebirth',
type: 'Boolean',
value: false,
const config = {
serverUrl: `tcp://${brokerHost}:${brokerPort}`,
username: '',
password: '',
groupId: 'Sparkplug Devices',
edgeNode: 'JavaScript Edge Node',
clientId: 'JavaScriptSimpleEdgeNode',
version: 'spBv1.0',
}
const hwVersion = 'Emulated Hardware'
const swVersion = 'v1.0.0'
const deviceId = 'Emulated Device'
let sparkPlugClient
const publishPeriod = 5000
// Generates a random integer
const randomInt = function () {
return 1 + Math.floor(Math.random() * 10)
}
// Get BIRTH payload for the edge node
const getNodeBirthPayload = function (): UPayload {
return {
timestamp: new Date().getTime(),
metrics: [
{
name: 'Node Control/Rebirth',
type: 'Boolean',
value: false,
},
{
name: 'Template1',
type: 'Template',
value: {
isDefinition: true,
metrics: [
{ name: 'myBool', value: false, type: 'Boolean' },
{ name: 'myInt', value: 0, type: 'UInt32' },
],
parameters: [
{
name: 'param1',
type: 'String',
value: 'value1',
},
],
},
{
name: 'Template1',
type: 'Template',
value: {
isDefinition: true,
metrics: [
{ name: 'myBool', value: false, type: 'Boolean' },
{ name: 'myInt', value: 0, type: 'UInt32' },
],
parameters: [
{
name: 'param1',
type: 'String',
value: 'value1',
},
],
},
},
],
}
}
// Get BIRTH payload for the device
const getDeviceBirthPayload = function (): UPayload {
return {
timestamp: new Date().getTime(),
metrics: [
{ name: 'my_boolean', value: Math.random() > 0.5, type: 'Boolean' },
{ name: 'my_double', value: Math.random() * 0.123456789, type: 'Double' },
{ name: 'my_float', value: Math.random() * 0.123, type: 'Float' },
{ name: 'my_int', value: randomInt(), type: 'Int8' },
{ name: 'my_long', value: randomInt() * 214748364700, type: 'Int64' },
{ name: 'Inputs/0', value: true, type: 'Boolean' },
{ name: 'Inputs/1', value: 0, type: 'Int8' },
{ name: 'Inputs/2', value: 1.23, type: 'UInt64' },
{ name: 'Outputs/0', value: true, type: 'Boolean' },
{ name: 'Outputs/1', value: 0, type: 'Int16' },
{ name: 'Outputs/2', value: 1.23, type: 'UInt64' },
{ name: 'Properties/hw_version', value: hwVersion, type: 'String' },
{ name: 'Properties/sw_version', value: swVersion, type: 'String' },
{
name: 'my_dataset',
type: 'DataSet',
value: {
numOfColumns: 2,
types: ['String', 'String'],
columns: ['str1', 'str2'],
rows: [
['x', 'a'],
['y', 'b'],
],
},
],
}
},
// Get BIRTH payload for the device
getDeviceBirthPayload = function (): UPayload {
return {
timestamp: new Date().getTime(),
metrics: [
{ name: 'my_boolean', value: Math.random() > 0.5, type: 'Boolean' },
{ name: 'my_double', value: Math.random() * 0.123456789, type: 'Double' },
{ name: 'my_float', value: Math.random() * 0.123, type: 'Float' },
{ name: 'my_int', value: randomInt(), type: 'Int8' },
{ name: 'my_long', value: randomInt() * 214748364700, type: 'Int64' },
{ name: 'Inputs/0', value: true, type: 'Boolean' },
{ name: 'Inputs/1', value: 0, type: 'Int8' },
{ name: 'Inputs/2', value: 1.23, type: 'UInt64' },
{ name: 'Outputs/0', value: true, type: 'Boolean' },
{ name: 'Outputs/1', value: 0, type: 'Int16' },
{ name: 'Outputs/2', value: 1.23, type: 'UInt64' },
{ name: 'Properties/hw_version', value: hwVersion, type: 'String' },
{ name: 'Properties/sw_version', value: swVersion, type: 'String' },
{
name: 'my_dataset',
type: 'DataSet',
value: {
numOfColumns: 2,
types: ['String', 'String'],
columns: ['str1', 'str2'],
rows: [
['x', 'a'],
['y', 'b'],
],
},
},
{
name: 'TemplateInstance1',
type: 'Template',
value: {
templateRef: 'Template1',
isDefinition: false,
metrics: [
{ name: 'myBool', value: true, type: 'Boolean' },
{ name: 'myInt', value: 100, type: 'Int8' },
],
parameters: [
{
name: 'param1',
type: 'String',
value: 'value2',
},
],
},
{
name: 'TemplateInstance1',
type: 'Template',
value: {
templateRef: 'Template1',
isDefinition: false,
metrics: [
{ name: 'myBool', value: true, type: 'Boolean' },
{ name: 'myInt', value: 100, type: 'Int8' },
],
parameters: [
{
name: 'param1',
type: 'String',
value: 'value2',
},
],
},
},
],
}
}
// Get data payload for the device
const getDataPayload = function (): UPayload {
return {
timestamp: new Date().getTime(),
metrics: [
{ name: 'my_boolean', value: Math.random() > 0.5, type: 'Boolean' },
{ name: 'my_double', value: Math.random() * 0.123456789, type: 'Double' },
{ name: 'my_float', value: Math.random() * 0.123, type: 'UInt64' },
{ name: 'my_int', value: randomInt(), type: 'Int16' },
{ name: 'my_long', value: randomInt() * 214748364700, type: 'UInt64' },
],
}
}
// Runs the sample
const run = async function (): Promise<MockSparkplugClient> {
// Create the SparkplugClient
const sparkplugClient = SparkplugClient.newClient(config)
let updateInterval: NodeJS.Timeout | null = null
const connected = new Promise<MockSparkplugClient>(resolve => {
// Create 'birth' handler
sparkplugClient.on('birth', () => {
// Publish Node BIRTH certificate
sparkplugClient.publishNodeBirth(getNodeBirthPayload())
// Publish Device BIRTH certificate
sparkplugClient.publishDeviceBirth(deviceId, getDeviceBirthPayload())
resolve({
stop: () => {
if (updateInterval) {
clearInterval(updateInterval)
}
sparkplugClient.stop()
},
],
}
},
// Get data payload for the device
getDataPayload = function (): UPayload {
return {
timestamp: new Date().getTime(),
metrics: [
{ name: 'my_boolean', value: Math.random() > 0.5, type: 'Boolean' },
{ name: 'my_double', value: Math.random() * 0.123456789, type: 'Double' },
{ name: 'my_float', value: Math.random() * 0.123, type: 'UInt64' },
{ name: 'my_int', value: randomInt(), type: 'Int16' },
{ name: 'my_long', value: randomInt() * 214748364700, type: 'UInt64' },
],
}
},
// Runs the sample
run = async function (): Promise<MockSparkplugClient> {
// Create the SparkplugClient
const sparkplugClient = SparkplugClient.newClient(config)
let updateInterval: NodeJS.Timeout | null = null
const connected = new Promise<MockSparkplugClient>(resolve => {
// Create 'birth' handler
sparkplugClient.on('birth', () => {
// Publish Node BIRTH certificate
sparkplugClient.publishNodeBirth(getNodeBirthPayload())
// Publish Device BIRTH certificate
sparkplugClient.publishDeviceBirth(deviceId, getDeviceBirthPayload())
resolve({
stop: () => {
if (updateInterval) {
clearInterval(updateInterval)
}
sparkplugClient.stop()
},
})
})
})
})
// Create Incoming Message Handler
sparkplugClient.on('message', function (topic: string, payload: UPayload) {
console.log(topic, payload)
})
// Create Incoming Message Handler
sparkplugClient.on('message', (topic: string, payload: UPayload) => {
console.log(topic, payload)
})
// Create node command handler
// spell-checker: disable-next-line
sparkplugClient.on('ncmd', function (payload: UPayload) {
const timestamp = payload.timestamp,
metrics = payload.metrics
// Create node command handler
// spell-checker: disable-next-line
sparkplugClient.on('ncmd', (payload: UPayload) => {
const { timestamp } = payload
const { metrics } = payload
if (metrics !== undefined && metrics !== null) {
for (let i = 0; i < metrics.length; i++) {
const metric = metrics[i]
if (metric.name == 'Node Control/Rebirth' && metric.value) {
console.log("Received 'Rebirth' command")
// Publish Node BIRTH certificate
sparkplugClient.publishNodeBirth(getNodeBirthPayload())
// Publish Device BIRTH certificate
sparkplugClient.publishDeviceBirth(deviceId, getDeviceBirthPayload())
}
if (metrics !== undefined && metrics !== null) {
for (let i = 0; i < metrics.length; i++) {
const metric = metrics[i]
if (metric.name == 'Node Control/Rebirth' && metric.value) {
console.log("Received 'Rebirth' command")
// Publish Node BIRTH certificate
sparkplugClient.publishNodeBirth(getNodeBirthPayload())
// Publish Device BIRTH certificate
sparkplugClient.publishDeviceBirth(deviceId, getDeviceBirthPayload())
}
}
})
}
})
// Create device command handler
// spell-checker: disable-next-line
sparkplugClient.on('dcmd', function (deviceId: string, payload: UPayload) {
let timestamp = payload.timestamp,
metrics = payload.metrics,
inboundMetricMap: { [name: string]: any } = {},
outboundMetric: Array<UMetric> = [],
outboundPayload: UPayload
// Create device command handler
// spell-checker: disable-next-line
sparkplugClient.on('dcmd', (deviceId: string, payload: UPayload) => {
const { timestamp } = payload
const { metrics } = payload
const inboundMetricMap: { [name: string]: any } = {}
const outboundMetric: Array<UMetric> = []
let outboundPayload: UPayload
console.log('Command received for device ' + deviceId)
console.log(`Command received for device ${deviceId}`)
// Loop over the metrics and store them in a map
if (metrics !== undefined && metrics !== null) {
for (let i = 0; i < metrics.length; i++) {
const metric = metrics[i]
if (metric.name !== undefined && metric.name !== null) {
inboundMetricMap[metric.name] = metric.value
}
// Loop over the metrics and store them in a map
if (metrics !== undefined && metrics !== null) {
for (let i = 0; i < metrics.length; i++) {
const metric = metrics[i]
if (metric.name !== undefined && metric.name !== null) {
inboundMetricMap[metric.name] = metric.value
}
}
if (inboundMetricMap['Outputs/0'] !== undefined && inboundMetricMap['Outputs/0'] !== null) {
console.log('Outputs/0: ' + inboundMetricMap['Outputs/0'])
outboundMetric.push({ name: 'Inputs/0', value: inboundMetricMap['Outputs/0'], type: 'Boolean' })
outboundMetric.push({ name: 'Outputs/0', value: inboundMetricMap['Outputs/0'], type: 'Boolean' })
console.log('Updated value for Inputs/0 ' + inboundMetricMap['Outputs/0'])
} else if (inboundMetricMap['Outputs/1'] !== undefined && inboundMetricMap['Outputs/1'] !== null) {
console.log('Outputs/1: ' + inboundMetricMap['Outputs/1'])
outboundMetric.push({ name: 'Inputs/1', value: inboundMetricMap['Outputs/1'], type: 'Int32' })
outboundMetric.push({ name: 'Outputs/1', value: inboundMetricMap['Outputs/1'], type: 'Int32' })
console.log('Updated value for Inputs/1 ' + inboundMetricMap['Outputs/1'])
} else if (inboundMetricMap['Outputs/2'] !== undefined && inboundMetricMap['Outputs/2'] !== null) {
console.log('Outputs/2: ' + inboundMetricMap['Outputs/2'])
outboundMetric.push({ name: 'Inputs/2', value: inboundMetricMap['Outputs/2'], type: 'UInt64' })
outboundMetric.push({ name: 'Outputs/2', value: inboundMetricMap['Outputs/2'], type: 'UInt64' })
console.log('Updated value for Inputs/2 ' + inboundMetricMap['Outputs/2'])
}
}
if (inboundMetricMap['Outputs/0'] !== undefined && inboundMetricMap['Outputs/0'] !== null) {
console.log(`Outputs/0: ${inboundMetricMap['Outputs/0']}`)
outboundMetric.push({ name: 'Inputs/0', value: inboundMetricMap['Outputs/0'], type: 'Boolean' })
outboundMetric.push({ name: 'Outputs/0', value: inboundMetricMap['Outputs/0'], type: 'Boolean' })
console.log(`Updated value for Inputs/0 ${inboundMetricMap['Outputs/0']}`)
} else if (inboundMetricMap['Outputs/1'] !== undefined && inboundMetricMap['Outputs/1'] !== null) {
console.log(`Outputs/1: ${inboundMetricMap['Outputs/1']}`)
outboundMetric.push({ name: 'Inputs/1', value: inboundMetricMap['Outputs/1'], type: 'Int32' })
outboundMetric.push({ name: 'Outputs/1', value: inboundMetricMap['Outputs/1'], type: 'Int32' })
console.log(`Updated value for Inputs/1 ${inboundMetricMap['Outputs/1']}`)
} else if (inboundMetricMap['Outputs/2'] !== undefined && inboundMetricMap['Outputs/2'] !== null) {
console.log(`Outputs/2: ${inboundMetricMap['Outputs/2']}`)
outboundMetric.push({ name: 'Inputs/2', value: inboundMetricMap['Outputs/2'], type: 'UInt64' })
outboundMetric.push({ name: 'Outputs/2', value: inboundMetricMap['Outputs/2'], type: 'UInt64' })
console.log(`Updated value for Inputs/2 ${inboundMetricMap['Outputs/2']}`)
}
outboundPayload = {
timestamp: new Date().getTime(),
metrics: outboundMetric,
}
outboundPayload = {
timestamp: new Date().getTime(),
metrics: outboundMetric,
}
// Publish device data
sparkplugClient.publishDeviceData(deviceId, outboundPayload)
})
// Publish device data
sparkplugClient.publishDeviceData(deviceId, outboundPayload)
})
updateInterval = setInterval(function () {
// Publish device data
sparkplugClient.publishDeviceData(deviceId, getDataPayload())
}, 2000)
return connected
}
updateInterval = setInterval(() => {
// Publish device data
sparkplugClient.publishDeviceData(deviceId, getDataPayload())
}, 2000)
return connected
}
return { run }
})()

2
src/spec/scenarios/connect.ts
View File

@@ -1,5 +1,5 @@
import { clickOn, setTextInInput } from '../util'
import { Page } from 'playwright'
import { clickOn, setTextInInput } from '../util'
export async function connectTo(host: string, browser: Page) {
await setTextInInput('Host', host, browser)

6
src/spec/scenarios/showNumericPlot.ts
View File

@@ -5,11 +5,11 @@ export async function showNumericPlot(browser: Page) {
// On desktop, expandTopic will also select the topic (original behavior restored)
// This shows the JSON properties in the details panel where chart icons are located
await expandTopic('kitchen/coffee_maker', browser)
// Switch to Details tab to ensure ShowChart icons are visible
await switchToDetailsTab(browser)
await sleep(500)
let heater = await valuePreviewGuttersShowChartIcon('heater', browser)
await moveToCenterOfElement(heater)
await sleep(1000)
@@ -57,7 +57,7 @@ async function valuePreviewGuttersShowChartIcon(name: string, browser: Page) {
const locator = browser
.locator(`//*[contains(@data-test-type, "ShowChart")][contains(@data-test, "${name}")]`)
.first()
await locator.waitFor({ state: 'visible', timeout: 30000 })
return locator
}

22
src/spec/ui-tests-comprehensive.spec.ts
View File

@@ -1,6 +1,7 @@
import 'mocha'
import { expect } from 'chai'
import { ElectronApplication, Page, _electron as electron } from 'playwright'
import type { MqttClient } from 'mqtt'
import { createTestMock, stopTestMock } from './mock-mqtt-test'
import { default as MockSparkplug } from './mock-sparkplugb'
import { sleep, expandTopic } from './util'
@@ -15,7 +16,6 @@ import { showMenu } from './scenarios/showMenu'
import { showAdvancedConnectionSettings } from './scenarios/showAdvancedConnectionSettings'
import { showSparkPlugDecoding } from './scenarios/showSparkplugDecoding'
import { disconnect } from './scenarios/disconnect'
import type { MqttClient } from 'mqtt'
/**
* Comprehensive UI Test Suite for MQTT Explorer
@@ -153,7 +153,7 @@ describe('MQTT Explorer Comprehensive UI Tests', function () {
})
describe('Connection Management', () => {
it('should connect to MQTT broker successfully', async function () {
it('should connect to MQTT broker successfully', async () => {
// Given: Application is connected (from before hook)
// Then: Disconnect button should be visible (indicating connected state)
const disconnectButton = page.locator('//button/span[contains(text(),"Disconnect")]')
@@ -166,7 +166,7 @@ describe('MQTT Explorer Comprehensive UI Tests', function () {
})
describe('Topic Tree Structure', () => {
it('should display the correct number of root topics from mock data', async function () {
it('should display the correct number of root topics from mock data', async () => {
// Then: We should see expected root topics (livingroom, kitchen, garden, etc.)
const rootTopics = ['livingroom', 'kitchen', 'garden']
for (const topicName of rootTopics) {
@@ -181,7 +181,7 @@ describe('MQTT Explorer Comprehensive UI Tests', function () {
})
describe('Topic Navigation and Search', () => {
it('should search and filter topics containing "temp"', async function () {
it('should search and filter topics containing "temp"', async () => {
// When: User searches for "temp"
await searchTree('temp', page)
await sleep(1000)
@@ -205,7 +205,7 @@ describe('MQTT Explorer Comprehensive UI Tests', function () {
})
describe('Message Visualization', () => {
it('Given a JSON message on topic actuality/showcase, should display formatted JSON', async function () {
it('Given a JSON message on topic actuality/showcase, should display formatted JSON', async () => {
// showJsonPreview internally calls expandTopic, so we don't need to call it here
await showJsonPreview(page)
await sleep(1000)
@@ -213,7 +213,7 @@ describe('MQTT Explorer Comprehensive UI Tests', function () {
await page.screenshot({ path: 'test-screenshot-json-display.png' })
})
it('should show numeric plots for topics with numeric values', async function () {
it('should show numeric plots for topics with numeric values', async () => {
// When: We navigate to a numeric topic and show plot
await expandTopic('livingroom/temperature', page)
await sleep(500)
@@ -226,7 +226,7 @@ describe('MQTT Explorer Comprehensive UI Tests', function () {
})
describe('Clipboard Operations', () => {
it('should copy topic path to clipboard', async function () {
it('should copy topic path to clipboard', async () => {
// When: We copy topic to clipboard
await expandTopic('livingroom/lamp/state', page)
await sleep(500)
@@ -239,7 +239,7 @@ describe('MQTT Explorer Comprehensive UI Tests', function () {
})
describe('SparkplugB Support', () => {
it('Given SparkplugB messages, should decode and display the payload', async function () {
it('Given SparkplugB messages, should decode and display the payload', async () => {
// When: We show SparkplugB decoding
await showSparkPlugDecoding(page)
await sleep(1000)
@@ -249,7 +249,7 @@ describe('MQTT Explorer Comprehensive UI Tests', function () {
})
describe('Settings and Configuration', () => {
it('should show settings menu', async function () {
it('should show settings menu', async () => {
// When: We open settings menu
await showMenu(page)
await sleep(1000)
@@ -259,7 +259,7 @@ describe('MQTT Explorer Comprehensive UI Tests', function () {
})
describe('Retained Messages', () => {
it('Given retained messages on multiple topics, should display retained indicator', async function () {
it('Given retained messages on multiple topics, should display retained indicator', async () => {
// When: We navigate to a topic with retained message
await expandTopic('garden/pump/state', page)
await sleep(500)
@@ -273,7 +273,7 @@ describe('MQTT Explorer Comprehensive UI Tests', function () {
})
describe('Special Topic Names and Characters', () => {
it('Given topic with MAC address format (01-80-C2-00-00-0F/LWT), should display correctly', async function () {
it('Given topic with MAC address format (01-80-C2-00-00-0F/LWT), should display correctly', async () => {
// When: We look for the MAC address topic
const macTopic = page.locator('span[data-test-topic="01-80-C2-00-00-0F"]').first()
await macTopic.waitFor({ state: 'visible', timeout: 5000 })

31
src/spec/ui-tests.spec.ts
View File

@@ -1,13 +1,13 @@
import 'mocha'
import { expect } from 'chai'
import { Browser, BrowserContext, ElectronApplication, Page, _electron as electron, chromium } from 'playwright'
import type { MqttClient } from 'mqtt'
import { createTestMock, stopTestMock } from './mock-mqtt-test'
import { default as MockSparkplug } from './mock-sparkplugb'
import { sleep } from './util'
import { connectTo } from './scenarios/connect'
import { searchTree, clearSearch } from './scenarios/searchTree'
import { expandTopic } from './util/expandTopic'
import type { MqttClient } from 'mqtt'
/**
* MQTT Explorer UI Tests
@@ -61,7 +61,7 @@ describe('MQTT Explorer UI Tests', function () {
throw new Error('BROWSER_MODE_URL environment variable must be set when running in browser mode')
}
console.log(`Browser URL: ${browserUrl}`)
// Check if mobile viewport should be used
const useMobileViewport = process.env.USE_MOBILE_VIEWPORT === 'true'
console.log(`Mobile viewport: ${useMobileViewport}`)
@@ -76,14 +76,15 @@ describe('MQTT Explorer UI Tests', function () {
const contextOptions: any = {
permissions: ['clipboard-read', 'clipboard-write'],
}
if (useMobileViewport) {
// Use same viewport as mobile demo (Pixel 6)
contextOptions.viewport = {
width: 412,
height: 914,
}
contextOptions.userAgent = 'Mozilla/5.0 (Linux; Android 12; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Mobile Safari/537.36'
contextOptions.userAgent =
'Mozilla/5.0 (Linux; Android 12; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Mobile Safari/537.36'
console.log('Using mobile viewport: 412x914 (Pixel 6)')
} else {
// Desktop viewport - ensure width > 768px so mobile UI doesn't activate
@@ -179,17 +180,15 @@ describe('MQTT Explorer UI Tests', function () {
if (browser) {
await browser.close()
}
} else {
if (electronApp) {
await electronApp.close()
}
} else if (electronApp) {
await electronApp.close()
}
stopTestMock()
})
describe('Connection Management', () => {
it('should connect and expand livingroom/lamp topic', async function () {
it('should connect and expand livingroom/lamp topic', async () => {
// Given: Connected to broker with topics loaded
// When: Expand topic
await expandTopic('livingroom/lamp', page)
@@ -204,7 +203,7 @@ describe('MQTT Explorer UI Tests', function () {
})
describe('Topic Tree Structure', () => {
it('should expand and display kitchen/coffee_maker with JSON payload', async function () {
it('should expand and display kitchen/coffee_maker with JSON payload', async () => {
// Given: Connected to broker with kitchen/coffee_maker topic
// When: Expand topic
await expandTopic('kitchen/coffee_maker', page)
@@ -217,7 +216,7 @@ describe('MQTT Explorer UI Tests', function () {
await page.screenshot({ path: 'test-screenshot-kitchen-json.png' })
})
it('should expand nested topic livingroom/lamp/state', async function () {
it('should expand nested topic livingroom/lamp/state', async () => {
// Given: Connected to broker with nested topics
// When: Expand to nested topic
await expandTopic('livingroom/lamp/state', page)
@@ -232,7 +231,7 @@ describe('MQTT Explorer UI Tests', function () {
})
describe('Search Functionality', () => {
it('should search for temperature and expand kitchen/temperature', async function () {
it('should search for temperature and expand kitchen/temperature', async () => {
// Given: Connected to broker with temperature topics
// When: Search and expand
await searchTree('temp', page)
@@ -249,7 +248,7 @@ describe('MQTT Explorer UI Tests', function () {
await page.screenshot({ path: 'test-screenshot-search-temp.png' })
})
it('should search for lamp and expand kitchen/lamp', async function () {
it('should search for lamp and expand kitchen/lamp', async () => {
// Given: Connected to broker with lamp topics
// When: Search and expand
await searchTree('kitchen/lamp', page)
@@ -268,7 +267,7 @@ describe('MQTT Explorer UI Tests', function () {
})
describe('Clipboard Operations', () => {
it('should copy topic path to clipboard in both Electron and browser modes', async function () {
it('should copy topic path to clipboard in both Electron and browser modes', async () => {
// Given: A topic is selected
await clearSearch(page)
await sleep(1000)
@@ -318,7 +317,7 @@ describe('MQTT Explorer UI Tests', function () {
await page.screenshot({ path: 'test-screenshot-copy-topic.png' })
})
it('should copy message value to clipboard in both Electron and browser modes', async function () {
it('should copy message value to clipboard in both Electron and browser modes', async () => {
// Given: A topic with a value is selected (reuse already expanded topic)
// When: Copy value button is clicked (the second copy button in the value section)
const copyButtons = page.getByTestId('copy-button')
@@ -363,7 +362,7 @@ describe('MQTT Explorer UI Tests', function () {
})
describe('File Save/Download Operations', () => {
it('should save/download message to file in both Electron and browser modes', async function () {
it('should save/download message to file in both Electron and browser modes', async () => {
// Given: A topic with a message is already selected from previous test
await sleep(500)

22
src/spec/util/expandTopic.ts
View File

@@ -1,5 +1,5 @@
import { clickOn } from './'
import { Page, Locator } from 'playwright'
import { clickOn } from '.'
// Time to wait after clicking a topic for the tree to expand and render children
// Increased to 1000ms to handle sequential test execution where UI might be slower
@@ -18,7 +18,7 @@ export async function expandTopic(path: string, browser: Page) {
const isMobileViewport = viewport && viewport.width <= 768
// Expand each level of the topic tree one at a time
// Strategy:
// Strategy:
// - Desktop: Click topic text (selects + expands, original behavior)
// - Mobile: Click expand button only (doesn't select, mobile-specific behavior)
for (let i = 0; i < topics.length; i += 1) {
@@ -69,10 +69,10 @@ export async function expandTopic(path: string, browser: Page) {
// Navigate to the parent span (TreeNodeTitle container) and find the expander
const parentSpan = topicLocator.locator('..')
const expandButton = parentSpan.locator('span.expander, span[class*="expander"]')
const expandButtonCount = await expandButton.count()
const isLastTopic = i === topics.length - 1
// Only click expand button if it exists (topics with children)
// Topics without children don't have an expand button
if (expandButtonCount > 0) {
@@ -85,7 +85,7 @@ export async function expandTopic(path: string, browser: Page) {
// Check if already expanded (▼ means expanded, ▶ means collapsed)
const buttonText = await expandButton.textContent()
const isCollapsed = buttonText?.includes('▶')
if (isCollapsed) {
console.log(`Expanding topic: ${topicName}`)
// Click the expand button to expand this level
@@ -104,27 +104,27 @@ export async function expandTopic(path: string, browser: Page) {
} else {
// DESKTOP: Click the topic text (original behavior - selects + expands)
console.log(`Clicking topic text to expand: ${topicName}`)
// Scroll into view
await topicLocator.scrollIntoViewIfNeeded()
await new Promise(resolve => setTimeout(resolve, 200))
// Check if topic has children that can be expanded
const parentSpan = topicLocator.locator('..')
const expandButton = parentSpan.locator('span.expander, span[class*="expander"]')
const hasExpandButton = await expandButton.count() > 0
const hasExpandButton = (await expandButton.count()) > 0
const isLastTopic = i === topics.length - 1
if (hasExpandButton) {
// Check if already expanded
const buttonText = await expandButton.textContent()
const isCollapsed = buttonText?.includes('▶')
if (isCollapsed) {
console.log(`Topic ${topicName} is collapsed, clicking to expand`)
// Click the topic text - on desktop this selects AND toggles expansion
await clickOn(topicLocator, 1, 0, 'left', false)
// Give the UI time to expand and render child topics
await new Promise(resolve => setTimeout(resolve, TREE_EXPANSION_DELAY_MS))
} else {

15
src/spec/util/index.ts
View File

@@ -46,7 +46,7 @@ export async function setTextInInput(name: string, text: string, browser: Page)
`//div[contains(@class, 'MuiTextField')]//label[contains(text(), "${name}")]/..//input`,
`//input[@name="${name.toLowerCase()}"]`,
]
let input: Locator | null = null
for (const selector of selectors) {
const locator = browser.locator(selector)
@@ -56,7 +56,7 @@ export async function setTextInInput(name: string, text: string, browser: Page)
break
}
}
if (!input) {
throw new Error(`Could not find input for label "${name}"`)
}
@@ -88,8 +88,8 @@ export async function moveToCenterOfElement(element: Locator) {
await runJavascript(js, element.page())
// IMPORTANT: Wait for animation to complete before returning
// The animation duration + a small buffer for frame rendering
await sleep(duration, true) // Use required=true to ensure we actually wait
await sleep(100, true) // Extra buffer for the last frame
await sleep(duration, true) // Use required=true to ensure we actually wait
await sleep(100, true) // Extra buffer for the last frame
} catch (error) {
// window.demo.moveMouse might not be available in all test environments
// This is fine - we'll proceed with the click anyway
@@ -138,7 +138,12 @@ export async function clickOn(
}
}
// Click happens after simulated cursor has reached its destination
await element.click({ delay, button, force, clickCount: clicks })
await element.click({
delay,
button,
force,
clickCount: clicks,
})
await sleep(50)
}

6
src/spec/util/selectTopic.ts
View File

@@ -1,17 +1,17 @@
import { clickOn } from './'
import { Page, Locator } from 'playwright'
import { clickOn } from '.'
/**
* Selects a topic by clicking on its text (not the expand button)
* On mobile, this will also switch to the Details tab automatically
*
*
* @param path - Topic path like "mqtt/topic/name" or just "topicname"
* @param browser - Playwright Page object
*/
export async function selectTopic(path: string, browser: Page) {
const topics = path.split('/')
const topicName = topics[topics.length - 1] // Get the last topic in the path
console.log('selectTopic', topicName, 'from path', path)
// Find the topic by its data-test-topic attribute