e2e

Author: rimsila

apps/desktop/e2e/canvas-selection.spec.ts

@@ -0,0 +1,84 @@
+/**
+ * Canvas Selection — verifies Figma-like selection interactions:
+ * click to select, shift-click for multi-select, click canvas to deselect,
+ * and Escape to clear selection.
+ */
+import { test, expect } from './fixtures';
+
+/** Helper: add N elements to the canvas by clicking palette items. */
+async function addElements(window: Awaited<ReturnType<typeof import('./fixtures').test['step']>>, count: number) {
+  const items = window.locator('.palette-item');
+  for (let i = 0; i < count; i++) {
+    await items.nth(i % (await items.count())).click();
+  }
+}
+
+test.describe('Canvas Selection', () => {
+  test('clicking a canvas element selects it', async ({ window }) => {
+    await addElements(window, 1);
+
+    // Click the first added canvas element (skip the root wrapper)
+    const elements = window.locator('.canvas-element');
+    const addedElement = elements.last();
+    await addedElement.click();
+
+    // Should be marked as selected
+    await expect(addedElement).toHaveAttribute('data-selected', 'true');
+  });
+
+  test('clicking empty canvas area clears selection', async ({ window }) => {
+    await addElements(window, 1);
+
+    // Select the element first
+    const element = window.locator('.canvas-element').last();
+    await element.click();
+    await expect(element).toHaveAttribute('data-selected', 'true');
+
+    // Click the canvas background (the .editor-canvas container)
+    const canvas = window.locator('.editor-canvas');
+    // Click at the very bottom-right of the canvas to hit the background
+    const box = await canvas.boundingBox();
+    if (box) {
+      await window.mouse.click(box.x + box.width - 10, box.y + box.height - 10);
+    }
+
+    // Selection should be cleared
+    const selectedElements = window.locator('.canvas-element[data-selected="true"]');
+    expect(await selectedElements.count()).toBe(0);
+  });
+
+  test('pressing Escape clears selection', async ({ window }) => {
+    await addElements(window, 1);
+
+    const element = window.locator('.canvas-element').last();
+    await element.click();
+    await expect(element).toHaveAttribute('data-selected', 'true');
+
+    // Press Escape
+    await window.keyboard.press('Escape');
+
+    // Selection should be cleared
+    const selected = window.locator('.canvas-element[data-selected="true"]');
+    expect(await selected.count()).toBe(0);
+  });
+
+  test('selecting an element shows its properties', async ({ window }) => {
+    await addElements(window, 1);
+
+    // Switch right panel to Properties
+    const propsTab = window.locator('.editor-right-panel button.panel-tab', { hasText: 'Properties' });
+    await propsTab.click();
+
+    // Before selection: empty state
+    await expect(window.locator('.empty-state')).toBeVisible();
+
+    // Select the element
+    await window.locator('.canvas-element').last().click();
+
+    // Properties panel should now show element info
+    const propsPanel = window.locator('.props-panel');
+    await expect(propsPanel).toBeVisible();
+    await expect(propsPanel.locator('.props-section-title', { hasText: 'Element' })).toBeVisible();
+    await expect(propsPanel.locator('.props-section-title', { hasText: 'Properties' })).toBeVisible();
+  });
+});

apps/desktop/e2e/component-palette.spec.ts

@@ -0,0 +1,57 @@
+/**
+ * Component Palette — verifies palette grid, category headings,
+ * and adding components to the canvas via click.
+ */
+import { test, expect } from './fixtures';
+
+test.describe('Component Palette', () => {
+  test('palette grid shows categorized components', async ({ window }) => {
+    // Ensure the Components tab is active (default)
+    const componentsTab = window.locator('button.panel-tab', { hasText: 'Components' });
+    await expect(componentsTab).toHaveAttribute('data-active', 'true');
+
+    // Palette grid is visible with at least one category heading
+    const paletteGrid = window.locator('.palette-grid');
+    await expect(paletteGrid).toBeVisible();
+
+    const categories = paletteGrid.locator('.palette-category');
+    expect(await categories.count()).toBeGreaterThan(0);
+
+    // Each category has at least one palette item beneath it
+    const items = paletteGrid.locator('.palette-item');
+    expect(await items.count()).toBeGreaterThan(0);
+  });
+
+  test('palette items are draggable', async ({ window }) => {
+    const firstItem = window.locator('.palette-item').first();
+    await expect(firstItem).toBeVisible();
+    await expect(firstItem).toHaveAttribute('draggable', 'true');
+  });
+
+  test('clicking a palette item adds an element to the canvas', async ({ window }) => {
+    // Count existing canvas elements before
+    const canvasBefore = await window.locator('.canvas-element').count();
+
+    // Click the first palette item
+    const firstItem = window.locator('.palette-item').first();
+    await firstItem.click();
+
+    // A new canvas element should appear
+    const canvasAfter = await window.locator('.canvas-element').count();
+    expect(canvasAfter).toBeGreaterThan(canvasBefore);
+  });
+
+  test('clicking a palette item adds a layer to the layer tree', async ({ window }) => {
+    // Add an element first
+    await window.locator('.palette-item').first().click();
+
+    // Switch to Layers tab
+    const layersTab = window.locator('.editor-left-panel button.panel-tab', { hasText: 'Layers' });
+    await layersTab.click();
+    await expect(layersTab).toHaveAttribute('data-active', 'true');
+
+    // Layer tree should have at least 2 items (root + the added element)
+    const layerItems = window.locator('.layer-item');
+    expect(await layerItems.count()).toBeGreaterThanOrEqual(2);
+  });
+});

