Users.test.tsx

import { describe, expect, test, vitest } from "vitest";
import Users, { USERS_QUERY } from "./Users";
import { render, screen, waitFor } from "@testing-library/react";
import { MockedProvider } from "@apollo/client/testing/react";
import userEvent from "@testing-library/user-event";
import { ComponentProps } from "react";
import CreateUserDialog from "./CreateUserDialog";

vitest.mock("./CreateUserDialog", () => ({
  // TypeScript helps keep your mock in sync with the real component.
  default: (props: ComponentProps<typeof CreateUserDialog>) => {
    if (!props.isOpen) return null;

    return (
      <dialog open={props.isOpen} onClose={props.onClose}>
        <button
          data-testid="mock-create-user-button"
          onClick={() => {
            props.onSuccess({
              id: "1",
              name: "John Doe",
              email: "john.doe@example.com",
              role: "admin",
            });
            props.onClose();
          }}
        >
          Create
        </button>
      </dialog>
    );
  },
}));

describe("queries", () => {
  test("renders loading state", () => {
    render(
      <MockedProvider
        mocks={[
          {
            request: { query: USERS_QUERY },
            result: { data: { users: [] } },
          },
        ]}
      >
        <Users />
      </MockedProvider>
    );

    expect(screen.getByText("Loading...")).toBeVisible();
  });

  test("renders empty state if there are no users", async () => {
    render(
      <MockedProvider
        mocks={[
          {
            request: { query: USERS_QUERY },
            result: { data: { users: [] } },
          },
        ]}
      >
        <Users />
      </MockedProvider>
    );

    expect(await screen.findByText("No users")).toBeVisible();
  });

  test("renders users if there are users", async () => {
    render(
      <MockedProvider
        mocks={[
          {
            request: { query: USERS_QUERY },
            result: { data: { users: [{ id: "1", name: "John Doe" }] } },
          },
        ]}
      >
        <Users />
      </MockedProvider>
    );

    expect(await screen.findByText("John Doe")).toBeVisible();
  });
});

describe("mutations", () => {
  test("refetches users after creating a user", async () => {
    render(
      <MockedProvider
        mocks={[
          // Our first MockedResponse contains no users.
          {
            request: { query: USERS_QUERY },
            result: { data: { users: [] } },
          },
          // Our second MockedResponse will not be fetched automatically.
          // It'll only be used if we refetch the query.
          {
            request: { query: USERS_QUERY },
            result: { data: { users: [{ id: "1", name: "John Doe" }] } },
          },
        ]}
      >
        <Users />
      </MockedProvider>
    );

    expect(await screen.findByText("No users")).toBeVisible();

    await userEvent.click(
      screen.getByRole("button", {
        name: "Create User",
      })
    );
    expect(await screen.findByRole("dialog")).toBeVisible();

    // For demonstration purposes, we'll assert that John Doe isn't visible yet.
    expect(screen.queryByText("John Doe")).not.toBeInTheDocument();

    // I prefer to use test IDs when mocking components like this.
    // I think it makes it clear that we're not using the real component
    // and minimizes the risk of breaking the test if user-facing labels change.
    await userEvent.click(screen.getByTestId("mock-create-user-button"));

    await waitFor(() =>
      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
    );

    // You can make this test go red by commenting out the `refetch()` call
    // in the `onSuccess` callback we passed to the CreateUserDialog component
    // in Users.tsx.
    expect(await screen.findByText("John Doe")).toBeVisible();
  });
});