CreateUserDialog.test.tsx

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

describe("mutations", () => {
  test("calls the createUser mutation when the form is submitted", async () => {
    // Set up a mock mutation result. This uses the form of MockedResponse['result]
    // that is a function which returns a mock result.
    // This function is called by Apollo on-demand only when response is needed. This
    // allows us to assert that a specific query/mutation was actually called and the
    // response was requested.
    const onMutationResult = vitest.fn(
      () =>
        ({
          data: {
            createUser: {
              id: "1",
              name: "John Doe",
              email: "john.doe@example.com",
              role: "admin",
            },
          },
          // This is simply MockedResponse['result'] in older versions of Apollo Client.
        } satisfies MockLink.MockedResponse["result"])
    );

    render(
      <MockedProvider
        mocks={[
          {
            request: {
              query: CREATE_USER_MUTATION,
              variables: {
                name: "John Doe",
                email: "john.doe@example.com",
                role: "admin",
              },
            },
            result: onMutationResult,
          },
        ]}
      >
        <CreateUserDialog
          isOpen={true}
          onClose={() => {}}
          onSuccess={() => {}}
          onError={() => {}}
        />
      </MockedProvider>
    );

    await userEvent.type(screen.getByLabelText("Name"), "John Doe");
    await userEvent.type(
      screen.getByLabelText("Email"),
      "john.doe@example.com"
    );
    await userEvent.type(screen.getByLabelText("Role"), "admin");

    // We haven't clicked the button yet, so the mutation hasn't been called.
    expect(onMutationResult).not.toHaveBeenCalled();

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

    // Now the mutation should have been called.
    await waitFor(() => expect(onMutationResult).toHaveBeenCalled());
  });

  test("calls onClose and onSuccess when user creation is successful", async () => {
    // Same as above. If your/your team's brain works differently, you could define
    // this and the entire MockedResponse once, but make sure you clear the call-counts
    // before each test.
    // I prefer this approach because the tests become more self-contained and it's
    // easy to cross-reference the values we're typing into the form, the values
    // in the request, and the values in the response.
    const onMutationResult = vitest.fn(
      () =>
        ({
          data: {
            createUser: {
              id: "1",
              name: "John Doe",
              email: "john.doe@example.com",
              role: "admin",
            },
          },
          // This is simply MockedResponse['result'] in older versions of Apollo Client.
        } satisfies MockLink.MockedResponse["result"])
    );
    const onClose = vitest.fn();
    const onSuccess = vitest.fn();

    render(
      <MockedProvider
        mocks={[
          {
            request: {
              query: CREATE_USER_MUTATION,
              variables: {
                name: "John Doe",
                email: "john.doe@example.com",
                role: "admin",
              },
            },
            result: onMutationResult,
          },
        ]}
      >
        <CreateUserDialog
          isOpen={true}
          onClose={onClose}
          onSuccess={onSuccess}
          onError={() => {}}
        />
      </MockedProvider>
    );

    await userEvent.type(screen.getByLabelText("Name"), "John Doe");
    await userEvent.type(
      screen.getByLabelText("Email"),
      "john.doe@example.com"
    );
    await userEvent.type(screen.getByLabelText("Role"), "admin");

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

    await waitFor(() =>
      expect(onSuccess).toHaveBeenCalledWith({
        id: "1",
        name: "John Doe",
        email: "john.doe@example.com",
        role: "admin",
      })
    );
    await waitFor(() => expect(onClose).toHaveBeenCalled());
  });

  test("calls onError when user creation fails", async () => {
    const onError = vitest.fn();

    render(
      <MockedProvider
        mocks={[
          {
            request: {
              query: CREATE_USER_MUTATION,
              variables: {
                name: "John Doe",
                email: "john.doe@example.com",
                role: "admin",
              },
            },
            error: new Error("User creation failed"),
          },
        ]}
      >
        <CreateUserDialog
          isOpen={true}
          onClose={() => {}}
          onSuccess={() => {}}
          onError={onError}
        />
      </MockedProvider>
    );

    await userEvent.type(screen.getByLabelText("Name"), "John Doe");
    await userEvent.type(
      screen.getByLabelText("Email"),
      "john.doe@example.com"
    );
    await userEvent.type(screen.getByLabelText("Role"), "admin");

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

    await waitFor(() =>
      expect(onError).toHaveBeenCalledWith(new Error("User creation failed"))
    );
  });
});