/* eslint-disable @typescript-eslint/no-unused-vars */
import React from "react";
import { act, fireEvent, render, testExamples } from "@test/utils";
import { getOverlayRoot } from "../../_util/get-overlay-root";
import { Dropdown } from "../Dropdown";

// 测试组件代码 Example 快照
testExamples(__dirname);

test("dropdown hover", () => {
  const hoverPopupText = "这是下拉内容";
  const hoverTargetText = "鼠标上来";
  const { getByText } = render(
    <Dropdown trigger="hover" button={hoverTargetText}>
      {hoverPopupText}
    </Dropdown>
  );

  const overlayRoot = getOverlayRoot();

  // 鼠标进入前，不应该有内容
  expect(overlayRoot.querySelector(".tea-dropdown-box")).toBeNull();

  act(() => {
    // 模拟鼠标进入
    fireEvent.mouseEnter(getByText(hoverTargetText));
    jest.runAllTimers();
  });
  // 鼠标进入后，有内容
  expect(overlayRoot.querySelector(".tea-dropdown-box")).not.toBeNull();
  expect(
    overlayRoot
      .querySelector(".tea-dropdown-box")
      .textContent.indexOf(hoverPopupText)
  ).toBe(0);

  act(() => {
    // 模拟鼠标离开
    fireEvent.mouseOut(getByText(hoverTargetText));
    jest.runAllTimers();
  });
  // 鼠标离开，不应该有内容
  expect(overlayRoot.querySelector(".tea-dropdown-box")).toBeNull();
});

test("dropdown click", () => {
  const hoverPopupText = "这是下拉内容";
  const hoverTargetText = "鼠标点击";
  const { getByText } = render(
    <Dropdown button={hoverTargetText}>{hoverPopupText}</Dropdown>
  );

  const overlayRoot = getOverlayRoot();

  // 鼠标点击前，不应该有内容
  expect(overlayRoot.querySelector(".tea-dropdown-box")).toBeNull();

  act(() => {
    // 模拟鼠标点击
    fireEvent.click(getByText(hoverTargetText));
    jest.runAllTimers();
  });
  // 鼠标点击后，有内容
  expect(overlayRoot.querySelector(".tea-dropdown-box")).not.toBeNull();
  expect(
    overlayRoot
      .querySelector(".tea-dropdown-box")
      .textContent.indexOf(hoverPopupText)
  ).toBe(0);

  act(() => {
    // 再次点击关闭
    fireEvent.click(getByText(hoverTargetText));
    jest.runAllTimers();
  });
  // 鼠标离开，不应该有内容
  expect(overlayRoot.querySelector(".tea-dropdown-box")).toBeNull();
});