portifolio-evandrodevbr/app/components/HomeFaq.test.tsx

import { render, screen, within } from "@testing-library/react";
import HomeFaq, { FAQ_ITEMS } from "./HomeFaq";

describe("HomeFaq", () => {
  it("shows the four questions the site already backs up, closed by default", () => {
    const { container } = render(<HomeFaq />);

    expect(
      screen.getByRole("heading", { name: "Perguntas frequentes" }),
    ).toBeInTheDocument();
    const summaries = Array.from(container.querySelectorAll("summary")).map(
      (summary) => summary.textContent?.replace("+", "").trim(),
    );
    expect(summaries).toEqual([
      "Como começa um projeto?",
      "Você atende fora de Santa Catarina?",
      "Dá para continuar um sistema que já existe ou que foi feito com IA?",
      "O que preciso ter para começar?",
    ]);
    for (const details of container.querySelectorAll("details")) {
      expect(details.open).toBe(false);
    }
  });

  it("answers from what the site already says: first conversation, remote in all of Brazil, and the AI review", () => {
    render(<HomeFaq />);

    expect(
      screen.getByText(/Com uma conversa para entender o problema/),
    ).toBeInTheDocument();
    expect(
      screen.getByText(
        /o atendimento é remoto, para empresas de todo o Brasil/,
      ),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("link", { name: "Ver a revisão de app feito com IA" }),
    ).toHaveAttribute("href", "/ia");
  });

  it("does not render the questions the owner has not answered yet", () => {
    const { container } = render(<HomeFaq />);

    for (const unanswered of [
      "O código e os acessos ficam comigo?",
      "Em nome de quem ficam domínio e hospedagem?",
      "Como funciona o pagamento?",
    ]) {
      // preparadas na lista, com resposta vazia...
      expect(FAQ_ITEMS.find((item) => item.question === unanswered)).toEqual({
        question: unanswered,
        answer: "",
      });
      // ...e fora da página
      expect(screen.queryByText(unanswered)).toBeNull();
    }
    expect(container.querySelectorAll("details")).toHaveLength(4);
  });

  it("starts showing a prepared question as soon as it gets an answer", () => {
    render(
      <HomeFaq
        items={[
          {
            question: "Como funciona o pagamento?",
            answer: "Resposta do dono.",
          },
          { question: "Ainda sem resposta?", answer: "   " },
        ]}
      />,
    );

    const details = screen
      .getByText("Como funciona o pagamento?")
      .closest("details") as HTMLElement;
    expect(within(details).getByText("Resposta do dono.")).toBeInTheDocument();
    expect(screen.queryByText("Ainda sem resposta?")).toBeNull();
  });

  it("renders nothing, not even the heading, when no question has an answer", () => {
    const { container } = render(
      <HomeFaq items={[{ question: "Pergunta?", answer: "" }]} />,
    );

    expect(container).toBeEmptyDOMElement();
  });

  it("states no price, deadline, guarantee or payment policy", () => {
    const { container } = render(<HomeFaq />);

    expect(container.textContent).not.toMatch(
      /R\$|garantia|\d+ dias|em até \d+|parcel|entrada de/i,
    );
  });
});