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

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

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

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

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