import * as React from "react";
import Select, { ISelectProps } from "@ax/components/Fields/Select";
import { ThemeProvider } from "styled-components";
import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";
import { render, screen, cleanup } from "@testing-library/react";
import { mock } from "jest-mock-extended";

afterEach(cleanup);

const defaultProps = mock<ISelectProps>();
defaultProps.name = "test name";
defaultProps.options = [
	{
		value: "first value",
		label: "first label",
	},
];

describe("Select component rendering", () => {
	test("should render the component", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Select {...defaultProps} />
			</ThemeProvider>,
		);
		expect(screen.getByTestId("select-component")).toBeTruthy();
	});

	test("should render the component with value selected", () => {
		defaultProps.value = "first value";
		defaultProps.type = "inline";

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Select {...defaultProps} />
			</ThemeProvider>,
		);
		expect(screen.getByDisplayValue("first value")).toBeTruthy();
	});

	test("should render the component with error class", async () => {
		defaultProps.value = "first value";
		defaultProps.error = true;

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

		const errors = container.getElementsByClassName("react-select-error");
		expect(errors.length).toBe(1);
	});
});
