marriage/src/components/Componentes/female-outcome-sheet.test.tsx

import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { I18nProvider } from "@/translations/provider";
import FemaleOutcomeSheet from "./female-outcome-sheet";

vi.mock("./swipe-button", () => ({
  default: ({
    disabled,
    onSuccess,
    text,
  }: {
    disabled?: boolean;
    onSuccess: () => void;
    text: string;
  }) => (
    <button type="button" disabled={disabled} onClick={onSuccess}>
      {text}
    </button>
  ),
}));

function renderSheet(onSubmit = vi.fn()) {
  render(
    <I18nProvider locale="en">
      <FemaleOutcomeSheet onSubmit={onSubmit} />
    </I18nProvider>,
  );

  return onSubmit;
}

describe("FemaleOutcomeSheet", () => {
  afterEach(cleanup);

  beforeEach(() => {
    vi.useRealTimers();
  });

  it("keeps the profile unchanged when the acquaintance process is still ongoing", async () => {
    const onSubmit = renderSheet();

    await userEvent.click(screen.getByRole("button", { name: "Continue" }));

    expect(onSubmit).toHaveBeenCalledWith("success");
  });

  it("requires a cancellation reason and submits it as a failure", async () => {
    const onSubmit = renderSheet();

    await userEvent.click(screen.getByLabelText("Canceled"));

    const confirmation = screen.getByRole("button", {
      name: "Confirm",
    });
    expect(confirmation).toHaveProperty("disabled", true);

    await userEvent.click(
      screen.getByRole("button", { name: "No mutual interest" }),
    );
    expect(confirmation).toHaveProperty("disabled", false);

    fireEvent.click(confirmation);
    expect(onSubmit).toHaveBeenCalledWith("failure", "No mutual interest");
  });

  it("requires a written note when the other cancellation reason is selected", async () => {
    renderSheet();

    await userEvent.click(screen.getByLabelText("Canceled"));
    await userEvent.click(
      screen.getByRole("button", { name: "Other reasons" }),
    );

    const confirmation = screen.getByRole("button", {
      name: "Confirm",
    });
    expect(confirmation).toHaveProperty("disabled", true);

    fireEvent.change(
      screen.getByPlaceholderText(
        "Feel free to briefly explain your decision...",
      ),
      {
        target: {
          value: "The families could not agree on the next steps.",
        },
      },
    );
    expect(confirmation).toHaveProperty("disabled", false);
  });
});