jest.mock("../../Contexts/StatusContext");

import React from "react";
import { render, waitFor } from "@testing-library/react";
import userEvent from '@testing-library/user-event';

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

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

  it("Render", async () => {
    const { container } = render(
      <TextInputList
        label={"The input label"}
      />
    );
    await waitFor(() => {
      /* render */
    });
    expect(container).toMatchSnapshot();
  });

  it("properly adds tag after comma", async () => {
    const { getByText, getByTestId } = render(
      <TextInputList
        label={"The input label"}
        payload={[]}
      />
    );

    const [inputEl] = getByTestId("text-input-list").getElementsByTagName("input");
    userEvent.type(inputEl, "tag1");
    userEvent.type(inputEl, ",");
    expect(getByText("tag1").nodeName).toBe("DIV");
  });

  it("properly passes payload to callback", async () => {
    const mockCallback = jest.fn();

    const { getByTestId } = render(
      <TextInputList
        label={"The input label"}
        onChange={mockCallback}
      />
    );

    const [inputEl] = getByTestId("text-input-list").getElementsByTagName("input");
    userEvent.type(inputEl, "tag1");
    userEvent.type(inputEl, ",");
    userEvent.type(inputEl, "tag2");
    expect(mockCallback).toHaveBeenCalledWith(["tag1", "tag2"]);
  });
});
