shoc-frontend-new/src/test/app/(protected)/workorders/slide-over-comment-highlight.test.tsx

import { screen } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { SlideOverCommentsTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab";
import type { WorkOrderComment } from "@/domain/work-orders/types/work-order-detail";
import type { CommentHighlight } from "@/domain/work-orders/utils/work-order-deep-link";
import { renderWithProviders } from "@/test/test-utils";

const ME = "dispatcher-me";

function comment(
  id: number,
  authorId: string,
  createdDate: string,
  text: string,
): WorkOrderComment {
  return {
    id,
    createdDate,
    commenttext: text,
    commentType: "General",
    userName: authorId === ME ? "Me Myself" : "Omar Diaz",
    authorId,
    commenter: null,
    recordType: "WorkOrder",
  };
}

// Board comment times arrive without a zone designator and are UTC.
const thread = [
  comment(1, "omar", "2026-09-18T08:00:00", "Earlier note, already seen"),
  comment(2, "omar", "2026-09-18T09:30:00", "Vendor is running late"),
  comment(3, ME, "2026-09-18T09:40:00", "My own comment"),
  comment(4, "omar", "2026-09-18T10:00:00", "Can you check this @[dispatcher-me:Me Myself]"),
  comment(5, "omar", "2026-09-18T10:05:00", "Arrived on site"),
];

function renderTab(highlight: CommentHighlight | null) {
  renderWithProviders(
    <SlideOverCommentsTab
      comments={thread}
      isReadOnly={false}
      isPending={false}
      currentUserId={ME}
      highlight={highlight}
      onSubmit={vi.fn()}
    />,
    { withAuth: false },
  );
}

function highlightedTexts(): string[] {
  return Array.from(document.querySelectorAll('[data-highlighted="true"]')).map(
    (row) => row.querySelector("p")?.textContent ?? "",
  );
}

describe("comments opened from a notification", () => {
  const originalScroll = Element.prototype.scrollIntoView;

  afterEach(() => {
    Element.prototype.scrollIntoView = originalScroll;
  });

  it("highlights the new comments by others that a comment notification covers", () => {
    const scroll = vi.fn();
    Element.prototype.scrollIntoView = scroll;

    renderTab({ since: "2026-09-18T09:30:00Z", mentions: false });

    expect(highlightedTexts()).toEqual(["Vendor is running late", "Arrived on site"]);
    expect(screen.getAllByText("New for you:", { exact: false })).toHaveLength(2);
    expect(scroll).toHaveBeenCalledTimes(1);
    expect(scroll).toHaveBeenCalledWith({ block: "nearest" });
  });

  it("highlights only the mentioning comment for a mention notification", () => {
    renderTab({ since: "2026-09-18T10:00:00Z", mentions: true });

    expect(highlightedTexts()).toEqual(["Can you check this @[dispatcher-me:Me Myself]"]);
  });

  it("never highlights the user's own comments", () => {
    renderTab({ since: "2026-09-18T00:00:00Z", mentions: false });

    expect(highlightedTexts()).not.toContain("My own comment");
    expect(highlightedTexts()).toHaveLength(3);
  });

  it("highlights nothing when the tab was opened without a notification", () => {
    renderTab(null);

    expect(highlightedTexts()).toEqual([]);
    expect(screen.queryByText("New for you:", { exact: false })).not.toBeInTheDocument();
  });
});