var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import React from "react";
import { render, fireEvent } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { Header } from ".";
import { useResponsiveBreakpoints } from "~/hooks/useResponsiveBreakpoints";
vi.mock("react-i18next", (importOriginal) => __awaiter(void 0, void 0, void 0, function* () {
    return (Object.assign(Object.assign({}, (yield importOriginal())), { useTranslation: () => ({
            t: (key) => key,
        }) }));
}));
vi.mock("~/hooks/useResponsiveBreakpoints", () => ({
    useResponsiveBreakpoints: vi.fn(() => ({
        "2xs": true,
        xs: true,
        sm: false,
        md: false,
        lg: false,
        xl: false,
    })),
}));
const postEventMock = vi.fn();
const trackAnalyticsEventMock = vi.fn();
vi.mock("~/tracking", () => ({
    useTracking: () => ({
        postEvent: postEventMock,
        trackAnalyticsEvent: trackAnalyticsEventMock,
    }),
}));
const handleSelectCategoryMock = vi.fn();
vi.mock("~/sdks/LocalContent/context", () => ({
    useLocalContent: () => ({
        activeCategory: null,
        handleSelectCategory: (category) => () => {
            handleSelectCategoryMock(category);
        },
    }),
}));
vi.mock("@local-logic/design-system", () => __awaiter(void 0, void 0, void 0, function* () {
    return ({
        HorizontalScrollFilters: {
            Root: ({ children }) => (React.createElement("div", null, children)),
            ScrollList: ({ children }) => (React.createElement("div", { "data-testid": "horizontal-scroll-filters-scroll-list" }, children)),
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            Filter: ({ onSelectFilter }) => (React.createElement("button", { role: "button", "data-testid": "horizontal-scroll-filter", onClick: onSelectFilter })),
        },
    });
}));
vi.mock("@phosphor-icons/react", () => __awaiter(void 0, void 0, void 0, function* () {
    return ({
        TrainIcon: () => React.createElement("span", null, "TrainIcon"),
        PencilRulerIcon: () => React.createElement("span", null, "PencilRulerIcon"),
        ShoppingCartIcon: () => React.createElement("span", null, "ShoppingCartIcon"),
        ConfettiIcon: () => React.createElement("span", null, "ConfettiIcon"),
        PlantIcon: () => React.createElement("span", null, "PlantIcon"),
        FlowerLotusIcon: () => React.createElement("span", null, "FlowerLotusIcon"),
    });
}));
describe("Header", () => {
    const renderComponent = () => render(React.createElement(Header, { scores: {
            categories: [
                [
                    "transport",
                    {
                        scores: [
                            ["pedestrian_friendly", {}],
                            ["cycling_friendly", {}],
                        ],
                    },
                ],
                [
                    "education",
                    {
                        scores: [
                            ["primary_schools", {}],
                            ["high_schools", {}],
                        ],
                    },
                ],
            ],
        } }));
    beforeEach(() => {
        vi.resetAllMocks();
    });
    it("renders the correct number of category buttons", () => {
        const { getAllByRole } = renderComponent();
        const buttons = getAllByRole("button");
        expect(buttons).toHaveLength(2);
    });
    it("calls handleSelectCategory when a category button is clicked", () => {
        const { getAllByRole } = renderComponent();
        const buttons = getAllByRole("button");
        fireEvent.click(buttons[0]);
        expect(handleSelectCategoryMock).toHaveBeenCalledWith("transport");
    });
    it("tracks events with correct attributes", () => {
        const { getAllByRole } = renderComponent();
        const buttons = getAllByRole("button");
        fireEvent.click(buttons[0]);
        expect(handleSelectCategoryMock).toHaveBeenCalledWith("transport");
        expect(postEventMock).toHaveBeenCalledWith({
            eventType: "LC-Categories-Menu-Category-Selected",
            eventAttributes: [
                { label: "category", data: "transport" },
                { label: "isExpanded", data: false },
            ],
        });
        expect(trackAnalyticsEventMock).toHaveBeenCalledWith({
            eventName: "categories_menu_category_selected",
            eventAttributes: {
                category: "transport",
                isExpanded: false,
            },
        });
    });
    it("does not render on desktop", () => {
        vi.mocked(useResponsiveBreakpoints).mockReturnValue({
            "2xs": false,
            xs: false,
            sm: true,
            md: true,
            lg: true,
            xl: true,
            "2xl": false,
        });
        const { queryByTestId } = renderComponent();
        const categoryMenu = queryByTestId("categories-mobile-header");
        expect(categoryMenu).toBeNull();
    });
});
//# sourceMappingURL=index.test.js.map