portifolio-evandrodevbr/app/components/showcase/BrowserFrame.test.tsx

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("shows only the project name, never a code address, when there is no live demo", () => {
    expect(displayUrl({ title: "AS Serviços", demoUrl: null })).toEqual({
      text: "AS Serviços",
      secure: false,
    });
    expect(displayUrl({ title: "AS Serviços" })).toEqual({
      text: "AS Serviços",
      secure: false,
    });
    // um projeto completo, com o endereço do código ainda nos dados, não vaza para a barra
    const project = {
      title: "Twins Lab",
      demoUrl: "",
      githubUrl: "https://github.com/user/repo",
    };
    expect(displayUrl(project)?.text).toBe("Twins Lab");
  });

  it("falls back to the project name when the address does not parse or points at github.com", () => {
    const title = "Meu projeto";
    const name = { text: title, secure: false };
    expect(displayUrl({ title, demoUrl: "isso não é uma url" })).toEqual(name);
    expect(displayUrl({ title, demoUrl: "https://github.com/a/b" })).toEqual(
      name,
    );
    expect(displayUrl({ title, demoUrl: "https://www.github.com/a" })).toEqual(
      name,
    );
  });

  it("returns null when there is nothing to show", () => {
    expect(displayUrl({})).toBeNull();
    expect(displayUrl({ title: "", demoUrl: "" })).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();
  });
});