Add copy link and highlight to comments

Opening a comment link expands the revision the comment is in, even if
the link is opened while already on the page, and scrolls to it.

This also fixes scrolling to URL fragments that aren't valid CSS
selectors, such as comment ids starting with a digit.

tests/e2e/clipboard.spec.ts

@@ -87,6 +87,19 @@ test("copy to clipboard", async ({ page, browserName, context }) => {
     await expectClipboard("Inline `code` has `back-ticks around` it.\n");
   }
 
+  // Link to a patch comment.
+  {
+    await page.goto(`${cobUrl}/patches`);
+    await page
+      .getByRole("link", { name: "Taking another stab at the README" })
+      .click();
+    const review = page.locator(".card", { hasText: "rejected revision" });
+    const reviewId = await review.getAttribute("id");
+    await review.hover();
+    await review.getByRole("button", { name: "Copy link to comment" }).click();
+    await expectClipboard(`${page.url()}#${reviewId}`);
+  }
+
   // Clear the system clipboard contents so developers don't wonder why there's
   // random stuff in their clipboard after running tests.
   await page.evaluate<string>("navigator.clipboard.writeText('')");

tests/e2e/repo/patch.spec.ts

@@ -154,3 +154,43 @@ test("commit listing ordering keeping stable on browser navigation", async ({
     .waitFor();
   await expectCorrectCommitListing();
 });
+
+test("link to a comment in an older revision", async ({ page }) => {
+  await page.goto(`${cobUrl}/patches`);
+  await page
+    .getByRole("link", { name: "Taking another stab at the README" })
+    .click();
+  await page.getByLabel("expand").first().click();
+  const review = page.locator(".card", { hasText: "accepted revision" });
+  const reviewId = (await review.getAttribute("id")) ?? "";
+  expect(reviewId).toMatch(/^[a-f0-9]{40}$/);
+  const patchUrl = page.url();
+
+  await page.goto(`${patchUrl}#${reviewId}`);
+  await expect(review).toBeVisible();
+  await expect(review).toHaveClass(/targeted/);
+  await expect(review).toBeInViewport();
+
+  await page.goto(patchUrl);
+  await expect(review).toBeHidden();
+  await page.evaluate(id => (window.location.hash = id), reviewId);
+  await expect(review).toBeVisible();
+  await expect(review).toHaveClass(/targeted/);
+  await expect(review).toBeInViewport();
+});
+
+test("malformed fragment does not break the patch page", async ({ page }) => {
+  await page.goto(`${cobUrl}/patches`);
+  await page
+    .getByRole("link", { name: "Taking another stab at the README" })
+    .click();
+  await page
+    .getByRole("heading", { name: "Taking another stab at the README" })
+    .waitFor();
+
+  await page.goto(`${page.url()}#%`);
+  await expect(
+    page.getByRole("heading", { name: "Taking another stab at the README" }),
+  ).toBeVisible();
+  await expect(page.locator(".card.targeted")).toHaveCount(0);
+});

tests/unit/utils.test.ts

@@ -429,3 +429,22 @@ describe("untwemoji", () => {
     expect(node.innerHTML).toEqual("ab");
   });
 });
+
+describe("fragmentId", () => {
+  test.each([
+    { hash: "", expected: undefined },
+    { hash: "#", expected: undefined },
+    { hash: "#delegate", expected: "delegate" },
+    { hash: "delegate", expected: "delegate" },
+    {
+      hash: "#0a1b2c3d4e5f60718293a4b5c6d7e8f901234567",
+      expected: "0a1b2c3d4e5f60718293a4b5c6d7e8f901234567",
+    },
+    { hash: "#caf%C3%A9", expected: "café" },
+    { hash: "#%", expected: undefined },
+    { hash: "#%zz", expected: undefined },
+    { hash: "#%E0%A4%A", expected: undefined },
+  ])("fragmentId($hash) => $expected", ({ hash, expected }) => {
+    expect(utils.fragmentId(hash)).toEqual(expected);
+  });
+});