import React from "react";
import { vi } from "vitest";
import { render } from "@testing-library/react";
import { Highlights } from "./index";
import { useNeighborhoodHighlights } from "~/sdks/NeighborhoodHighlights/context";
import { getHighlightScoreKeys } from "~/sdks/NeighborhoodHighlights/utils/getHighlightScoreKeys";
const { useNeighborhoodHighlights: mockUseNeighborhoodHighlights } = vi.hoisted(() => ({
    useNeighborhoodHighlights: vi.fn(() => ({
        isLoading: false,
        scores: {
            pedestrian_friendly: {
                value: "4",
                text: "pedestrian_friendly",
            },
            bike_friendly: {
                value: "3",
                text: "bike_friendly",
            },
        },
    })),
}));
vi.mock("react-i18next", () => ({
    useTranslation: () => ({
        t: (key) => key,
    }),
}));
vi.mock("~/sdks/NeighborhoodHighlights/context", () => ({
    useNeighborhoodHighlights: mockUseNeighborhoodHighlights,
}));
vi.mock("~/sdks/NeighborhoodHighlights/utils/getHighlightScoreKeys", () => ({
    getHighlightScoreKeys: vi.fn((scores) => Object.keys(scores)),
}));
vi.mock("./Item", () => ({
    Item: ({ isLoading, score }) => (React.createElement("div", { "data-testid": "item", "data-is-loading": isLoading, "data-score": score }, isLoading ? "loading" : `score: ${score}`)),
}));
vi.mock("~/components/NoDataContent", () => ({
    NoDataContent: ({ text }) => (React.createElement("div", { "data-testid": "no-data-content" }, text)),
}));
describe("Highlights", () => {
    beforeEach(() => {
        vi.resetAllMocks();
    });
    it("calls getHighlightScoreKeys with the correct scores", () => {
        render(React.createElement(Highlights, null));
        expect(getHighlightScoreKeys).toHaveBeenCalledWith({
            pedestrian_friendly: {
                value: "4",
                text: "pedestrian_friendly",
            },
            bike_friendly: {
                value: "3",
                text: "bike_friendly",
            },
        });
    });
    it("renders the correct number of items when loading", () => {
        vi.mocked(useNeighborhoodHighlights).mockReturnValue({
            title: false,
            isLoading: true,
        });
        const { getAllByTestId } = render(React.createElement(Highlights, null));
        const items = getAllByTestId("item");
        expect(items).toHaveLength(3);
    });
    it("renders the correct number of items when not loading", () => {
        vi.mocked(useNeighborhoodHighlights).mockReturnValue({
            title: false,
            isLoading: false,
            // @ts-expect-error - we don't need the full scores object for this test
            scores: {
                pedestrian_friendly: {
                    value: "8",
                    text: "pedestrian_friendly",
                },
                cycling_friendly: {
                    value: "8",
                    text: "cycling_friendly",
                },
                transit_friendly: {
                    value: "8",
                    text: "transit_friendly",
                },
            },
        });
        const { getAllByTestId } = render(React.createElement(Highlights, null));
        const items = getAllByTestId("item");
        expect(items).toHaveLength(3);
    });
    it("renders NoDataContent when there's no highlights", () => {
        vi.mocked(useNeighborhoodHighlights).mockReturnValue({
            title: false,
            isLoading: false,
            // @ts-expect-error - we don't need the full scores object for this test
            // Providing an empty object to simulate no scores available
            scores: {},
        });
        const { getByTestId } = render(React.createElement(Highlights, null));
        const noDataContent = getByTestId("no-data-content");
        expect(noDataContent).toBeInTheDocument();
        expect(noDataContent).toHaveTextContent("noData");
    });
});
//# sourceMappingURL=index.test.js.map