import { describe, expect, test } from "vitest";
import { screen } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import { FeedTabBar } from "../../../components/feed/FeedTabBar.tsx";
import type { Category } from "../../../../shared/category.ts";
import { makeCategory, makeSession } from "../../fixtures.ts";
import { currentPath, renderWithContexts } from "../../render.tsx";

const categories: Category[] = [
  makeCategory({ id: "c1", slug: "music", name: "Music" }),
  makeCategory({ id: "c2", slug: "cinema", name: "Cinema" }),
];

describe("FeedTabBar", () => {
  test("guests don't get Followed; tabs navigate within the scope, the default one bare", async () => {
    const user = userEvent.setup();
    renderWithContexts(<FeedTabBar categorySlug="music" tab="hot" />, {
      route: "/music/hot",
      categories,
    });
    expect(screen.queryByRole("button", { name: "Followed" })).not
      .toBeInTheDocument();
    expect(screen.getByRole("button", { name: "Hot" })).toHaveClass("active");
    await user.click(screen.getByRole("button", { name: "New" }));
    expect(currentPath()).toBe("/music/new");
    // Journal is the default tab.
    await user.click(screen.getByRole("button", { name: "Journal" }));
    expect(currentPath()).toBe("/music");
  });

  test("signed in, Followed is there", async () => {
    const user = userEvent.setup();
    renderWithContexts(<FeedTabBar tab="follow" />, {
      session: makeSession(),
      route: "/follow",
    });
    expect(screen.getByRole("button", { name: "Followed" })).toHaveClass(
      "active",
    );
    await user.click(screen.getByRole("button", { name: "Hot" }));
    expect(currentPath()).toBe("/hot");
  });
});