refactor: move from next js to vite and tanstack router

apps/ui/tests/utils/views/spec-editor.ts

@@ -0,0 +1,118 @@
+import { Page, Locator } from "@playwright/test";
+import { clickElement } from "../core/interactions";
+import { navigateToSpec } from "../navigation/views";
+
+/**
+ * Get the spec editor element
+ */
+export async function getSpecEditor(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="spec-editor"]');
+}
+
+/**
+ * Get the spec editor content
+ */
+export async function getSpecEditorContent(page: Page): Promise<string> {
+  const editor = await getSpecEditor(page);
+  return await editor.inputValue();
+}
+
+/**
+ * Set the spec editor content
+ */
+export async function setSpecEditorContent(
+  page: Page,
+  content: string
+): Promise<void> {
+  const editor = await getSpecEditor(page);
+  await editor.fill(content);
+}
+
+/**
+ * Click the save spec button
+ */
+export async function clickSaveSpec(page: Page): Promise<void> {
+  await clickElement(page, "save-spec");
+}
+
+/**
+ * Click the reload spec button
+ */
+export async function clickReloadSpec(page: Page): Promise<void> {
+  await clickElement(page, "reload-spec");
+}
+
+/**
+ * Check if the spec view path display shows the correct .automaker path
+ */
+export async function getDisplayedSpecPath(page: Page): Promise<string | null> {
+  const specView = page.locator('[data-testid="spec-view"]');
+  const pathElement = specView.locator("p.text-muted-foreground").first();
+  return await pathElement.textContent();
+}
+
+/**
+ * Navigate to the spec editor view
+ */
+export async function navigateToSpecEditor(page: Page): Promise<void> {
+  await navigateToSpec(page);
+}
+
+/**
+ * Get the CodeMirror editor content
+ */
+export async function getEditorContent(page: Page): Promise<string> {
+  // CodeMirror uses a contenteditable div with class .cm-content
+  const content = await page
+    .locator('[data-testid="spec-editor"] .cm-content')
+    .textContent();
+  return content || "";
+}
+
+/**
+ * Set the CodeMirror editor content by selecting all and typing
+ */
+export async function setEditorContent(page: Page, content: string): Promise<void> {
+  // Click on the editor to focus it
+  const editor = page.locator('[data-testid="spec-editor"] .cm-content');
+  await editor.click();
+
+  // Wait for focus
+  await page.waitForTimeout(200);
+
+  // Select all content (Cmd+A on Mac, Ctrl+A on others)
+  const isMac = process.platform === "darwin";
+  await page.keyboard.press(isMac ? "Meta+a" : "Control+a");
+
+  // Wait for selection
+  await page.waitForTimeout(100);
+
+  // Delete the selected content first
+  await page.keyboard.press("Backspace");
+
+  // Wait for deletion
+  await page.waitForTimeout(100);
+
+  // Type the new content
+  await page.keyboard.type(content, { delay: 10 });
+
+  // Wait for typing to complete
+  await page.waitForTimeout(200);
+}
+
+/**
+ * Click the save button
+ */
+export async function clickSaveButton(page: Page): Promise<void> {
+  const saveButton = page.locator('[data-testid="save-spec"]');
+  await saveButton.click();
+
+  // Wait for the button text to change to "Saved" indicating save is complete
+  await page.waitForFunction(
+    () => {
+      const btn = document.querySelector('[data-testid="save-spec"]');
+      return btn?.textContent?.includes("Saved");
+    },
+    { timeout: 5000 }
+  );
+}