apps/desktop/e2e/editor-layout.spec.ts

@@ -0,0 +1,73 @@
+/**
+ * Editor Layout — verifies the Figma-like shell renders correctly.
+ *
+ * Covers: titlebar, toolbar, left panel (Components/Layers tabs),
+ * canvas, right panel (Properties/Code/AI Chat tabs), and resize handles.
+ */
+import { test, expect } from './fixtures';
+
+test.describe('Editor Layout', () => {
+  test('titlebar shows app name and file indicator', async ({ window }) => {
+    const titlebar = window.locator('.titlebar');
+    await expect(titlebar).toBeVisible();
+    await expect(titlebar).toContainText('DesignForge');
+  });
+
+  test('toolbar renders with all action groups', async ({ window }) => {
+    const toolbar = window.locator('.editor-toolbar');
+    await expect(toolbar).toBeVisible();
+
+    // File actions
+    await expect(window.locator('.file-btn', { hasText: 'New' })).toBeVisible();
+    await expect(window.locator('.file-btn', { hasText: 'Open' })).toBeVisible();
+    await expect(window.locator('.file-btn', { hasText: 'Save' })).toBeVisible();
+    await expect(window.locator('.file-btn', { hasText: 'Export Code' })).toBeVisible();
+
+    // History buttons (undo / redo)
+    await expect(window.locator('.toolbar-btn[title*="Undo"]')).toBeVisible();
+    await expect(window.locator('.toolbar-btn[title*="Redo"]')).toBeVisible();
+
+    // Preview toggle
+    await expect(window.locator('.preview-mode-toggle')).toBeVisible();
+
+    // Settings
+    await expect(window.locator('.toolbar-btn[title*="Settings"]')).toBeVisible();
+  });
+
+  test('left panel shows Components and Layers tabs', async ({ window }) => {
+    const leftPanel = window.locator('.editor-left-panel');
+    await expect(leftPanel).toBeVisible();
+
+    const componentsTab = leftPanel.locator('button.panel-tab', { hasText: 'Components' });
+    const layersTab = leftPanel.locator('button.panel-tab', { hasText: 'Layers' });
+
+    await expect(componentsTab).toBeVisible();
+    await expect(layersTab).toBeVisible();
+
+    // Components tab is active by default
+    await expect(componentsTab).toHaveAttribute('data-active', 'true');
+  });
+
+  test('right panel shows Properties, Code, and AI Chat tabs', async ({ window }) => {
+    const rightPanel = window.locator('.editor-right-panel');
+    await expect(rightPanel).toBeVisible();
+
+    await expect(rightPanel.locator('button.panel-tab', { hasText: 'Properties' })).toBeVisible();
+    await expect(rightPanel.locator('button.panel-tab', { hasText: 'Code' })).toBeVisible();
+    await expect(rightPanel.locator('button.panel-tab', { hasText: 'AI Chat' })).toBeVisible();
+  });
+
+  test('canvas area is visible between panels', async ({ window }) => {
+    const canvas = window.locator('.editor-canvas');
+    await expect(canvas).toBeVisible();
+
+    // Canvas frame exists inside
+    const frame = window.locator('.canvas-frame');
+    await expect(frame).toBeVisible();
+  });
+
+  test('both resize handles are present', async ({ window }) => {
+    await expect(window.locator('.resize-handle--left')).toBeVisible();
+    await expect(window.locator('.resize-handle--right')).toBeVisible();
+  });
+});

apps/desktop/e2e/keyboard-shortcuts.spec.ts

