@carlonicora/nextjs-jsonapi 3.24.2 → 3.26.0

package/src/features/analytics/components/__tests__/AnalyticsAdminTiles.spec.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AnalyticsAdminTiles } from "../AnalyticsAdminTiles";
+
+const row = (section: string, window: string, values: Partial<Record<string, number>>) =>
+  ({
+    id: `${section}|${window}`,
+    section,
+    window,
+    visitors: 0,
+    sessions: 0,
+    pageViews: 0,
+    pagesPerSession: 0,
+    consentShare: 0,
+    ...values,
+  }) as any;
+
+const summary = [
+  row("total", "current", { visitors: 120, sessions: 150, pageViews: 600, pagesPerSession: 4, consentShare: 0.25 }),
+  row("total", "previous", { visitors: 100 }),
+];
+
+describe("AnalyticsAdminTiles", () => {
+  it("shows the current totals with the delta against the previous window", () => {
+    render(<AnalyticsAdminTiles summary={summary} />);
+
+    expect(screen.getByTestId("analytics-tile-visitors")).toHaveTextContent("120");
+    expect(screen.getByTestId("analytics-tile-visitors-delta")).toHaveTextContent("+20%");
+    expect(screen.getByTestId("analytics-tile-consent-share")).toHaveTextContent("25%");
+    expect(screen.getByTestId("analytics-tile-pages-per-session")).toHaveTextContent("4.0");
+  });
+
+  it("suppresses the delta rather than showing Infinity when the previous window is zero", () => {
+    render(<AnalyticsAdminTiles summary={summary} />);
+
+    // sessions previous is 0
+    expect(screen.getByTestId("analytics-tile-sessions-delta")).toHaveTextContent("—");
+  });
+});

package/src/features/analytics/components/__tests__/AnalyticsBreakdownTable.spec.tsx

@@ -0,0 +1,39 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AnalyticsBreakdownTable } from "../AnalyticsBreakdownTable";
+
+const row = (dimension: string, key: string, visitors: number) =>
+  ({ id: `${dimension}|${key}`, dimension, key, visitors, sessions: visitors, pageViews: visitors * 2 }) as any;
+
+const breakdowns = {
+  source: [row("source", "(none)", 5), row("source", "linkedin", 30), row("source", "google", 12)],
+  medium: [],
+  campaign: [],
+  referrer: [],
+  route: [row("route", "/rolls/:id", 9)],
+  landing: [],
+} as any;
+
+describe("AnalyticsBreakdownTable", () => {
+  it("renders one tab per dimension", () => {
+    render(<AnalyticsBreakdownTable breakdowns={breakdowns} />);
+
+    expect(screen.getAllByRole("tab")).toHaveLength(6);
+  });
+
+  it("sorts rows by visitors descending and renders the (none) key as-is", () => {
+    render(<AnalyticsBreakdownTable breakdowns={breakdowns} />);
+
+    const rows = screen.getAllByTestId(/^analytics-breakdown-row-/);
+    expect(rows.map((r) => within(r).getAllByRole("cell")[0].textContent)).toEqual(["linkedin", "google", "(none)"]);
+  });
+
+  it("shows the selected dimension's rows when its tab is clicked", () => {
+    render(<AnalyticsBreakdownTable breakdowns={breakdowns} />);
+
+    fireEvent.click(screen.getByRole("tab", { name: "analytics.admin.dimensions.route" }));
+
+    expect(screen.getByText("/rolls/:id")).toBeInTheDocument();
+    expect(screen.queryByText("linkedin")).not.toBeInTheDocument();
+  });
+});

package/src/features/analytics/components/__tests__/AnalyticsJourneyContainer.spec.tsx

