refactor: move from next js to vite and tanstack router

apps/ui/tests/utils/core/constants.ts

@@ -0,0 +1,187 @@
+/**
+ * Centralized constants for test utilities
+ * This file contains all shared constants like URLs, timeouts, and selectors
+ */
+
+// ============================================================================
+// API Configuration
+// ============================================================================
+
+/**
+ * Base URL for the API server
+ */
+export const API_BASE_URL = "http://localhost:3008";
+
+/**
+ * API endpoints for worktree operations
+ */
+export const API_ENDPOINTS = {
+  worktree: {
+    create: `${API_BASE_URL}/api/worktree/create`,
+    delete: `${API_BASE_URL}/api/worktree/delete`,
+    list: `${API_BASE_URL}/api/worktree/list`,
+    commit: `${API_BASE_URL}/api/worktree/commit`,
+    switchBranch: `${API_BASE_URL}/api/worktree/switch-branch`,
+    listBranches: `${API_BASE_URL}/api/worktree/list-branches`,
+    status: `${API_BASE_URL}/api/worktree/status`,
+    info: `${API_BASE_URL}/api/worktree/info`,
+  },
+  fs: {
+    browse: `${API_BASE_URL}/api/fs/browse`,
+    read: `${API_BASE_URL}/api/fs/read`,
+    write: `${API_BASE_URL}/api/fs/write`,
+  },
+  features: {
+    list: `${API_BASE_URL}/api/features/list`,
+    create: `${API_BASE_URL}/api/features/create`,
+    update: `${API_BASE_URL}/api/features/update`,
+    delete: `${API_BASE_URL}/api/features/delete`,
+  },
+} as const;
+
+// ============================================================================
+// Timeout Configuration
+// ============================================================================
+
+/**
+ * Default timeouts in milliseconds
+ */
+export const TIMEOUTS = {
+  /** Default timeout for element visibility checks */
+  default: 5000,
+  /** Short timeout for quick checks */
+  short: 2000,
+  /** Medium timeout for standard operations */
+  medium: 10000,
+  /** Long timeout for slow operations */
+  long: 30000,
+  /** Extra long timeout for very slow operations */
+  extraLong: 60000,
+  /** Timeout for animations to complete */
+  animation: 300,
+  /** Small delay for UI to settle */
+  settle: 500,
+  /** Delay for network operations */
+  network: 1000,
+} as const;
+
+// ============================================================================
+// Test ID Selectors
+// ============================================================================
+
+/**
+ * Common data-testid selectors organized by component/view
+ */
+export const TEST_IDS = {
+  // Sidebar & Navigation
+  sidebar: "sidebar",
+  navBoard: "nav-board",
+  navSpec: "nav-spec",
+  navContext: "nav-context",
+  navAgent: "nav-agent",
+  navProfiles: "nav-profiles",
+  settingsButton: "settings-button",
+  openProjectButton: "open-project-button",
+
+  // Views
+  boardView: "board-view",
+  specView: "spec-view",
+  contextView: "context-view",
+  agentView: "agent-view",
+  profilesView: "profiles-view",
+  settingsView: "settings-view",
+  welcomeView: "welcome-view",
+  setupView: "setup-view",
+
+  // Board View Components
+  addFeatureButton: "add-feature-button",
+  addFeatureDialog: "add-feature-dialog",
+  confirmAddFeature: "confirm-add-feature",
+  featureBranchInput: "feature-branch-input",
+  featureCategoryInput: "feature-category-input",
+  worktreeSelector: "worktree-selector",
+
+  // Spec Editor
+  specEditor: "spec-editor",
+
+  // File Browser Dialog
+  pathInput: "path-input",
+  goToPathButton: "go-to-path-button",
+
+  // Profiles View
+  addProfileButton: "add-profile-button",
+  addProfileDialog: "add-profile-dialog",
+  editProfileDialog: "edit-profile-dialog",
+  deleteProfileConfirmDialog: "delete-profile-confirm-dialog",
+  saveProfileButton: "save-profile-button",
+  confirmDeleteProfileButton: "confirm-delete-profile-button",
+  cancelDeleteButton: "cancel-delete-button",
+  profileNameInput: "profile-name-input",
+  profileDescriptionInput: "profile-description-input",
+  refreshProfilesButton: "refresh-profiles-button",
+
+  // Context View
+  contextFileList: "context-file-list",
+  addContextButton: "add-context-button",
+} as const;
+
+// ============================================================================
+// CSS Selectors
+// ============================================================================
+
+/**
+ * Common CSS selectors for elements that don't have data-testid
+ */
+export const CSS_SELECTORS = {
+  /** CodeMirror editor content area */
+  codeMirrorContent: ".cm-content",
+  /** Dialog elements */
+  dialog: '[role="dialog"]',
+  /** Sonner toast notifications */
+  toast: "[data-sonner-toast]",
+  toastError: '[data-sonner-toast][data-type="error"]',
+  toastSuccess: '[data-sonner-toast][data-type="success"]',
+  /** Command/combobox input (shadcn-ui cmdk) */
+  commandInput: "[cmdk-input]",
+  /** Radix dialog overlay */
+  dialogOverlay: "[data-radix-dialog-overlay]",
+} as const;
+
+// ============================================================================
+// Storage Keys
+// ============================================================================
+
+/**
+ * localStorage keys used by the application
+ */
+export const STORAGE_KEYS = {
+  appStorage: "automaker-storage",
+  setupStorage: "automaker-setup",
+} as const;
+
+// ============================================================================
+// Branch Name Utilities
+// ============================================================================
+
+/**
+ * Sanitize a branch name to create a valid worktree directory name
+ * @param branchName - The branch name to sanitize
+ * @returns Sanitized name suitable for directory paths
+ */
+export function sanitizeBranchName(branchName: string): string {
+  return branchName.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+
+// ============================================================================
+// Default Values
+// ============================================================================
+
+/**
+ * Default values used in test setup
+ */
+export const DEFAULTS = {
+  projectName: "Test Project",
+  projectPath: "/mock/test-project",
+  theme: "dark" as const,
+  maxConcurrency: 3,
+} as const;

apps/ui/tests/utils/core/elements.ts

@@ -0,0 +1,40 @@
+import { Page, Locator } from "@playwright/test";
+
+/**
+ * Get an element by its data-testid attribute
+ */
+export async function getByTestId(
+  page: Page,
+  testId: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="${testId}"]`);
+}
+
+/**
+ * Get a button by its text content
+ */
+export async function getButtonByText(
+  page: Page,
+  text: string
+): Promise<Locator> {
+  return page.locator(`button:has-text("${text}")`);
+}
+
+/**
+ * Get the category autocomplete input element
+ */
+export async function getCategoryAutocompleteInput(
+  page: Page,
+  testId: string = "feature-category-input"
+): Promise<Locator> {
+  return page.locator(`[data-testid="${testId}"]`);
+}
+
+/**
+ * Get the category autocomplete dropdown list
+ */
+export async function getCategoryAutocompleteList(
+  page: Page
+): Promise<Locator> {
+  return page.locator('[data-testid="category-autocomplete-list"]');
+}

apps/ui/tests/utils/core/interactions.ts

@@ -0,0 +1,86 @@
+import { Page } from "@playwright/test";
+import { getByTestId, getButtonByText } from "./elements";
+
+/**
+ * Get the platform-specific modifier key (Meta for Mac, Control for Windows/Linux)
+ * This is used for keyboard shortcuts like Cmd+Enter or Ctrl+Enter
+ */
+export function getPlatformModifier(): "Meta" | "Control" {
+  return process.platform === "darwin" ? "Meta" : "Control";
+}
+
+/**
+ * Press the platform-specific modifier + a key (e.g., Cmd+Enter or Ctrl+Enter)
+ */
+export async function pressModifierEnter(page: Page): Promise<void> {
+  const modifier = getPlatformModifier();
+  await page.keyboard.press(`${modifier}+Enter`);
+}
+
+/**
+ * Click an element by its data-testid attribute
+ */
+export async function clickElement(page: Page, testId: string): Promise<void> {
+  const element = await getByTestId(page, testId);
+  await element.click();
+}
+
+/**
+ * Click a button by its text content
+ */
+export async function clickButtonByText(
+  page: Page,
+  text: string
+): Promise<void> {
+  const button = await getButtonByText(page, text);
+  await button.click();
+}
+
+/**
+ * Fill an input field by its data-testid attribute
+ */
+export async function fillInput(
+  page: Page,
+  testId: string,
+  value: string
+): Promise<void> {
+  const input = await getByTestId(page, testId);
+  await input.fill(value);
+}
+
+/**
+ * Press a keyboard shortcut key
+ */
+export async function pressShortcut(page: Page, key: string): Promise<void> {
+  await page.keyboard.press(key);
+}
+
+/**
+ * Press a number key (0-9) on the keyboard
+ */
+export async function pressNumberKey(page: Page, num: number): Promise<void> {
+  await page.keyboard.press(num.toString());
+}
+
+/**
+ * Focus on an input element to test that shortcuts don't fire when typing
+ */
+export async function focusOnInput(page: Page, testId: string): Promise<void> {
+  const input = page.locator(`[data-testid="${testId}"]`);
+  await input.focus();
+}
+
+/**
+ * Close any open dialog by pressing Escape
+ * Waits for dialog to be removed from DOM rather than using arbitrary timeout
+ */
+export async function closeDialogWithEscape(page: Page): Promise<void> {
+  await page.keyboard.press("Escape");
+  // Wait for any dialog overlay to disappear
+  await page
+    .locator('[data-radix-dialog-overlay], [role="dialog"]')
+    .waitFor({ state: "hidden", timeout: 5000 })
+    .catch(() => {
+      // Dialog may have already closed or not exist
+    });
+}

apps/ui/tests/utils/core/waiting.ts

@@ -0,0 +1,40 @@
+import { Page, Locator } from "@playwright/test";
+
+/**
+ * Wait for the page to reach network idle state
+ * This is commonly used after navigation or page reload to ensure all network requests have completed
+ */
+export async function waitForNetworkIdle(page: Page): Promise<void> {
+  await page.waitForLoadState("networkidle");
+}
+
+/**
+ * Wait for an element with a specific data-testid to appear
+ */
+export async function waitForElement(
+  page: Page,
+  testId: string,
+  options?: { timeout?: number; state?: "attached" | "visible" | "hidden" }
+): Promise<Locator> {
+  const element = page.locator(`[data-testid="${testId}"]`);
+  await element.waitFor({
+    timeout: options?.timeout ?? 5000,
+    state: options?.state ?? "visible",
+  });
+  return element;
+}
+
+/**
+ * Wait for an element with a specific data-testid to be hidden
+ */
+export async function waitForElementHidden(
+  page: Page,
+  testId: string,
+  options?: { timeout?: number }
+): Promise<void> {
+  const element = page.locator(`[data-testid="${testId}"]`);
+  await element.waitFor({
+    timeout: options?.timeout ?? 5000,
+    state: "hidden",
+  });
+}