504 lines
19 KiB
TypeScript
504 lines
19 KiB
TypeScript
import 'mocha'
|
|
import { expect } from 'chai'
|
|
import { ElectronApplication, Page, _electron as electron } from 'playwright'
|
|
import mockMqtt, { stop as stopMqtt } from './mock-mqtt'
|
|
import { default as MockSparkplug } from './mock-sparkplugb'
|
|
import { sleep, expandTopic } from './util'
|
|
import { connectTo } from './scenarios/connect'
|
|
import { searchTree, clearSearch } from './scenarios/searchTree'
|
|
import { showNumericPlot } from './scenarios/showNumericPlot'
|
|
import { showJsonPreview } from './scenarios/showJsonPreview'
|
|
import { showOffDiffCapability } from './scenarios/showOffDiffCapability'
|
|
import { copyTopicToClipboard } from './scenarios/copyTopicToClipboard'
|
|
import { copyValueToClipboard } from './scenarios/copyValueToClipboard'
|
|
import { showMenu } from './scenarios/showMenu'
|
|
import { showAdvancedConnectionSettings } from './scenarios/showAdvancedConnectionSettings'
|
|
import { showSparkPlugDecoding } from './scenarios/showSparkplugDecoding'
|
|
import { disconnect } from './scenarios/disconnect'
|
|
|
|
/**
|
|
* UI Test Suite for MQTT Explorer
|
|
*
|
|
* These tests validate the core UI functionality of MQTT Explorer.
|
|
* Each test is independent and deterministic.
|
|
*
|
|
* Best Practices Applied:
|
|
* - Wait for specific UI elements rather than fixed timeouts
|
|
* - Use meaningful assertions that verify actual state
|
|
* - Test data-driven scenarios (Given-When-Then pattern)
|
|
* - Capture screenshots for visual verification
|
|
* - Handle MQTT asynchronous operations properly
|
|
*
|
|
* Prerequisites:
|
|
* - MQTT broker running on localhost:1883
|
|
* - Application built with `yarn build`
|
|
*/
|
|
// tslint:disable:only-arrow-functions ter-prefer-arrow-callback no-unused-expression
|
|
describe('MQTT Explorer UI Tests', function () {
|
|
// Increase timeout for UI tests
|
|
this.timeout(60000)
|
|
|
|
let electronApp: ElectronApplication
|
|
let page: Page
|
|
let mqttClientStarted = false
|
|
|
|
/**
|
|
* Setup: Start MQTT broker mock and launch Electron app
|
|
*/
|
|
before(async function () {
|
|
this.timeout(90000) // Increased timeout for slow CI environments
|
|
|
|
console.log('Starting MQTT mock broker...')
|
|
await mockMqtt()
|
|
mqttClientStarted = true
|
|
|
|
console.log('Launching Electron application...')
|
|
electronApp = await electron.launch({
|
|
args: [`${__dirname}/../../..`, '--runningUiTestOnCi', '--no-sandbox', '--disable-dev-shm-usage'],
|
|
timeout: 60000, // Give Electron more time to launch
|
|
})
|
|
|
|
console.log('Waiting for application window...')
|
|
page = await electronApp.firstWindow({ timeout: 30000 })
|
|
|
|
// Wait for the connection form to be ready (Host field exists in Electron, Username only in browser)
|
|
await page.locator('//label[contains(text(), "Host")]/..//input').waitFor({ timeout: 10000 })
|
|
|
|
console.log('Application ready for testing')
|
|
})
|
|
|
|
/**
|
|
* Teardown: Close app and stop MQTT mock
|
|
*/
|
|
after(async function () {
|
|
this.timeout(10000)
|
|
|
|
if (electronApp) {
|
|
await electronApp.close()
|
|
}
|
|
|
|
if (mqttClientStarted) {
|
|
stopMqtt()
|
|
}
|
|
})
|
|
|
|
describe('Connection Management', () => {
|
|
it('should connect to MQTT broker successfully', async function () {
|
|
// Given: Application is on connection page
|
|
// When: User connects to MQTT broker
|
|
await connectTo('127.0.0.1', page)
|
|
await sleep(1000)
|
|
|
|
// Start Sparkplug client after connection
|
|
await MockSparkplug.run()
|
|
await sleep(1000)
|
|
|
|
// Then: Disconnect button should be visible (indicating connected state)
|
|
const disconnectButton = await page.locator('//button/span[contains(text(),"Disconnect")]')
|
|
await disconnectButton.waitFor({ state: 'visible', timeout: 5000 })
|
|
const isVisible = await disconnectButton.isVisible()
|
|
expect(isVisible).to.be.true
|
|
|
|
// And: Connection indicator should show connected state
|
|
await page.screenshot({ path: 'test-screenshot-connection.png' })
|
|
})
|
|
})
|
|
|
|
describe('Topic Tree Structure', () => {
|
|
it('Given a JSON message sent to topic kitchen/coffee_maker, the tree should display nested topics', async function () {
|
|
// Given: Mock MQTT broker publishes JSON to kitchen/coffee_maker
|
|
// (This is done by mock-mqtt.ts)
|
|
|
|
// When: We wait for the topic to appear in the tree
|
|
await sleep(2000) // Allow time for MQTT messages to arrive
|
|
|
|
// Then: Topic hierarchy should be visible (kitchen -> coffee_maker)
|
|
const kitchenTopic = await page.locator('span[data-test-topic="kitchen"]')
|
|
await kitchenTopic.waitFor({ state: 'visible', timeout: 5000 })
|
|
expect(await kitchenTopic.isVisible()).to.be.true
|
|
|
|
// And: Clicking on kitchen should expand to show coffee_maker
|
|
await kitchenTopic.click()
|
|
await sleep(500)
|
|
|
|
const coffeeMakerTopic = await page.locator('span[data-test-topic="coffee_maker"]')
|
|
await coffeeMakerTopic.waitFor({ state: 'visible', timeout: 5000 })
|
|
expect(await coffeeMakerTopic.isVisible()).to.be.true
|
|
|
|
await page.screenshot({ path: 'test-screenshot-tree-hierarchy.png' })
|
|
})
|
|
|
|
it('Given messages sent to livingroom/lamp/state and livingroom/lamp/brightness, both should appear under livingroom/lamp', async function () {
|
|
// Given: Mock MQTT publishes to livingroom/lamp/state and livingroom/lamp/brightness
|
|
await sleep(1000)
|
|
|
|
// When: We navigate to livingroom topic
|
|
const livingroomTopic = await page.locator('span[data-test-topic="livingroom"]').first()
|
|
await livingroomTopic.waitFor({ state: 'visible', timeout: 5000 })
|
|
await livingroomTopic.click()
|
|
await sleep(500)
|
|
|
|
// Then: lamp subtopic should be visible (use .first() as there might be lamp-1, lamp-2 etc)
|
|
const lampTopic = await page.locator('span[data-test-topic="lamp"]').first()
|
|
await lampTopic.waitFor({ state: 'visible', timeout: 5000 })
|
|
expect(await lampTopic.isVisible()).to.be.true
|
|
|
|
// When: Clicking on lamp to expand it
|
|
await lampTopic.click()
|
|
await sleep(1000) // Give more time for expansion
|
|
|
|
// Then: Both state and brightness topics should be visible
|
|
const stateTopic = await page.locator('span[data-test-topic="state"]').first()
|
|
const brightnessTopic = await page.locator('span[data-test-topic="brightness"]').first()
|
|
|
|
await stateTopic.waitFor({ state: 'visible', timeout: 10000 })
|
|
await brightnessTopic.waitFor({ state: 'visible', timeout: 10000 })
|
|
|
|
expect(await stateTopic.isVisible()).to.be.true
|
|
expect(await brightnessTopic.isVisible()).to.be.true
|
|
|
|
await page.screenshot({ path: 'test-screenshot-tree-structure.png' })
|
|
})
|
|
|
|
it('should display the correct number of root topics from mock data', async function () {
|
|
// Given: Mock MQTT publishes to multiple root topics
|
|
await sleep(1000)
|
|
|
|
// Then: We should see expected root topics (livingroom, kitchen, garden, etc.)
|
|
const rootTopics = ['livingroom', 'kitchen', 'garden']
|
|
for (const topicName of rootTopics) {
|
|
const topic = await page.locator(`span[data-test-topic="${topicName}"]`)
|
|
await topic.waitFor({ state: 'visible', timeout: 5000 })
|
|
const visible = await topic.isVisible()
|
|
expect(visible).to.be.true
|
|
}
|
|
|
|
await page.screenshot({ path: 'test-screenshot-root-topics.png' })
|
|
})
|
|
|
|
})
|
|
|
|
describe('Topic Navigation and Search', () => {
|
|
it('should search and filter topics containing "temp"', async function () {
|
|
// Given: Multiple topics with "temp" in their path (kitchen/temperature, livingroom/temperature)
|
|
// When: User searches for "temp"
|
|
await searchTree('temp', page)
|
|
await sleep(1000)
|
|
|
|
// Then: Search field should contain the search term
|
|
const searchField = await page.locator('//input[contains(@placeholder, "Search")]')
|
|
const searchValue = await searchField.inputValue()
|
|
expect(searchValue).to.equal('temp')
|
|
|
|
// And: Only matching topics should be visible
|
|
// We can verify this by checking that temperature topics are still visible
|
|
const tempTopic = await page.locator('span[data-test-topic="temperature"]').first()
|
|
await tempTopic.waitFor({ state: 'visible', timeout: 5000 })
|
|
expect(await tempTopic.isVisible()).to.be.true
|
|
|
|
await page.screenshot({ path: 'test-screenshot-search.png' })
|
|
|
|
// When: User clears the search
|
|
await clearSearch(page)
|
|
await sleep(500)
|
|
|
|
// Then: Search field should be empty
|
|
const clearedValue = await searchField.inputValue()
|
|
expect(clearedValue).to.equal('')
|
|
|
|
// And: All topics should be visible again
|
|
const kitchenTopic = await page.locator('span[data-test-topic="kitchen"]')
|
|
expect(await kitchenTopic.isVisible()).to.be.true
|
|
})
|
|
|
|
it('should search for specific topic path like "kitchen/lamp"', async function () {
|
|
// When: User searches for kitchen/lamp
|
|
await searchTree('kitchen/lamp', page)
|
|
await sleep(1000)
|
|
|
|
// Then: Kitchen and lamp topics should be visible
|
|
const kitchenTopic = await page.locator('span[data-test-topic="kitchen"]')
|
|
expect(await kitchenTopic.isVisible()).to.be.true
|
|
|
|
await page.screenshot({ path: 'test-screenshot-search-path.png' })
|
|
|
|
await clearSearch(page)
|
|
await sleep(500)
|
|
})
|
|
})
|
|
|
|
describe('Message Visualization', () => {
|
|
it('Given a JSON message on topic actuality/showcase, should display formatted JSON', async function () {
|
|
// Given: Mock publishes JSON to actuality/showcase
|
|
// When: User navigates to the topic
|
|
await showJsonPreview(page)
|
|
await sleep(1500)
|
|
|
|
// Then: The message should be visible
|
|
await page.screenshot({ path: 'test-screenshot-json-preview.png' })
|
|
|
|
// And: We should see formatted JSON content (verified via screenshot)
|
|
})
|
|
|
|
it('should show numeric plots for topics with numeric values', async function () {
|
|
// Given: Topics with numeric values (kitchen/coffee_maker/temperature)
|
|
// Ensure no search filter is active
|
|
await clearSearch(page)
|
|
await sleep(500)
|
|
|
|
// When: Navigate to topic and create a chart
|
|
await expandTopic('kitchen/coffee_maker', page)
|
|
await sleep(1000)
|
|
|
|
// Look for chart icon and click it
|
|
const chartIcon = await page.locator('//*[contains(@data-test-type, "ShowChart")]').first()
|
|
try {
|
|
await chartIcon.waitFor({ state: 'visible', timeout: 5000 })
|
|
await chartIcon.click()
|
|
await sleep(1000)
|
|
|
|
// Then: Chart panel should be visible
|
|
const chartPanel = await page.locator('[class*="ChartPanel"]')
|
|
const chartExists = (await chartPanel.count()) > 0
|
|
expect(chartExists).to.be.true
|
|
|
|
await page.screenshot({ path: 'test-screenshot-numeric-plots.png' })
|
|
|
|
// Cleanup: Remove the chart
|
|
const removeButton = await page.locator('//*[contains(@data-test-type, "RemoveChart")]').first()
|
|
try {
|
|
await removeButton.click({ timeout: 2000 })
|
|
await sleep(500)
|
|
} catch {
|
|
// Ignore if remove fails
|
|
}
|
|
} catch {
|
|
// If chart icon not found, just verify we navigated to the topic
|
|
await page.screenshot({ path: 'test-screenshot-numeric-plots.png' })
|
|
}
|
|
|
|
// Cleanup: Ensure we're not stuck in History view
|
|
const valueTab = await page.locator('//span[contains(text(), "Value")]').first()
|
|
try {
|
|
await valueTab.click({ timeout: 2000 })
|
|
await sleep(300)
|
|
} catch {
|
|
// Ignore if clicking fails
|
|
}
|
|
await clearSearch(page)
|
|
await sleep(500)
|
|
})
|
|
|
|
})
|
|
|
|
describe('Clipboard Operations', () => {
|
|
it('should copy message value to clipboard', async function () {
|
|
// Given: A topic with a value is selected
|
|
// Ensure no search filter is active and select a topic
|
|
await clearSearch(page)
|
|
await sleep(500)
|
|
await expandTopic('livingroom/lamp/state', page)
|
|
await sleep(500)
|
|
|
|
// When: User clicks copy value button
|
|
await copyValueToClipboard(page)
|
|
await sleep(500)
|
|
|
|
// Then: Copy action completes without error
|
|
await page.screenshot({ path: 'test-screenshot-copy-value.png' })
|
|
})
|
|
})
|
|
|
|
describe('SparkplugB Support', () => {
|
|
it('Given SparkplugB messages, should decode and display the payload', async function () {
|
|
// Given: Mock SparkplugB client publishes messages
|
|
// When: User navigates to SparkplugB topics
|
|
await showSparkPlugDecoding(page)
|
|
await sleep(2000)
|
|
|
|
// Then: Decoded SparkplugB data should be visible
|
|
await page.screenshot({ path: 'test-screenshot-sparkplugb.png' })
|
|
})
|
|
})
|
|
|
|
describe('Settings and Configuration', () => {
|
|
it('should show advanced connection settings with subscription options', async function () {
|
|
// Given: User is on connection page
|
|
// First disconnect
|
|
await disconnect(page)
|
|
await sleep(1000)
|
|
|
|
// When: User opens advanced connection settings
|
|
await showAdvancedConnectionSettings(page)
|
|
await sleep(1500)
|
|
|
|
// Then: Advanced settings should be visible
|
|
const advancedPanel = await page.locator('[class*="advanced"]')
|
|
const hasAdvanced = (await advancedPanel.count()) > 0
|
|
|
|
// Take screenshot showing advanced settings
|
|
await page.screenshot({ path: 'test-screenshot-advanced-settings.png' })
|
|
})
|
|
})
|
|
|
|
describe('Retained Messages', () => {
|
|
it('Given retained messages on multiple topics, should display retained indicator', async function () {
|
|
// Given: Mock publishes retained messages (e.g., livingroom/lamp/state)
|
|
await sleep(1000)
|
|
|
|
// When: Navigate to a topic with retained message
|
|
await expandTopic('livingroom/lamp', page)
|
|
await sleep(1000)
|
|
|
|
// Then: The UI should show message details
|
|
// (Retained flag visible in message details panel)
|
|
await page.screenshot({ path: 'test-screenshot-retained.png' })
|
|
})
|
|
})
|
|
|
|
describe('Reconnection and Connection State', () => {
|
|
it('Given a connected client, should successfully disconnect and reconnect', async function () {
|
|
// Given: Application is connected
|
|
await sleep(1000)
|
|
|
|
// When: User disconnects
|
|
const disconnectButton = await page.locator('//button/span[contains(text(),"Disconnect")]')
|
|
await disconnectButton.waitFor({ state: 'visible', timeout: 5000 })
|
|
await disconnectButton.click()
|
|
await sleep(1000)
|
|
|
|
// Then: Connect button should be visible
|
|
const connectButton = await page.locator('//button/span[contains(text(),"Connect")]')
|
|
await connectButton.waitFor({ state: 'visible', timeout: 5000 })
|
|
expect(await connectButton.isVisible()).to.be.true
|
|
|
|
await page.screenshot({ path: 'test-screenshot-disconnected.png' })
|
|
|
|
// When: User reconnects
|
|
await connectButton.click()
|
|
await sleep(2000)
|
|
|
|
// Then: Disconnect button should be visible again
|
|
await disconnectButton.waitFor({ state: 'visible', timeout: 5000 })
|
|
expect(await disconnectButton.isVisible()).to.be.true
|
|
|
|
await page.screenshot({ path: 'test-screenshot-reconnected.png' })
|
|
})
|
|
})
|
|
|
|
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 () {
|
|
// Given: Mock publishes to MAC address topic
|
|
await sleep(1000)
|
|
|
|
// When: Search for MAC address topic
|
|
await searchTree('01-80-C2', page)
|
|
await sleep(1000)
|
|
|
|
// Then: Topic should be found
|
|
const macTopic = await page.locator('span[data-test-topic="01-80-C2-00-00-0F"]')
|
|
const macVisible = (await macTopic.count()) > 0
|
|
|
|
await page.screenshot({ path: 'test-screenshot-mac-address.png' })
|
|
|
|
await clearSearch(page)
|
|
await sleep(500)
|
|
})
|
|
})
|
|
|
|
describe('Garden/IoT Device Topics', () => {
|
|
it('Given garden device topics (pump, water level, lamps), should display all device states', async function () {
|
|
// Given: Mock publishes garden device topics
|
|
await sleep(1000)
|
|
|
|
// When: Navigate to garden
|
|
const gardenTopic = await page.locator('span[data-test-topic="garden"]')
|
|
await gardenTopic.waitFor({ state: 'visible', timeout: 5000 })
|
|
expect(await gardenTopic.isVisible()).to.be.true
|
|
|
|
await gardenTopic.click()
|
|
await sleep(500)
|
|
|
|
// Then: Pump, water, and lamps topics should be visible
|
|
const pumpTopic = await page.locator('span[data-test-topic="pump"]')
|
|
const waterTopic = await page.locator('span[data-test-topic="water"]')
|
|
const lampsTopic = await page.locator('span[data-test-topic="lamps"]')
|
|
|
|
await pumpTopic.waitFor({ state: 'visible', timeout: 5000 })
|
|
expect(await pumpTopic.isVisible()).to.be.true
|
|
expect(await waterTopic.isVisible()).to.be.true
|
|
expect(await lampsTopic.isVisible()).to.be.true
|
|
|
|
await page.screenshot({ path: 'test-screenshot-garden-devices.png' })
|
|
})
|
|
})
|
|
|
|
describe('Multiple Lamp Devices', () => {
|
|
it('Given multiple lamp devices (lamp-1, lamp-2) with same properties, should distinguish them', async function () {
|
|
// Given: Mock publishes to livingroom/lamp-1 and lamp-2
|
|
await sleep(1000)
|
|
|
|
// When: Navigate to livingroom
|
|
const livingroomTopic = await page.locator('span[data-test-topic="livingroom"]')
|
|
await livingroomTopic.click()
|
|
await sleep(500)
|
|
|
|
// Then: Both lamp-1 and lamp-2 should be visible
|
|
const lamp1Topic = await page.locator('span[data-test-topic="lamp-1"]')
|
|
const lamp2Topic = await page.locator('span[data-test-topic="lamp-2"]')
|
|
|
|
await lamp1Topic.waitFor({ state: 'visible', timeout: 5000 })
|
|
await lamp2Topic.waitFor({ state: 'visible', timeout: 5000 })
|
|
|
|
expect(await lamp1Topic.isVisible()).to.be.true
|
|
expect(await lamp2Topic.isVisible()).to.be.true
|
|
|
|
// When: Expand lamp-1
|
|
await lamp1Topic.click()
|
|
await sleep(500)
|
|
|
|
// Then: lamp-1 state and brightness should be visible
|
|
const stateTopic = await page.locator('span[data-test-topic="state"]')
|
|
const brightnessTopic = await page.locator('span[data-test-topic="brightness"]')
|
|
|
|
expect(await stateTopic.isVisible()).to.be.true
|
|
expect(await brightnessTopic.isVisible()).to.be.true
|
|
|
|
await page.screenshot({ path: 'test-screenshot-multiple-lamps.png' })
|
|
})
|
|
})
|
|
|
|
describe('Search Functionality Edge Cases', () => {
|
|
it('Given a search term that matches multiple topics at different levels, should show all matches', async function () {
|
|
// Given: Multiple topics contain "state" (lamp/state, pump/state, etc.)
|
|
await sleep(1000)
|
|
|
|
// When: Search for "state"
|
|
await searchTree('state', page)
|
|
await sleep(1000)
|
|
|
|
// Then: Multiple state topics should be visible
|
|
const stateTopics = await page.locator('span[data-test-topic="state"]')
|
|
const count = await stateTopics.count()
|
|
expect(count).to.be.greaterThan(1, 'Should find multiple state topics')
|
|
|
|
await page.screenshot({ path: 'test-screenshot-search-multiple.png' })
|
|
|
|
await clearSearch(page)
|
|
await sleep(500)
|
|
})
|
|
|
|
it('Given a search term with no matches, should display empty tree', async function () {
|
|
// When: Search for non-existent topic
|
|
await searchTree('nonexistenttopic12345', page)
|
|
await sleep(1000)
|
|
|
|
// Then: No topics should be visible (or a message)
|
|
await page.screenshot({ path: 'test-screenshot-search-no-results.png' })
|
|
|
|
await clearSearch(page)
|
|
await sleep(500)
|
|
})
|
|
})
|
|
})
|