DadaoTask/web/e2e/richtext.mjs

/**
 * 富文本与附件 e2e：备注能写 Markdown、贴图能上传并渲染、附件能传能列。
 *
 * 这里刻意走真浏览器（不是只测接口）——因为要验的正是"编辑器把内容写回后，
 * 渲染出来是不是那个样子"，以及 <img src> 带 token 的那条路能不能真的取到图。
 */
import { chromium } from "playwright-core";

const WEB = process.env.WEB ?? "http://127.0.0.1:5180";
const API = process.env.API ?? "http://127.0.0.1:8100/api/v1";
const stamp = String(Date.now()).slice(-7);
const phone = `133${stamp}0`;

let failures = 0;
function check(name, ok, extra = "") {
  console.log(`${ok ? "PASS" : "FAIL"} ${name}${extra ? ` — ${extra}` : ""}`);
  if (!ok) failures += 1;
}

async function call(method, path, body, token) {
  const res = await fetch(`${API}${path}`, {
    method,
    headers: {
      "content-type": "application/json",
      ...(token ? { authorization: `Bearer ${token}` } : {}),
      ...(method === "GET" ? {} : { "idempotency-key": `e2e-${Math.random()}` }),
    },
    body: body ? JSON.stringify(body) : undefined,
  });
  const text = await res.text();
  const json = text ? JSON.parse(text) : {};
  if (json.code !== 0) throw new Error(`${method} ${path} -> ${json.code} ${json.message}`);
  return json.data;
}

/** 1×1 的 PNG，够用来验证"上传 → 直链 → 渲染"整条路。 */
const PNG = Buffer.from(
  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
  "base64",
);

const browser = await chromium.launch({
  executablePath:
    process.env.CHROME ??
    `${process.env.LOCALAPPDATA}\\ms-playwright\\chromium-1223\\chrome-win64\\chrome.exe`,
});

const problems = [];
const context = await browser.newContext({ viewport: { width: 1360, height: 940 } });
const page = await context.newPage();
page.on("console", (m) => {
  if (m.type() === "error") problems.push(m.text());
});
page.on("response", (r) => {
  if (r.status() >= 400) problems.push(`${r.status()} ${r.url()}`);
});

/** 记录所有 /raw 请求的状态码，验证图片确实被取到 */
const rawHits = [];
page.on("response", (r) => {
  if (r.url().includes("/attachments/") && r.url().includes("/raw")) {
    rawHits.push(r.status());
  }
});

try {
  await call("POST", "/auth/sms/send", { phone });
  const login = await call("POST", "/auth/login", { phone, code: "123456" });
  const token = login.tokens.access_token;
  const ws = await call("POST", "/workspaces", { name: `富文本 ${stamp}` }, token);
  const item = await call(
    "POST",
    `/workspaces/${ws.id}/items`,
    { title: "整理发票原件" },
    token,
  );

  await page.goto(`${WEB}/login`);
  await page.evaluate(
    ([access, refresh]) => {
      localStorage.setItem("dadao.access", access);
      localStorage.setItem("dadao.refresh", refresh);
    },
    [token, login.tokens.refresh_token],
  );

  await page.goto(`${WEB}/w/${ws.id}`);
  await page.getByRole("heading", { name: "任务" }).waitFor();
  // 新建的事项默认进收件箱，而默认视图是「今天」（按截止日筛），先切到「全部」
  await page.getByRole("button", { name: "全部", exact: true }).click();
  await page.getByRole("button", { name: "整理发票原件", exact: true }).click();

  const drawer = page.getByRole("dialog");
  await drawer.waitFor();

  // —— 1. Markdown 写作与预览 ——
  const editor = drawer.getByLabel("备注");
  await editor.click();
  await editor.fill("**必须** 一起寄出，参考 `财务口径 v3`。\n\n- 纸质发票\n- 快递单");
  await drawer.getByRole("button", { name: "保存备注" }).click();
  await drawer.getByRole("button", { name: "预览" }).click();

  check("预览渲染粗体", (await drawer.locator(".prose-dadao strong").count()) > 0);
  check("预览渲染行内代码", (await drawer.locator(".prose-dadao code").count()) > 0);
  check("预览渲染列表", (await drawer.locator(".prose-dadao li").count()) === 2);

  // —— 2. 编辑器插入图片（模拟选文件，走的是粘贴/拖拽同一段上传逻辑）——
  await drawer.getByRole("button", { name: "继续编辑" }).click();
  await drawer
    .locator('input[type="file"][accept="image/*"]')
    .setInputFiles({ name: "票据截图.png", mimeType: "image/png", buffer: PNG });
  await drawer.getByText("![票据截图.png]").or(drawer.locator("textarea")).first().waitFor();
  await page.waitForTimeout(1200); // 等上传返回并写回正文

  await drawer.getByRole("button", { name: "预览" }).click();
  const img = drawer.locator(".prose-dadao img").first();
  await img.waitFor({ timeout: 8000 });
  const src = await img.getAttribute("src");
  check("正文出现图片", Boolean(src?.includes("/raw?token=")), String(src ?? "").slice(0, 48));
  await page.waitForTimeout(800);
  check("图片资源能取到（/raw 返回 200）", rawHits.includes(200), rawHits.join(","));

  // —— 3. 附件面板上传与列表 ——
  await drawer
    .locator('input[type="file"]:not([accept="image/*"])')
    .setInputFiles({
      name: "报销须知.txt",
      mimeType: "text/plain",
      buffer: Buffer.from("抬头必须是公司全称", "utf8"),
    });
  await drawer.getByText("报销须知.txt").waitFor({ timeout: 8000 });
  check("附件上传后出现在列表", true);

  // —— 4. 落库后重新打开仍在（不是只活在内存里）——
  await drawer.getByRole("button", { name: "关闭" }).click();
  await page.getByRole("button", { name: "整理发票原件", exact: true }).click();
  const drawer2 = page.getByRole("dialog");
  await drawer2.waitFor();
  await drawer2.getByRole("button", { name: "预览" }).click();
  check(
    "重新打开后正文仍是渲染态",
    (await drawer2.locator(".prose-dadao strong").count()) > 0,
  );
  let stillThere = true;
  try {
    await drawer2.getByText("报销须知.txt").waitFor({ timeout: 6000 });
  } catch {
    stillThere = false;
  }
  check("重新打开后附件仍在", stillThere);

  const realProblems = problems.filter((p) => !p.includes("favicon"));
  check("控制台与网络无报错", realProblems.length === 0, realProblems.slice(0, 3).join(" | "));
} catch (err) {
  check("脚本执行", false, err instanceof Error ? err.message : String(err));
} finally {
  await context.close();
  await browser.close();
}

if (failures > 0) {
  console.error(`\n${failures} 项失败`);
  process.exit(1);
}
console.log("\nALL PASS");