hzhang/inspector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix formatting

Browse Source
This commit is contained in:
Ola Hungerford
2025-03-24 09:07:53 -07:00
parent 5735f2347a
commit fa3e2867c9
3 changed files with 198 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/jest.config.cjs
View File

@@ -3,16 +3,16 @@ module.exports = {
testEnvironment: "jsdom", testEnvironment: "jsdom",
moduleNameMapper: { moduleNameMapper: {
"^@/(.*)$": "<rootDir>/src/$1", "^@/(.*)$": "<rootDir>/src/$1",
"\\.css$": "<rootDir>/src/__mocks__/styleMock.js" "\\.css$": "<rootDir>/src/__mocks__/styleMock.js",
}, },
transform: { transform: {
"^.+\\.tsx?$": [ "^.+\\.tsx?$": [
"ts-jest", "ts-jest",
{ {
jsx: "react-jsx", jsx: "react-jsx",
tsconfig: "tsconfig.jest.json" tsconfig: "tsconfig.jest.json",
} },
] ],
}, },
extensionsToTreatAsEsm: [".ts", ".tsx"], extensionsToTreatAsEsm: [".ts", ".tsx"],
testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$", testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
@@ -21,13 +21,13 @@ module.exports = {
"/node_modules/", "/node_modules/",
"/dist/", "/dist/",
"/bin/", "/bin/",
"\\.config\\.(js|ts|cjs|mjs)$" "\\.config\\.(js|ts|cjs|mjs)$",
], ],
// Exclude the same patterns from coverage reports // Exclude the same patterns from coverage reports
coveragePathIgnorePatterns: [ coveragePathIgnorePatterns: [
"/node_modules/", "/node_modules/",
"/dist/", "/dist/",
"/bin/", "/bin/",
"\\.config\\.(js|ts|cjs|mjs)$" "\\.config\\.(js|ts|cjs|mjs)$",
] ],
}; };

70
client/src/components/__tests__/DynamicJsonForm.test.tsx
View File