@@ -0,0 +1,124 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { configureI18n } from "../../../../i18n";
+import { AnalyticsAdminService } from "../../data/AnalyticsAdminService";
+import { AnalyticsJourneyContainer } from "../AnalyticsJourneyContainer";
+
+vi.mock("../../data/AnalyticsAdminService", () => ({
+  AnalyticsAdminService: {
+    getSession: vi.fn(),
+    getSessionPageViews: vi.fn(),
+    getSessions: vi.fn(),
+  },
+}));
+
+// The real page chrome needs the whole app shell (header, sidebar, navigation
+// contexts); the journey's own content is what is under test here.
+vi.mock("../../../../components", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../../../components")>();
+  return {
+    ...actual,
+    RoundPageContainer: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+  };
+});
+
+beforeAll(() => {
+  configureI18n({
+    useRouter: () => ({
+      push: vi.fn(),
+      replace: vi.fn(),
+      back: vi.fn(),
+      forward: vi.fn(),
+      refresh: vi.fn(),
+      prefetch: vi.fn(),
+    }),
+    useTranslations: () => (key: string) => key,
+    usePathname: () => "/",
+    Link: ({
+      href,
+      children,
+      prefetch: _prefetch,
+      ...rest
+    }: {
+      href: string;
+      children: React.ReactNode;
+      [key: string]: any;
+    }) => (
+      <a href={href} {...rest}>
+        {children}
+      </a>
+    ),
+  });
+});
+
+const session = (id: string, startedAt: string) =>
+  ({
+    id,
+    visitorId: "visitor-0000-0000-abc123",
+    consented: true,
+    startedAt: new Date(startedAt),
+    lastSeenAt: new Date(startedAt),
+    pageViews: 3,
+    section: "public",
+    landingRoute: "/pricing",
+    referrerHost: "linkedin.com",
+    utmSource: "linkedin",
+    utmMedium: "social",
+    utmCampaign: "launch",
+    deviceType: "desktop",
+  }) as any;
+
+const pageView = (id: string, createdAt: string, path: string) =>
+  ({ id, createdAt: new Date(createdAt), path, route: path, section: "public" }) as any;
+
+describe("AnalyticsJourneyContainer", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(AnalyticsAdminService.getSession).mockResolvedValue(session("s1", "2026-10-01T10:00:00.000Z"));
+    vi.mocked(AnalyticsAdminService.getSessionPageViews).mockResolvedValue([
+      pageView("p1", "2026-10-01T10:00:00.000Z", "/pricing"),
+      pageView("p2", "2026-10-01T10:02:00.000Z", "/features"),
+      pageView("p3", "2026-10-01T10:02:30.000Z", "/register"),
+    ]);
+    vi.mocked(AnalyticsAdminService.getSessions).mockResolvedValue([
+      session("s1", "2026-10-01T10:00:00.000Z"),
+      session("s9", "2026-09-20T08:00:00.000Z"),
+    ]);
+  });
+
+  it("renders the page views in order with the gap to the previous one", async () => {
+    render(<AnalyticsJourneyContainer sessionId="s1" />);
+
+    const rows = await screen.findAllByTestId(/^analytics-pageview-row-/);
+    expect(rows.map((row) => within(row).getAllByRole("cell")[2].textContent)).toEqual([
+      "/pricing",
+      "/features",
+      "/register",
+    ]);
+    expect(within(rows[1]).getByText("2 min")).toBeInTheDocument();
+    expect(AnalyticsAdminService.getSessionPageViews).toHaveBeenCalledWith({ sessionId: "s1" });
+  });
+
+  it("renders the attribution header", async () => {
+    render(<AnalyticsJourneyContainer sessionId="s1" />);
+
+    const header = await screen.findByTestId("analytics-journey-attribution");
+    expect(header).toHaveTextContent("linkedin");
+    expect(header).toHaveTextContent("analytics.admin.consented");
+  });
+
+  it("lists the visitor's other sessions, excluding the current one", async () => {
+    render(<AnalyticsJourneyContainer sessionId="s1" />);
+
+    await waitFor(() =>
+      expect(AnalyticsAdminService.getSessions).toHaveBeenCalledWith(
+        expect.objectContaining({ visitorId: "visitor-0000-0000-abc123", section: "all" }),
+      ),
+    );
+    expect(await screen.findByTestId("analytics-session-link-s9")).toHaveAttribute(
+      "href",
+      "/administration/analytics/sessions/s9",
+    );
+    expect(screen.queryByTestId("analytics-session-link-s1")).not.toBeInTheDocument();
+  });
+});

package/src/features/analytics/components/__tests__/AnalyticsPageContainers.spec.tsx

