refactor: move from next js to vite and tanstack router

apps/ui/tests/utils/helpers/concurrency.ts

@@ -0,0 +1,50 @@
+import { Page, Locator } from "@playwright/test";
+
+/**
+ * Get the concurrency slider container
+ */
+export async function getConcurrencySliderContainer(
+  page: Page
+): Promise<Locator> {
+  return page.locator('[data-testid="concurrency-slider-container"]');
+}
+
+/**
+ * Get the concurrency slider
+ */
+export async function getConcurrencySlider(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="concurrency-slider"]');
+}
+
+/**
+ * Get the displayed concurrency value
+ */
+export async function getConcurrencyValue(page: Page): Promise<string | null> {
+  const valueElement = page.locator('[data-testid="concurrency-value"]');
+  return await valueElement.textContent();
+}
+
+/**
+ * Change the concurrency slider value by clicking on the slider track
+ */
+export async function setConcurrencyValue(
+  page: Page,
+  targetValue: number,
+  min: number = 1,
+  max: number = 10
+): Promise<void> {
+  const slider = page.locator('[data-testid="concurrency-slider"]');
+  const sliderBounds = await slider.boundingBox();
+
+  if (!sliderBounds) {
+    throw new Error("Concurrency slider not found or not visible");
+  }
+
+  // Calculate position for target value
+  const percentage = (targetValue - min) / (max - min);
+  const targetX = sliderBounds.x + sliderBounds.width * percentage;
+  const centerY = sliderBounds.y + sliderBounds.height / 2;
+
+  // Click at the target position to set the value
+  await page.mouse.click(targetX, centerY);
+}

apps/ui/tests/utils/helpers/log-viewer.ts

@@ -0,0 +1,137 @@
+import { Page, Locator } from "@playwright/test";
+import { clickElement } from "../core/interactions";
+
+/**
+ * Get the log viewer header element (contains type counts and expand/collapse buttons)
+ */
+export async function getLogViewerHeader(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="log-viewer-header"]');
+}
+
+/**
+ * Check if the log viewer header is visible
+ */
+export async function isLogViewerHeaderVisible(page: Page): Promise<boolean> {
+  const header = page.locator('[data-testid="log-viewer-header"]');
+  return await header.isVisible().catch(() => false);
+}
+
+/**
+ * Get the log entries container element
+ */
+export async function getLogEntriesContainer(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="log-entries-container"]');
+}
+
+/**
+ * Get a log entry by its type
+ */
+export async function getLogEntryByType(
+  page: Page,
+  type: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="log-entry-${type}"]`).first();
+}
+
+/**
+ * Get all log entries of a specific type
+ */
+export async function getAllLogEntriesByType(
+  page: Page,
+  type: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="log-entry-${type}"]`);
+}
+
+/**
+ * Count log entries of a specific type
+ */
+export async function countLogEntriesByType(
+  page: Page,
+  type: string
+): Promise<number> {
+  const entries = page.locator(`[data-testid="log-entry-${type}"]`);
+  return await entries.count();
+}
+
+/**
+ * Get the log type count badge by type
+ */
+export async function getLogTypeCountBadge(
+  page: Page,
+  type: string
+): Promise<Locator> {
+  return page.locator(`[data-testid="log-type-count-${type}"]`);
+}
+
+/**
+ * Check if a log type count badge is visible
+ */
+export async function isLogTypeCountBadgeVisible(
+  page: Page,
+  type: string
+): Promise<boolean> {
+  const badge = page.locator(`[data-testid="log-type-count-${type}"]`);
+  return await badge.isVisible().catch(() => false);
+}
+
+/**
+ * Click the expand all button in the log viewer
+ */
+export async function clickLogExpandAll(page: Page): Promise<void> {
+  await clickElement(page, "log-expand-all");
+}
+
+/**
+ * Click the collapse all button in the log viewer
+ */
+export async function clickLogCollapseAll(page: Page): Promise<void> {
+  await clickElement(page, "log-collapse-all");
+}
+
+/**
+ * Get a log entry badge element
+ */
+export async function getLogEntryBadge(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="log-entry-badge"]').first();
+}
+
+/**
+ * Check if any log entry badge is visible
+ */
+export async function isLogEntryBadgeVisible(page: Page): Promise<boolean> {
+  const badge = page.locator('[data-testid="log-entry-badge"]').first();
+  return await badge.isVisible().catch(() => false);
+}
+
+/**
+ * Get the view mode toggle button (parsed/raw)
+ */
+export async function getViewModeButton(
+  page: Page,
+  mode: "parsed" | "raw"
+): Promise<Locator> {
+  return page.locator(`[data-testid="view-mode-${mode}"]`);
+}
+
+/**
+ * Click a view mode toggle button
+ */
+export async function clickViewModeButton(
+  page: Page,
+  mode: "parsed" | "raw"
+): Promise<void> {
+  await clickElement(page, `view-mode-${mode}`);
+}
+
+/**
+ * Check if a view mode button is active (selected)
+ */
+export async function isViewModeActive(
+  page: Page,
+  mode: "parsed" | "raw"
+): Promise<boolean> {
+  const button = page.locator(`[data-testid="view-mode-${mode}"]`);
+  const classes = await button.getAttribute("class");
+  return classes?.includes("text-purple-300") ?? false;
+}

apps/ui/tests/utils/helpers/scroll.ts

@@ -0,0 +1,58 @@
+import { Locator } from "@playwright/test";
+
+/**
+ * Check if an element is scrollable (has scrollable content)
+ */
+export async function isElementScrollable(locator: Locator): Promise<boolean> {
+  const scrollInfo = await locator.evaluate((el) => {
+    return {
+      scrollHeight: el.scrollHeight,
+      clientHeight: el.clientHeight,
+      isScrollable: el.scrollHeight > el.clientHeight,
+    };
+  });
+  return scrollInfo.isScrollable;
+}
+
+/**
+ * Scroll an element to the bottom
+ */
+export async function scrollToBottom(locator: Locator): Promise<void> {
+  await locator.evaluate((el) => {
+    el.scrollTop = el.scrollHeight;
+  });
+}
+
+/**
+ * Get the scroll position of an element
+ */
+export async function getScrollPosition(
+  locator: Locator
+): Promise<{ scrollTop: number; scrollHeight: number; clientHeight: number }> {
+  return await locator.evaluate((el) => ({
+    scrollTop: el.scrollTop,
+    scrollHeight: el.scrollHeight,
+    clientHeight: el.clientHeight,
+  }));
+}
+
+/**
+ * Check if an element is visible within a scrollable container
+ */
+export async function isElementVisibleInScrollContainer(
+  element: Locator,
+  container: Locator
+): Promise<boolean> {
+  const elementBox = await element.boundingBox();
+  const containerBox = await container.boundingBox();
+
+  if (!elementBox || !containerBox) {
+    return false;
+  }
+
+  // Check if element is within the visible area of the container
+  return (
+    elementBox.y >= containerBox.y &&
+    elementBox.y + elementBox.height <= containerBox.y + containerBox.height
+  );
+}