auth-yes/ui/ui_scripts.test.ts

import { assertEquals } from "jsr:@std/assert@1";
import {
  formatNaturalExpiry,
  formatNaturalJoinTime,
} from "./components/sessions/formatters.ts";

Deno.test("formatNaturalExpiry - < 1h", () => {
  const now = new Date();
  const expiry = new Date(now.getTime() + 45 * 60000);
  const result = formatNaturalExpiry(expiry);
  assertEquals(
    result.includes("45m left") || result.includes("44m left"),
    true,
  );
  assertEquals(result.includes("status-badge-amber"), true);
});

Deno.test("formatNaturalExpiry - < 24h", () => {
  const now = new Date();
  const expiry = new Date(now.getTime() + 165 * 60000); // 2h 45m
  const result = formatNaturalExpiry(expiry);
  assertEquals(
    result.includes("2h 45m left") || result.includes("2h 44m left"),
    true,
  );
  assertEquals(result.includes("status-badge-amber"), true);
});

Deno.test("formatNaturalExpiry - 1-60d", () => {
  const now = new Date();
  const expiry = new Date(now.getTime() + 28 * 24 * 60 * 60000);
  const result = formatNaturalExpiry(expiry);
  assertEquals(
    result.includes("28d left") || result.includes("27d left"),
    true,
  );
  assertEquals(result.includes("status-badge-green"), true);
});

Deno.test("formatNaturalExpiry - 2-12mos", () => {
  const now = new Date();
  const expiry = new Date(now.getTime() + 142 * 24 * 60 * 60000);
  const result = formatNaturalExpiry(expiry);
  assertEquals(result.includes("4.7 mos left"), true);
  assertEquals(result.includes("status-badge-green"), true);
});

Deno.test("formatNaturalExpiry - > 1yr", () => {
  const now = new Date();
  const expiry = new Date(now.getTime() + 420 * 24 * 60 * 60000);
  const result = formatNaturalExpiry(expiry);
  assertEquals(
    result.includes("1.2 yrs left") || result.includes("1.1 yrs left"),
    true,
  );
  assertEquals(result.includes("status-badge-green"), true);
});

Deno.test("formatNaturalExpiry - expired", () => {
  const now = new Date();
  const expiry = new Date(now.getTime() - 45 * 60000);
  const result = formatNaturalExpiry(expiry);
  assertEquals(result.includes("Expired"), true);
  assertEquals(result.includes("status-badge-red"), true);
});

Deno.test("formatNaturalJoinTime", () => {
  const now = new Date();
  const joinTime = new Date(now.getTime() - 474 * 60000); // 7h 54m ago
  const result = formatNaturalJoinTime(joinTime);
  assertEquals(result.includes("7h 54m"), true);
  assertEquals(result.includes("Active"), true);
});

import { SessionsPage } from "./components/SessionsPage.tsx";
import { LoginPage } from "./components/LoginPage.tsx";
import { RegisterPage } from "./components/RegisterPage.tsx";
import { EventJoinPage } from "./components/EventJoinPage.tsx";
import { EventSplashPage } from "./components/EventSplashPage.tsx";
import { PasskeysPage } from "./components/PasskeysPage.tsx";
import { AdminAppsPage } from "./components/AdminAppsPage.tsx";
import { AdminInvitesPage } from "./components/AdminInvitesPage.tsx";
import { AdminRolesPage } from "./components/AdminRolesPage.tsx";
import { AdminUsersPage } from "./components/AdminUsersPage.tsx";
import { AdminUserDetailsPage } from "./components/AdminUserDetailsPage.tsx";
import { AuditLogPage } from "./components/AuditLogPage.tsx";
import { AAGUIDPage } from "./components/AAGUIDPage.tsx";

function validateJsSyntax(componentName: string, jsxResult: any) {
  const html = String(jsxResult);
  const scriptRegex = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
  let match;
  let scriptCount = 0;
  while ((match = scriptRegex.exec(html)) !== null) {
    const isModule = match[1].includes('type="module"') ||
      match[1].includes("type='module'");
    const scriptContent = match[2].trim();
    if (!scriptContent) continue;
    scriptCount++;
    try {
      if (isModule) {
        // Strip import statements for syntax compilation check in new Function
        const cleanContent = scriptContent.replace(
          /import\s+[\s\S]*?from\s+['"][^'"]+['"];?/g,
          "// import stripped",
        );
        new Function(cleanContent);
      } else {
        new Function(scriptContent);
      }
    } catch (err: any) {
      throw new Error(
        `Syntax error in <script> inside ${componentName}: ${err.message}\n---\n${scriptContent}\n---`,
      );
    }
  }
  return scriptCount;
}

Deno.test("UI Script Validation - SessionsPage", () => {
  const result = SessionsPage({
    sessions: [
      {
        id: "ay_sess_1",
        label: "Test Session",
        is_agent: true,
        custom_scopes: ["read:audit"],
        created_at: new Date().toISOString(),
        expires_at: new Date(Date.now() + 3600000).toISOString(),
      },
    ],
    currentSessionId: "ay_sess_1",
    apps: [],
    isAdmin: true,
    eventPasses: [
      {
        id: "evt-1",
        name: "Workshop 101",
        slug: "workshop-101",
        pin_code: "123-456",
        max_seats: 50,
        seats_claimed: 10,
        is_active: true,
        expires_at: new Date(Date.now() + 3600000).toISOString(),
      },
    ],
  });
  const count = validateJsSyntax("SessionsPage", result);
  assertEquals(count > 0, true);
});

Deno.test("UI Script Validation - LoginPage & RegisterPage", () => {
  validateJsSyntax("LoginPage", LoginPage());
  validateJsSyntax("RegisterPage", RegisterPage({ initialCode: "" }));
});

Deno.test("UI Script Validation - Event Pages", () => {
  validateJsSyntax("EventJoinPage", EventJoinPage());
  validateJsSyntax(
    "EventSplashPage",
    EventSplashPage({
      event: {
        id: "evt-1",
        name: "Workshop",
        slug: "workshop",
        pin_code: "123-456",
        max_seats: 50,
        seats_claimed: 5,
        lifespan_hours: 2,
        role: "viewer",
        expires_at: new Date(Date.now() + 3600000).toISOString(),
      },
    }),
  );
});

Deno.test("UI Script Validation - Admin Pages", () => {
  validateJsSyntax(
    "PasskeysPage",
    PasskeysPage({ passkeys: [], isAdmin: true }),
  );
  validateJsSyntax("AdminAppsPage", AdminAppsPage({ apps: [] }));
  validateJsSyntax(
    "AdminInvitesPage",
    AdminInvitesPage({ invites: [], apps: [], allRoles: [] }),
  );
  validateJsSyntax(
    "AdminRolesPage",
    AdminRolesPage({ roles: [], apps: [] }),
  );
  validateJsSyntax(
    "AdminUsersPage",
    AdminUsersPage({ users: [] }),
  );
  validateJsSyntax(
    "AdminUserDetailsPage",
    AdminUserDetailsPage({
      user: { id: "u-1", username: "test", account_status: "active" },
      sessions: [],
      passkeys: [],
      grants: [],
      allApps: [],
      allRoles: [],
    }),
  );
  validateJsSyntax("AuditLogPage", AuditLogPage({ logs: [] }));
  validateJsSyntax("AAGUIDPage", AAGUIDPage({ allowlist: [] }));
});