[Test] UI Dashboard - Add unit tests for 5 untested files

[yuneng-jiang]

Summary

Adds Vitest unit tests for 5 previously untested files in the ui/litellm-dashboard folder:

• UiLoadingSpinner - SVG rendering, className merging, prop spreading
• HashicorpVaultEmptyPlaceholder - empty state rendering, button click callback
• PageVisibilitySettings - conditional tag rendering, collapse interaction, reset callback
• errorUtils - all error shape branches (Error, string detail, FastAPI 422 array, nested object, fallbacks)
• mcpToolCrudClassification - CRUD classification by name, description fallback, grouping

Testing

All 26 tests pass locally via npx vitest run.

Type

✅ Test

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
litellm	Ready	Preview, Comment	Mar 16, 2026 7:55pm

[greptile-apps]

Greptile Summary

This PR adds 26 Vitest unit tests across 5 previously-untested files in the ui/litellm-dashboard frontend, covering two utility modules (errorUtils, mcpToolCrudClassification) and three UI components (UiLoadingSpinner, HashicorpVaultEmptyPlaceholder, PageVisibilitySettings). All tests are pure mock-based unit tests with no real network calls, consistent with the project's CI testing requirements.

Key highlights:

• All test assertions were verified against the actual source implementations — no mismatches found
• Tests use proper async patterns (userEvent, findByRole) for Ant Design Collapse expansion interactions in PageVisibilitySettings
• The global setupTests.ts polyfills (document.getAnimations, ResizeObserver, matchMedia) ensure UiLoadingSpinner's useSafeLayoutEffect/animation-sync logic doesn't throw in jsdom
• The getAvailablePages mock in PageVisibilitySettings.test.tsx correctly isolates the component from the real page navigation config
• Minor coverage gap: errorUtils.test.ts does not cover the branch where a FastAPI 422 detail array item is a non-object (falls back to String(d)) or an object missing a msg field (falls back to JSON.stringify(d)); this is a low-priority gap and does not affect the correctness of existing tests
• The CRUD_GROUP_META constant exported from mcpToolCrudClassification.ts is untested, but it is a static data structure with no branching logic

Confidence Score: 5/5

• This PR is safe to merge — it adds only test files with no changes to production code.
• All 5 files are new test additions. No production source files are modified. All test assertions were cross-checked against the source implementations and found to be logically correct. Tests use mocks exclusively (no real network calls), matching the repo's CI requirements. The minor coverage gaps identified are non-blocking.
• No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/utils/errorUtils.test.ts	Adds 7 tests covering all branches of extractErrorMessage: Error instances, string detail, FastAPI 422 array, nested detail object, message fallback, JSON.stringify fallback, and primitives. Tests align correctly with the source implementation.
ui/litellm-dashboard/src/utils/mcpToolCrudClassification.test.ts	Adds 7 tests for classifyToolOp (read/delete/create/update classification, READ-over-DELETE priority, description fallback, unknown fallback) and 1 test for groupToolsByCrud. All assertions match the regex-based implementation.
ui/litellm-dashboard/src/components/ui/ui-loading-spinner.test.tsx	Adds 3 tests for UiLoadingSpinner covering SVG rendering, className merging with animate-spin, and prop spreading (aria-label). The document.getAnimations polyfill in setupTests.ts ensures the useSafeLayoutEffect hook won't throw in jsdom.
ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/HashicorpVaultEmptyPlaceholder.test.tsx	Adds 3 tests checking empty-state text, button click triggering onAdd callback, and description paragraph rendering. All role/text queries match the actual Ant Design component output.
ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.test.tsx	Adds 5 tests covering the null/set tag display, page count (singular/plural), collapse expand + reset button callback, and optional description rendering. The mock for getAvailablePages is correct, and findByRole is used appropriately for async Collapse expansion.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    subgraph "New Test Files"
        T1[errorUtils.test.ts\n7 tests]
        T2[mcpToolCrudClassification.test.ts\n8 tests]
        T3[ui-loading-spinner.test.tsx\n3 tests]
        T4[HashicorpVaultEmptyPlaceholder.test.tsx\n3 tests]
        T5[PageVisibilitySettings.test.tsx\n5 tests]
    end

    subgraph "Source Under Test"
        S1[errorUtils.ts\nextractErrorMessage]
        S2[mcpToolCrudClassification.ts\nclassifyToolOp / groupToolsByCrud]
        S3[ui-loading-spinner.tsx\nUiLoadingSpinner SVG]
        S4[HashicorpVaultEmptyPlaceholder.tsx\nAnt Design Empty + Button]
        S5[PageVisibilitySettings.tsx\nAnt Design Collapse + Checkbox.Group]
    end

    subgraph "Global Test Setup"
        SETUP[tests/setupTests.ts\ngetAnimations polyfill\nmatchMedia mock\nResizeObserver stub\nAnt Design / Tremor mocks]
    end

    T1 -->|imports| S1
    T2 -->|imports| S2
    T3 -->|imports| S3
    T4 -->|imports| S4
    T5 -->|imports + mocks page_utils| S5

    SETUP -.->|applied to all tests| T1
    SETUP -.->|applied to all tests| T2
    SETUP -.->|applied to all tests| T3
    SETUP -.->|applied to all tests| T4
    SETUP -.->|applied to all tests| T5

Loading

_{Last reviewed commit: 5d33cc6}