import * as React from "react";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import { ItemLegend } from "./ItemLegend";
import { sampleContentData } from "./ItemLegend.stories";
import { ComponentTypes } from "@sc/plugins/webcomponents/v2/types";

describe("<ItemLegend /> Tests", () => {
  it(`Should be able to see all my page objects and sections in a legend`, () => {
    const { debug } = render(<ItemLegend content={sampleContentData} />);
    expect(screen.queryAllByTestId("Editor-ItemObject-Item").length).toEqual(2);
  });

  it(`Should be able to show/hide objects in the list and have it reflected in the main canvas`, () => {
    expect(true).toBe(false);
  });

  it(`Should be able to Double-click to change the name`, () => {
    expect(true).toBe(false);
  });

  test.skip(`Should (in addition to the editor) be able to reorder my page elements from a simple list`, () => {});

  test.skip(`Should (in addition to on the editor) be able to delete elements from a simple list`, () => {});

  test.skip(`Should be able to access the page elements properties from the simple components list (double-click)`, () => {});
});