deerflow2/frontend/tests/e2e/input-and-compose.spec.ts

import { expect, test } from "@playwright/test";

import {
  THREAD_FOR_WELCOME,
  newChatEntry,
  openChat,
  reuseThreadChatEntry,
  sendMessage,
  skipIfMissingThread,
} from "./support/chat-helpers";

test.describe("聊天工作台 / 输入区与发送", () => {
  test("DF-INPUT-001 欢迎态输入框默认展开", async ({ page }, testInfo) => {
    skipIfMissingThread(
      testInfo,
      THREAD_FOR_WELCOME,
      "FRONTEND_E2E_THREAD_ID",
    );
    await openChat(page, newChatEntry(THREAD_FOR_WELCOME!));

    const textarea = page.locator("textarea[name='message']");
    await expect
      .poll(async () => {
        return await textarea.evaluate((element) => {
          return Math.round(
            (element as HTMLTextAreaElement).getBoundingClientRect().height,
          );
        });
      })
      .toBeGreaterThan(120);
  });

  test("DF-INPUT-002 非欢迎态输入框可展开并在失焦后收起", async ({
    page,
  }, testInfo) => {
    skipIfMissingThread(
      testInfo,
      THREAD_FOR_WELCOME,
      "FRONTEND_E2E_THREAD_ID",
    );
    await openChat(page, reuseThreadChatEntry(THREAD_FOR_WELCOME!));

    const textarea = page.locator("textarea[name='message']");
    const inputHeight = async () =>
      await textarea.evaluate((element) => {
        return Math.round(
          (element as HTMLTextAreaElement).getBoundingClientRect().height,
        );
      });

    await expect.poll(inputHeight).toBeLessThan(110);

    await page.locator("div.absolute.inset-0.z-1.cursor-text").click();
    await expect.poll(inputHeight).toBeGreaterThan(120);

    await page.getByRole("main").first().click({ position: { x: 20, y: 20 } });
    await expect.poll(inputHeight).toBeLessThan(110);
  });

  test("DF-INPUT-003 点击欢迎态建议词会填充输入框并选中占位内容", async ({
    page,
  }, testInfo) => {
    skipIfMissingThread(
      testInfo,
      THREAD_FOR_WELCOME,
      "FRONTEND_E2E_THREAD_ID",
    );
    await openChat(page, newChatEntry(THREAD_FOR_WELCOME!));

    await page.getByText(/Webpage|网页/).click();

    const textarea = page.locator("textarea[name='message']");
    await expect(textarea).toHaveValue(/Create a webpage about \[topic\]|生成一个关于\[主题\]的网页/);
    await expect
      .poll(async () => {
        return await textarea.evaluate((element) => {
          const target = element as HTMLTextAreaElement;
          const start = target.value.indexOf("[");
          const end = target.value.indexOf("]") + 1;
          return {
            matches:
              target.selectionStart === start && target.selectionEnd === end,
          };
        });
      })
      .toEqual({ matches: true });
  });

  test("DF-INPUT-004 空消息不可提交", async ({ page }, testInfo) => {
    skipIfMissingThread(
      testInfo,
      THREAD_FOR_WELCOME,
      "FRONTEND_E2E_THREAD_ID",
    );
    await openChat(page, newChatEntry(THREAD_FOR_WELCOME!));

    const textarea = page.locator("textarea[name='message']");
    const submit = page.locator("button[aria-label='Submit']");

    await textarea.fill("   ");

    await expect(submit).toBeDisabled();
    await expect(page.locator(".is-user")).toHaveCount(0);
  });

  test("DF-INPUT-005 发送后输入框清空且只产生一条用户消息", async ({
    page,
  }, testInfo) => {
    skipIfMissingThread(
      testInfo,
      THREAD_FOR_WELCOME,
      "FRONTEND_E2E_THREAD_ID",
    );
    await openChat(page, newChatEntry(THREAD_FOR_WELCOME!));

    const textarea = page.locator("textarea[name='message']");
    const submit = page.locator("button[aria-label='Submit']");
    await textarea.click();
    await textarea.fill("你好，测试发送");
    await submit.evaluate((button) => {
      (button as HTMLButtonElement).click();
    });

    await expect(
      page.locator(".is-user").filter({ hasText: /你好，测试发送|测试发送/ }),
    ).toHaveCount(1);
    await expect(textarea).toHaveValue("");
  });

  test("DF-INPUT-006 快速重复点击发送不会重复提交", async ({
    page,
  }, testInfo) => {
    skipIfMissingThread(
      testInfo,
      THREAD_FOR_WELCOME,
      "FRONTEND_E2E_THREAD_ID",
    );
    await openChat(page, newChatEntry(THREAD_FOR_WELCOME!));

    const textarea = page.locator("textarea[name='message']");
    const submit = page.locator("button[aria-label='Submit']");

    await textarea.fill("重复提交测试");
    await submit.evaluate((button) => {
      const target = button as HTMLButtonElement;
      target.click();
      target.click();
      target.click();
    });

    await expect(
      page.locator(".is-user").filter({ hasText: "重复提交测试" }),
    ).toHaveCount(1);
  });
});