Back to Repositories

Testing Browser Panel Component Rendering in OpenHands

This test suite validates the BrowserPanel component functionality in OpenHands, focusing on screenshot rendering and URL display behavior. The tests ensure proper handling of both empty states and valid screenshot scenarios.

Test Coverage Overview

The test suite provides comprehensive coverage of the BrowserPanel component’s core functionality:

Empty state handling when no screenshot is provided
URL display verification
Screenshot rendering with base64 encoded images
Integration with Redux state management

Implementation Analysis

The testing approach utilizes React Testing Library with Vitest for component validation. The implementation leverages custom renderWithProviders utility for Redux integration, ensuring components are tested with proper state context. Key patterns include preloadedState injection and DOM assertion techniques.

Technical Details

Testing Framework: Vitest
UI Testing: React Testing Library
State Management: Redux integration
Custom Utilities: renderWithProviders
Assertion Methods: screen queries, toBeInTheDocument

Best Practices Demonstrated

The test suite exemplifies several testing best practices in React component testing:

Isolation of component rendering with proper state setup
User-centric testing approaches using screen queries
Meaningful test descriptions and organization
Proper handling of component dependencies

all-hands-ai/openhands

frontend/__tests__/components/browser.test.tsx

            
import { screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { renderWithProviders } from "../../test-utils";
import { BrowserPanel } from "#/components/features/browser/browser";


describe("Browser", () => {
  it("renders a message if no screenshotSrc is provided", () => {
    renderWithProviders(<BrowserPanel />, {
      preloadedState: {
        browser: {
          url: "https://example.com",
          screenshotSrc: "",
          updateCount: 0,
        },
      },
    });

    // i18n empty message key
    expect(screen.getByText("BROWSER$EMPTY_MESSAGE")).toBeInTheDocument();
  });

  it("renders the url and a screenshot", () => {
    renderWithProviders(<BrowserPanel />, {
      preloadedState: {
        browser: {
          url: "https://example.com",
          screenshotSrc:
            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN0uGvyHwAFCAJS091fQwAAAABJRU5ErkJggg==",
          updateCount: 0,
        },
      },
    });

    expect(screen.getByText("https://example.com")).toBeInTheDocument();
    expect(screen.getByAltText(/browser screenshot/i)).toBeInTheDocument();
  });
});