@@ -1,93 +1,93 @@
import { render, screen, fireEvent } from '@testing-library/react'; import { render, screen, fireEvent } from "@testing-library/react";
import { describe, it, expect, jest } from '@jest/globals'; import { describe, it, expect, jest } from "@jest/globals";
import DynamicJsonForm from '../DynamicJsonForm'; import DynamicJsonForm from "../DynamicJsonForm";
import type { JsonSchemaType } from '../DynamicJsonForm'; import type { JsonSchemaType } from "../DynamicJsonForm";
describe('DynamicJsonForm String Fields', () => { describe("DynamicJsonForm String Fields", () => {
const renderForm = (props = {}) => { const renderForm = (props = {}) => {
const defaultProps = { const defaultProps = {
schema: { schema: {
type: "string" as const, type: "string" as const,
description: "Test string field" description: "Test string field",
} satisfies JsonSchemaType, } satisfies JsonSchemaType,
value: undefined, value: undefined,
onChange: jest.fn() onChange: jest.fn(),
}; };
return render(<DynamicJsonForm {...defaultProps} {...props} />); return render(<DynamicJsonForm {...defaultProps} {...props} />);
}; };
describe('Type Validation', () => { describe("Type Validation", () => {
it('should handle numeric input as string type', () => { it("should handle numeric input as string type", () => {
const onChange = jest.fn(); const onChange = jest.fn();
renderForm({ onChange }); renderForm({ onChange });
const input = screen.getByRole('textbox'); const input = screen.getByRole("textbox");
fireEvent.change(input, { target: { value: '123321' } }); fireEvent.change(input, { target: { value: "123321" } });
expect(onChange).toHaveBeenCalledWith('123321'); expect(onChange).toHaveBeenCalledWith("123321");
// Verify the value is a string, not a number // Verify the value is a string, not a number
expect(typeof onChange.mock.calls[0][0]).toBe('string'); expect(typeof onChange.mock.calls[0][0]).toBe("string");
}); });
it('should render as text input, not number input', () => { it("should render as text input, not number input", () => {
renderForm(); renderForm();
const input = screen.getByRole('textbox'); const input = screen.getByRole("textbox");
expect(input).toHaveProperty('type', 'text'); expect(input).toHaveProperty("type", "text");
}); });
}); });
}); });
describe('DynamicJsonForm Integer Fields', () => { describe("DynamicJsonForm Integer Fields", () => {
const renderForm = (props = {}) => { const renderForm = (props = {}) => {
const defaultProps = { const defaultProps = {
schema: { schema: {
type: "integer" as const, type: "integer" as const,
description: "Test integer field" description: "Test integer field",
} satisfies JsonSchemaType, } satisfies JsonSchemaType,
value: undefined, value: undefined,
onChange: jest.fn() onChange: jest.fn(),
}; };
return render(<DynamicJsonForm {...defaultProps} {...props} />); return render(<DynamicJsonForm {...defaultProps} {...props} />);
}; };
describe('Basic Operations', () => { describe("Basic Operations", () => {
it('should render number input with step=1', () => { it("should render number input with step=1", () => {
renderForm(); renderForm();
const input = screen.getByRole('spinbutton'); const input = screen.getByRole("spinbutton");
expect(input).toHaveProperty('type', 'number'); expect(input).toHaveProperty("type", "number");
expect(input).toHaveProperty('step', '1'); expect(input).toHaveProperty("step", "1");
}); });
it('should pass integer values to onChange', () => { it("should pass integer values to onChange", () => {
const onChange = jest.fn(); const onChange = jest.fn();
renderForm({ onChange }); renderForm({ onChange });
const input = screen.getByRole('spinbutton'); const input = screen.getByRole("spinbutton");
fireEvent.change(input, { target: { value: '42' } }); fireEvent.change(input, { target: { value: "42" } });
expect(onChange).toHaveBeenCalledWith(42); expect(onChange).toHaveBeenCalledWith(42);
// Verify the value is a number, not a string // Verify the value is a number, not a string
expect(typeof onChange.mock.calls[0][0]).toBe('number'); expect(typeof onChange.mock.calls[0][0]).toBe("number");
}); });
it('should not pass string values to onChange', () => { it("should not pass string values to onChange", () => {
const onChange = jest.fn(); const onChange = jest.fn();
renderForm({ onChange }); renderForm({ onChange });
const input = screen.getByRole('spinbutton'); const input = screen.getByRole("spinbutton");
fireEvent.change(input, { target: { value: 'abc' } }); fireEvent.change(input, { target: { value: "abc" } });
expect(onChange).not.toHaveBeenCalled(); expect(onChange).not.toHaveBeenCalled();
}); });
}); });
describe('Edge Cases', () => { describe("Edge Cases", () => {
it('should handle non-numeric input by not calling onChange', () => { it("should handle non-numeric input by not calling onChange", () => {
const onChange = jest.fn(); const onChange = jest.fn();
renderForm({ onChange }); renderForm({ onChange });
const input = screen.getByRole('spinbutton'); const input = screen.getByRole("spinbutton");
fireEvent.change(input, { target: { value: 'abc' } }); fireEvent.change(input, { target: { value: "abc" } });
expect(onChange).not.toHaveBeenCalled(); expect(onChange).not.toHaveBeenCalled();
}); });

204
client/src/components/__tests__/Sidebar.test.tsx
View File

@@ -1,31 +1,31 @@
import { render, screen, fireEvent } from '@testing-library/react'; import { render, screen, fireEvent } from "@testing-library/react";
import { describe, it, beforeEach, jest } from '@jest/globals'; import { describe, it, beforeEach, jest } from "@jest/globals";
import Sidebar from '../Sidebar'; import Sidebar from "../Sidebar";
// Mock theme hook // Mock theme hook
jest.mock('../../lib/useTheme', () => ({ jest.mock("../../lib/useTheme", () => ({
__esModule: true, __esModule: true,
default: () => ['light', jest.fn()], default: () => ["light", jest.fn()],
})); }));
describe('Sidebar Environment Variables', () => { describe("Sidebar Environment Variables", () => {
const defaultProps = { const defaultProps = {
connectionStatus: 'disconnected' as const, connectionStatus: "disconnected" as const,
transportType: 'stdio' as const, transportType: "stdio" as const,
setTransportType: jest.fn(), setTransportType: jest.fn(),
command: '', command: "",
setCommand: jest.fn(), setCommand: jest.fn(),
args: '', args: "",
setArgs: jest.fn(), setArgs: jest.fn(),
sseUrl: '', sseUrl: "",
setSseUrl: jest.fn(), setSseUrl: jest.fn(),
env: {}, env: {},
setEnv: jest.fn(), setEnv: jest.fn(),
bearerToken: '', bearerToken: "",
setBearerToken: jest.fn(), setBearerToken: jest.fn(),
onConnect: jest.fn(), onConnect: jest.fn(),
stdErrNotifications: [], stdErrNotifications: [],
logLevel: 'info' as const, logLevel: "info" as const,
sendLogLevelRequest: jest.fn(), sendLogLevelRequest: jest.fn(),
loggingSupported: true, loggingSupported: true,
}; };
@@ -35,7 +35,7 @@ describe('Sidebar Environment Variables', () => {
}; };
const openEnvVarsSection = () => { const openEnvVarsSection = () => {
const button = screen.getByText('Environment Variables'); const button = screen.getByText("Environment Variables");
fireEvent.click(button); fireEvent.click(button);
}; };
@@ -43,236 +43,236 @@ describe('Sidebar Environment Variables', () => {
jest.clearAllMocks(); jest.clearAllMocks();
}); });
describe('Basic Operations', () => { describe("Basic Operations", () => {
it('should add a new environment variable', () => { it("should add a new environment variable", () => {
const setEnv = jest.fn(); const setEnv = jest.fn();
renderSidebar({ env: {}, setEnv }); renderSidebar({ env: {}, setEnv });
openEnvVarsSection(); openEnvVarsSection();
const addButton = screen.getByText('Add Environment Variable'); const addButton = screen.getByText("Add Environment Variable");
fireEvent.click(addButton); fireEvent.click(addButton);
expect(setEnv).toHaveBeenCalledWith({ '': '' }); expect(setEnv).toHaveBeenCalledWith({ "": "" });
}); });
it('should remove an environment variable', () => { it("should remove an environment variable", () => {
const setEnv = jest.fn(); const setEnv = jest.fn();
const initialEnv = { TEST_KEY: 'test_value' }; const initialEnv = { TEST_KEY: "test_value" };
renderSidebar({ env: initialEnv, setEnv }); renderSidebar({ env: initialEnv, setEnv });
openEnvVarsSection(); openEnvVarsSection();
const removeButton = screen.getByRole('button', { name: '×' }); const removeButton = screen.getByRole("button", { name: "×" });
fireEvent.click(removeButton); fireEvent.click(removeButton);
expect(setEnv).toHaveBeenCalledWith({}); expect(setEnv).toHaveBeenCalledWith({});
}); });
it('should update environment variable value', () => { it("should update environment variable value", () => {
const setEnv = jest.fn(); const setEnv = jest.fn();
const initialEnv = { TEST_KEY: 'test_value' }; const initialEnv = { TEST_KEY: "test_value" };
renderSidebar({ env: initialEnv, setEnv }); renderSidebar({ env: initialEnv, setEnv });
openEnvVarsSection(); openEnvVarsSection();
const valueInput = screen.getByDisplayValue('test_value'); const valueInput = screen.getByDisplayValue("test_value");
fireEvent.change(valueInput, { target: { value: 'new_value' } }); fireEvent.change(valueInput, { target: { value: "new_value" } });
expect(setEnv).toHaveBeenCalledWith({ TEST_KEY: 'new_value' }); expect(setEnv).toHaveBeenCalledWith({ TEST_KEY: "new_value" });
}); });
it('should toggle value visibility', () => { it("should toggle value visibility", () => {
const initialEnv = { TEST_KEY: 'test_value' }; const initialEnv = { TEST_KEY: "test_value" };
renderSidebar({ env: initialEnv }); renderSidebar({ env: initialEnv });
openEnvVarsSection(); openEnvVarsSection();
const valueInput = screen.getByDisplayValue('test_value'); const valueInput = screen.getByDisplayValue("test_value");
expect(valueInput).toHaveProperty('type', 'password'); expect(valueInput).toHaveProperty("type", "password");
const toggleButton = screen.getByRole('button', { name: /show value/i }); const toggleButton = screen.getByRole("button", { name: /show value/i });
fireEvent.click(toggleButton); fireEvent.click(toggleButton);
expect(valueInput).toHaveProperty('type', 'text'); expect(valueInput).toHaveProperty("type", "text");
}); });
}); });
describe('Key Editing', () => { describe("Key Editing", () => {
it('should maintain order when editing first key', () => { it("should maintain order when editing first key", () => {
const setEnv = jest.fn(); const setEnv = jest.fn();
const initialEnv = { const initialEnv = {
FIRST_KEY: 'first_value', FIRST_KEY: "first_value",
SECOND_KEY: 'second_value', SECOND_KEY: "second_value",
THIRD_KEY: 'third_value', THIRD_KEY: "third_value",
}; };
renderSidebar({ env: initialEnv, setEnv }); renderSidebar({ env: initialEnv, setEnv });
openEnvVarsSection(); openEnvVarsSection();
const firstKeyInput = screen.getByDisplayValue('FIRST_KEY'); const firstKeyInput = screen.getByDisplayValue("FIRST_KEY");
fireEvent.change(firstKeyInput, { target: { value: 'NEW_FIRST_KEY' } }); fireEvent.change(firstKeyInput, { target: { value: "NEW_FIRST_KEY" } });
expect(setEnv).toHaveBeenCalledWith({ expect(setEnv).toHaveBeenCalledWith({
NEW_FIRST_KEY: 'first_value', NEW_FIRST_KEY: "first_value",
SECOND_KEY: 'second_value', SECOND_KEY: "second_value",
THIRD_KEY: 'third_value', THIRD_KEY: "third_value",
}); });
}); });
it('should maintain order when editing middle key', () => { it("should maintain order when editing middle key", () => {
const setEnv = jest.fn(); const setEnv = jest.fn();
const initialEnv = { const initialEnv = {
FIRST_KEY: 'first_value', FIRST_KEY: "first_value",
SECOND_KEY: 'second_value', SECOND_KEY: "second_value",
THIRD_KEY: 'third_value', THIRD_KEY: "third_value",
}; };
renderSidebar({ env: initialEnv, setEnv }); renderSidebar({ env: initialEnv, setEnv });
openEnvVarsSection(); openEnvVarsSection();
const middleKeyInput = screen.getByDisplayValue('SECOND_KEY'); const middleKeyInput = screen.getByDisplayValue("SECOND_KEY");
fireEvent.change(middleKeyInput, { target: { value: 'NEW_SECOND_KEY' } }); fireEvent.change(middleKeyInput, { target: { value: "NEW_SECOND_KEY" } });
expect(setEnv).toHaveBeenCalledWith({ expect(setEnv).toHaveBeenCalledWith({
FIRST_KEY: 'first_value', FIRST_KEY: "first_value",
NEW_SECOND_KEY: 'second_value', NEW_SECOND_KEY: "second_value",
THIRD_KEY: 'third_value', THIRD_KEY: "third_value",
}); });
}); });
it('should maintain order when editing last key', () => { it("should maintain order when editing last key", () => {
const setEnv = jest.fn(); const setEnv = jest.fn();
const initialEnv = { const initialEnv = {
FIRST_KEY: 'first_value', FIRST_KEY: "first_value",
SECOND_KEY: 'second_value', SECOND_KEY: "second_value",
THIRD_KEY: 'third_value', THIRD_KEY: "third_value",
}; };
renderSidebar({ env: initialEnv, setEnv }); renderSidebar({ env: initialEnv, setEnv });
openEnvVarsSection(); openEnvVarsSection();
const lastKeyInput = screen.getByDisplayValue('THIRD_KEY'); const lastKeyInput = screen.getByDisplayValue("THIRD_KEY");
fireEvent.change(lastKeyInput, { target: { value: 'NEW_THIRD_KEY' } }); fireEvent.change(lastKeyInput, { target: { value: "NEW_THIRD_KEY" } });
expect(setEnv).toHaveBeenCalledWith({ expect(setEnv).toHaveBeenCalledWith({
FIRST_KEY: 'first_value', FIRST_KEY: "first_value",
SECOND_KEY: 'second_value', SECOND_KEY: "second_value",
NEW_THIRD_KEY: 'third_value', NEW_THIRD_KEY: "third_value",
}); });
}); });
}); });
describe('Multiple Operations', () => { describe("Multiple Operations", () => {
it('should maintain state after multiple key edits', () => { it("should maintain state after multiple key edits", () => {
const setEnv = jest.fn(); const setEnv = jest.fn();
const initialEnv = { const initialEnv = {
FIRST_KEY: 'first_value', FIRST_KEY: "first_value",
SECOND_KEY: 'second_value', SECOND_KEY: "second_value",
}; };
const { rerender } = renderSidebar({ env: initialEnv, setEnv }); const { rerender } = renderSidebar({ env: initialEnv, setEnv });
openEnvVarsSection(); openEnvVarsSection();
// First key edit // First key edit
const firstKeyInput = screen.getByDisplayValue('FIRST_KEY'); const firstKeyInput = screen.getByDisplayValue("FIRST_KEY");
fireEvent.change(firstKeyInput, { target: { value: 'NEW_FIRST_KEY' } }); fireEvent.change(firstKeyInput, { target: { value: "NEW_FIRST_KEY" } });
// Get the updated env from the first setEnv call // Get the updated env from the first setEnv call
const updatedEnv = (setEnv.mock.calls[0][0] as Record<string, string>); const updatedEnv = setEnv.mock.calls[0][0] as Record<string, string>;
// Rerender with the updated env // Rerender with the updated env
rerender(<Sidebar {...defaultProps} env={updatedEnv} setEnv={setEnv} />); rerender(<Sidebar {...defaultProps} env={updatedEnv} setEnv={setEnv} />);
// Second key edit // Second key edit
const secondKeyInput = screen.getByDisplayValue('SECOND_KEY'); const secondKeyInput = screen.getByDisplayValue("SECOND_KEY");
fireEvent.change(secondKeyInput, { target: { value: 'NEW_SECOND_KEY' } }); fireEvent.change(secondKeyInput, { target: { value: "NEW_SECOND_KEY" } });
// Verify the final state matches what we expect // Verify the final state matches what we expect
expect(setEnv).toHaveBeenLastCalledWith({ expect(setEnv).toHaveBeenLastCalledWith({
NEW_FIRST_KEY: 'first_value', NEW_FIRST_KEY: "first_value",
NEW_SECOND_KEY: 'second_value', NEW_SECOND_KEY: "second_value",
}); });
}); });
it('should maintain visibility state after key edit', () => { it("should maintain visibility state after key edit", () => {
const initialEnv = { TEST_KEY: 'test_value' }; const initialEnv = { TEST_KEY: "test_value" };
const { rerender } = renderSidebar({ env: initialEnv }); const { rerender } = renderSidebar({ env: initialEnv });
openEnvVarsSection(); openEnvVarsSection();
// Show the value // Show the value
const toggleButton = screen.getByRole('button', { name: /show value/i }); const toggleButton = screen.getByRole("button", { name: /show value/i });
fireEvent.click(toggleButton); fireEvent.click(toggleButton);
const valueInput = screen.getByDisplayValue('test_value'); const valueInput = screen.getByDisplayValue("test_value");
expect(valueInput).toHaveProperty('type', 'text'); expect(valueInput).toHaveProperty("type", "text");
// Edit the key // Edit the key
const keyInput = screen.getByDisplayValue('TEST_KEY'); const keyInput = screen.getByDisplayValue("TEST_KEY");
fireEvent.change(keyInput, { target: { value: 'NEW_KEY' } }); fireEvent.change(keyInput, { target: { value: "NEW_KEY" } });
// Rerender with updated env // Rerender with updated env
rerender(<Sidebar {...defaultProps} env={{ NEW_KEY: 'test_value' }} />); rerender(<Sidebar {...defaultProps} env={{ NEW_KEY: "test_value" }} />);
// Value should still be visible // Value should still be visible
const updatedValueInput = screen.getByDisplayValue('test_value'); const updatedValueInput = screen.getByDisplayValue("test_value");
expect(updatedValueInput).toHaveProperty('type', 'text'); expect(updatedValueInput).toHaveProperty("type", "text");
}); });
}); });
describe('Edge Cases', () => { describe("Edge Cases", () => {
it('should handle empty key', () => { it("should handle empty key", () => {
const setEnv = jest.fn(); const setEnv = jest.fn();
const initialEnv = { TEST_KEY: 'test_value' }; const initialEnv = { TEST_KEY: "test_value" };
renderSidebar({ env: initialEnv, setEnv }); renderSidebar({ env: initialEnv, setEnv });
openEnvVarsSection(); openEnvVarsSection();
const keyInput = screen.getByDisplayValue('TEST_KEY'); const keyInput = screen.getByDisplayValue("TEST_KEY");
fireEvent.change(keyInput, { target: { value: '' } }); fireEvent.change(keyInput, { target: { value: "" } });
expect(setEnv).toHaveBeenCalledWith({ '': 'test_value' }); expect(setEnv).toHaveBeenCalledWith({ "": "test_value" });
}); });
it('should handle special characters in key', () => { it("should handle special characters in key", () => {
const setEnv = jest.fn(); const setEnv = jest.fn();
const initialEnv = { TEST_KEY: 'test_value' }; const initialEnv = { TEST_KEY: "test_value" };
renderSidebar({ env: initialEnv, setEnv }); renderSidebar({ env: initialEnv, setEnv });
openEnvVarsSection(); openEnvVarsSection();
const keyInput = screen.getByDisplayValue('TEST_KEY'); const keyInput = screen.getByDisplayValue("TEST_KEY");
fireEvent.change(keyInput, { target: { value: 'TEST-KEY@123' } }); fireEvent.change(keyInput, { target: { value: "TEST-KEY@123" } });
expect(setEnv).toHaveBeenCalledWith({ 'TEST-KEY@123': 'test_value' }); expect(setEnv).toHaveBeenCalledWith({ "TEST-KEY@123": "test_value" });
}); });
it('should handle unicode characters', () => { it("should handle unicode characters", () => {
const setEnv = jest.fn(); const setEnv = jest.fn();
const initialEnv = { TEST_KEY: 'test_value' }; const initialEnv = { TEST_KEY: "test_value" };
renderSidebar({ env: initialEnv, setEnv }); renderSidebar({ env: initialEnv, setEnv });
openEnvVarsSection(); openEnvVarsSection();
const keyInput = screen.getByDisplayValue('TEST_KEY'); const keyInput = screen.getByDisplayValue("TEST_KEY");
fireEvent.change(keyInput, { target: { value: 'TEST_🔑' } }); fireEvent.change(keyInput, { target: { value: "TEST_🔑" } });
expect(setEnv).toHaveBeenCalledWith({ 'TEST_🔑': 'test_value' }); expect(setEnv).toHaveBeenCalledWith({ "TEST_🔑": "test_value" });
}); });
it('should handle very long key names', () => { it("should handle very long key names", () => {
const setEnv = jest.fn(); const setEnv = jest.fn();
const initialEnv = { TEST_KEY: 'test_value' }; const initialEnv = { TEST_KEY: "test_value" };
renderSidebar({ env: initialEnv, setEnv }); renderSidebar({ env: initialEnv, setEnv });
openEnvVarsSection(); openEnvVarsSection();
const keyInput = screen.getByDisplayValue('TEST_KEY'); const keyInput = screen.getByDisplayValue("TEST_KEY");
const longKey = 'A'.repeat(100); const longKey = "A".repeat(100);
fireEvent.change(keyInput, { target: { value: longKey } }); fireEvent.change(keyInput, { target: { value: longKey } });
expect(setEnv).toHaveBeenCalledWith({ [longKey]: 'test_value' }); expect(setEnv).toHaveBeenCalledWith({ [longKey]: "test_value" });
}); });
}); });
}); });