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

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

afterEach(cleanup);

const defaultProps = mock<IStateProps>();

describe("Loader component rendering", () => {
	it("should render the component with circle", () => {
		defaultProps.name = "Circle.svg";

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

		const wrapper = screen.getByTestId("circle-svg");
		expect(wrapper).toBeTruthy();
	});

	it("should render the component with dots", () => {
		defaultProps.name = "Dots";
		defaultProps.size = "60";

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

		const wrapper = screen.getByTestId("dots-svg");
		expect(wrapper).toBeTruthy();
	});

	it("shouldn't render the component", () => {
		defaultProps.name = "Dottsi-1.svg";

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

		const circleWrapper = screen.queryByTestId("circle-svg");
		const dotsWrapper = screen.queryByTestId("dots-svg");
		expect(circleWrapper).not.toBeTruthy();
		expect(dotsWrapper).not.toBeTruthy();
	});
});
