import React from "react";
import { render, screen, act } from "@testing-library/react";
import ConfigProvider from "../src/ConfigProvider";

global.fetch = jest.fn(() =>
    Promise.resolve({
        ok: true,
        json: () =>
            Promise.resolve({
                BACKEND_HOST: "http://localhost:5000",
                FRONTEND_HOST: "http://localhost:3000",
            }),
    })
);

describe("ConfigProvider", () => {
    it("should display loading initially", () => {
        render(
            <ConfigProvider>
                <div>Loaded</div>
            </ConfigProvider>
        );
        expect(screen.getByText(/Loading configuration/i)).toBeInTheDocument();
    });

    it("should display children after loading", async () => {
        await act(async () => {
            render(
                <ConfigProvider>
                    <div>Loaded</div>
                </ConfigProvider>
            );
        });

        const loadedText = await screen.findByText("Loaded");
        expect(loadedText).toBeInTheDocument();
    });
});