@@ -0,0 +1,70 @@
+/**
+ * Keyboard Shortcuts — verifies the Figma-like keybindings work correctly.
+ */
+import { test, expect } from './fixtures';
+
+test.describe('Keyboard Shortcuts', () => {
+  test('Ctrl+D duplicates the selected element', async ({ window }) => {
+    // Add an element
+    await window.locator('.palette-item').first().click();
+    const countAfterAdd = await window.locator('.canvas-element').count();
+
+    // Select the element
+    await window.locator('.canvas-element').last().click();
+
+    // Ctrl+D to duplicate
+    await window.keyboard.press('Control+d');
+
+    const countAfterDuplicate = await window.locator('.canvas-element').count();
+    expect(countAfterDuplicate).toBeGreaterThan(countAfterAdd);
+  });
+
+  test('Ctrl+A selects all elements', async ({ window }) => {
+    // Add two elements
+    await window.locator('.palette-item').first().click();
+    await window.locator('.palette-item').nth(1).click();
+
+    // Ctrl+A to select all
+    await window.keyboard.press('Control+a');
+
+    // Multiple elements should be selected (data-selected="true")
+    const selectedCount = await window.locator('.canvas-element[data-selected="true"]').count();
+    expect(selectedCount).toBeGreaterThanOrEqual(2);
+  });
+
+  test('Escape clears selection', async ({ window }) => {
+    await window.locator('.palette-item').first().click();
+    await window.locator('.canvas-element').last().click();
+
+    // Verify something is selected
+    expect(await window.locator('.canvas-element[data-selected="true"]').count()).toBeGreaterThanOrEqual(1);
+
+    // Escape to clear
+    await window.keyboard.press('Escape');
+
+    expect(await window.locator('.canvas-element[data-selected="true"]').count()).toBe(0);
+  });
+
+  test('Delete/Backspace removes selected element', async ({ window }) => {
+    await window.locator('.palette-item').first().click();
+    const countBefore = await window.locator('.canvas-element').count();
+
+    await window.locator('.canvas-element').last().click();
+    await window.keyboard.press('Backspace');
+
+    const countAfter = await window.locator('.canvas-element').count();
+    expect(countAfter).toBeLessThan(countBefore);
+  });
+
+  test('Ctrl+, opens settings', async ({ window }) => {
+    await window.keyboard.press('Control+,');
+
+    // Settings page/overlay should appear
+    // (the SettingsPage component is rendered by the App)
+    await window.waitForTimeout(500);
+
+    // Look for settings-related content
+    const settingsVisible = await window.locator('[class*="settings"]').first().isVisible().catch(() => false);
+    expect(settingsVisible).toBe(true);
+  });
+});

apps/desktop/e2e/layer-tree.spec.ts

@@ -0,0 +1,78 @@
+/**
+ * Layer Tree — verifies the Figma-like layer panel:
+ * switching tabs, layer items matching canvas elements,
+ * clicking layers to select canvas elements, and hover highlighting.
+ */
+import { test, expect } from './fixtures';
+
+test.describe('Layer Tree', () => {
+  test('layers tab shows root element by default', async ({ window }) => {
+    // Switch to Layers tab
+    const layersTab = window.locator('.editor-left-panel button.panel-tab', { hasText: 'Layers' });
+    await layersTab.click();
+
+    const layerTree = window.locator('.layer-tree');
+    await expect(layerTree).toBeVisible();
+
+    // At least the root element is shown
+    const layerItems = layerTree.locator('.layer-item');
+    expect(await layerItems.count()).toBeGreaterThanOrEqual(1);
+  });
+
+  test('adding an element creates a new layer item', async ({ window }) => {
+    // Switch to Layers tab
+    const layersTab = window.locator('.editor-left-panel button.panel-tab', { hasText: 'Layers' });
+    await layersTab.click();
+
+    const layersBefore = await window.locator('.layer-item').count();
+
+    // Switch back to Components to add an element
+    await window.locator('.editor-left-panel button.panel-tab', { hasText: 'Components' }).click();
+    await window.locator('.palette-item').first().click();
+
+    // Switch back to Layers
+    await layersTab.click();
+
+    const layersAfter = await window.locator('.layer-item').count();
+    expect(layersAfter).toBeGreaterThan(layersBefore);
+  });
+
+  test('clicking a layer item selects the corresponding canvas element', async ({ window }) => {
+    // Add an element
+    await window.locator('.palette-item').first().click();
+
+    // Switch to Layers tab
+    const layersTab = window.locator('.editor-left-panel button.panel-tab', { hasText: 'Layers' });
+    await layersTab.click();
+
+    // Click the last layer item (the newly added element)
+    const layerItems = window.locator('.layer-item');
+    const lastLayer = layerItems.last();
+    await lastLayer.click();
+
+    // The layer should be marked selected
+    await expect(lastLayer).toHaveAttribute('data-selected', 'true');
+
+    // A canvas element should also be selected
+    const selectedCanvas = window.locator('.canvas-element[data-selected="true"]');
+    expect(await selectedCanvas.count()).toBeGreaterThanOrEqual(1);
+  });
+
+  test('layer items display element type names', async ({ window }) => {
+    // Add an element
+    await window.locator('.palette-item').first().click();
+
+    // Switch to Layers tab
+    await window.locator('.editor-left-panel button.panel-tab', { hasText: 'Layers' }).click();
+
+    // Each layer item should have a visible name
+    const layerNames = window.locator('.layer-item .layer-item-name');
+    const count = await layerNames.count();
+    expect(count).toBeGreaterThanOrEqual(1);
+
+    for (let i = 0; i < count; i++) {
+      const name = await layerNames.nth(i).textContent();
+      expect(name?.trim().length).toBeGreaterThan(0);
+    }
+  });
+});