portifolio-evandrodevbr/app/layout.test.tsx

import { readFileSync } from "node:fs";
import { join } from "node:path";
import { renderToStaticMarkup } from "react-dom/server";
import { caseStudies, serviceHubLinks, servicePages } from "@/lib/site-content";
import RootLayout, { metadata } from "./layout";

/**
 * Metadados do layout (título e sufixo, canônico) e o que ele monta em todas as páginas: o cabeçalho, o rodapé e o botão
 * flutuante do WhatsApp. Cabeçalho e botão recebem os nomes dos serviços e dos cases, lidos de lib/site-content.ts no servidor.
 */

const mockHeaderProps = jest.fn();
const mockFloatingProps = jest.fn();
const mockFooterProps = jest.fn();

jest.mock("next/font/google", () => ({
  Geist_Mono: () => ({ variable: "font-mono-var" }),
  Space_Grotesk: () => ({ variable: "font-display-var" }),
}));
jest.mock("./globals.css", () => ({}));
jest.mock("./components/cinematic/CinematicOverlays", () => ({
  __esModule: true,
  default: () => null,
}));
jest.mock("./components/GoogleAnalytics", () => ({
  __esModule: true,
  default: () => null,
}));
jest.mock("./components/Header", () => ({
  Header: (props: unknown) => {
    mockHeaderProps(props);
    return <header data-testid="header" />;
  },
}));
jest.mock("./components/Footer", () => ({
  __esModule: true,
  default: (props: unknown) => {
    mockFooterProps(props);
    return <footer data-testid="footer" />;
  },
}));
jest.mock("./components/FloatingWhatsApp", () => ({
  __esModule: true,
  default: (props: unknown) => {
    mockFloatingProps(props);
    return <div data-testid="floating-whatsapp" />;
  },
}));

beforeEach(() => {
  jest.clearAllMocks();
});

describe("metadata", () => {
  it("ends every page title with ' | Evandro.dev.br' and gives the home its own default title", () => {
    expect(metadata.title).toEqual({
      default: "Sites e sistemas em Joinville e SC | Evandro.dev.br",
      template: "%s | Evandro.dev.br",
    });
  });

  it("keeps the home title, suffix included, within 60 characters", () => {
    const title = metadata.title as { default: string };
    expect(title.default.length).toBeLessThanOrEqual(60);
  });

  it("does not set a canonical in the layout: only pages that know their own address do", () => {
    // o 404 e as páginas sem canônico próprio não podem herdar o "/" da home
    expect(metadata.alternates).toBeUndefined();
  });

  it("describes the offer without inventing numbers or promises", () => {
    expect(metadata.description).toMatch(/WhatsApp/);
    expect(metadata.description).not.toMatch(/R\$|garantia|\d+ dias/);
  });
});

describe("what the layout mounts", () => {
  function markup() {
    return renderToStaticMarkup(
      <RootLayout>
        <main>conteúdo</main>
      </RootLayout>,
    );
  }

  it("mounts the floating WhatsApp button for the whole site, outside the home", () => {
    const html = markup();

    expect(html).toContain('data-testid="floating-whatsapp"');
    expect(html.indexOf("conteúdo")).toBeLessThan(
      html.indexOf('data-testid="floating-whatsapp"'),
    );
  });

  it("mounts the footer once for the whole site, after the page content, with the service links", () => {
    const html = markup();

    expect(html.match(/data-testid="footer"/g)).toHaveLength(1);
    expect(html.indexOf("conteúdo")).toBeLessThan(
      html.indexOf('data-testid="footer"'),
    );
    expect(mockFooterProps).toHaveBeenCalledWith({
      serviceLinks: serviceHubLinks,
    });
    expect(serviceHubLinks.length).toBeGreaterThan(0);
  });

  it("gives the footer wrapper and the content the ids the mobile menu makes inert", () => {
    const html = markup();

    expect(html).toMatch(
      /<div id="main-content"[^>]*>(?:(?!<\/div>).)*conteúdo/,
    );
    expect(html).toMatch(
      /<div id="site-footer" class="relative z-10"><footer data-testid="footer"/,
    );
    // o botão flutuante fica fora dos dois: ele tem a própria região (<aside>)
    expect(html.match(/id="site-footer"/g)).toHaveLength(1);
  });

  it("gives the header and the button the service and case names, and only names", () => {
    markup();

    const expected = {
      services: Object.fromEntries(
        servicePages.map((service) => [service.slug, service.navLabel]),
      ),
      cases: Object.fromEntries(
        caseStudies.map((caseStudy) => [caseStudy.id, caseStudy.title]),
      ),
    };
    expect(mockFloatingProps).toHaveBeenCalledWith({ contexts: expected });
    expect(mockHeaderProps).toHaveBeenCalledWith({
      whatsAppContexts: expected,
    });
    expect(Object.keys(expected.services).length).toBeGreaterThan(0);
    expect(Object.keys(expected.cases).length).toBeGreaterThan(0);
  });

  it("hides the JavaScript-only parts of the page when scripts are off", () => {
    expect(markup()).toContain(".js-only{display:none!important}");
  });
});

describe("fonts", () => {
  it("does not preload Geist Mono (only small labels use it), while the display font keeps its preload", () => {
    const source = readFileSync(join(__dirname, "layout.tsx"), "utf8");

    const mono = source.match(/Geist_Mono\(\{[^}]*\}\)/)?.[0] ?? "";
    expect(mono).toMatch(/preload:\s*false/);
    const display = source.match(/Space_Grotesk\(\{[^}]*\}\)/)?.[0] ?? "";
    expect(display).not.toMatch(/preload:\s*false/);
  });

  it("no longer loads the unused Monument Extended font", () => {
    const source = readFileSync(join(__dirname, "layout.tsx"), "utf8");

    expect(source).not.toMatch(/Monument|next\/font\/local/i);
    expect(markupClassName()).not.toMatch(/monument/i);
  });

  function markupClassName() {
    return (
      renderToStaticMarkup(
        <RootLayout>
          <main />
        </RootLayout>,
      ).match(/<html[^>]*class="([^"]*)"/)?.[1] ?? ""
    );
  }
});