Back to Repositories

Testing Waitlist Modal Component Integration in OpenHands

This test suite validates the functionality of a waitlist modal component, focusing on user consent handling and GitHub authentication integration. The tests ensure proper checkbox behavior, button state management, and analytics consent capture.

Test Coverage Overview

The test suite provides comprehensive coverage of the WaitlistModal component’s core functionality.

Default checkbox state verification
GitHub button enable/disable logic based on Terms of Service acceptance
User analytics consent capture on checkbox interaction
Integration with GitHub authentication flow

Implementation Analysis

The tests utilize React Testing Library’s user-centric testing approach combined with Vitest for test execution. The implementation follows the Arrange-Act-Assert pattern and leverages userEvent for simulating user interactions.

Key testing patterns include component rendering, state management verification, and spy implementation for consent handling validation.

Technical Details

Testing Framework: Vitest
UI Testing Library: @testing-library/react
User Event Simulation: @testing-library/user-event
Mocking Utilities: vi.spyOn for function spying
Component Testing: React component testing with async functionality

Best Practices Demonstrated

The test suite exemplifies several testing best practices in React application development.

User-centric testing approach using role-based queries
Proper async/await handling for user interactions
Isolation of test cases with proper setup and teardown
Spy implementation for external function validation
Clear test descriptions and expectations

all-hands-ai/openhands

frontend/__tests__/components/features/waitlist-modal.test.tsx

            
import { render, screen } from "@testing-library/react";
import { it, describe, expect, vi } from "vitest";
import userEvent from "@testing-library/user-event";
import { WaitlistModal } from "#/components/features/waitlist/waitlist-modal";
import * as CaptureConsent from "#/utils/handle-capture-consent";

describe("WaitlistModal", () => {
  it("should render a tos checkbox that is unchecked by default", () => {
    render(<WaitlistModal ghToken={null} githubAuthUrl={null} />);
    const checkbox = screen.getByRole("checkbox");

    expect(checkbox).not.toBeChecked();
  });

  it("should only enable the GitHub button if the tos checkbox is checked", async () => {
    const user = userEvent.setup();
    render(<WaitlistModal ghToken={null} githubAuthUrl={null} />);
    const checkbox = screen.getByRole("checkbox");
    const button = screen.getByRole("button", { name: "Connect to GitHub" });

    expect(button).toBeDisabled();

    await user.click(checkbox);

    expect(button).not.toBeDisabled();
  });

  it("should set user analytics consent to true when the user checks the tos checkbox", async () => {
    const handleCaptureConsentSpy = vi.spyOn(
      CaptureConsent,
      "handleCaptureConsent",
    );

    const user = userEvent.setup();
    render(<WaitlistModal ghToken={null} githubAuthUrl="mock-url" />);

    const checkbox = screen.getByRole("checkbox");
    await user.click(checkbox);

    const button = screen.getByRole("button", { name: "Connect to GitHub" });
    await user.click(button);

    expect(handleCaptureConsentSpy).toHaveBeenCalledWith(true);
  });
});