buzz/desktop/tests/e2e/project-inbox.spec.ts

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

import { waitForAnimations } from "../helpers/animations";
import { installMockBridge, TEST_IDENTITIES } from "../helpers/bridge";

const DEFAULT_MOCK_PUBKEY = "deadbeef".repeat(8);
const BUZZ_REPO_ADDRESS = `30617:${DEFAULT_MOCK_PUBKEY}:buzz`;

test("Buzz Git pull request renders and stays actionable in Inbox", async ({
  page,
}) => {
  await page.addInitScript(() => {
    window.localStorage.setItem(
      "buzz-feature-overrides-v1",
      JSON.stringify({ projects: true }),
    );
  });
  await installMockBridge(page);
  await page.setViewportSize({ width: 1024, height: 720 });

  await page.goto("/", { waitUntil: "domcontentloaded" });
  await page.getByTestId("open-projects-view").click();
  await page.getByRole("button", { name: "Repositories", exact: true }).click();
  const repositoryCardBody = page
    .getByTestId("repository-card-buzz")
    .getByTestId("projects-grid-card-body");
  const repositoryCardBodyBounds = await repositoryCardBody.boundingBox();
  expect(repositoryCardBodyBounds).not.toBeNull();
  await page.mouse.click(
    (repositoryCardBodyBounds?.x ?? 0) +
      (repositoryCardBodyBounds?.width ?? 0) / 2,
    (repositoryCardBodyBounds?.y ?? 0) +
      (repositoryCardBodyBounds?.height ?? 0) / 2,
  );
  await page.getByRole("tab", { name: "Review" }).click();

  const alicePullRequest = page
    .getByTestId("project-pull-request-row")
    .filter({
      has: page.getByRole("button", { name: "alice", exact: true }),
    })
    .first();
  await expect(alicePullRequest).toBeVisible({ timeout: 10_000 });
  const pullRequestId = await alicePullRequest.getAttribute(
    "data-project-event-id",
  );
  expect(pullRequestId).toBeTruthy();

  await page.getByRole("button", { name: "Inbox", exact: true }).click();
  await page.evaluate(
    ({ author, id, repoAddress, viewer }) => {
      window.__BUZZ_E2E_PUSH_MOCK_FEED_ITEM__?.({
        id,
        kind: 1618,
        pubkey: author,
        content: "# Inbox rendering verification",
        created_at: Math.floor(Date.now() / 1000) + 1,
        channel_id: null,
        channel_name: "",
        channel_type: null,
        tags: [
          ["a", repoAddress],
          ["p", viewer],
          ["subject", "Inbox rendering verification"],
        ],
        category: "mention",
      });
    },
    {
      author: TEST_IDENTITIES.alice.pubkey,
      id: pullRequestId as string,
      repoAddress: BUZZ_REPO_ADDRESS,
      viewer: DEFAULT_MOCK_PUBKEY,
    },
  );

  const inboxRow = page.getByTestId(`home-inbox-item-${pullRequestId}`);
  await expect(inboxRow).toBeVisible({ timeout: 10_000 });
  const previewTypography = await inboxRow
    .locator(".inbox-preview-markdown")
    .evaluate((preview) => {
      const firstBlock = preview.firstElementChild;
      if (!firstBlock) {
        throw new Error("Expected the Inbox preview to render a first block.");
      }
      const previewStyle = getComputedStyle(preview);
      const firstBlockStyle = getComputedStyle(firstBlock);
      return {
        firstBlockTag: firstBlock.tagName,
        fontSizeMatches: firstBlockStyle.fontSize === previewStyle.fontSize,
        fontWeightMatches:
          firstBlockStyle.fontWeight === previewStyle.fontWeight,
        letterSpacingMatches:
          firstBlockStyle.letterSpacing === previewStyle.letterSpacing,
        lineHeightMatches:
          firstBlockStyle.lineHeight === previewStyle.lineHeight,
        lineClamp: firstBlockStyle.webkitLineClamp,
      };
    });
  expect(previewTypography).toEqual({
    firstBlockTag: "H1",
    fontSizeMatches: true,
    fontWeightMatches: true,
    letterSpacingMatches: true,
    lineHeightMatches: true,
    lineClamp: "2",
  });
  await inboxRow.locator(":scope > div").first().click();

  const detail = page.getByTestId("home-project-inbox-detail");
  const card = page.getByTestId("project-inbox-work-item-card");
  const layout = page.getByTestId("project-inbox-work-item-layout");
  await expect(detail).toBeVisible();
  await expect(card).toBeVisible();
  await expect(
    detail.locator('[data-testid^="project-inbox-author-avatar-"]'),
  ).toBeVisible();
  await expect(
    detail.getByRole("heading", {
      name: "alice sent you a review",
      exact: true,
    }),
  ).toBeVisible();
  await expect(page.getByText("Inbox rendering verification")).toBeVisible();
  await expect(
    page.getByRole("button", { name: "Approve", exact: true }),
  ).toBeVisible();
  const commentComposer = page.getByTestId(
    "project-pull-request-comment-composer",
  );
  await commentComposer
    .getByRole("button", { name: "Comment", exact: true })
    .click();
  await expect(
    page.getByRole("menuitemradio", { name: "Request changes" }),
  ).toBeVisible();
  await page.keyboard.press("Escape");
  await expect(
    page.getByRole("button", { name: "Merge", exact: true }),
  ).toBeVisible();

  const columnCount = await layout.evaluate(
    (element) =>
      getComputedStyle(element).gridTemplateColumns.split(" ").filter(Boolean)
        .length,
  );
  expect(columnCount).toBe(1);

  await waitForAnimations(page);
  await detail.screenshot({
    path: "test-results/project-inbox/01-pull-request-detail.png",
  });

  // Metadata phrases may wrap between items but must never compress
  // individual phrases into word-wide columns.
  await page.setViewportSize({ width: 1440, height: 900 });
  await expect
    .poll(() =>
      layout.evaluate(
        (element) =>
          getComputedStyle(element)
            .gridTemplateColumns.split(" ")
            .filter(Boolean).length,
      ),
    )
    .toBe(1);
  await expect(
    detail.getByRole("button", {
      name: "Open author-claimed origin channel #general",
    }),
  ).toBeVisible();
  const metadataPhrases = detail.locator("[data-project-metadata-phrase]");
  await expect(metadataPhrases).not.toHaveCount(0);
  const phraseLayouts = await metadataPhrases.evaluateAll((phrases) =>
    phrases.map((phrase) => {
      const style = getComputedStyle(phrase);
      return {
        height: phrase.getBoundingClientRect().height,
        lineHeight: Number.parseFloat(style.lineHeight),
      };
    }),
  );
  for (const phrase of phraseLayouts) {
    expect(phrase.height).toBeLessThanOrEqual(phrase.lineHeight * 1.5);
  }
  await waitForAnimations(page);
  await detail.screenshot({
    path: "test-results/project-inbox/02-pull-request-detail-wide.png",
  });
});