jest.mock("../Contexts/UserContext");
jest.mock("../Contexts/FileUploadContext");
jest.mock("../Contexts/VehicleContext");
jest.mock("../../services/monitoring");

import { render, screen, cleanup, waitForElementToBeRemoved } from "@testing-library/react";
import { setToken } from "../Contexts/UserContext";
import { TEST_AUTH_OBJECT } from "../../utils/testing"
import App from ".";

const LOADING_STATUS = "Loading...";

const renderRoute = async (route) => {
  window.history.pushState({}, "", route);
  const { container } = render(<App />);
  if (screen.queryByText(LOADING_STATUS)) {
    await waitForElementToBeRemoved(() => screen.getByText(LOADING_STATUS));
  }
  return container;
};

describe("App", () => {

  afterEach(() => {
    setToken(null);
    cleanup();
  });

  it("Route / unauthenticated", async () => {
    const container = await renderRoute("/");
    expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
    expect(container).toMatchSnapshot();
  });

  it("Route /home unauthenticated", async () => {
    const container = await renderRoute("/home");
    expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
    expect(container).toMatchSnapshot();
  });

  it("Route /package-upload unauthenticated", async () => {
    const container = await renderRoute("/package-upload");
    expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
    expect(container).toMatchSnapshot();
  });

  it("Route /vehicle-add unauthenticated", async () => {
    const container = await renderRoute("/vehicle-add");
    expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
    expect(container).toMatchSnapshot();
  });

  it("Route / authenticated", async () => {
    setToken(TEST_AUTH_OBJECT);
    const container = await renderRoute("/");
    expect(container.querySelector("h1").innerHTML).toEqual("Welcome John!");
    expect(container).toMatchSnapshot();
  });

  it("Route /home authenticated", async () => {
    setToken(TEST_AUTH_OBJECT);
    const container = await renderRoute("/home");
    expect(container.querySelector("h1").innerHTML).toEqual("Welcome John!");
    expect(container).toMatchSnapshot();
  });

  it("Route /package-upload authenticated", async () => {
    setToken(TEST_AUTH_OBJECT);
    const container = await renderRoute("/package-upload");
    expect(container.querySelector("h1").innerHTML).toEqual("Upload Update Package");
    expect(container).toMatchSnapshot();
  });

  it("Route /vehicle-add authenticated", async () => {
    setToken(TEST_AUTH_OBJECT);
    const container = await renderRoute("/vehicle-add");
    expect(container.querySelector("h1").innerHTML).toEqual("Add Vehicle");
    expect(container).toMatchSnapshot();
  });

  it("Route /page-not-found unauthenticated", async () => {
    const container = await renderRoute("/page-not-found");
    expect(container.querySelector("h1").innerHTML).toEqual("Page Not Found");
    expect(container).toMatchSnapshot();
  });

  it("Route /page-not-found authenticated", async () => {
    setToken(TEST_AUTH_OBJECT);
    const container = await renderRoute("/page-not-found");
    expect(container.querySelector("h1").innerHTML).toEqual("Page Not Found");
    expect(container).toMatchSnapshot();
  });
})