import * as redux from "react-redux";
import store from "../../store";
import { Router } from "react-router-dom";
import { render, screen, fireEvent } from "@testing-library/react";
import history from "../../store/utils/history";
import mediaQuery from "css-mediaquery";
import InviteDialog from "../../components/MUI/InviteDialog";

function createMatchMedia(width) {
  return (query) => ({
    matches: mediaQuery.match(query, { width }),
    addListener: () => {},
    removeListener: () => {},
  });
}

const onClose = jest.fn();

describe("ConfirmDialog render tests", () => {
  var props = {
    title: "title",
    onClose: onClose,
    open: true,
    maxWidth: "lg",
    fullWidth: false,
    responsive: true,
  };
  const cont = (
    <redux.Provider store={store}>
      <Router history={history}>
        <InviteDialog {...props} />
      </Router>
    </redux.Provider>
  );

  beforeEach(() => {
    // theme.breakpoints.down("md") will be true if width of screen is less than 900px
    window.matchMedia = createMatchMedia(899);
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  it("Should render", () => {
    render(cont);
    expect(screen.getByTestId("invite-dialog-container")).toBeDefined();
  });

  it("Should render title", () => {
    render(cont);
    expect(screen.getByTestId("invite-title")).toBeDefined();
  });

  it("Should render form", () => {
    render(cont);
    expect(screen.getByTestId("invite-form")).toBeDefined();
  });

  it("Should render three TextField elements", () => {
    render(cont);
    expect(screen.getAllByTestId("invite-input-text").length).toBe(3);
  });

  it("Should render button for registration link", () => {
    render(cont);
    expect(screen.getAllByTestId("invite-btn")).toBeDefined();
  });
});