Repository: Avaiga/taipy
File: frontend/taipy-gui/src/components/Taipy/Image.spec.tsx (TypeScript)

Code before:
        const { getByRole } = render(<Image defaultContent="/url/toto.png" active={true} defaultLabel="toto" />);
        const elt = getByRole("img");
        expect(elt).toBeInTheDocument();
    });
    it("dispatch a well formed message", async () => {
        const dispatch = jest.fn();
        const state: TaipyState = INITIAL_STATE;
        const { getByRole } = render(
            <TaipyContext.Provider value={{ state, dispatch }}>
                <Image defaultContent="/url/toto.png" onAction="on_action" />
            </TaipyContext.Provider>,
        );
        const elt = getByRole("button");
        await userEvent.click(elt);
        expect(dispatch).toHaveBeenCalledWith({
            name: "",
            payload: { args: [], action: "on_action" },
            type: "SEND_ACTION_ACTION",
        });
    });
    it("should return [undefined, undefined, false] when content prop is not provided", () => {
        const { getByRole } = render(<Image defaultContent="/url/to/default/image.png" />);
        const img = getByRole("img") as HTMLImageElement;
        expect(img.src).toBe("http://localhost/url/to/default/image.png");
    });
    it("should return [undefined, undefined, false] when content prop is an empty string", () => {
        const { getByRole } = render(<Image defaultContent="/url/to/default/image.png" content="" />);
        const img = getByRole("img") as HTMLImageElement;
        expect(img.src).toBe("http://localhost/");
    });
    it("should return [undefined, undefined, false] when content prop is a string of length less than 4", () => {
        const { getByRole } = render(<Image defaultContent="/url/to/default/image.png" content="abc" />);
        const img = getByRole("img") as HTMLImageElement;
        expect(img.src).toBe("http://localhost/abc");
    });
    it("should return the content prop when it is a SVG file", async () => {
        const svgContent = '<svg xmlns="http://www.w3.org/2000/svg"></svg>';
        (axios.get as jest.Mock).mockResolvedValue({ data: svgContent });

        const { container } = render(
            <Image defaultContent="/url/to/default/image.png" content="/url/to/content/image.svg" />,
        );

        // Wait for useEffect to complete
        await new Promise((resolve) => setTimeout(resolve, 0));

        const svg = container.querySelector("svg");
        expect(svg?.outerHTML.replace(/"/g, "'")).toBe(svgContent.replace(/"/g, "'"));
    });
    it("should return the content prop when it is SVG XML", () => {
        const content = "<svg xmlns='http://www.w3.org/2000/svg'></svg>";

Review comment (suggestion):
```suggestion
    it("URL replaced when content prop is an empty string", () => {
```

Code after:
        const { getByRole } = render(<Image defaultContent="/url/toto.png" active={true} defaultLabel="toto" />);
        const elt = getByRole("img");
        expect(elt).toBeInTheDocument();
    });
    it("dispatch a well formed message", async () => {
        const dispatch = jest.fn();
        const state: TaipyState = INITIAL_STATE;
        const { getByRole } = render(
            <TaipyContext.Provider value={{ state, dispatch }}>
                <Image defaultContent="/url/toto.png" onAction="on_action" />
            </TaipyContext.Provider>,
        );
        const elt = getByRole("button");
        await userEvent.click(elt);
        expect(dispatch).toHaveBeenCalledWith({
            name: "",
            payload: { args: [], action: "on_action" },
            type: "SEND_ACTION_ACTION",
        });
    });
    it("URL used when content prop is not provided", () => {
        const { getByRole } = render(<Image defaultContent="/url/to/default/image.png" />);
        const img = getByRole("img") as HTMLImageElement;
        expect(img.src).toBe("http://localhost/url/to/default/image.png");
    });
    it("URL replaced when content prop is an empty string", () => {
        const { getByRole } = render(<Image defaultContent="/url/to/default/image.png" content="" />);
        const img = getByRole("img") as HTMLImageElement;
        expect(img.src).toBe("http://localhost/");
    });
    it("URL replaced when content prop is a string of length less than 4", () => {
        const { getByRole } = render(<Image defaultContent="/url/to/default/image.png" content="abc" />);
        const img = getByRole("img") as HTMLImageElement;
        expect(img.src).toBe("http://localhost/abc");
    });
    it("should return the content prop when it is a SVG file", async () => {
        const svgContent = '<svg xmlns="http://www.w3.org/2000/svg"></svg>';
        (axios.get as jest.Mock).mockResolvedValue({ data: svgContent });

        const { container } = render(
            <Image defaultContent="/url/to/default/image.png" content="/url/to/content/image.svg" />,
        );

        // Wait for useEffect to complete
        await new Promise((resolve) => setTimeout(resolve, 0));

        const svg = container.querySelector("svg");
        expect(svg?.outerHTML.replace(/"/g, "'")).toBe(svgContent.replace(/"/g, "'"));
    });
    it("should return the content prop when it is inline SVG", () => {
        const content = "<svg xmlns='http://www.w3.org/2000/svg'></svg>";