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

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

describe("ConfigProvider", () => {
    it("should display loading initially", async () => {
        await act(async () => {
            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();
    });
});