@@ -0,0 +1,117 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { configureI18n } from "../../../../i18n";
+import { AnalyticsAdminService } from "../../data/AnalyticsAdminService";
+import { AnalyticsAdminPageContainer } from "../AnalyticsAdminPageContainer";
+import { AnalyticsJourneyPageContainer } from "../AnalyticsJourneyPageContainer";
+
+vi.mock("../../data/AnalyticsAdminService", () => ({
+  AnalyticsAdminService: {
+    getSummary: vi.fn(),
+    getTimeline: vi.fn(),
+    getBreakdown: vi.fn(),
+    getSessions: vi.fn(),
+    getSession: vi.fn(),
+    getSessionPageViews: vi.fn(),
+    next: vi.fn(),
+  },
+}));
+
+// The real page chrome needs the whole app shell (header, sidebar, navigation
+// contexts); the page content is what is under test here.
+vi.mock("../../../../components", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../../../components")>();
+  return {
+    ...actual,
+    RoundPageContainer: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+  };
+});
+
+beforeAll(() => {
+  configureI18n({
+    useRouter: () => ({
+      push: vi.fn(),
+      replace: vi.fn(),
+      back: vi.fn(),
+      forward: vi.fn(),
+      refresh: vi.fn(),
+      prefetch: vi.fn(),
+    }),
+    useTranslations: () => (key: string) => key,
+    usePathname: () => "/",
+    Link: ({
+      href,
+      children,
+      prefetch: _prefetch,
+      ...rest
+    }: {
+      href: string;
+      children: React.ReactNode;
+      [key: string]: any;
+    }) => (
+      <a href={href} {...rest}>
+        {children}
+      </a>
+    ),
+  });
+});
+
+const session = (id: string, startedAt: string) =>
+  ({
+    id,
+    visitorId: "visitor-0000-0000-abc123",
+    consented: true,
+    startedAt: new Date(startedAt),
+    lastSeenAt: new Date(startedAt),
+    pageViews: 3,
+    section: "public",
+    landingRoute: "/pricing",
+    referrerHost: "linkedin.com",
+    utmSource: "linkedin",
+    deviceType: "desktop",
+  }) as any;
+
+describe("AnalyticsAdminPageContainer", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(AnalyticsAdminService.getSummary).mockResolvedValue([]);
+    vi.mocked(AnalyticsAdminService.getTimeline).mockResolvedValue([]);
+    vi.mocked(AnalyticsAdminService.getBreakdown).mockResolvedValue([]);
+    vi.mocked(AnalyticsAdminService.getSessions).mockResolvedValue([session("s1", "2026-10-01T10:00:00.000Z")]);
+  });
+
+  it("loads the dashboard and links each session under the given sessionPageUrl", async () => {
+    render(<AnalyticsAdminPageContainer pageUrl="/admin/stats" sessionPageUrl="/admin/stats/sessions" />);
+
+    expect(await screen.findByTestId("analytics-session-link-s1")).toHaveAttribute("href", "/admin/stats/sessions/s1");
+    expect(AnalyticsAdminService.getSummary).toHaveBeenCalledTimes(1);
+  });
+
+  it("falls back to the provider's default routes", async () => {
+    render(<AnalyticsAdminPageContainer />);
+
+    expect(await screen.findByTestId("analytics-session-link-s1")).toHaveAttribute(
+      "href",
+      "/administration/analytics/sessions/s1",
+    );
+  });
+});
+
+describe("AnalyticsJourneyPageContainer", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(AnalyticsAdminService.getSession).mockResolvedValue(session("s1", "2026-10-01T10:00:00.000Z"));
+    vi.mocked(AnalyticsAdminService.getSessionPageViews).mockResolvedValue([]);
+    vi.mocked(AnalyticsAdminService.getSessions).mockResolvedValue([
+      session("s1", "2026-10-01T10:00:00.000Z"),
+      session("s9", "2026-09-20T08:00:00.000Z"),
+    ]);
+  });
+
+  it("loads the given session and links the other sessions under pageUrl", async () => {
+    render(<AnalyticsJourneyPageContainer sessionId="s1" pageUrl="/admin/stats" />);
+
+    await waitFor(() => expect(AnalyticsAdminService.getSession).toHaveBeenCalledWith({ id: "s1" }));
+    expect(await screen.findByTestId("analytics-session-link-s9")).toHaveAttribute("href", "/admin/stats/sessions/s9");
+  });
+});

package/src/features/analytics/components/__tests__/AnalyticsSessionsTable.spec.tsx

