voiceon-character-admin/tests/e2e/community.spec.ts

import AxeBuilder from "@axe-core/playwright";
import { expect, test } from "@playwright/test";
import type { Locator, Page } from "@playwright/test";

const interactiveActionRoles = ["button", "link", "menuitem"] as const;

async function expectNoHorizontalOverflow(page: Page): Promise<void> {
  const hasHorizontalOverflow = await page.evaluate(
    () => document.documentElement.scrollWidth > document.documentElement.clientWidth,
  );

  expect(hasHorizontalOverflow).toBe(false);
}

async function zoomTo200Percent(page: Page): Promise<void> {
  await page.evaluate(() => {
    document.documentElement.style.zoom = "2";
  });
}

async function expectNoCriticalOrSeriousAxeViolations(page: Page): Promise<void> {
  const results = await new AxeBuilder({ page }).analyze();
  const blockingViolations = results.violations.filter(
    (violation) => violation.impact === "critical" || violation.impact === "serious",
  );

  expect(blockingViolations).toEqual([]);
}

async function expectNoRawAdultBoolean(page: Page): Promise<void> {
  await expect(page.locator("body")).not.toContainText(/성인 (?:true|false)/);
}

async function expectActionAbsentAcrossInteractiveRoles(page: Page, name: string): Promise<void> {
  for (const role of interactiveActionRoles) {
    await expect(page.getByRole(role, { name })).toBeHidden();
  }
}

async function pressTabUntilFocused(page: Page, target: Locator): Promise<void> {
  for (let attempt = 0; attempt < 50; attempt += 1) {
    if (await target.evaluate((element) => element === document.activeElement || element.contains(document.activeElement))) {
      return;
    }

    await page.keyboard.press("Tab");
  }

  await expect(target).toBeFocused();
}

async function loginThroughMockMode(page: Page): Promise<void> {
  await page.goto("/login");
  await page.getByLabel("이메일").fill("admin@test.com");
  await page.getByLabel("비밀번호").fill("password");
  await page.getByRole("button", { name: "로그인" }).click();
  await expect(page).toHaveURL(/\/ai-characters$/);
}

test("Community mock audio preview loads metadata in Chromium", async ({ browserName, page }) => {
  test.skip(browserName !== "chromium", "Chromium metadata decode is the required mock proof.");

  // Given
  await loginThroughMockMode(page);
  await page.goto("/ai-characters/101/community-posts");
  const player = page.getByRole("group", { name: "커뮤니티 게시글 7003 오디오 플레이어" });

  // When
  await expect(player).toBeVisible();
  const audioStatus = await page.evaluate(async () => {
    const audio = document.querySelector<HTMLAudioElement>("audio[src^='data:audio/wav']");
    if (audio === null) {
      return { kind: "missing" } as const;
    }
    if (audio.readyState >= HTMLMediaElement.HAVE_METADATA) {
      return { duration: audio.duration, errorCode: audio.error?.code ?? null, kind: "loaded" } as const;
    }

    return new Promise<{ readonly duration: number; readonly errorCode: number | null; readonly kind: "loaded" } | { readonly errorCode: number | null; readonly kind: "error" }>((resolve) => {
      audio.addEventListener("loadedmetadata", () => resolve({ duration: audio.duration, errorCode: audio.error?.code ?? null, kind: "loaded" }), { once: true });
      audio.addEventListener("error", () => resolve({ errorCode: audio.error?.code ?? null, kind: "error" }), { once: true });
      audio.load();
    });
  });

  // Then
  expect(audioStatus).toMatchObject({ errorCode: null, kind: "loaded" });
  if (audioStatus.kind === "loaded") {
    expect(audioStatus.duration).toBeGreaterThan(0);
  }
});

test("mobile Community route stays read-only while list sheet and audio remain available", async ({ page }) => {
  // Given
  await page.setViewportSize({ width: 320, height: 640 });
  await loginThroughMockMode(page);

  // When / Then
  await page.goto("/ai-characters/101/community-posts");
  await expect(page.getByRole("heading", { name: "커뮤니티 게시글", exact: true })).toBeVisible();
  await expect(page.locator("article").filter({ hasText: "오디오가 포함된 커뮤니티 게시글입니다." }).getByText("일반 · 댓글 허용 · 성인 콘텐츠", { exact: true })).toBeVisible();
  await expectNoRawAdultBoolean(page);
  await expect(page.getByRole("button", { name: "오디오가 포함된 커뮤니티 게시글입니다. 게시글 열기" })).toBeVisible();
  await expect(page.getByRole("group", { name: "커뮤니티 게시글 7003 오디오 플레이어" })).toBeVisible();
  await expectActionAbsentAcrossInteractiveRoles(page, "커뮤니티 게시글 생성");
  await expectNoHorizontalOverflow(page);

  const opener = page.getByRole("button", { name: "오디오가 포함된 커뮤니티 게시글입니다. 게시글 열기" });
  await opener.click();
  const dialog = page.getByRole("dialog", { name: "커뮤니티 게시글" });
  await expect(dialog).toBeVisible();
  await expect(dialog.getByRole("group", { name: "커뮤니티 게시글 7003 오디오 플레이어" })).toBeVisible();
  await expect(dialog.getByText("오디오가 포함된 커뮤니티 게시글입니다.", { exact: true })).toBeVisible();
  await expect(dialog.getByRole("textbox", { name: "내용" })).toBeHidden();
  await expectActionAbsentAcrossInteractiveRoles(page, "수정 저장");
  await expectActionAbsentAcrossInteractiveRoles(page, "고정하기");
  await expectActionAbsentAcrossInteractiveRoles(page, "고정 해제");
  await expectActionAbsentAcrossInteractiveRoles(page, "비활성화");
  await expectNoHorizontalOverflow(page);
});

