community-rule/tests/components/CreateFlowPendingAvatarFlush.test.tsx

import { act } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { CreateFlowPendingAvatarFlush } from "../../app/(app)/create/components/CreateFlowPendingAvatarFlush";
import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
import { flushPendingCommunityAvatar } from "../../lib/create/flushPendingCommunityAvatar";
import {
  renderWithProviders as render,
  screen,
} from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";

vi.mock("../../lib/create/flushPendingCommunityAvatar", () => ({
  flushPendingCommunityAvatar: vi.fn(),
}));

function AvatarProbe() {
  const { state } = useCreateFlow();
  return <div data-testid="avatar">{state.communityAvatarUrl ?? ""}</div>;
}

describe("CreateFlowPendingAvatarFlush", () => {
  afterEach(() => {
    vi.useRealTimers();
    vi.mocked(flushPendingCommunityAvatar).mockReset();
  });

  it("retries a transient upload and then stores the url", async () => {
    vi.useFakeTimers();
    vi.mocked(flushPendingCommunityAvatar)
      .mockResolvedValueOnce({ status: "failed" })
      .mockResolvedValueOnce({
        status: "uploaded",
        url: "/api/uploads/retry",
      });

    render(
      <>
        <CreateFlowPendingAvatarFlush
          sessionUser={{ id: "user-1", email: "maya@example.com" }}
          sessionResolved
        />
        <AvatarProbe />
      </>,
    );

    await act(async () => {
      await Promise.resolve();
    });
    expect(flushPendingCommunityAvatar).toHaveBeenCalledTimes(1);
    expect(screen.getByTestId("avatar")).toHaveTextContent("");

    await act(async () => {
      await vi.advanceTimersByTimeAsync(5_000);
    });

    expect(flushPendingCommunityAvatar).toHaveBeenCalledTimes(2);
    expect(screen.getByTestId("avatar")).toHaveTextContent(
      "/api/uploads/retry",
    );
  });
});