import { render, screen } from "@testing-library/react";
import { BrowserFrame, displayUrl } from "./BrowserFrame";

describe("displayUrl", () => {
  it("shows the site address without the protocol, www or trailing slash", () => {
    expect(displayUrl({ demoUrl: "https://www.example.com.br/" })).toEqual({
      text: "example.com.br",
      secure: true,
    });
    expect(displayUrl({ demoUrl: "https://app.example.com/painel/" })).toEqual({
      text: "app.example.com/painel",
      secure: true,
    });
  });

  it("marks plain http as not secure", () => {
    expect(displayUrl({ demoUrl: "http://localhost:3000" })).toEqual({
      text: "localhost:3000",
      secure: false,
    });
  });

  it("falls back to the code address when there is no live demo", () => {
    expect(
      displayUrl({ demoUrl: null, githubUrl: "https://github.com/user/repo" }),
    ).toEqual({ text: "github.com/user/repo", secure: true });
  });

  it("skips an address that does not parse and uses the next one", () => {
    expect(
      displayUrl({
        demoUrl: "isso não é uma url",
        githubUrl: "https://github.com/a/b",
      }),
    ).toEqual({ text: "github.com/a/b", secure: true });
  });

  it("returns null when there is nothing to show", () => {
    expect(displayUrl({})).toBeNull();
    expect(displayUrl({ demoUrl: "", githubUrl: null })).toBeNull();
  });
});

describe("BrowserFrame", () => {
  it("draws the three dots, the address and the screen content", () => {
    const { container } = render(
      <BrowserFrame url={{ text: "site.com", secure: true }}>
        <p>conteúdo</p>
      </BrowserFrame>,
    );

    expect(screen.getByText("site.com")).toBeInTheDocument();
    expect(screen.getByText("conteúdo")).toBeInTheDocument();
    expect(container.querySelectorAll(".ds-bframe-dots i")).toHaveLength(3);
    expect(container.querySelector(".ds-bframe-url svg")).not.toBeNull();
  });

  it("keeps the decorative bar out of the accessibility tree", () => {
    const { container } = render(
      <BrowserFrame url={{ text: "site.com", secure: true }}>
        <p>x</p>
      </BrowserFrame>,
    );
    expect(container.querySelector(".ds-bframe-bar")).toHaveAttribute(
      "aria-hidden",
      "true",
    );
  });

  it("shows a neutral label and no lock when the address is unknown or not secure", () => {
    const { container, rerender } = render(
      <BrowserFrame url={null}>
        <p>x</p>
      </BrowserFrame>,
    );
    expect(screen.getByText("pré-visualização")).toBeInTheDocument();
    expect(container.querySelector(".ds-bframe-url svg")).toBeNull();

    rerender(
      <BrowserFrame url={{ text: "localhost", secure: false }}>
        <p>x</p>
      </BrowserFrame>,
    );
    expect(container.querySelector(".ds-bframe-url svg")).toBeNull();
  });
});