import * as React from "react";

import { ThemeProvider } from "styled-components";
import { render, cleanup } from "@testing-library/react";
import { parseTheme } from "@ax/helpers";
import "@testing-library/jest-dom";

import Icon, { IStateProps } from "@ax/components/Icon";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

describe("Icon component rendering", () => {
	it("should render the component", () => {
		const defaultProps: IStateProps = {
			name: "delete",
			size: "24",
		};

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

		const svgIcon = container.querySelector("svg");
		expect(svgIcon).toBeTruthy();
	});

	it("should render the component with no size", () => {
		const defaultProps: IStateProps = {
			name: "delete",
		};

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

		const svgIcon = container.querySelector("svg");
		expect(svgIcon).toBeTruthy();
	});

	it("should render the component with fill", () => {
		const defaultProps: IStateProps = {
			name: "delete",
			fill: "#FFFFFF",
		};

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

		const svgIcon = container.querySelector("svg");
		expect(svgIcon).toBeTruthy();
	});

	it("should not render the component if no svg", () => {
		const defaultProps: IStateProps = {
			name: "no-icon",
			size: "24",
		};

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

		const svgIcon = container.querySelector("svg");
		expect(svgIcon).toBeNull();
	});
});
