[Bug]: PR comment hover excerpts can end in a replacement character #35082

import { EnvironmentId, ProjectId } from "@t3tools/contracts";
import { expect, it, vi } from "vite-plus/test";
import { page, userEvent } from "vite-plus/test/browser";
import "~/index.css";

const state = vi.hoisted(() => ({ activity: null as unknown, preview: null as unknown }));
vi.mock(import("~/state/pullRequests"), () => ({
  pullRequestEnvironment: { previewCard: () => "card", activity: () => "activity", preview: {} },
  useSharedPullRequestSummary: () => null,
}));
vi.mock(import("~/state/query"), () => ({
  useEnvironmentQuery: (atom: unknown) => ({
    data: atom === "card" ? state.preview : atom === "activity" ? state.activity : null,
    error: null,
  }),
}));
vi.mock(import("~/state/use-atom-query-runner"), () => ({ useAtomQueryRunner: () => vi.fn() }));

import { render } from "../../../test/render";
import { PullRequestLinkPreview } from "./PullRequestLinkPreview";
import { pullRequestLinkSubject } from "./pullRequestDetail.logic";

const url = "https://github.com/owner/repo/pull/1#issuecomment-5";
function setup(body: string) {
  state.preview = {
    provider: "github", projectId: "project", repository: "owner/repo", number: 1,
    title: "Example pull request", url: url.split("#")[0], state: "open", isDraft: false,
    author: { login: "octocat", name: null, avatarUrl: null }, createdAt: "2000-01-01T00:00:00Z",
  };
  state.activity = {
    comments: [{ id: "c1", kind: "issue-comment", author: { login: "octocat", name: null, avatarUrl: null },
      body, createdAt: "2000-01-01T00:00:00Z", url, path: null, reviewState: null }],
    reviewThreads: [], commits: [],
  };
}
const cases = [
  { name: "FAILURE", prefix: "i ".repeat(139), tail: "😀bb", expected: "i ".repeat(139) + "\ud83d…" },
  { name: "CONTROL", prefix: "i ".repeat(139), tail: "xbbb", expected: "i ".repeat(139) + "x…" },
  { name: "DRAFT_ASCII_A", prefix: "a".repeat(278), tail: "😀bb", expected: "a".repeat(278) + "\ud83d…" },
];
for (const item of cases) {
  it(`renders ${item.name} through the real PR link hover card`, async () => {
    const body = item.prefix + item.tail;
    setup(body);
    const subject = pullRequestLinkSubject(url, state.activity as Parameters<typeof pullRequestLinkSubject>[1]);
    expect(subject?.kind).toBe("comment");
    expect(subject && "excerpt" in subject ? subject.excerpt : null).toBe(item.expected);
    await using screen = await render(
      <div style={{ padding: 220 }}>
        <PullRequestLinkPreview link={<a href={url}>PR comment</a>} originalUrl={url}
          target={{ environmentId: EnvironmentId.make("environment"),
            input: { projectId: ProjectId.make("project"), repository: "owner/repo", number: 1 } }} />
      </div>,
    );
    await userEvent.hover(screen.getByRole("link", { name: "PR comment" }));
    const excerpt = page.getByText(item.expected, { exact: true });
    await expect.element(excerpt).toBeVisible();
    await document.fonts.ready;
    const element = excerpt.element();
    const text = element.textContent!;
    expect(text).toBe(item.expected);
    const node = element.firstChild!;
    const range = document.createRange();
    range.setStart(node, text.length - 2);
    range.setEnd(node, text.length - 1);
    const glyph = range.getBoundingClientRect();
    const box = element.getBoundingClientRect();
    const style = getComputedStyle(element);
    console.log(`${item.name}_INPUT_CODE_UNITS=${body.length}`);
    console.log(`${item.name}_DOM_EXCERPT=${JSON.stringify(text)}`);
    console.log(`${item.name}_DOM_TAIL=${JSON.stringify(text.slice(-6))}`);
    console.log(`${item.name}_TAIL_CODE_UNITS=${Array.from({length: 3}, (_, i) => text.charCodeAt(text.length - 3 + i).toString(16)).join(",")}`);
    console.log(`${item.name}_LAYOUT=${JSON.stringify({width: box.width,height: box.height,scrollHeight: element.scrollHeight,lineClamp: style.webkitLineClamp,font: style.font,glyphTop: glyph.top-box.top,glyphBottom: glyph.bottom-box.top,glyphWidth: glyph.width,glyphLeft: glyph.left-box.left,glyphRight: glyph.right-box.left})}`);
    // Compare the browser's own glyph raster to explicit U+FFFD and to dropping it.
    const canvas = document.createElement("canvas"); canvas.width = 50; canvas.height = 30;
    const context = canvas.getContext("2d")!;
    function raster(value: string) {
      context.clearRect(0,0,50,30); context.font = style.font; context.fillText(value,0,20);
      return Array.from(context.getImageData(0,0,50,30).data).join(",");
    }
    const actualGlyph = text.at(-2)!;
    const replacementMatch = raster(actualGlyph) === raster("�");
    const emptyMatch = raster(actualGlyph) === raster("");
    console.log(`${item.name}_GLYPH_EQUALS_REPLACEMENT=${replacementMatch}`);
    console.log(`${item.name}_GLYPH_EQUALS_EMPTY=${emptyMatch}`);
    if (item.name !== "CONTROL") { expect(replacementMatch).toBe(true); expect(emptyMatch).toBe(false); }
    else { expect(replacementMatch).toBe(false); expect(emptyMatch).toBe(false); }
    if (item.name !== "DRAFT_ASCII_A") { expect(glyph.bottom).toBeLessThanOrEqual(box.bottom); expect(glyph.right).toBeLessThanOrEqual(box.right); }
    console.log(`BROWSER=${navigator.userAgent}`);
  });
}