import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render, RenderResult } from "@testing-library/react";
import { Tab, Tabs } from "../../";

let elementRender: RenderResult;

beforeEach(() => {
  elementRender = render(
    <Tabs defaultActiveKey="2" className="className" tabContentClassName="tabContentClassName">
      <Tab
        title="1"
        eventKey="1"
        className="className1"
        tabPaneClassName="tabPaneClassName1"
        navLinkClassName="navLinkClassName1"
      >
        Tab1
      </Tab>
      <Tab
        title="2"
        eventKey="2"
        className="className2"
        tabPaneClassName="tabPaneClassName2"
        navLinkClassName="navLinkClassName2"
      >
        Tab2
      </Tab>
    </Tabs>
  );
});

afterEach(() => {
  elementRender.unmount();
});

test("should show Tabs and inner Components", () => {
  const { queryByTestId } = elementRender;
  expect(queryByTestId("honey-ui-tabs-nav")).toBeTruthy();
  expect(queryByTestId("honey-ui-tabs-tab-content")).toBeTruthy();
  expect(queryByTestId("honey-ui-tabs-nav-item-tab-1")).toBeTruthy();
  expect(queryByTestId("honey-ui-tabs-nav-link-tab-1")).toBeTruthy();
  expect(queryByTestId("honey-ui-tabs-tab-pane-tab-1")).toBeTruthy();
  expect(queryByTestId("honey-ui-tabs-nav-item-tab-2")).toBeTruthy();
  expect(queryByTestId("honey-ui-tabs-nav-link-tab-2")).toBeTruthy();
  expect(queryByTestId("honey-ui-tabs-tab-pane-tab-2")).toBeTruthy();
});

test("Tabs should have default classNames", () => {
  const { queryByTestId } = elementRender;
  expect(queryByTestId("honey-ui-tabs-nav")).toHaveClass("nav nav-tabs");
  expect(queryByTestId("honey-ui-tabs-tab-content")).toHaveClass("tab-content");

  expect(queryByTestId("honey-ui-tabs-nav-item-tab-1")).toHaveClass("nav-item");
  expect(queryByTestId("honey-ui-tabs-nav-link-tab-1")).toHaveClass("nav-link");
  expect(queryByTestId("honey-ui-tabs-tab-pane-tab-1")).toHaveClass("tab-pane");

  expect(queryByTestId("honey-ui-tabs-nav-item-tab-2")).toHaveClass("nav-item");
  expect(queryByTestId("honey-ui-tabs-nav-link-tab-2")).toHaveClass("nav-link");
  expect(queryByTestId("honey-ui-tabs-tab-pane-tab-2")).toHaveClass("tab-pane");
});

test("Tabs should have custom classNames", () => {
  const { queryByTestId } = elementRender;
  expect(queryByTestId("honey-ui-tabs-nav")).toHaveClass("className");
  expect(queryByTestId("honey-ui-tabs-tab-content")).toHaveClass("tabContentClassName");

  expect(queryByTestId("honey-ui-tabs-nav-item-tab-1")).toHaveClass("className1");
  expect(queryByTestId("honey-ui-tabs-nav-link-tab-1")).toHaveClass("navLinkClassName1");
  expect(queryByTestId("honey-ui-tabs-tab-pane-tab-1")).toHaveClass("tabPaneClassName1");

  expect(queryByTestId("honey-ui-tabs-nav-item-tab-2")).toHaveClass("className2");
  expect(queryByTestId("honey-ui-tabs-nav-link-tab-2")).toHaveClass("navLinkClassName2");
  expect(queryByTestId("honey-ui-tabs-tab-pane-tab-2")).toHaveClass("tabPaneClassName2");
});

test("Tab2 should be active", () => {
  const { queryByTestId } = elementRender;

  expect(queryByTestId("honey-ui-tabs-nav-link-tab-2")).toHaveClass("active");
  expect(queryByTestId("honey-ui-tabs-tab-pane-tab-2")).toHaveClass("show active");
});

test("Tab1 should not be active", () => {
  const { queryByTestId } = elementRender;

  expect(queryByTestId("honey-ui-tabs-nav-link-tab-1")).not.toHaveClass("active");
  expect(queryByTestId("honey-ui-tabs-tab-pane-tab-1")).not.toHaveClass("show active");
  expect(queryByTestId("honey-ui-tabs-tab-pane-tab-1")).toHaveClass("fade");
});