[Infra] UI - Unit Testing Coverage: MCP Semantic Filter

[yuneng-jiang]

Relevant issues

Summary

Adds Vitest unit test coverage for the MCPSemanticFilterSettings UI feature.

Changes

Three new test files covering:

• semanticFilterTestUtils.test.ts — pure utility functions (getCurlCommand, runSemanticFilterTest): input validation, API call lifecycle, result parsing, warning/error notification paths.
• MCPSemanticFilterTestPanel.test.tsx — presentational test panel component: rendering, controlled input callbacks, button disabled states, filter-disabled warning, test results display, curl command in API Usage tab.
• MCPSemanticFilterSettings.test.tsx — main settings component: no-access-token guard, loading/error states, form field rendering, Save button dirty-state gating, mutation error display.

Also removes a redundant local @tremor/react mock from TeamSSOSettings.test.tsx that duplicated the global mock already defined in tests/setupTests.ts.

Testing

npx vitest run src/components/Settings/AdminSettings/MCPSemanticFilterSettings/ — 33 tests, all passing.

Type

✅ Test

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
litellm	Ready	Preview, Comment	Feb 24, 2026 1:29am

[greptile-apps]

Greptile Summary

This PR adds 33 Vitest unit tests across three new test files for the MCPSemanticFilterSettings UI feature, covering the main settings component, the test panel component, and the utility functions. It also removes a redundant local @tremor/react mock from TeamSSOSettings.test.tsx that duplicated the global mock in setupTests.ts.

• MCPSemanticFilterSettings.test.tsx (10 tests): Covers no-access-token guard, loading/error states, form field rendering, save button dirty-state gating, and mutation error display. Well-structured with proper async handling via a renderSettings helper.
• MCPSemanticFilterTestPanel.test.tsx (12 tests): Covers rendering, controlled input callbacks, button disabled states, filter-disabled warning, test results display, and curl command in API Usage tab. Minor style issue with fireEvent not wrapped in act().
• semanticFilterTestUtils.test.ts (10 tests): Covers getCurlCommand and runSemanticFilterTest utility functions — input validation, API call lifecycle, result parsing, and notification paths.
• TeamSSOSettings.test.tsx: Cleanup only — removed 30 lines of a redundant local @tremor/react mock, relying on the global mock instead.

Confidence Score: 4/5

• This PR is safe to merge — it only adds test files and removes a redundant mock, with no production code changes.
• Score of 4 reflects that this is a test-only PR with well-structured tests, proper mocking, and good coverage. The minor style issue (fireEvent without act()) is non-blocking. No production code is changed, and the redundant mock removal in TeamSSOSettings.test.tsx is a clean improvement.
• MCPSemanticFilterTestPanel.test.tsx has a minor style issue with fireEvent not wrapped in act() per project conventions

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.test.tsx	New test file with 10 well-structured tests for the main settings component, covering no-token guard, loading/error states, form rendering, save button dirty-state gating, and mutation error display. Good use of mocks and async helpers.
ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterTestPanel.test.tsx	New test file with 12 tests for the test panel component. Good coverage of rendering, input callbacks, button states, filter-disabled warning, results display, and curl command tab. Minor style issue: fireEvent.change at line 63 is not wrapped in act() per AGENTS.md guidelines.
ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/semanticFilterTestUtils.test.ts	New test file with 10 tests for pure utility functions. Thorough coverage of input validation, API call lifecycle (isTesting toggling, result clearing), result parsing, warning/error notification paths.
ui/litellm-dashboard/src/components/TeamSSOSettings.test.tsx	Removed redundant local @tremor/react mock that duplicated the global mock in tests/setupTests.ts. All existing tests remain intact and benefit from the shared global mock.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["MCPSemanticFilterSettings.test.tsx\n(10 tests)"] -->|mocks| B["useMCPSemanticFilterSettings hook"]
    A -->|mocks| C["useUpdateMCPSemanticFilterSettings hook"]
    A -->|mocks| D["MCPSemanticFilterTestPanel"]
    A -->|mocks| E["semanticFilterTestUtils"]

    F["MCPSemanticFilterTestPanel.test.tsx\n(12 tests)"] -->|mocks| G["ModelSelector"]
    F -->|tests| H["MCPSemanticFilterTestPanel component"]

    I["semanticFilterTestUtils.test.ts\n(10 tests)"] -->|mocks| J["testMCPSemanticFilter API"]
    I -->|tests| K["getCurlCommand"]
    I -->|tests| L["runSemanticFilterTest"]
    L --> J
    L -->|uses| M["NotificationManager\n(global mock from setupTests.ts)"]

    N["TeamSSOSettings.test.tsx\n(cleanup)"] -.->|removed redundant mock| O["@tremor/react\n(now uses global mock)"]

Loading

_{Last reviewed commit: 715e134}

[greptile-apps]

_{4 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

fireEvent not wrapped in act()
Per the project's AGENTS.md testing guidelines: "Always wrap fireEvent calls with act() to ensure React state updates are properly handled." This fireEvent.change call should be wrapped in act() for consistency with the codebase convention, even though in this specific case the component is controlled and only a mock callback fires.

Suggested change

	fireEvent.change(textarea, { target: { value: "find relevant tools" } });
	await act(() => { fireEvent.change(textarea, { target: { value: "find relevant tools" } }); });

Context Used: Context from dashboard - AGENTS.md (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

[greptile-apps]

Unused fireEvent import can use act
fireEvent is imported but could be replaced with userEvent (which is already imported and used elsewhere in this file) for consistency. If keeping fireEvent, also import act since it's needed for wrapping per project conventions.

Suggested change

	import { render, screen, fireEvent } from "@testing-library/react";
	import { render, screen, fireEvent, act } from "@testing-library/react";

Context Used: Context from dashboard - AGENTS.md (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}