simplify the e2e tests

apps/ui/tests/features/add-feature-to-backlog.spec.ts

@@ -0,0 +1,85 @@
+/**
+ * Feature Backlog E2E Test
+ *
+ * Happy path: Add a feature to the backlog
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  clickAddFeature,
+  fillAddFeatureDialog,
+  confirmAddFeature,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('feature-backlog-test');
+
+test.describe('Feature Backlog', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for e2e testing.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should add a new feature to the backlog', async ({ page }) => {
+    const featureDescription = `Test feature ${Date.now()}`;
+
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+
+    await page.goto('/board');
+    await waitForNetworkIdle(page);
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('[data-testid="kanban-column-backlog"]')).toBeVisible({
+      timeout: 5000,
+    });
+
+    await clickAddFeature(page);
+    await fillAddFeatureDialog(page, featureDescription);
+    await confirmAddFeature(page);
+
+    // Wait for the feature to appear in the backlog
+    await expect(async () => {
+      const backlogColumn = page.locator('[data-testid="kanban-column-backlog"]');
+      const featureCard = backlogColumn.locator('[data-testid^="kanban-card-"]').filter({
+        hasText: featureDescription,
+      });
+      expect(await featureCard.count()).toBeGreaterThan(0);
+    }).toPass({ timeout: 10000 });
+  });
+});

apps/ui/tests/features/edit-feature.spec.ts

@@ -0,0 +1,139 @@
+/**
+ * Edit Feature E2E Test
+ *
+ * Happy path: Edit an existing feature's description and verify changes persist
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  clickAddFeature,
+  fillAddFeatureDialog,
+  confirmAddFeature,
+  clickElement,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('edit-feature-test');
+
+test.describe('Edit Feature', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for e2e testing.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should edit an existing feature description', async ({ page }) => {
+    const originalDescription = `Original feature ${Date.now()}`;
+    const updatedDescription = `Updated feature ${Date.now()}`;
+
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+
+    await page.goto('/board');
+    await waitForNetworkIdle(page);
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('[data-testid="kanban-column-backlog"]')).toBeVisible({
+      timeout: 5000,
+    });
+
+    // Create a feature first
+    await clickAddFeature(page);
+    await fillAddFeatureDialog(page, originalDescription);
+    await confirmAddFeature(page);
+
+    // Wait for the feature to appear in the backlog
+    await expect(async () => {
+      const backlogColumn = page.locator('[data-testid="kanban-column-backlog"]');
+      const featureCard = backlogColumn.locator('[data-testid^="kanban-card-"]').filter({
+        hasText: originalDescription,
+      });
+      expect(await featureCard.count()).toBeGreaterThan(0);
+    }).toPass({ timeout: 10000 });
+
+    // Get the feature ID from the card
+    const featureCard = page
+      .locator('[data-testid="kanban-column-backlog"]')
+      .locator('[data-testid^="kanban-card-"]')
+      .filter({ hasText: originalDescription })
+      .first();
+    const cardTestId = await featureCard.getAttribute('data-testid');
+    const featureId = cardTestId?.replace('kanban-card-', '');
+
+    // Collapse the sidebar first to avoid it intercepting clicks
+    const collapseSidebarButton = page.locator('button:has-text("Collapse sidebar")');
+    if (await collapseSidebarButton.isVisible()) {
+      await collapseSidebarButton.click();
+      await page.waitForTimeout(300); // Wait for sidebar animation
+    }
+
+    // Click the edit button on the card using JavaScript click to bypass pointer interception
+    const editButton = page.locator(`[data-testid="edit-backlog-${featureId}"]`);
+    await expect(editButton).toBeVisible({ timeout: 5000 });
+    await editButton.evaluate((el) => (el as HTMLElement).click());
+
+    // Wait for edit dialog to appear
+    await expect(page.locator('[data-testid="edit-feature-dialog"]')).toBeVisible({
+      timeout: 10000,
+    });
+
+    // Update the description - the input is inside the DescriptionImageDropZone
+    const descriptionInput = page
+      .locator('[data-testid="edit-feature-dialog"]')
+      .getByPlaceholder('Describe the feature...');
+    await expect(descriptionInput).toBeVisible({ timeout: 5000 });
+    await descriptionInput.fill(updatedDescription);
+
+    // Save changes
+    await clickElement(page, 'confirm-edit-feature');
+
+    // Wait for dialog to close
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="edit-feature-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    // Verify the updated description appears in the card
+    await expect(async () => {
+      const backlogColumn = page.locator('[data-testid="kanban-column-backlog"]');
+      const updatedCard = backlogColumn.locator('[data-testid^="kanban-card-"]').filter({
+        hasText: updatedDescription,
+      });
+      expect(await updatedCard.count()).toBeGreaterThan(0);
+    }).toPass({ timeout: 10000 });
+  });
+});

apps/ui/tests/features/feature-manual-review-flow.spec.ts

@@ -0,0 +1,119 @@
+/**
+ * Feature Manual Review Flow E2E Test
+ *
+ * Happy path: Manually verify a feature in the waiting_approval column
+ *
+ * This test verifies that:
+ * 1. A feature in waiting_approval column shows the mark as verified button
+ * 2. Clicking mark as verified moves the feature to the verified column
+ *
+ * Note: For waiting_approval features, the button is "mark-as-verified-{id}" not "manual-verify-{id}"
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  getKanbanColumn,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('manual-review-test');
+
+test.describe('Feature Manual Review Flow', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+  const featureId = 'test-feature-manual-review';
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for e2e testing.`
+    );
+
+    // Create a feature file that is in waiting_approval status
+    const featureDir = path.join(automakerDir, 'features', featureId);
+    fs.mkdirSync(featureDir, { recursive: true });
+
+    const feature = {
+      id: featureId,
+      description: 'Test feature for manual review flow',
+      category: 'test',
+      status: 'waiting_approval',
+      skipTests: true,
+      model: 'sonnet',
+      thinkingLevel: 'none',
+      createdAt: new Date().toISOString(),
+      branchName: '',
+      priority: 2,
+    };
+
+    fs.writeFileSync(path.join(featureDir, 'feature.json'), JSON.stringify(feature, null, 2));
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should manually verify a feature in waiting_approval column', async ({ page }) => {
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+
+    await page.goto('/board');
+    await waitForNetworkIdle(page);
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+
+    // Verify the feature appears in the waiting_approval column
+    const waitingApprovalColumn = await getKanbanColumn(page, 'waiting_approval');
+    await expect(waitingApprovalColumn).toBeVisible({ timeout: 5000 });
+
+    const featureCard = page.locator(`[data-testid="kanban-card-${featureId}"]`);
+    await expect(featureCard).toBeVisible({ timeout: 10000 });
+
+    // For waiting_approval features, the button is "mark-as-verified-{id}"
+    const markAsVerifiedButton = page.locator(`[data-testid="mark-as-verified-${featureId}"]`);
+    await expect(markAsVerifiedButton).toBeVisible({ timeout: 5000 });
+
+    // Click the mark as verified button
+    await markAsVerifiedButton.click();
+
+    // Wait for the feature to move to verified column
+    await expect(async () => {
+      const verifiedColumn = await getKanbanColumn(page, 'verified');
+      const cardInVerified = verifiedColumn.locator(`[data-testid="kanban-card-${featureId}"]`);
+      expect(await cardInVerified.count()).toBe(1);
+    }).toPass({ timeout: 15000 });
+
+    // Verify the feature is no longer in waiting_approval column
+    await expect(async () => {
+      const waitingColumn = await getKanbanColumn(page, 'waiting_approval');
+      const cardInWaiting = waitingColumn.locator(`[data-testid="kanban-card-${featureId}"]`);
+      expect(await cardInWaiting.count()).toBe(0);
+    }).toPass({ timeout: 5000 });
+  });
+});

apps/ui/tests/features/feature-skip-tests-toggle.spec.ts

@@ -0,0 +1,107 @@
+/**
+ * Feature Skip Tests Toggle E2E Test
+ *
+ * Happy path: Create a feature with default settings (skipTests=true) and verify the badge appears
+ *
+ * Note: The app defaults to skipTests=true (manual verification required), so we don't need to
+ * toggle anything. We just verify the badge appears by default.
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  clickAddFeature,
+  fillAddFeatureDialog,
+  confirmAddFeature,
+  isSkipTestsBadgeVisible,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('skip-tests-toggle-test');
+
+test.describe('Feature Skip Tests Badge', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for e2e testing.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should show skip tests badge for new feature with default settings', async ({ page }) => {
+    const featureDescription = `Skip tests feature ${Date.now()}`;
+
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+
+    await page.goto('/board');
+    await waitForNetworkIdle(page);
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('[data-testid="kanban-column-backlog"]')).toBeVisible({
+      timeout: 5000,
+    });
+
+    // Open the add feature dialog and add feature with default settings
+    // Default is skipTests=true (manual verification required)
+    await clickAddFeature(page);
+    await fillAddFeatureDialog(page, featureDescription);
+    await confirmAddFeature(page);
+
+    // Wait for the feature to appear in the backlog
+    await expect(async () => {
+      const backlogColumn = page.locator('[data-testid="kanban-column-backlog"]');
+      const featureCard = backlogColumn.locator('[data-testid^="kanban-card-"]').filter({
+        hasText: featureDescription,
+      });
+      expect(await featureCard.count()).toBeGreaterThan(0);
+    }).toPass({ timeout: 10000 });
+
+    // Get the feature ID from the card
+    const featureCard = page
+      .locator('[data-testid="kanban-column-backlog"]')
+      .locator('[data-testid^="kanban-card-"]')
+      .filter({ hasText: featureDescription })
+      .first();
+    const cardTestId = await featureCard.getAttribute('data-testid');
+    const featureId = cardTestId?.replace('kanban-card-', '');
+
+    // Verify the skip tests badge is visible on the card (should be there by default)
+    expect(featureId).toBeDefined();
+    await expect(async () => {
+      const badgeVisible = await isSkipTestsBadgeVisible(page, featureId!);
+      expect(badgeVisible).toBe(true);
+    }).toPass({ timeout: 5000 });
+  });
+});