import * as React from "react";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";

import InitialValue from "./InitialValue";
import { FormFieldTypes } from "../../types";
// import { FormFieldTypes } from "@sc/plugins/webcomponents/v2/FormField/types";

const testId = "FormBuilder-Attributes-InitialValue";
const props = {};

describe("Rendering", () => {
  afterEach(cleanup);

  it(`Should render in the dom`, () => {
    render(<InitialValue {...props} />);
    expect(screen.queryByTestId(testId)).toBeTruthy();
  });

  it(`Should render a rich text editor if the fieldType is content`, () => {
    const testId = "FormBuilder-Attributes-InitialValue-CONTENT";
    render(<InitialValue {...props} fieldType={FormFieldTypes.CONTENT} />);
    expect(screen.queryByTestId(testId)).toBeTruthy();
  });

  it(`Should render a date picker if the fieldType is date`, () => {
    render(<InitialValue {...props} fieldType={FormFieldTypes.DATE} />);
    expect(screen.queryByTestId(testId)).toBeTruthy();
  });
});

describe("Events", () => {
  afterEach(cleanup);

  it(`Should trigger onChange when the initial value field updates`, () => {
    const onChange = jest.fn();
    render(<InitialValue {...props} onChange={onChange} />);
    fireEvent.change(screen.getByTestId(testId).querySelector("input"), {
      target: { value: "Testing" },
    });
    expect(onChange).toBeCalled();
  });

  it(`Should trigger onBlur when the initial value field loses focus`, () => {
    const onBlur = jest.fn();
    render(<InitialValue {...props} onBlur={onBlur} />);
    fireEvent.blur(screen.getByTestId(testId).querySelector("input"));
    expect(onBlur).toBeCalled();
  });
});