import { render, screen, waitFor } from "@testing-library/react";
import { expect, test } from "vitest";
import { createEmptyActivityTemplateForm } from "@/features/activity-templates/model.js";
import { ActivityPhonePreview } from "./ActivityPhonePreview.jsx";

test("synchronizes the selected preview tab when display default changes", async () => {
    const form = createEmptyActivityTemplateForm("lalu");
    const { rerender } = render(<ActivityPhonePreview form={form} resourceGroups={[]} />);

    expect(screen.getByRole("button", { name: /Tasks/ })).toHaveAttribute("aria-pressed", "true");
    expect(screen.getByRole("button", { name: /Ranking/ })).toHaveAttribute("aria-pressed", "false");

    rerender(
        <ActivityPhonePreview
            form={{ ...form, displayConfigJson: JSON.stringify({ default_tab: "leaderboard" }) }}
            resourceGroups={[]}
        />,
    );

    await waitFor(() => {
        expect(screen.getByRole("button", { name: /Ranking/ })).toHaveAttribute("aria-pressed", "true");
    });
});
