/* eslint-env jest */

import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render, fireEvent, cleanup } from "@testing-library/react";

import Provider from "@src/components/Context/Provider";

import AlertDialog from "../Dialog";

afterEach(cleanup);

const Component = props => (
  <Provider>
    <AlertDialog {...props} />
  </Provider>
);

test("Smoke", async () => {
  const { queryAllByTestId } = render(<Component active />);
  expect(queryAllByTestId("modal-wrapper").length).toBe(1);
  expect(queryAllByTestId("modal-overlay").length).toBe(1);
  expect(queryAllByTestId("modal").length).toBe(1);
});

test("Active/Inactive", async () => {
  const { queryAllByTestId, rerender } = render(<Component />);
  expect(queryAllByTestId("modal-wrapper").length).toBe(0);
  rerender(<Component active />);
  expect(queryAllByTestId("modal-wrapper").length).toBe(1);
  rerender(<Component />);
  await new Promise(r => setTimeout(r, 400));
  expect(queryAllByTestId("modal-wrapper").length).toBe(0);
});

test("On Close", async () => {
  const mockFn = jest.fn();
  const { queryAllByTestId, getByTestId, rerender } = render(
    <Component onClose={mockFn} active />,
  );
  fireEvent.click(getByTestId("icon"));
  expect(mockFn).toHaveBeenCalledTimes(1);
  rerender(<Component />);
  await new Promise(r => setTimeout(r, 400));
  expect(queryAllByTestId("modal-wrapper").length).toBe(0);
});

test("title/subtitle", async () => {
  const title = "Do you want to configure Zenchat?";
  const subtitle = "You will have to deactivate salesforce";
  const { queryAllByTestId, rerender } = render(
    <Component active title={title} subtitle={subtitle} />,
  );
  expect(queryAllByTestId("title").length).toBe(1);
  expect(queryAllByTestId("title")[0].textContent).toBe(title);
  expect(queryAllByTestId("subtitle").length).toBe(1);
  expect(queryAllByTestId("subtitle")[0].textContent).toBe(subtitle);
  rerender(<Component active />);
  expect(queryAllByTestId("title").length).toBe(0);
  expect(queryAllByTestId("subtitle").length).toBe(0);
});
