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

import Properties from "./Properties";

const testId = "FormBuilder-Properties";
const props = {};

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

  test.skip(`(Rendering) Should render in the dom`, () => {});

  test.skip(`(Rendering) Should render the position section`, () => {});

  test.skip(`(Rendering) Should render the alignment section`, () => {});

  test.skip(`(Rendering) Should render the form item section`, () => {});

  test.skip(`(Rendering) Should render the field typography section with tabs for the label, the input field, and validation element`, () => {});

  test.skip(`(Rendering) Should render the field size (width/height) with tabs for the container and input field`, () => {});

  test.skip(`(Rendering) Should render the field border shadow with tabs for the container and input field`, () => {});

  test.skip(`(Rendering) Should render the field position padding with tabs for the container, label, input field, and validation element`, () => {});
});

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

  test.skip(`(Actions) Should trigger the handleFormBuilderChange() method when the <EditFormField /> component showing in the property window changes`, () => {});

  test.skip(`(Actions) Should update the <FormBuilder /> component in the canvas when handleFormBuilderChange is triggered`, () => {});

  test.skip(`(Actions) Should trigger the handleFieldSizeChange() method when the properties in the Field Size section changes`, () => {});

  test.skip(`(Actions) Should update the width and height of each field in the form builder when handleFieldSize is triggered`, () => {});

  test.skip(`(Actions) Should update the font size and family of each field in the form builder when handleFontChange is triggered`, () => {});

  test.skip(`(Actions) Should trigger the handleFieldPositionPaddingChange() method when the properties in the position padding section changes`, () => {});

  test.skip(`(Actions) Should update the margin and padding of each field in the form builder when handleFieldPositionPaddingChange is triggered`, () => {});

  test.skip(`(Actions) Should trigger the handleBorderShadowChange() method when the properties in the position & padding section changes`, () => {});

  test.skip(`(Actions) Should update the border settings of each field in the form builder when handleBorderShadowChange is triggered`, () => {});

  test.skip(`(Actions) Should trigger the handleFontChange() method when the properties in the font/typography section changes`, () => {});

  test.skip(`(Actions) Should update the font size and family of each field in the form builder when handleFontChange is triggered`, () => {});
});