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

Fix formatting

Browse source
This commit is contained in:
olaservo 2025-08-06 21:08:15 -07:00
commit ad10912e12
2 changed files with 81 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

80
client/src/components/__tests__/DynamicJsonForm.test.tsx
View file

@ -676,10 +676,18 @@ describe("DynamicJsonForm Validation Functionality", () => {
onClick={() => {
const result = formRef.current?.validateJson();
// Add data attributes to make validation result testable
const button = document.querySelector('[data-testid="validate-button"]') as HTMLElement;
const button = document.querySelector(
'[data-testid="validate-button"]',
) as HTMLElement;
if (button && result) {
button.setAttribute('data-validation-valid', result.isValid.toString());
button.setAttribute('data-validation-error', result.error || '');
button.setAttribute(
"data-validation-valid",
result.isValid.toString(),
);
button.setAttribute(
"data-validation-error",
result.error || "",
);
}
}}
data-testid="validate-button"
@ -702,7 +710,7 @@ describe("DynamicJsonForm Validation Functionality", () => {
const TestComponent = () => {
const formRef = useRef<DynamicJsonFormRef>(null);
return (
<div>
<DynamicJsonForm
@ -714,10 +722,18 @@ describe("DynamicJsonForm Validation Functionality", () => {
<button
onClick={() => {
const result = formRef.current?.validateJson();
const button = document.querySelector('[data-testid="validate-button"]') as HTMLElement;
const button = document.querySelector(
'[data-testid="validate-button"]',
) as HTMLElement;
if (button && result) {
button.setAttribute('data-validation-valid', result.isValid.toString());
button.setAttribute('data-validation-error', result.error || '');
button.setAttribute(
"data-validation-valid",
result.isValid.toString(),
);
button.setAttribute(
"data-validation-error",
result.error || "",
);
}
}}
data-testid="validate-button"
@ -733,8 +749,8 @@ describe("DynamicJsonForm Validation Functionality", () => {
const validateButton = screen.getByTestId("validate-button");
fireEvent.click(validateButton);
expect(validateButton.getAttribute('data-validation-valid')).toBe('true');
expect(validateButton.getAttribute('data-validation-error')).toBe('');
expect(validateButton.getAttribute("data-validation-valid")).toBe("true");
expect(validateButton.getAttribute("data-validation-error")).toBe("");
});
it("should return valid for valid JSON in JSON mode", () => {
@ -743,8 +759,8 @@ describe("DynamicJsonForm Validation Functionality", () => {
const validateButton = screen.getByTestId("validate-button");
fireEvent.click(validateButton);
expect(validateButton.getAttribute('data-validation-valid')).toBe('true');
expect(validateButton.getAttribute('data-validation-error')).toBe('');
expect(validateButton.getAttribute("data-validation-valid")).toBe("true");
expect(validateButton.getAttribute("data-validation-error")).toBe("");
});
it("should return invalid for malformed JSON in JSON mode", async () => {
@ -759,8 +775,12 @@ describe("DynamicJsonForm Validation Functionality", () => {
const validateButton = screen.getByTestId("validate-button");
fireEvent.click(validateButton);
expect(validateButton.getAttribute('data-validation-valid')).toBe('false');
expect(validateButton.getAttribute('data-validation-error')).toContain('JSON');
expect(validateButton.getAttribute("data-validation-valid")).toBe(
"false",
);
expect(validateButton.getAttribute("data-validation-error")).toContain(
"JSON",
);
});
});
@ -769,13 +789,13 @@ describe("DynamicJsonForm Validation Functionality", () => {
// Clear the textarea
const textarea = screen.getByRole("textbox");
fireEvent.change(textarea, { target: { value: '' } });
fireEvent.change(textarea, { target: { value: "" } });
const validateButton = screen.getByTestId("validate-button");
fireEvent.click(validateButton);
expect(validateButton.getAttribute('data-validation-valid')).toBe('true');
expect(validateButton.getAttribute('data-validation-error')).toBe('');
expect(validateButton.getAttribute("data-validation-valid")).toBe("true");
expect(validateButton.getAttribute("data-validation-error")).toBe("");
});
it("should set error state when validation fails", async () => {
@ -783,15 +803,21 @@ describe("DynamicJsonForm Validation Functionality", () => {
// Enter invalid JSON
const textarea = screen.getByRole("textbox");
fireEvent.change(textarea, { target: { value: '{ "trailing": "comma", }' } });
fireEvent.change(textarea, {
target: { value: '{ "trailing": "comma", }' },
});
// Trigger validation
const validateButton = screen.getByTestId("validate-button");
fireEvent.click(validateButton);
// Check that validation result shows error
expect(validateButton.getAttribute('data-validation-valid')).toBe('false');
expect(validateButton.getAttribute('data-validation-error')).toContain('JSON');
expect(validateButton.getAttribute("data-validation-valid")).toBe(
"false",
);
expect(validateButton.getAttribute("data-validation-error")).toContain(
"JSON",
);
});
});
@ -799,7 +825,7 @@ describe("DynamicJsonForm Validation Functionality", () => {
it("should expose validateJson method through ref", () => {
const TestComponent = () => {
const formRef = useRef<DynamicJsonFormRef>(null);
return (
<div>
<DynamicJsonForm
@ -815,10 +841,16 @@ describe("DynamicJsonForm Validation Functionality", () => {
/>
<button
onClick={() => {
const hasValidateMethod = typeof formRef.current?.validateJson === 'function';
const button = document.querySelector('[data-testid="ref-test-button"]') as HTMLElement;
const hasValidateMethod =
typeof formRef.current?.validateJson === "function";
const button = document.querySelector(
'[data-testid="ref-test-button"]',
) as HTMLElement;
if (button) {
button.setAttribute('data-has-validate-method', hasValidateMethod.toString());
button.setAttribute(
"data-has-validate-method",
hasValidateMethod.toString(),
);
}
}}
data-testid="ref-test-button"
@ -834,7 +866,7 @@ describe("DynamicJsonForm Validation Functionality", () => {
const testButton = screen.getByTestId("ref-test-button");
fireEvent.click(testButton);
expect(testButton.getAttribute('data-has-validate-method')).toBe('true');
expect(testButton.getAttribute("data-has-validate-method")).toBe("true");
});
});
});

41
client/src/components/__tests__/ToolsTab.test.tsx
View file

@ -671,8 +671,8 @@ describe("ToolsTab", () => {
// Enter invalid JSON in the first textarea
const configTextarea = textareas[0];
fireEvent.change(configTextarea, {
target: { value: '{ "invalid": json }' }
fireEvent.change(configTextarea, {
target: { value: '{ "invalid": json }' },
});
// Try to run the tool
@ -695,15 +695,18 @@ describe("ToolsTab", () => {
// Find JSON editor textareas
const textareas = screen.getAllByRole("textbox");
// Enter valid JSON in the first textarea
fireEvent.change(textareas[0], {
target: { value: '{ "config": { "setting": "value" }, "data": ["item1", "item2"] }' }
fireEvent.change(textareas[0], {
target: {
value:
'{ "config": { "setting": "value" }, "data": ["item1", "item2"] }',
},
});
// Wait for debounced updates
await act(async () => {
await new Promise(resolve => setTimeout(resolve, 350));
await new Promise((resolve) => setTimeout(resolve, 350));
});
// Try to run the tool
@ -725,10 +728,13 @@ describe("ToolsTab", () => {
});
const textareas = screen.getAllByRole("textbox");
// Enter invalid JSON that contains both valid and invalid parts
fireEvent.change(textareas[0], {
target: { value: '{ "config": { "setting": "value" }, "data": ["unclosed array" }' }
fireEvent.change(textareas[0], {
target: {
value:
'{ "config": { "setting": "value" }, "data": ["unclosed array" }',
},
});
// Try to run the tool
@ -764,7 +770,7 @@ describe("ToolsTab", () => {
// Fill in the simple parameters
const messageInput = screen.getByRole("textbox");
const countInput = screen.getByRole("spinbutton");
fireEvent.change(messageInput, { target: { value: "test message" } });
fireEvent.change(countInput, { target: { value: "5" } });
@ -775,10 +781,13 @@ describe("ToolsTab", () => {
});
// Tool should have been called successfully (no JSON validation needed)
expect(mockCallTool).toHaveBeenCalledWith(simpleToolWithStringParam.name, {
message: "test message",
count: 5,
});
expect(mockCallTool).toHaveBeenCalledWith(
simpleToolWithStringParam.name,
{
message: "test message",
count: 5,
},
);
});
it("should handle empty JSON parameters correctly", async () => {
@ -790,9 +799,9 @@ describe("ToolsTab", () => {
});
const textareas = screen.getAllByRole("textbox");
// Clear the textarea (empty JSON should be valid)
fireEvent.change(textareas[0], { target: { value: '' } });
fireEvent.change(textareas[0], { target: { value: "" } });
// Try to run the tool
const runButton = screen.getByRole("button", { name: /run tool/i });