modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

feat: adjust UT to have better test case

Browse source
This commit is contained in:
Cameron Roberts 2025-08-17 23:46:16 +01:00
commit c25f84e6bb
2 changed files with 11 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

3
client/src/components/ListPane.tsx
View file

@ -57,6 +57,8 @@ const ListPane = <T extends object>({
<h3 className="font-semibold dark:text-white">{title}</h3> <h3 className="font-semibold dark:text-white">{title}</h3>
<div className="relative flex items-center"> <div className="relative flex items-center">
<button <button
name="search"
aria-label="Search"
onClick={handleSearchClick} onClick={handleSearchClick}
className={`p-2 hover:bg-gray-100 dark:hover:bg-secondary rounded-md transition-all duration-300 ease-in-out ${ className={`p-2 hover:bg-gray-100 dark:hover:bg-secondary rounded-md transition-all duration-300 ease-in-out ${
isSearchExpanded isSearchExpanded
@ -78,6 +80,7 @@ const ListPane = <T extends object>({
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none z-10" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none z-10" />
<Input <Input
ref={searchInputRef} ref={searchInputRef}
name="search"
type="text" type="text"
placeholder="Search..." placeholder="Search..."
value={searchQuery} value={searchQuery}

16
client/src/components/__tests__/ListPane.test.tsx
View file

@ -73,7 +73,7 @@ describe("ListPane", () => {
it("should show search icon initially", () => { it("should show search icon initially", () => {
renderListPane(); renderListPane();
const searchButton = screen.getByRole("button", { name: "" }); const searchButton = screen.getByRole("button", { name: "Search" });
expect(searchButton).toBeInTheDocument(); expect(searchButton).toBeInTheDocument();
expect(searchButton.querySelector("svg")).toBeInTheDocument(); expect(searchButton.querySelector("svg")).toBeInTheDocument();
}); });
@ -81,7 +81,7 @@ describe("ListPane", () => {
it("should expand search input when search icon is clicked", async () => { it("should expand search input when search icon is clicked", async () => {
renderListPane(); renderListPane();
const searchButton = screen.getByRole("button", { name: "" }); const searchButton = screen.getByRole("button", { name: "Search" });
await act(async () => { await act(async () => {
fireEvent.click(searchButton); fireEvent.click(searchButton);
}); });
@ -100,7 +100,7 @@ describe("ListPane", () => {
it("should filter items based on search query", async () => { it("should filter items based on search query", async () => {
renderListPane(); renderListPane();
const searchButton = screen.getByRole("button", { name: "" }); const searchButton = screen.getByRole("button", { name: "Search" });
await act(async () => { await act(async () => {
fireEvent.click(searchButton); fireEvent.click(searchButton);
}); });
@ -126,7 +126,7 @@ describe("ListPane", () => {
it("should show 'No items found of matching \"NonExistent\"' when search has no results", async () => { it("should show 'No items found of matching \"NonExistent\"' when search has no results", async () => {
renderListPane(); renderListPane();
const searchButton = screen.getByRole("button", { name: "" }); const searchButton = screen.getByRole("button", { name: "Search" });
await act(async () => { await act(async () => {
fireEvent.click(searchButton); fireEvent.click(searchButton);
}); });
@ -146,7 +146,7 @@ describe("ListPane", () => {
it("should collapse search when input is empty and loses focus", async () => { it("should collapse search when input is empty and loses focus", async () => {
renderListPane(); renderListPane();
const searchButton = screen.getByRole("button", { name: "" }); const searchButton = screen.getByRole("button", { name: "Search" });
await act(async () => { await act(async () => {
fireEvent.click(searchButton); fireEvent.click(searchButton);
}); });
@ -162,7 +162,7 @@ describe("ListPane", () => {
// The search input is hidden with CSS but still in the DOM // The search input is hidden with CSS but still in the DOM
// We should check that the search button is visible again // We should check that the search button is visible again
const searchButtonAfterCollapse = screen.getByRole("button", { const searchButtonAfterCollapse = screen.getByRole("button", {
name: "", name: "Search",
}); });
expect(searchButtonAfterCollapse).toBeInTheDocument(); expect(searchButtonAfterCollapse).toBeInTheDocument();
expect(searchButtonAfterCollapse).not.toHaveClass("opacity-0"); expect(searchButtonAfterCollapse).not.toHaveClass("opacity-0");
@ -171,7 +171,7 @@ describe("ListPane", () => {
it("should keep search expanded when input has content and loses focus", async () => { it("should keep search expanded when input has content and loses focus", async () => {
renderListPane(); renderListPane();
const searchButton = screen.getByRole("button", { name: "" }); const searchButton = screen.getByRole("button", { name: "Search" });
await act(async () => { await act(async () => {
fireEvent.click(searchButton); fireEvent.click(searchButton);
}); });
@ -188,7 +188,7 @@ describe("ListPane", () => {
it("should search through all item properties (description)", async () => { it("should search through all item properties (description)", async () => {
renderListPane(); renderListPane();
const searchButton = screen.getByRole("button", { name: "" }); const searchButton = screen.getByRole("button", { name: "Search" });
await act(async () => { await act(async () => {
fireEvent.click(searchButton); fireEvent.click(searchButton);
}); });