diff --git a/src/app/finding-match/finding-match-client.test.tsx b/src/app/finding-match/finding-match-client.test.tsx index 99b783e..bc2967c 100644 --- a/src/app/finding-match/finding-match-client.test.tsx +++ b/src/app/finding-match/finding-match-client.test.tsx @@ -1,5 +1,6 @@ import { act, cleanup, fireEvent, render, screen } from "@testing-library/react"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { useEffect, useState } from "react"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { I18nProvider } from "@/translations/provider"; import FindingMatchClient from "./finding-match-client"; @@ -34,51 +35,6 @@ vi.mock("@/hooks/marriage/use-profile-main", () => ({ }), })); -vi.mock("@/hooks/marriage/use-form-schema", () => ({ - useFormOverviewQuery: () => ({ - data: { - sections: [ - { - slug: "personal_identity", - title: "Personal Identity", - required: true, - estimated_time_min: 3, - is_completed: false, - progress: { - current_step: 0, - completion_percent: 0, - is_completed: false, - }, - }, - ], - }, - isLoading: false, - isFetched: true, - isError: false, - refetch: vi.fn(), - }), - getFormSection: vi.fn(), -})); - -vi.mock("@/hooks/marriage/use-cattell", () => ({ - useCattellResultQuery: () => ({ data: null }), - getCattellQuestions: vi.fn(), -})); - -vi.mock("@/hooks/marriage/use-glasser", () => ({ - useGlasserResultQuery: () => ({ data: null }), - getGlasserQuestions: vi.fn(), -})); - -vi.mock("@/hooks/marriage/use-match-start", () => ({ - useStartMarriageMatchMutation: () => ({ - mutate: vi.fn(), - isPending: false, - isError: false, - reset: vi.fn(), - }), -})); - vi.mock("@/hooks/marriage/use-rejection-seen", () => ({ useRejectionSeenMutation: () => ({ mutate: vi.fn(), @@ -95,6 +51,81 @@ vi.mock("@/hooks/marriage/use-marriage-advisors", () => ({ }), })); +vi.mock("@/components/Componentes/questions-list-overlay", () => { + let isQuestionsOpenGlobal = false; + const listeners = new Set<() => void>(); + + return { + useQuestionsListOverlay: () => { + const [, setTick] = useState(0); + + useEffect(() => { + const listener = () => setTick((t) => t + 1); + listeners.add(listener); + return () => { + listeners.delete(listener); + }; + }, []); + + return { + isQuestionsOpen: isQuestionsOpenGlobal, + openQuestions: () => { + isQuestionsOpenGlobal = true; + listeners.forEach((l) => l()); + }, + closeQuestions: () => { + isQuestionsOpenGlobal = false; + listeners.forEach((l) => l()); + }, + }; + }, + QuestionsListOverlay: ({ + open, + onReady, + }: { + open: boolean; + onReady?: () => void; + }) => { + useEffect(() => { + onReady?.(); + }, [onReady]); + + return open ? ( + + ) : null; + }, + default: ({ + open, + onReady, + }: { + open: boolean; + onReady?: () => void; + }) => { + useEffect(() => { + onReady?.(); + }, [onReady]); + + return open ? ( + + ) : null; + }, + }; +}); + function createWrapper() { const queryClient = new QueryClient({ defaultOptions: { @@ -147,9 +178,8 @@ describe("FindingMatchClient", () => { it("opens questions list overlay when Edit Profile button is clicked", () => { const wrapper = createWrapper(); - const { container } = render(, { wrapper }); + render(, { wrapper }); - // Initial render - overlay is pre-mounted offscreen const editBtn = screen.getByRole("button", { name: /edit profile/i }); expect(editBtn).toBeInTheDocument(); @@ -159,9 +189,7 @@ describe("FindingMatchClient", () => { vi.advanceTimersByTime(16); }); - const overlay = container.querySelector('aside[data-slot="section-overlay"][data-state="open"]'); - expect(overlay).toBeInTheDocument(); - expect(document.body.classList.contains("section-overlay-open")).toBe(true); + expect(screen.getByTestId("questions-list-overlay")).toBeInTheDocument(); }); it("renders locked state when can_edit_profile is false", () => { diff --git a/src/components/Componentes/questions-list-overlay.test.tsx b/src/components/Componentes/questions-list-overlay.test.tsx index bbe6ed3..0c51960 100644 --- a/src/components/Componentes/questions-list-overlay.test.tsx +++ b/src/components/Componentes/questions-list-overlay.test.tsx @@ -1,6 +1,6 @@ import { act, cleanup, render, renderHook, screen } from "@testing-library/react"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { useEffect } from "react"; import { I18nProvider } from "@/translations/provider"; import { QuestionsListOverlay, @@ -16,78 +16,18 @@ vi.mock("next/navigation", () => ({ }), })); -vi.mock("@/hooks/marriage/use-profile-main", () => ({ - useMarriageProfileQuery: () => ({ - data: { - id: 1, - gender: "male", - status: "search_in_progress", - can_edit_profile: true, - }, - isLoading: false, - isFetched: true, - refetch: vi.fn(), - }), -})); - -vi.mock("@/hooks/marriage/use-form-schema", () => ({ - useFormOverviewQuery: () => ({ - data: { - sections: [ - { - slug: "personal_identity", - title: "Personal Identity", - required: true, - estimated_time_min: 3, - is_completed: false, - progress: { - current_step: 0, - completion_percent: 0, - is_completed: false, - }, - }, - ], - }, - isLoading: false, - isFetched: true, - isError: false, - refetch: vi.fn(), - }), - getFormSection: vi.fn(), -})); - -vi.mock("@/hooks/marriage/use-cattell", () => ({ - useCattellResultQuery: () => ({ data: null }), - getCattellQuestions: vi.fn(), -})); - -vi.mock("@/hooks/marriage/use-glasser", () => ({ - useGlasserResultQuery: () => ({ data: null }), - getGlasserQuestions: vi.fn(), -})); - -vi.mock("@/hooks/marriage/use-match-start", () => ({ - useStartMarriageMatchMutation: () => ({ - mutate: vi.fn(), - isPending: false, - isError: false, - reset: vi.fn(), - }), +vi.mock("@/app/questions-list/questions-list-client", () => ({ + default: ({ onReady }: { onReady?: () => void }) => { + useEffect(() => { + onReady?.(); + }, [onReady]); + return
Mocked Questions List Client
; + }, })); function createWrapper() { - const queryClient = new QueryClient({ - defaultOptions: { - queries: { retry: false }, - }, - }); - return function Wrapper({ children }: { children: React.ReactNode }) { - return ( - - {children} - - ); + return {children}; }; } @@ -148,6 +88,7 @@ describe("QuestionsListOverlay & useQuestionsListOverlay", () => { expect(overlay).toHaveAttribute("data-state", "closed"); expect(overlay).toHaveAttribute("aria-hidden", "true"); expect(document.body.classList.contains("section-overlay-open")).toBe(false); + expect(screen.getByTestId("mocked-questions-client")).toBeInTheDocument(); expect(handleReady).toHaveBeenCalled(); }); @@ -171,5 +112,6 @@ describe("QuestionsListOverlay & useQuestionsListOverlay", () => { expect(overlay).toBeInTheDocument(); expect(overlay).toHaveAttribute("data-state", "open"); expect(document.body.classList.contains("section-overlay-open")).toBe(true); + expect(screen.getByTestId("mocked-questions-client")).toBeInTheDocument(); }); });