refactor: extract sanitizeForTestId to shared utility

Address PR review comments by:
- Creating shared sanitizeForTestId utility in apps/ui/src/lib/utils.ts
- Updating ProjectSwitcherItem to use the shared utility
- Adding matching helper to test utils for E2E tests
- Updating all E2E tests to use the sanitization helper

This ensures the component and tests use identical sanitization logic,
making tests robust against project names with special characters.

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

@@ -21,6 +21,7 @@ import {
   getKanbanColumn,
   authenticateForTests,
   handleLoginScreenIfPresent,
+  sanitizeForTestId,
 } from '../utils';
 
 const TEST_TEMP_DIR = createTempDirPath('manual-review-test');
@@ -132,7 +133,8 @@ test.describe('Feature Manual Review Flow', () => {
 
     // Verify we're on the correct project (project switcher button shows project name)
     // Use ends-with selector since data-testid format is: project-switcher-{id}-{sanitizedName}
-    await expect(page.locator(`[data-testid$="-${projectName}"]`)).toBeVisible({
+    const sanitizedProjectName = sanitizeForTestId(projectName);
+    await expect(page.locator(`[data-testid$="-${sanitizedProjectName}"]`)).toBeVisible({
       timeout: 10000,
     });
 

apps/ui/tests/projects/new-project-creation.spec.ts

@@ -14,6 +14,7 @@ import {
   authenticateForTests,
   handleLoginScreenIfPresent,
   waitForNetworkIdle,
+  sanitizeForTestId,
 } from '../utils';
 
 const TEST_TEMP_DIR = createTempDirPath('project-creation-test');
@@ -79,7 +80,8 @@ test.describe('Project Creation', () => {
     // Wait for project to be set as current and visible on the page
     // The project name appears in the project switcher button
     // Use ends-with selector since data-testid format is: project-switcher-{id}-{sanitizedName}
-    await expect(page.locator(`[data-testid$="-${projectName}"]`)).toBeVisible({
+    const sanitizedProjectName = sanitizeForTestId(projectName);
+    await expect(page.locator(`[data-testid$="-${sanitizedProjectName}"]`)).toBeVisible({
       timeout: 15000,
     });
 

apps/ui/tests/projects/open-existing-project.spec.ts

@@ -18,6 +18,7 @@ import {
   authenticateForTests,
   handleLoginScreenIfPresent,
   waitForNetworkIdle,
+  sanitizeForTestId,
 } from '../utils';
 
 // Create unique temp dir for this test run
@@ -159,7 +160,8 @@ test.describe('Open Project', () => {
     // The project name appears in the project switcher button
     // Use ends-with selector since data-testid format is: project-switcher-{id}-{sanitizedName}
     if (targetProjectName) {
-      await expect(page.locator(`[data-testid$="-${targetProjectName}"]`)).toBeVisible({
+      const sanitizedName = sanitizeForTestId(targetProjectName);
+      await expect(page.locator(`[data-testid$="-${sanitizedName}"]`)).toBeVisible({
         timeout: 15000,
       });
     }

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

@@ -1,5 +1,22 @@
 import { Page, Locator } from '@playwright/test';
 
+/**
+ * Sanitize a string for use in data-testid selectors.
+ * This mirrors the sanitizeForTestId function in apps/ui/src/lib/utils.ts
+ * to ensure tests use the same sanitization logic as the component.
+ *
+ * @param name - The string to sanitize (e.g., project name)
+ * @returns A sanitized string safe for CSS selectors
+ */
+export function sanitizeForTestId(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+}
+
 /**
  * Get an element by its data-testid attribute
  */