refactor & improvements

frontend/tests/visual/editor.spec.ts

@@ -0,0 +1,63 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Editor Visual Tests', () => {
+  test('full editor renders correctly', async ({ page }) => {
+    await page.goto('/')
+
+    // Wait for the editor to fully load (WASM + layout)
+    await page.waitForSelector('.dreport-editor', { timeout: 15000 })
+
+    // Wait for layout to render (layout renderer should have elements)
+    await page.waitForSelector('.layout-renderer div[style]', { timeout: 10000 })
+
+    // Small delay for any CSS transitions
+    await page.waitForTimeout(500)
+
+    // Screenshot the full editor area
+    await expect(page).toHaveScreenshot('editor-full.png', {
+      maxDiffPixelRatio: 0.02,
+    })
+  })
+
+  test('editor canvas renders template', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForSelector('.dreport-editor', { timeout: 15000 })
+    await page.waitForSelector('.layout-renderer div[style]', { timeout: 10000 })
+    await page.waitForTimeout(500)
+
+    // Screenshot just the canvas area
+    const canvas = page.locator('.editor-canvas-wrapper')
+    await expect(canvas).toHaveScreenshot('editor-canvas.png', {
+      maxDiffPixelRatio: 0.02,
+    })
+  })
+
+  test('toolbox panel renders correctly', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForSelector('.toolbox-panel', { timeout: 15000 })
+
+    const toolbox = page.locator('.toolbox-panel')
+    await expect(toolbox).toHaveScreenshot('toolbox-panel.png')
+  })
+
+  test('properties panel shows on element selection', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForSelector('.dreport-editor', { timeout: 15000 })
+    await page.waitForSelector('.layout-renderer div[style]', { timeout: 10000 })
+    await page.waitForTimeout(500)
+
+    // Click on an element in the editor to select it
+    // The interaction overlay has clickable elements positioned absolutely
+    const overlay = page.locator('.interaction-overlay')
+    // Click approximately in the center-top area where the header text should be
+    await overlay.click({ position: { x: 300, y: 50 } })
+
+    await page.waitForTimeout(300)
+
+    // Screenshot the properties panel (right sidebar)
+    const sidebar = page.locator('.dreport-editor__sidebar--right')
+    await expect(sidebar).toHaveScreenshot('properties-panel-selected.png', {
+      maxDiffPixelRatio: 0.02,
+    })
+  })
+})

frontend/tests/visual/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}