test("mobile Community create route shows guidance instead of the create form", async ({ page }) => {
  // Given
  await page.setViewportSize({ width: 320, height: 640 });
  await loginThroughMockMode(page);

  // When
  await page.goto("/ai-characters/101/community-posts/new");

  // Then
  await expect(page.getByRole("heading", { name: "모바일에서는 커뮤니티 게시글 생성을 제한합니다" })).toBeVisible();
  await expect(page.getByRole("form", { name: "커뮤니티 게시글 생성 입력 화면" })).toBeHidden();
  await expectActionAbsentAcrossInteractiveRoles(page, "생성");
  await expectNoHorizontalOverflow(page);
});

for (const width of [768, 1280] as const) {
  test(`tablet and desktop Community management remains available at ${width}px`, async ({ page }) => {
    // Given
    await page.setViewportSize({ width, height: 900 });
    await loginThroughMockMode(page);

    // When / Then
    await page.goto("/ai-characters/101/community-posts");
    await expect(page.getByRole("link", { name: "커뮤니티 게시글 생성" })).toBeVisible();
    await expect(page.getByRole("table").getByText("고정 · 댓글 허용 · 일반 콘텐츠", { exact: true })).toBeVisible();
    await expect(page.getByRole("table").getByText("일반 · 댓글 허용 · 성인 콘텐츠", { exact: true })).toBeVisible();
    await expectNoRawAdultBoolean(page);

    await page.getByRole("button", { name: "오늘의 상담 기록입니다. 게시글 열기" }).click();
    const dialog = page.getByRole("dialog", { name: "커뮤니티 게시글" });
    await expect(dialog.getByRole("textbox", { name: "내용" })).toBeVisible();
    await expect(dialog.getByRole("button", { name: "수정 저장" })).toBeVisible();
    await expect(dialog.getByRole("button", { name: "고정 해제" })).toBeVisible();
    await expect(dialog.getByRole("button", { name: "비활성화" })).toBeVisible();
    await dialog.getByRole("button", { name: "닫기" }).click();

    await page.getByRole("link", { name: "커뮤니티 게시글 생성" }).click();
    await expect(page.getByRole("form", { name: "커뮤니티 게시글 생성 입력 화면" })).toBeVisible();
    await expect(page.getByRole("button", { name: "생성" })).toBeVisible();
  });
}

test("Community sheet traps focus closes on Escape and returns focus", async ({ browserName, page }) => {
  test.skip(browserName === "webkit", "WebKit does not consistently tab-focus range inputs in this keyboard path.");

  // Given
  await page.setViewportSize({ width: 1280, height: 900 });
  await loginThroughMockMode(page);
  await page.goto("/ai-characters/101/community-posts");
  const opener = page.getByRole("button", { name: "오디오가 포함된 커뮤니티 게시글입니다. 게시글 열기" });

  // When / Then
  await opener.click();
  const dialog = page.getByRole("dialog", { name: "커뮤니티 게시글" });
  const closeButton = dialog.getByRole("button", { name: "닫기" });
  await expect(closeButton).toBeFocused();

  await page.keyboard.press("Shift+Tab");
  await expect(dialog.getByRole("button", { name: "비활성화" })).toBeFocused();
  await page.keyboard.press("Tab");
  await expect(closeButton).toBeFocused();

  await pressTabUntilFocused(page, dialog.getByRole("textbox", { name: "내용" }));
  await pressTabUntilFocused(page, dialog.getByRole("group", { name: "커뮤니티 게시글 7003 오디오 플레이어" }));
  await pressTabUntilFocused(page, dialog.getByRole("slider", { name: "재생 위치" }));
  await pressTabUntilFocused(page, dialog.getByRole("combobox", { name: "재생 속도" }));

  await page.keyboard.press("Escape");
  await expect(dialog).toBeHidden();
  await expect(opener).toBeFocused();
});

test("Community list and create routes keep zoom overflow and axe coverage across capability widths", async ({ page }) => {
  // Given
  await loginThroughMockMode(page);

  for (const width of [320, 768, 1280] as const) {
    for (const route of ["/ai-characters/101/community-posts", "/ai-characters/101/community-posts/new"] as const) {
      await page.setViewportSize({ width, height: 900 });
      await page.goto(route);

      // When
      await zoomTo200Percent(page);

      // Then
      await expectNoHorizontalOverflow(page);
      await expectNoCriticalOrSeriousAxeViolations(page);
    }
  }
});