import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { render, screen, waitFor } from "@testing-library/react";
import { getTranslationServices } from "./getTranslationServices.js";
describe(getTranslationServices.name, () => {
    const en = {
        greeting: "Hello World {{friends}}",
        farewell: "Goodbye",
    };
    const fr = { greeting: "Bonjour le monde {{friends}}" };
    const testResources = {
        en,
        fr,
    };
    let OdysseyTranslationProvider;
    let useTranslation;
    // create a fresh instance of the translation services before each test
    beforeEach(() => {
        const services = getTranslationServices({
            namespace: "test-app",
            defaultLanguageCode: "en",
            resources: testResources,
        });
        OdysseyTranslationProvider = services.TranslationProvider;
        useTranslation = services.useTranslation;
    });
    const TestComponent = () => {
        const [t, i18n] = useTranslation();
        return (_jsxs("div", { children: [_jsx("h1", { children: t("greeting", { friends: "FRIENDS" }) }), _jsxs("p", { children: ["Current language: ", i18n.language] })] }));
    };
    test("renders `children` and uses the default translations", () => {
        render(_jsx(OdysseyTranslationProvider, { children: _jsx(TestComponent, {}) }));
        // check if the English text is rendered by default
        expect(screen.getByRole("heading", { name: "Hello World FRIENDS" })).toBeInTheDocument();
    });
    test("switches languages when the `languageCode` prop changes", async () => {
        const { rerender } = render(_jsx(OdysseyTranslationProvider, { languageCode: "en", children: _jsx(TestComponent, {}) }));
        expect(screen.getByRole("heading", { name: "Hello World FRIENDS" })).toBeInTheDocument();
        // rerender the component with a new language prop
        rerender(_jsx(OdysseyTranslationProvider, { languageCode: "fr", children: _jsx(TestComponent, {}) }));
        // wait for the content to update and check for the French text
        await waitFor(() => {
            expect(screen.getByRole("heading", { name: "Bonjour le monde FRIENDS" })).toBeInTheDocument();
            expect(screen.getByText("Current language: fr")).toBeInTheDocument();
        });
    });
    test("applies translation overrides to one of the known languages", () => {
        render(_jsx(OdysseyTranslationProvider, { translationOverrides: { en: { greeting: "Hello Overridden!" } }, children: _jsx(TestComponent, {}) }));
        expect(screen.getByRole("heading", { name: "Hello Overridden!" })).toBeInTheDocument();
    });
    describe("when components are nested", () => {
        const contributionsPackageResources = {
            en: {
                greeting: "I am the nested greeting",
                farewell: "I am the nested goodbye",
                withPlaceholders: "I am only available in the nested translations - {{placeholder1}}, {{placeholder2}}",
            },
        };
        const { TranslationProvider: ContributionsPackageOdysseyTranslationProvider, useTranslation: useContributionsPackageTranslation, Trans: ContributionsPackageTrans, } = getTranslationServices({
            namespace: "nested-app",
            defaultLanguageCode: "en",
            resources: contributionsPackageResources,
        });
        const ContributionsPackageComponent = () => {
            const { t } = useContributionsPackageTranslation();
            return (_jsxs("section", { children: [_jsx("h2", { children: t("greeting") }), _jsx("h2", { children: _jsx(ContributionsPackageTrans, { i18nKey: "withPlaceholders", values: {
                                placeholder1: "placeholder text one",
                                placeholder2: "placeholder text two",
                            } }) })] }));
        };
        const ComponentWithNestedContributions = () => {
            const { t } = useTranslation();
            return (_jsxs("div", { children: [_jsx("h1", { children: t("greeting", { friends: "PARENT" }) }), _jsx(ContributionsPackageComponent, {})] }));
        };
        test("the appropriate translation bundle is used for each component", async () => {
            render(_jsx(OdysseyTranslationProvider, { children: _jsx(ContributionsPackageOdysseyTranslationProvider, { children: _jsx(ComponentWithNestedContributions, {}) }) }));
            await waitFor(() => {
                // we are correctly using top level odyssey translation provider text
                expect(screen.getByRole("heading", { name: "Hello World PARENT" })).toBeInTheDocument();
                // we are correctly using the nested odyssey translation provider text
                expect(screen.getByRole("heading", { name: "I am the nested greeting" })).toBeInTheDocument();
                expect(screen.getByRole("heading", {
                    name: "I am only available in the nested translations - placeholder text one, placeholder text two",
                })).toBeInTheDocument();
            });
        });
    });
});
//# sourceMappingURL=getTranslationServices.browser.test.js.map