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

Code before:
        const content = "<svg xmlns='http://www.w3.org/2000/svg'></svg>";
        const { container } = render(<Image defaultContent="/url/to/default/image.png" content={content} />);
        const svg = container.querySelector("svg");
        expect(svg?.outerHTML.replace(/"/g, "'")).toBe(content);
    });
    it("should return the content prop when it is a string of length 4 or more that is not a SVG file or SVG XML", () => {
        const { getByRole } = render(
            <Image defaultContent="/url/to/default/image.png" content="/url/to/content/image.png" />,
        );
        const img = getByRole("img") as HTMLImageElement;
        expect(img.src).toBe("http://localhost/url/to/content/image.png");
    });
    it("should render a div when content prop 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 div = container.querySelector("div");
        expect(div).toBeInTheDocument();
    });
    it("should render a div when content prop is SVG XML", () => {
        const content = "<svg xmlns='http://www.w3.org/2000/svg'></svg>";
        const { container } = render(<Image defaultContent="/url/to/default/image.png" content={content} />);
        const div = container.querySelector("div");
        expect(div).toBeInTheDocument();
    });
    it("should render an img when content prop is not a SVG file or SVG XML", () => {
        const { getByRole } = render(
            <Image defaultContent="/url/to/default/image.png" content="/url/to/content/image.png" />,
        );
        const img = getByRole("img") as HTMLImageElement;
        expect(img).toBeInTheDocument();
    });
});


Review comment (suggestion):
```suggestion
    it("should render a div when content prop is inline SVG", () => {
```

Code after:
        const content = "<svg xmlns='http://www.w3.org/2000/svg'></svg>";
        const { container } = render(<Image defaultContent="/url/to/default/image.png" content={content} />);
        const svg = container.querySelector("svg");
        expect(svg?.outerHTML.replace(/"/g, "'")).toBe(content);
    });
    it("should return the content prop in the general case", () => {
        const { getByRole } = render(
            <Image defaultContent="/url/to/default/image.png" content="/url/to/content/image.png" />,
        );
        const img = getByRole("img") as HTMLImageElement;
        expect(img.src).toBe("http://localhost/url/to/content/image.png");
    });
    it("should render a div when content prop 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 div = container.querySelector("div");
        expect(div).toBeInTheDocument();
    });
    it("should render a div when content prop is inline SVG", () => {
        const content = "<svg xmlns='http://www.w3.org/2000/svg'></svg>";
        const { container } = render(<Image defaultContent="/url/to/default/image.png" content={content} />);
        const div = container.querySelector("div");
        expect(div).toBeInTheDocument();
    });
    it("should render an img when content prop is not SVG", () => {
        const { getByRole } = render(
            <Image defaultContent="/url/to/default/image.png" content="/url/to/content/image.png" />,
        );
        const img = getByRole("img") as HTMLImageElement;
        expect(img).toBeInTheDocument();
    });
});