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

import Widget from "./WidgetContainer";

const props = {
  title: "testing",
  actions: [
    { id: "test 1", label: "label 1", onSelect: () => false },
    { id: "test 2", label: "label 2", onSelect: () => false },
    { id: "test 3", label: "label 3", onSelect: () => false },
  ],
};

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

  it(`Should render widget in the dom`, () => {
    render(<Widget {...props} />);
    expect(screen.queryByTestId("Dashboard-WidgetContainer")).toBeTruthy();
  });

  it(`Should render widget with provided title prop as the caption if one is provided`, () => {
    render(<Widget {...props} />);
    expect(screen.queryByText(props.title)).toBeTruthy();
  });

  it(`Should render child component`, () => {
    const text = "This is a test";
    render(
      <Widget {...props}>
        <div>{text}</div>
      </Widget>
    );
    expect(screen.queryByText(text)).toBeTruthy();
  });

  it(`Should show an action menu that reflects the items provided in the actions prop`, () => {
    render(<Widget {...props} />);
    fireEvent.click(screen.getByTitle("Menu"));
    expect(
      screen.queryAllByTestId("Dashboard-WidgetContainer-MenuItem").length
    ).toBe(props.actions.length);
  });

  it(`Should render a custom action component if one is provided`, () => {
    const text = "This is a test";
    const MyComponent = <div>{text}</div>;
    render(<Widget {...props} actionComponent={MyComponent} />);
    expect(screen.queryByText(text)).toBeTruthy();
  });
});