@@ -0,0 +1,121 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { configureI18n } from "../../../../i18n";
+import { AnalyticsSessionsTable } from "../AnalyticsSessionsTable";
+
+beforeAll(() => {
+  // The package Link resolves its inner component at runtime and throws if i18n
+  // was never configured (src/i18n/config.ts).
+  configureI18n({
+    useRouter: () => ({
+      push: vi.fn(),
+      replace: vi.fn(),
+      back: vi.fn(),
+      forward: vi.fn(),
+      refresh: vi.fn(),
+      prefetch: vi.fn(),
+    }),
+    useTranslations: () => (key: string) => key,
+    usePathname: () => "/",
+    Link: ({
+      href,
+      children,
+      prefetch: _prefetch,
+      ...rest
+    }: {
+      href: string;
+      children: React.ReactNode;
+      [key: string]: any;
+    }) => (
+      <a href={href} {...rest}>
+        {children}
+      </a>
+    ),
+  });
+});
+
+const session = (id: string, extra: Record<string, unknown> = {}) =>
+  ({
+    id,
+    visitorId: `visitor-0000-${id}-abc123`,
+    consented: false,
+    startedAt: new Date("2026-10-01T10:00:00.000Z"),
+    lastSeenAt: new Date("2026-10-01T10:05:00.000Z"),
+    pageViews: 3,
+    section: "public",
+    landingRoute: "/pricing",
+    utmSource: "linkedin",
+    utmMedium: "social",
+    deviceType: "desktop",
+    ...extra,
+  }) as any;
+
+const SESSION_PAGE_URL = "/administration/analytics/sessions";
+
+describe("AnalyticsSessionsTable", () => {
+  it("renders the linked user's name and email", () => {
+    render(
+      <AnalyticsSessionsTable
+        rows={[session("s1", { user: { id: "u1", name: "Ada Lovelace", email: "ada@example.com" } })]}
+        sessionPageUrl={SESSION_PAGE_URL}
+        onLoadMore={vi.fn()}
+        hasMore={false}
+      />,
+    );
+
+    expect(screen.getByText("Ada Lovelace")).toBeInTheDocument();
+    expect(screen.getByText("ada@example.com")).toBeInTheDocument();
+    expect(screen.queryByText("analytics.admin.anonymous")).not.toBeInTheDocument();
+  });
+
+  it("renders an anonymous visitor with the last six characters of the visitor id", () => {
+    render(
+      <AnalyticsSessionsTable
+        rows={[session("s2")]}
+        sessionPageUrl={SESSION_PAGE_URL}
+        onLoadMore={vi.fn()}
+        hasMore={false}
+      />,
+    );
+
+    expect(screen.getByText("analytics.admin.anonymous")).toBeInTheDocument();
+    expect(screen.getByText("abc123")).toBeInTheDocument();
+  });
+
+  it("links each row to its journey page", () => {
+    render(
+      <AnalyticsSessionsTable
+        rows={[session("s3")]}
+        sessionPageUrl={SESSION_PAGE_URL}
+        onLoadMore={vi.fn()}
+        hasMore={false}
+      />,
+    );
+
+    expect(screen.getByTestId("analytics-session-link-s3")).toHaveAttribute("href", `${SESSION_PAGE_URL}/s3`);
+  });
+
+  it("shows the load-more button only when more sessions exist", () => {
+    const onLoadMore = vi.fn();
+    const { rerender } = render(
+      <AnalyticsSessionsTable
+        rows={[session("s4")]}
+        sessionPageUrl={SESSION_PAGE_URL}
+        onLoadMore={onLoadMore}
+        hasMore={false}
+      />,
+    );
+    expect(screen.queryByText("analytics.admin.load_more")).not.toBeInTheDocument();
+
+    rerender(
+      <AnalyticsSessionsTable
+        rows={[session("s4")]}
+        sessionPageUrl={SESSION_PAGE_URL}
+        onLoadMore={onLoadMore}
+        hasMore
+      />,
+    );
+    fireEvent.click(screen.getByText("analytics.admin.load_more"));
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+  });
+});

package/src/features/analytics/components/__tests__/AnalyticsTimelineChart.spec.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AnalyticsTimelineChart } from "../AnalyticsTimelineChart";
+
+const row = (bucket: string, section: string, visitors: number, pageViews: number) =>
+  ({
+    id: `${bucket}|${section}`,
+    bucket: new Date(bucket),
+    section,
+    visitors,
+    sessions: visitors,
+    pageViews,
+  }) as any;
+
+describe("AnalyticsTimelineChart", () => {
+  it("pivots flat rows into one entry per bucket with visitors and pageViews", () => {
+    render(
+      <AnalyticsTimelineChart
+        rows={[row("2026-10-01", "public", 3, 10), row("2026-10-01", "app", 2, 5), row("2026-10-02", "public", 4, 8)]}
+      />,
+    );
+
+    const data = JSON.parse(screen.getByTestId("analytics-timeline-data").textContent!);
+    expect(data).toHaveLength(2);
+    expect(data[0]).toMatchObject({ bucket: "2026-10-01", visitors: 5, pageViews: 15 });
+    expect(data[1]).toMatchObject({ bucket: "2026-10-02", visitors: 4, pageViews: 8 });
+  });
+
+  it("renders the empty state without a data node when there are no rows", () => {
+    render(<AnalyticsTimelineChart rows={[]} />);
+
+    expect(screen.queryByTestId("analytics-timeline-data")).not.toBeInTheDocument();
+    expect(screen.getByText("analytics.admin.no_data")).toBeInTheDocument();
+  });
+});