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

import DropDownButton from ".";
import addSnapshotSerializer from "../../../utils/snapshot";

describe("DropDownButton", () => {
  beforeAll(() => {
    addSnapshotSerializer(expect);
  });

  it("Render", async () => {
    const actions = [
      {
        name: "Action One",
        disabled: false,
        trigger: (paramOne, paramTwo) => {}
      },
      {
        name: "Action Two",
        disabled: false,
        trigger: (paramOne, paramTwo) => {}
      },
    ];

    const { container } = render(
      <DropDownButton
        actions={actions}
        payload={["somePayload", "someOtherPayload"]}
      />
    );
    await waitFor(() => {
      /* render */
    });
    expect(container).toMatchSnapshot();
  });

  it("properly disables an action", async () => {
    const actions = [
      {
        name: "Disabled Action",
        disabled: true,
        trigger: () => {}
      },
    ];
  
    const { getByText } = render(
      <DropDownButton
        actions={actions}
        payload={[]}
      />
    );
    await waitFor(() => {
      /* render */
    });
    const buttonEl = getByText("Disabled Action");
    expect(buttonEl).toHaveProperty("disabled", true);
  });

  it("properly passes payload to callback", async () => {
    const actions = [
      {
        name: "Action One",
        disabled: false,
        trigger: jest.fn(),
      },
    ];
  
    render(
      <DropDownButton
        actions={actions}
        payload={["somePayload", "somePayload2"]}
      />
    );

    const buttonEl = screen.getByText("Action One");
    fireEvent.click(buttonEl);
    expect(actions[0].trigger).toHaveBeenCalledWith("somePayload", "somePayload2");
  });
});
