import { Component, Input } from "@angular/core";
import { render, screen, waitFor } from "@testing-library/react";
import React from "react";
import { Reactify } from "./reactify";

describe("Reactify", () => {
  it("should render a standalone Angular component", async () => {
    @Component({
      template: `<div>TEST</div>`,
      standalone: true,
    })
    class TestComp {}

    render(<Reactify component={TestComp} />);

    await waitFor(() => {
      expect(screen.getByText("TEST")).toBeTruthy();
    });
  });

  it("should render a standalone Angular component with inputs", async () => {
    @Component({
      template: `<div>{{ a }}-{{ b }}</div>`,
      standalone: true,
    })
    class TestComp {
      @Input() a = "";
      @Input() b = "";
    }

    render(<Reactify component={TestComp} inputs={{ a: "foo", b: "bar" }} />);

    await waitFor(() => {
      expect(screen.getByText("foo-bar")).toBeTruthy();
    });
  });
});