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

describe("<Background /> Rendering >", () => {
  test.todo(`Should render in the dom`);

  test.todo(`Should render an image tab`);

  test.todo(`Should render a color tab`);

  test.skip(`Should render a video tab`, () => {});

  test.skip(`Should render parallax settings`, () => {});

  test.todo(
    `Should hide the color properties when _color_ is found in the propertiesToHide array`
  );

  test.todo(
    `Should hide the color properties when _image_ is found in the propertiesToHide array`
  );

  test.skip(`Should hide the video properties when _video_ is found in the propertiesToHide array`, () => {});

  test.todo(
    `Should hide the parallax properties when _parallax_ is found in the propertiesToHide array`
  );
});

describe("<Background /> Events >", () => {
  test.todo(
    `Should trigger the onChange() event when the background changes in some way`
  );
});

describe("<Background /> Actions >", () => {
  test.todo(
    `Should change the background color when the color is chosen in the color tools`
  );

  test.todo(`Should change the background image when one is chosen`);

  test.todo(
    `Should change the background repeat settings according to the option chosen (no-repeat, repeat-x, repeat-y, both)`
  );

  test.todo(
    `Should change the background positioning settings according to the option chosen (auto, cover, contain)`
  );

  test.skip(`Should change the background's parallax settings according to the parallax settings chosen`, () => {});

  test.skip(`Should change the background video when a video is chosen in the video tab`, () => {});
});

describe("<Background /> Hooks >", () => {
  test.skip(`Should trigger the _onBackgroundRender_ plugin hook when the Background component is rendering`, () => {});

  test.skip(`Should trigger the _onBackgroundChange_ plugin hook when the background changes in some way`, () => {});
});