import * as React from "react";
import { ThemeProvider } from "styled-components";
import { render, cleanup, screen } from "@testing-library/react";
import "@testing-library/jest-dom";

import { parseTheme } from "@ax/helpers";
import Image from "@ax/components/Image";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

const defaultProps = {
	width: 1,
	url: "",
};

describe("Image component rendering", () => {
	it("should render the component with img tag", () => {
		defaultProps.url = "https://res.cloudinary.com/url-example.png";

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Image {...defaultProps} />
			</ThemeProvider>,
		);

		const imageWrapper = screen.getByTestId("image-wrapper");
		expect(imageWrapper).toBeTruthy();
	});

	it("should render the component griddoImage", () => {
		defaultProps.url = "/url-example.png";

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Image {...defaultProps} />
			</ThemeProvider>,
		);

		const imageWrapper = screen.queryByTestId("image-wrapper");
		expect(imageWrapper).not.toBeTruthy();
	});
});
