[Infra] UI - Testing: Adding Unit Testing Coverage

[yuneng-jiang]

Relevant issues

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have Added testing in the tests/litellm/ directory, Adding at least 1 test is a hard requirement - see details
• My PR passes all unit tests on make test-unit
• My PR's scope is as isolated as possible, it only solves 1 specific problem

CI (LiteLLM team)

CI status guideline:

• 50-55 passing tests: main is stable with minor issues.
• 45-49 passing tests: acceptable but needs attention
• <= 40 passing tests: unstable; be careful with your merges and assess the risk.

• Branch creation CI run
  Link:

• CI run for the last commit
  Link:

• Merge / cherry-pick CI run
  Links:

Type

🚄 Infrastructure
✅ Test

Changes

This file adds 4 test files to previously untested files.

Screenshot

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
litellm	Ready	Preview, Comment	Feb 6, 2026 7:36pm

[greptile-apps]

Greptile Overview

Greptile Summary

Added unit test coverage for 4 previously untested UI components and hooks in the LiteLLM dashboard.

Key additions:

• useDisableShowNewBadge.test.ts and useDisableShowPrompts.test.ts: Comprehensive test suites (11 tests each) for React hooks that manage localStorage state using useSyncExternalStore, covering initial states, storage events, custom events, and cleanup
• SearchToolTester.test.tsx: Extensive test suite (48 tests) for the search tool testing component, covering user interactions, API mocking, loading states, result display, search history, and error handling
• chartUtils.test.tsx: Thorough test suite (28 tests) for chart utility components (CustomTooltip and CustomLegend), covering formatting logic, color conversion, and edge cases

Test quality:

• All tests follow React Testing Library best practices using screen queries
• Test names consistently use "should" pattern as required by AGENTS.md guidelines
• Proper mocking of external dependencies (networking, antd message API)
• Good coverage of edge cases (empty states, null values, loading states)
• Appropriate use of waitFor for async operations
• Proper cleanup in beforeEach/afterEach hooks

Confidence Score: 5/5

• This PR is safe to merge with no risk - it only adds test files without modifying any production code
• Score reflects that this PR exclusively adds comprehensive unit tests for existing UI components without touching production code, following established testing patterns and best practices outlined in AGENTS.md
• No files require special attention

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/hooks/useDisableShowNewBadge.test.ts	Comprehensive test suite for useDisableShowNewBadge hook covering localStorage interaction, storage events, custom events, and cleanup
ui/litellm-dashboard/src/app/(dashboard)/hooks/useDisableShowPrompts.test.ts	Comprehensive test suite for useDisableShowPrompts hook with identical structure to useDisableShowNewBadge tests
ui/litellm-dashboard/src/components/SearchTools/SearchToolTester.test.tsx	Extensive test suite for SearchToolTester component with 48 test cases covering search functionality, UI states, history management, and error handling
ui/litellm-dashboard/src/components/common_components/chartUtils.test.tsx	Thorough test suite for CustomTooltip and CustomLegend chart utility components covering formatting, color conversion, and edge cases

Sequence Diagram

sequenceDiagram
    participant Dev as Developer
    participant Test as Test Suite
    participant RTL as React Testing Library
    participant Hook as Custom Hooks
    participant Component as UI Components
    participant Mock as Mocked Services

    Note over Dev,Mock: Unit Testing Flow for UI Components

    Dev->>Test: Run test suite (vitest)
    
    rect rgb(240, 248, 255)
        Note right of Test: Hook Tests (useDisableShowNewBadge, useDisableShowPrompts)
        Test->>RTL: renderHook()
        RTL->>Hook: Initialize hook with useSyncExternalStore
        Hook->>Hook: Subscribe to localStorage events
        Test->>Hook: Simulate localStorage.setItem()
        Test->>Hook: Dispatch StorageEvent/CustomEvent
        Hook->>RTL: Return updated state
        RTL->>Test: Assert state changes
        Test->>RTL: unmount()
        RTL->>Hook: Cleanup event listeners
        Hook->>Test: Verify removeEventListener calls
    end

    rect rgb(255, 248, 240)
        Note right of Test: Component Tests (SearchToolTester)
        Test->>Mock: Mock searchToolQueryCall()
        Test->>RTL: render(<SearchToolTester />)
        RTL->>Component: Mount component
        Test->>RTL: userEvent.type() in search input
        Test->>RTL: userEvent.click() search button
        Component->>Mock: Call searchToolQueryCall()
        Mock->>Component: Return mocked results
        Component->>RTL: Update UI with results
        RTL->>Test: Assert results displayed
        Test->>RTL: userEvent.click() history items
        Component->>RTL: Update search query
        RTL->>Test: Assert query updated
    end

    rect rgb(240, 255, 240)
        Note right of Test: Utility Tests (chartUtils)
        Test->>RTL: render(<CustomTooltip />)
        RTL->>Component: Render with mock payload
        Component->>Component: Format category names
        Component->>Component: Convert color names to hex
        Component->>RTL: Display formatted values
        RTL->>Test: Assert formatting correct
        Test->>RTL: render(<CustomLegend />)
        RTL->>Component: Render with categories/colors
        Component->>RTL: Display legend items
        RTL->>Test: Assert legend items rendered
    end

    Test->>Dev: Report test results

Loading

[greptile-apps]

_{4 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}