github-developer-review/src/components/__tests__/ContributionTable.test.tsx at 0be6a8e518be9959b7ea3436b4c5d1554436dcc2 · btrustteam/github-developer-review · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { describe, it, expect, afterEach } from "vitest";
import { render, screen, cleanup, fireEvent } from "@testing-library/react";
import { ContributionTable } from "@/components/ContributionTable";
import type { ContributionDetail } from "@/lib/types";

// Mock the ExpandedPRDetail since it uses SWR
vi.mock("@/components/ExpandedPRDetail", () => ({
  ExpandedPRDetail: ({ number }: { number: number }) => (
    <div data-testid="pr-detail">PR Detail #{number}</div>
  ),
}));

import { vi } from "vitest";

afterEach(cleanup);

const items: ContributionDetail[] = [
  {
    id: 1,
    number: 42,
    title: "Fix consensus bug",
    repoNameWithOwner: "bitcoin/bitcoin",
    type: "pr",
    state: "merged",
    createdAt: "2024-06-01T00:00:00Z",
    closedAt: "2024-06-02T00:00:00Z",
    url: "https://github.com/bitcoin/bitcoin/pull/42",
  },
  {
    id: 2,
    number: 10,
    title: "Add docs",
    repoNameWithOwner: "bitcoin/bitcoin",
    type: "issue",
    state: "open",
    createdAt: "2024-07-01T00:00:00Z",
    closedAt: null,
    url: "https://github.com/bitcoin/bitcoin/issues/10",
  },
];

describe("ContributionTable", () => {
  it("renders items", () => {
    render(<ContributionTable items={items} />);

    expect(screen.getByText("Fix consensus bug")).toBeInTheDocument();
    expect(screen.getByText("Add docs")).toBeInTheDocument();
  });

  it("shows empty message when no items", () => {
    render(<ContributionTable items={[]} />);
    expect(screen.getByText("No bitcoin contributions found")).toBeInTheDocument();
  });

  it("shows status badges", () => {
    render(<ContributionTable items={items} />);
    expect(screen.getByText("merged")).toBeInTheDocument();
    expect(screen.getByText("open")).toBeInTheDocument();
  });

  it("expands PR row on click", () => {
    render(<ContributionTable items={items} />);

    const row = screen.getByText("Fix consensus bug").closest("[role='button']");
    expect(row).toBeInTheDocument();

    fireEvent.click(row!);
    expect(screen.getByTestId("pr-detail")).toBeInTheDocument();
  });

  it("does not expand issue rows", () => {
    render(<ContributionTable items={items} />);

    const issueRow = screen.getByText("Add docs").closest("div");
    expect(issueRow).not.toHaveAttribute("role", "button");
  });

  it("renders column headers", () => {
    render(<ContributionTable items={items} />);

    expect(screen.getByText("Title")).toBeInTheDocument();
    expect(screen.getByText("Repo")).toBeInTheDocument();
    expect(screen.getByText("Status")).toBeInTheDocument();
    expect(screen.getByText("Date")).toBeInTheDocument();
  });

  it("renders repo name and date for each row", () => {
    render(<ContributionTable items={items} />);

    expect(screen.getAllByText("bitcoin/bitcoin")).toHaveLength(2);
  });

  it("collapses expanded PR when clicked again", () => {
    render(<ContributionTable items={items} />);

    const row = screen.getByText("Fix consensus bug").closest("[role='button']");
    fireEvent.click(row!);
    expect(screen.getByTestId("pr-detail")).toBeInTheDocument();

    fireEvent.click(row!);
    expect(screen.queryByTestId("pr-detail")).not.toBeInTheDocument();
  });

  it("has external links to GitHub", () => {
    render(<ContributionTable items={items} />);

    const links = screen.getAllByLabelText(/Open #/);
    expect(links[0]).toHaveAttribute("href", "https://github.com/bitcoin/bitcoin/pull/42");
    expect(links[0]).toHaveAttribute("target", "_blank");
  });
});