import React from "react";
import { vi } from "vitest";
import { render } from "@testing-library/react";
import { Content } from "./index";
vi.mock("react-i18next", () => ({
    useTranslation: () => ({
        t: (key) => key,
    }),
}));
vi.mock("~/hooks/useResponsiveBreakpoints", () => ({
    useResponsiveBreakpoints: () => ({
        lg: true,
    }),
}));
const { useNeighborhoodCharacteristicsMock } = vi.hoisted(() => ({
    useNeighborhoodCharacteristicsMock: vi.fn(),
}));
vi.mock("~/sdks/NeighborhoodCharacteristics/context", () => ({
    useNeighborhoodCharacteristics: useNeighborhoodCharacteristicsMock,
}));
vi.mock("~/components/TitleHeader", () => {
    return {
        TitleHeader: ({ title }) => (React.createElement("div", { "data-testid": "sdk-title", "data-value": title }, title)),
    };
});
vi.mock("~/components/Attribution", () => {
    return {
        Attribution: () => (React.createElement("div", { "data-testid": "attribution-link" }, "Attribution Component")),
    };
});
vi.mock("../ScoreSection", () => {
    return {
        Root: ({ children }) => (React.createElement("div", { "data-testid": "score-section" }, children)),
        Title: ({ children }) => (React.createElement("div", null, children)),
        Description: ({ children }) => (React.createElement("div", null, children)),
    };
});
vi.mock("~/components/ScoreCardList", () => {
    return {
        Root: ({ children }) => (React.createElement("div", { "data-testid": "score-card-list" }, children)),
        Card: ({ title, onClick, }) => (React.createElement("div", { "data-testid": "score-card", onClick: () => onClick(title) }, title)),
    };
});
vi.mock("~/tracking", () => ({
    useTracking: () => ({
        track: vi.fn(),
    }),
}));
describe("Content", () => {
    beforeEach(() => {
        vi.resetAllMocks();
    });
    it("passes the title from context to TitleHeader when title is a string", () => {
        useNeighborhoodCharacteristicsMock.mockReturnValue({
            title: "Custom Title",
        });
        const { getByTestId } = render(React.createElement(Content, null));
        const titleElement = getByTestId("sdk-title");
        expect(titleElement).toHaveAttribute("data-value", "Custom Title");
    });
    it("passes the title from context to TitleHeader when sdkOptions title is false", () => {
        useNeighborhoodCharacteristicsMock.mockReturnValue({ title: false });
        const { getByTestId } = render(React.createElement(Content, null));
        const titleElement = getByTestId("sdk-title");
        expect(titleElement).toHaveAttribute("data-value", "false");
    });
    it("passes the default translation key to TitleHeader when title is undefined", () => {
        useNeighborhoodCharacteristicsMock.mockReturnValue({ title: undefined });
        const { getByTestId } = render(React.createElement(Content, null));
        const titleElement = getByTestId("sdk-title");
        expect(titleElement).toHaveAttribute("data-value", "title");
    });
    it("renders the ScoreSection component for each score group", () => {
        useNeighborhoodCharacteristicsMock.mockReturnValue({
            title: "Test Title",
            profilesData: null,
            scores: {},
            isLoading: false,
            locale: "en",
        });
        const { getAllByTestId } = render(React.createElement(Content, null));
        // There are 3 score groups. However we have to render them twice (mobile and desktop)
        // in order to achieve the responsive design, so we should have 6 sections rendered in total.
        expect(getAllByTestId("score-section")).toHaveLength(6);
    });
    it("renders the ScoreCardList.Card component for each score", () => {
        useNeighborhoodCharacteristicsMock.mockReturnValue({
            title: "Test Title",
            profilesData: null,
            scores: {
                pedestrian_friendly: {
                    value: 1,
                    text: "pedestrian_friendly",
                },
                transit_friendly: {
                    value: 2,
                    text: "transit_friendly",
                },
                groceries: {
                    value: 3,
                    text: "groceries",
                },
                quiet: {
                    value: 4,
                    text: "quiet",
                },
            },
            isLoading: false,
            locale: "en",
        });
        const { getAllByTestId } = render(React.createElement(Content, null));
        expect(getAllByTestId("score-card")).toHaveLength(4);
    });
    it("does not render scores when value is 0", () => {
        useNeighborhoodCharacteristicsMock.mockReturnValue({
            title: "Test Title",
            profilesData: null,
            scores: {
                pedestrian_friendly: {
                    value: 1,
                    text: "pedestrian_friendly",
                },
                groceries: {
                    value: 0,
                    text: "groceries",
                },
            },
            isLoading: false,
            locale: "en",
        });
        const { getAllByTestId } = render(React.createElement(Content, null));
        expect(getAllByTestId("score-card")).toHaveLength(1);
    });
    it("renders the Attribution component", () => {
        useNeighborhoodCharacteristicsMock.mockReturnValue({
            title: "Test Title",
            profilesData: null,
            scores: null,
            isLoading: false,
            locale: "en",
        });
        const { getByTestId } = render(React.createElement(Content, null));
        expect(getByTestId("attribution-link")).toBeInTheDocument();
    });
});
//# sourceMappingURL=index.test.js.map