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

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

/**
 * Testes de caminhos-base de displayUrl e BrowserFrame (complemento de BrowserFrame.test.tsx): cada condição
 * da escolha do endereço (demoUrl válido, caminho, www, porta, esquema, github e parentes, URL inválida,
 * título vazio) e as variações da moldura (cadeado, texto padrão, className).
 */

describe("displayUrl", () => {
  it.each([
    ["https://sevmodaintima.com.br", "sevmodaintima.com.br", true],
    ["https://sevmodaintima.com.br/", "sevmodaintima.com.br", true],
    [
      "https://www.sevmodaintima.com.br/loja/",
      "sevmodaintima.com.br/loja",
      true,
    ],
    ["https://x.example.com/a/b/", "x.example.com/a/b", true],
    ["https://x.example.com/a?q=1#topo", "x.example.com/a", true],
    ["http://x.example.com", "x.example.com", false],
    ["https://x.example.com:8443/app", "x.example.com:8443/app", true],
    ["https://sub.www.example.com", "sub.www.example.com", true],
    ["https://notgithub.com", "notgithub.com", true],
    ["https://github.com.evil.example", "github.com.evil.example", true],
    ["ftp://files.example.com/pasta", "files.example.com/pasta", false],
  ])("path: demoUrl %s -> %s (secure: %s)", (demoUrl, text, secure) => {
    expect(displayUrl({ demoUrl, title: "Projeto" })).toEqual({ text, secure });
  });

  it.each([
    "https://github.com/evandrodevbr/projeto",
    "https://GITHUB.COM/evandrodevbr",
    "https://gist.github.com/x",
    "https://www.github.com",
  ])(
    "path: demoUrl %s points at GitHub -> falls back to the title",
    (demoUrl) => {
      expect(displayUrl({ demoUrl, title: "Projeto" })).toEqual({
        text: "Projeto",
        secure: false,
      });
    },
  );

  it("path: demoUrl does not parse -> falls back to the title", () => {
    expect(displayUrl({ demoUrl: "isto nao e url", title: "Projeto" })).toEqual(
      {
        text: "Projeto",
        secure: false,
      },
    );
  });

  it.each([
    ["null demoUrl", { demoUrl: null, title: "Projeto" }],
    ["empty demoUrl", { demoUrl: "", title: "Projeto" }],
    ["missing demoUrl", { title: "Projeto" }],
  ])("path: %s with a title -> the title, never secure", (_label, project) => {
    expect(displayUrl(project)).toEqual({ text: "Projeto", secure: false });
  });

  it.each([
    ["no fields", {}],
    ["empty title", { title: "" }],
    ["null title and no demo", { title: null, demoUrl: null }],
    ["github demo and no title", { demoUrl: "https://github.com/x" }],
    ["invalid demo and empty title", { demoUrl: "???", title: "" }],
  ])("path: %s -> null", (_label, project) => {
    expect(displayUrl(project)).toBeNull();
  });
});

describe("BrowserFrame", () => {
  it("path: secure address -> lock icon plus the address text", () => {
    const { container } = render(
      <BrowserFrame url={{ text: "exemplo.com.br", secure: true }}>
        <p>tela</p>
      </BrowserFrame>,
    );

    expect(container.querySelector(".ds-bframe-url svg")).not.toBeNull();
    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
      "exemplo.com.br",
    );
  });

  it("path: insecure address -> text without the lock", () => {
    const { container } = render(
      <BrowserFrame url={{ text: "Projeto", secure: false }}>
        <p>tela</p>
      </BrowserFrame>,
    );

    expect(container.querySelector(".ds-bframe-url svg")).toBeNull();
    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
      "Projeto",
    );
  });

  it("path: no address -> neutral label and no lock", () => {
    const { container } = render(
      <BrowserFrame url={null}>
        <p>tela</p>
      </BrowserFrame>,
    );

    expect(container.querySelector(".ds-bframe-url svg")).toBeNull();
    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
      "pré-visualização",
    );
  });

  it("path: className and style given -> both reach the wrapper, with no stray space", () => {
    const { container } = render(
      <BrowserFrame
        url={null}
        className="ds-reel-laptop"
        style={{ width: "88%" }}
      >
        <p>tela</p>
      </BrowserFrame>,
    );

    const frame = container.firstElementChild as HTMLElement;
    expect(frame.className).toBe("ds-bframe ds-reel-laptop");
    expect(frame.style.width).toBe("88%");
  });

  it("path: no className -> the class has no trailing space", () => {
    const { container } = render(
      <BrowserFrame url={null}>
        <p>tela</p>
      </BrowserFrame>,
    );

    expect((container.firstElementChild as HTMLElement).className).toBe(
      "ds-bframe",
    );
  });
});