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

import FormField from "./component";
import LiveFormField from "@sc/modules/v2/CRUD/FormBuilder/LiveFormField";
import { FormFieldTypes } from "@sc/modules/v2/CRUD/FormBuilder/types";
import {
  sampleContentData,
  EditorWithCustomData,
} from "@sc/modules/page/Builder/Builder.stories";
import settings from "./settings";

require("babel-core/register");
require("babel-polyfill");

// const testId = "FormBuilder-FormField";
const testId = "FormBuilder-LiveFormField";
const props = {};

describe("<FormField /> Rendering Tests", () => {
  afterEach(cleanup);

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

  test.skip(`Should render a Form Input icon in the add new drawer`, async () => {
    // jest.mock("./utils", () => {
    //   triggerAsyncHook: () => null;
    // });
    // await render(
    //   <EditorWithCustomData
    //     content={[
    //       { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
    //       ...sampleContentData,
    //     ]}
    //   />
    // );
  });

  test.todo(
    `Should show a "live/preview" version of the <LiveFormField /> component in the editor canvas, wrapped in an <EditorObject /> component`
  );
});

describe("<FormField /> Actions Tests", () => {
  afterEach(cleanup);

  test.todo(
    `Should open the Property Window when the property selector is clicked`
  );
});