[Test] UI - CostTrackingSettings: Add comprehensive Vitest coverage

[yuneng-jiang]

Relevant issues

None

Summary

Added 88 comprehensive unit tests across 9 test files for the CostTrackingSettings component directory in Vitest + React Testing Library. Tests cover form validation, user interactions, hooks, state management, and conditional rendering with 100% of tests passing.

Changes

• provider_display_helpers.test.ts (9 tests): Helper function logic for provider display info mapping
• how_it_works.test.tsx (9 tests): Discount calculator component with form interactions
• add_provider_form.test.tsx (7 tests): Provider discount form validation and button states
• add_margin_form.test.tsx (9 tests): Margin form with type toggle (percentage/fixed) and validation
• provider_discount_table.test.tsx (12 tests): Table rendering, inline editing, save/cancel flows
• provider_margin_table.test.tsx (13 tests): Margin table with global provider sorting and complex edit modes
• use_discount_config.test.ts (11 tests): Discount hook fetch, add, remove, and change operations
• use_margin_config.test.ts (12 tests): Margin hook fetch, add, remove, and change operations
• cost_tracking_settings.test.tsx (15 tests): Main component rendering, role-based visibility, modal triggers

Type

✅ Test

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
litellm	Building	Preview, Comment	Feb 28, 2026 5:17am

[greptile-apps]

Greptile Summary

This PR adds 88 comprehensive unit tests across 9 new test files for the CostTrackingSettings component directory using Vitest and React Testing Library. The tests cover:

• Component rendering and interactions: Form validation, button disabled/enabled states, modal triggers, role-based visibility, and conditional rendering
• Custom hooks: useDiscountConfig and useMarginConfig fetch, add, remove, and update operations with proper validation (range checks, duplicate detection)
• Table components: Inline editing flows (edit/save/cancel), formatting of percentages and fixed amounts, and delete actions
• Helper functions: Provider display info mapping, backend value lookups, and image error fallback behavior

The tests follow the project's established testing conventions from AGENTS.md — test names start with "should", use screen queries, mock external dependencies, and avoid real network calls (all fetch calls are mocked via vi.spyOn). No issues were found during review.

Confidence Score: 5/5

• This PR is safe to merge — it only adds new test files with no changes to production code.
• All 9 files are new test files that add coverage to an existing component directory. No production code is changed. Tests properly mock all external dependencies and network calls, follow the project's testing conventions, and assertions align correctly with the source code behavior.
• No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/CostTrackingSettings/provider_display_helpers.test.ts	9 tests for provider display helper functions. Well-structured with proper mocks and correct assertions for known/unknown providers, backend value lookup, and image error fallback behavior.
ui/litellm-dashboard/src/components/CostTrackingSettings/how_it_works.test.tsx	9 tests for the HowItWorks discount calculator component. Good coverage of rendering, form interactions, and conditional display of calculated results.
ui/litellm-dashboard/src/components/CostTrackingSettings/add_provider_form.test.tsx	7 tests for AddProviderForm covering rendering, button disabled/enabled states based on provider selection and discount value, and click handler invocation.
ui/litellm-dashboard/src/components/CostTrackingSettings/add_margin_form.test.tsx	9 tests for AddMarginForm covering percentage/fixed mode toggle, conditional input rendering, button states, and callback invocations. Tests properly verify margin type switching.
ui/litellm-dashboard/src/components/CostTrackingSettings/provider_discount_table.test.tsx	12 tests for ProviderDiscountTable covering table rendering, inline editing, save/cancel flows, validation, and delete actions. Mocks Tremor components correctly for SimpleTable rendering.
ui/litellm-dashboard/src/components/CostTrackingSettings/provider_margin_table.test.tsx	13 tests for ProviderMarginTable covering percentage, fixed, and combined margin display. Good coverage of global provider handling, edit/cancel/save flows, and delete actions.
ui/litellm-dashboard/src/components/CostTrackingSettings/use_discount_config.test.ts	11 tests for useDiscountConfig hook covering fetch, add (with validations), remove, and change operations. All network calls properly mocked via vi.spyOn(global, "fetch").
ui/litellm-dashboard/src/components/CostTrackingSettings/use_margin_config.test.ts	12 tests for useMarginConfig hook covering fetch, add (percentage/fixed/global), remove, and change operations including complex margin values. All network calls properly mocked.
ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.test.tsx	15 tests for the main CostTrackingSettings component covering null access token, role-based visibility (admin vs non-admin), modal triggers, and empty state messages. Hooks properly mocked to avoid network calls.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[cost_tracking_settings.test.tsx<br/>15 tests] --> B[use_discount_config.test.ts<br/>11 tests]
    A --> C[use_margin_config.test.ts<br/>12 tests]
    A --> D[provider_discount_table.test.tsx<br/>12 tests]
    A --> E[provider_margin_table.test.tsx<br/>13 tests]
    A --> F[how_it_works.test.tsx<br/>9 tests]
    D --> G[provider_display_helpers.test.ts<br/>9 tests]
    E --> G
    A --> H[add_provider_form.test.tsx<br/>7 tests]
    A --> I[add_margin_form.test.tsx<br/>9 tests]

    style A fill:#4CAF50,color:#fff
    style B fill:#2196F3,color:#fff
    style C fill:#2196F3,color:#fff
    style D fill:#FF9800,color:#fff
    style E fill:#FF9800,color:#fff
    style F fill:#9C27B0,color:#fff
    style G fill:#607D8B,color:#fff
    style H fill:#FF9800,color:#fff
    style I fill:#FF9800,color:#fff

Loading

_{Last reviewed commit: c4a0174}

[greptile-apps]

_{9 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}