import * as React from "react";
import NoteField, { INoteFieldProps } from "@ax/components/Fields/NoteField";
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<INoteFieldProps>();
defaultProps.value = { text: "This is the text" };

describe("NoteField component rendering", () => {
	it("should render the component", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<NoteField {...defaultProps} />
			</ThemeProvider>,
		);

		const noteFieldWrapper = screen.getByTestId("note-field-wrapper");

		expect(noteFieldWrapper).toBeTruthy();
	});

	it("should render text value", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<NoteField {...defaultProps} />
			</ThemeProvider>,
		);

		expect(screen.getByText("This is the text"));
	});

	it("should not render title", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<NoteField {...defaultProps} />
			</ThemeProvider>,
		);

		const title = screen.queryByTestId("note-field-title");

		expect(title).toBeNull();
	});

	it("should render title", () => {
		defaultProps.value.title = "Super title";

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

		const title = screen.queryByTestId("note-field-title");

		expect(title).toBeTruthy();
	});
});
