Add tests

Fix bug on reload with promote flag not set

browser_tests/fixtures/components/PropertiesPanel.ts

@@ -0,0 +1,97 @@
+import type { Locator, Page } from '@playwright/test'
+
+export class PropertiesPanel {
+  readonly root: Locator
+  readonly panelTitle: Locator
+  readonly searchBox: Locator
+
+  constructor(readonly page: Page) {
+    this.root = page.getByTestId('properties-panel')
+    this.panelTitle = this.root.locator('h3')
+    this.searchBox = this.root.getByPlaceholder('Search...')
+  }
+
+  async ensureOpen() {
+    const isOpen = await this.root.isVisible()
+    if (!isOpen) {
+      await this.page.getByLabel('Toggle properties panel').click()
+      await this.root.waitFor({ state: 'visible' })
+    }
+  }
+
+  async close() {
+    const isOpen = await this.root.isVisible()
+    if (isOpen) {
+      await this.page.getByLabel('Toggle properties panel').click()
+      await this.root.waitFor({ state: 'hidden' })
+    }
+  }
+
+  async promoteWidget(widgetName: string) {
+    await this.ensureOpen()
+
+    // Click on Advanced Inputs to expand it
+    const advancedInputsButton = this.root
+      .getByRole('button')
+      .filter({ hasText: /advanced inputs/i })
+    await advancedInputsButton.click()
+
+    // Find the widget row and click the more options button
+    const widgetRow = this.root
+      .locator('[class*="widget-item"], [class*="input-item"]')
+      .filter({ hasText: widgetName })
+      .first()
+
+    const moreButton = widgetRow.locator('button').filter({
+      has: this.page.locator('[class*="lucide--more-vertical"]')
+    })
+    await moreButton.click()
+
+    // Click "Show input" to promote the widget
+    await this.page.getByText('Show input').click()
+
+    // Close and reopen panel to refresh the UI state
+    await this.page.getByLabel('Toggle properties panel').click()
+    await this.page.getByLabel('Toggle properties panel').click()
+  }
+
+  async demoteWidget(widgetName: string) {
+    await this.ensureOpen()
+
+    // Check if INPUTS section content is already visible
+    const inputsContent = this.root.locator('div').filter({
+      hasText: new RegExp(`^${widgetName}$`)
+    })
+    const isInputsExpanded = await inputsContent.first().isVisible()
+
+    if (!isInputsExpanded) {
+      // Click on INPUTS section to expand it (where promoted widgets appear)
+      const inputsButton = this.root
+        .getByRole('button')
+        .filter({ hasText: /^inputs$/i })
+      await inputsButton.click()
+    }
+
+    // Find the widget row and click the more options button
+    const widgetRow = this.root
+      .locator('div')
+      .filter({ hasText: new RegExp(`^${widgetName}$`) })
+      .first()
+
+    await widgetRow.waitFor({ state: 'visible', timeout: 5000 })
+
+    // Find the more options button (the vertical dots icon button)
+    const moreButton = widgetRow
+      .locator('..')
+      .locator('button')
+      .filter({
+        has: this.page.locator('[class*="more-vertical"], [class*="lucide"]')
+      })
+      .first()
+
+    await moreButton.click()
+
+    // Click "Hide input" to demote the widget
+    await this.page.getByText('Hide input').click()
+  }
+}

browser_tests/fixtures/components/Topbar.ts

@@ -60,6 +60,11 @@ export class Topbar {
     await tab.locator('.close-button').click({ force: true })
   }
 
+  async switchToTab(index: number) {
+    const tabs = this.page.locator('.workflow-tabs button')
+    await tabs.nth(index).click()
+  }
+
   getSaveDialog(): Locator {
     return this.page.locator('.p-dialog-content input')
   }