import * as React from "react";
import Renderer from "../classes/renderer";
import { render } from "react-dom";
import { renderToString } from "react-dom/server";

const Login = ({
  message
}) => (
  <h1>{message}</h1>
);

const loader = (id: string) => {
  const registry = { "core/login": Login };
  return registry[id];
};

describe("dotcom-core", () => {
  describe("renderer", () => {
    it("should render a component to html", () => {
      const renderer = new Renderer(
        loader,
        render,
        renderToString,
      );

      const html = renderer.render({
        component: "core/login",
        props: {
          message: "oh hai"
        }
      });

      expect(html).toMatchSnapshot();
    });

    it("should render a component to an element", () => {
      const El = jest.fn<Element>();
      const render = jest.fn();
      const renderer = new Renderer(
        loader,
        render,
        renderToString,
      );

      renderer.render({
        component: "core/login",
        el: new El(),
        props: {
          message: "oh hai"
        }
      });

      expect(render).toHaveBeenCalled();
    });
  });

  describe("core", () => {

  });
});

/*
lp.ui.render({
  component: "core/components/login",
  el: document.documentElement,
  props: {
    message: ""
  }
});
*/