automaker/apps/ui/tests/utils/views/context.ts

import { Page, Locator } from "@playwright/test";
import { clickElement, fillInput } from "../core/interactions";
import { waitForElement, waitForElementHidden } from "../core/waiting";
import { getByTestId } from "../core/elements";
import { expect } from "@playwright/test";

/**
 * Get the context file list element
 */
export async function getContextFileList(page: Page): Promise<Locator> {
  return page.locator('[data-testid="context-file-list"]');
}

/**
 * Click on a context file in the list
 */
export async function clickContextFile(
  page: Page,
  fileName: string
): Promise<void> {
  const fileButton = page.locator(`[data-testid="context-file-${fileName}"]`);
  await fileButton.click();
}

/**
 * Get the context editor element
 */
export async function getContextEditor(page: Page): Promise<Locator> {
  return page.locator('[data-testid="context-editor"]');
}

/**
 * Get the context editor content
 */
export async function getContextEditorContent(page: Page): Promise<string> {
  const editor = await getByTestId(page, "context-editor");
  return await editor.inputValue();
}

/**
 * Set the context editor content
 */
export async function setContextEditorContent(
  page: Page,
  content: string
): Promise<void> {
  const editor = await getByTestId(page, "context-editor");
  await editor.fill(content);
}

/**
 * Open the add context file dialog
 */
export async function openAddContextFileDialog(page: Page): Promise<void> {
  await clickElement(page, "add-context-file");
  await waitForElement(page, "add-context-dialog");
}

/**
 * Create a text context file via the UI
 */
export async function createContextFile(
  page: Page,
  filename: string,
  content: string
): Promise<void> {
  await openAddContextFileDialog(page);
  await clickElement(page, "add-text-type");
  await fillInput(page, "new-file-name", filename);
  await fillInput(page, "new-file-content", content);
  await clickElement(page, "confirm-add-file");
  await waitForElementHidden(page, "add-context-dialog");
}

/**
 * Create an image context file via the UI
 */
export async function createContextImage(
  page: Page,
  filename: string,
  imagePath: string
): Promise<void> {
  await openAddContextFileDialog(page);
  await clickElement(page, "add-image-type");
  await fillInput(page, "new-file-name", filename);
  await page.setInputFiles('[data-testid="image-upload-input"]', imagePath);
  await clickElement(page, "confirm-add-file");
  await waitForElementHidden(page, "add-context-dialog");
}

/**
 * Delete a context file via the UI (must be selected first)
 */
export async function deleteSelectedContextFile(page: Page): Promise<void> {
  await clickElement(page, "delete-context-file");
  await waitForElement(page, "delete-context-dialog");
  await clickElement(page, "confirm-delete-file");
  await waitForElementHidden(page, "delete-context-dialog");
}

/**
 * Save the current context file
 */
export async function saveContextFile(page: Page): Promise<void> {
  await clickElement(page, "save-context-file");
  // Wait for save to complete (button shows "Saved")
  await page.waitForFunction(
    () =>
      document
        .querySelector('[data-testid="save-context-file"]')
        ?.textContent?.includes("Saved"),
    { timeout: 5000 }
  );
}

/**
 * Toggle markdown preview mode
 */
export async function toggleContextPreviewMode(page: Page): Promise<void> {
  await clickElement(page, "toggle-preview-mode");
}

/**
 * Wait for a specific file to appear in the context file list
 */
export async function waitForContextFile(
  page: Page,
  filename: string,
  timeout: number = 10000
): Promise<void> {
  const locator = page.locator(`[data-testid="context-file-${filename}"]`);
  await locator.waitFor({ state: "visible", timeout });
}

/**
 * Click a file in the list and wait for it to be selected (toolbar visible)
 * Uses JavaScript click to ensure React event handler fires
 */
export async function selectContextFile(
  page: Page,
  filename: string,
  timeout: number = 10000
): Promise<void> {
  const fileButton = await getByTestId(page, `context-file-${filename}`);
  await fileButton.waitFor({ state: "visible", timeout });

  // Use JavaScript click to ensure React onClick handler fires
  await fileButton.evaluate((el) => (el as HTMLButtonElement).click());

  // Wait for the file to be selected (toolbar with delete button becomes visible)
  const deleteButton = await getByTestId(page, "delete-context-file");
  await expect(deleteButton).toBeVisible({
    timeout,
  });
}

/**
 * Wait for file content panel to load (either editor, preview, or image)
 */
export async function waitForFileContentToLoad(page: Page): Promise<void> {
  // Wait for either the editor, preview, or image to appear
  await page.waitForSelector(
    '[data-testid="context-editor"], [data-testid="markdown-preview"], [data-testid="image-preview"]',
    { timeout: 10000 }
  );
}

/**
 * Switch from preview mode to edit mode for markdown files
 * Markdown files open in preview mode by default, this helper switches to edit mode
 */
export async function switchToEditMode(page: Page): Promise<void> {
  // First wait for content to load
  await waitForFileContentToLoad(page);

  const markdownPreview = await getByTestId(page, "markdown-preview");
  const isPreview = await markdownPreview.isVisible().catch(() => false);

  if (isPreview) {
    await clickElement(page, "toggle-preview-mode");
    await page.waitForSelector('[data-testid="context-editor"]', {
      timeout: 5000,
    });
  }
}