Add integration tests for key packages

.changeset/petite-zebras-read.md

@@ -0,0 +1,3 @@
+---
+---
+Add integration tests for inspector, logs-react, and json-schema-to-react-tree packages.

packages/inspector/__mocks__/logs-react.ts

@@ -0,0 +1 @@
+export const JSONRPCLogger = () => null;

packages/inspector/__mocks__/monaco-editor.ts

@@ -0,0 +1 @@
+export default {} as unknown;

packages/inspector/__mocks__/monaco.ts

@@ -0,0 +1,2 @@
+export const MonacoEditor = () => null;
+export const addDiagnostics = () => {};

packages/inspector/__mocks__/worker.ts

@@ -0,0 +1 @@
+export default {};

packages/inspector/package.json

@@ -24,7 +24,7 @@
   },
   "scripts": {
     "start": "vite",
-    "test": "",
+    "test": "vitest run",
     "build:package": "vite build && tsc --emitDeclarationOnly",
     "clean:package": "rm -rf dist && rm -rf tsconfig.tsbuildinfo",
     "lint": "eslint 'src/**/*.{ts,tsx}'"

packages/inspector/src/Inspector.integration.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import { vi, expect, test } from 'vitest';
+
+// Stub monaco-editor and workers
+vi.mock('monaco-editor', () => ({}), { virtual: true });
+vi.mock('monaco-editor/esm/vs/editor/editor.worker?worker', () => ({}), { virtual: true });
+vi.mock('monaco-editor/esm/vs/language/json/json.worker?worker', () => ({}), { virtual: true });
+vi.mock('monaco-editor/esm/vs/language/css/css.worker?worker', () => ({}), { virtual: true });
+vi.mock('monaco-editor/esm/vs/language/html/html.worker?worker', () => ({}), { virtual: true });
+vi.mock('monaco-editor/esm/vs/language/typescript/ts.worker?worker', () => ({}), { virtual: true });
+vi.mock('../src/containers/userWorker.ts', () => ({}), { virtual: true });
+vi.mock('react-resizable-panels', () => ({
+  PanelGroup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  Panel: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  PanelResizeHandle: () => <div />,
+  ImperativePanelGroupHandle: class {},
+}));
+
+import Inspector from './containers/Inspector';
+
+// Mock useTransport to avoid real network calls
+vi.mock('@open-rpc/monaco-editor-react', () => ({
+  MonacoEditor: () => null,
+  addDiagnostics: () => null,
+}));
+vi.mock('./hooks/useTransport', () => {
+  const sendData = vi.fn().mockResolvedValue({ foo: 'bar' });
+  const transport = {
+    sendData,
+    subscribe: vi.fn(),
+    unsubscribe: vi.fn(),
+    close: vi.fn(),
+    connect: vi.fn(),
+  };
+  return { default: () => [transport, vi.fn(), undefined, true] };
+});
+
+test('play button sends request and displays log', async () => {
+  render(
+    <Inspector
+      request={{ jsonrpc: '2.0', method: 'foo', params: [], id: 1 }}
+      url="http://localhost"
+    />
+  );
+  const playButton = screen.getByRole('button', { name: /play/i });
+  fireEvent.click(playButton);
+  await waitFor(() => screen.getByText('foo'));
+  expect(screen.getByText('foo')).toBeInTheDocument();
+});

packages/inspector/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

packages/inspector/vitest.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vitest/config';
+import { resolve } from 'path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@open-rpc/monaco-editor-react': resolve(__dirname, './__mocks__/monaco.ts'),
+      '@open-rpc/logs-react': resolve(__dirname, './__mocks__/logs-react.ts'),
+      'monaco-editor': resolve(__dirname, './__mocks__/monaco-editor.ts'),
+      'monaco-editor/esm/vs/editor/editor.worker?worker': resolve(__dirname, './__mocks__/worker.ts'),
+      'monaco-editor/esm/vs/editor/editor.worker': resolve(__dirname, './__mocks__/worker.ts'),
+      'monaco-editor/esm/vs/language/json/json.worker?worker': resolve(__dirname, './__mocks__/worker.ts'),
+      'monaco-editor/esm/vs/language/json/json.worker': resolve(__dirname, './__mocks__/worker.ts'),
+      'monaco-editor/esm/vs/language/css/css.worker?worker': resolve(__dirname, './__mocks__/worker.ts'),
+      'monaco-editor/esm/vs/language/css/css.worker': resolve(__dirname, './__mocks__/worker.ts'),
+      'monaco-editor/esm/vs/language/html/html.worker?worker': resolve(__dirname, './__mocks__/worker.ts'),
+      'monaco-editor/esm/vs/language/html/html.worker': resolve(__dirname, './__mocks__/worker.ts'),
+      'monaco-editor/esm/vs/language/typescript/ts.worker?worker': resolve(__dirname, './__mocks__/worker.ts'),
+      'monaco-editor/esm/vs/language/typescript/ts.worker': resolve(__dirname, './__mocks__/worker.ts'),
+      './containers/userWorker': resolve(__dirname, './__mocks__/worker.ts'),
+    },
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/test/setup.ts'],
+  },
+});

packages/json-schema-to-react-tree/package.json

@@ -22,7 +22,7 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "test": "",
+    "test": "vitest run",
     "clean:package": "rm -rf dist && rm -rf tsconfig.tsbuildinfo",
     "build:package": "vite build && tsc --emitDeclarationOnly",
     "lint": "eslint 'src/**/*.{ts,tsx}'"

packages/json-schema-to-react-tree/src/JSONSchemaTree.integration.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { expect, test } from 'vitest';
+import JSONSchemaTree from './containers/JSONSchemaTree';
+
+test('renders properties from schema', () => {
+  render(<JSONSchemaTree schema={{ type: 'object', properties: { foo: { type: 'string' } } }} />);
+  expect(screen.getByText('Object')).toBeInTheDocument();
+});

packages/json-schema-to-react-tree/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

packages/json-schema-to-react-tree/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/test/setup.ts'],
+  },
+});

packages/logs-react/__mocks__/monaco-editor.ts

@@ -0,0 +1 @@
+export default {} as unknown;

packages/logs-react/__mocks__/monaco.ts

@@ -0,0 +1,2 @@
+export const MonacoEditor = () => null;
+export const addDiagnostics = () => {};

packages/logs-react/__mocks__/worker.ts

@@ -0,0 +1 @@
+export default {};

packages/logs-react/package.json

@@ -25,6 +25,7 @@
   },
   "scripts": {
     "start": "vite",
+    "test": "vitest run",
     "build:package": "vite build && tsc --emitDeclarationOnly",
     "clean:package": "rm -rf dist && rm -rf tsconfig.tsbuildinfo",
     "lint": "eslint 'src/**/*.{ts,tsx}'"

packages/logs-react/src/JSONRPCLogger.integration.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { expect, test } from 'vitest';
+import JSONRPCLogger, { JSONRPCLog } from './exports';
+
+const logs: JSONRPCLog[] = [
+  {
+    type: 'request',
+    method: 'foo',
+    timestamp: new Date(),
+    payload: { jsonrpc: '2.0', method: 'foo', id: 1 },
+  },
+  {
+    type: 'response',
+    method: 'foo',
+    timestamp: new Date(),
+    payload: { jsonrpc: '2.0', result: 'bar', id: 1 },
+  },
+];
+
+test('renders logs with method names', () => {
+  render(<JSONRPCLogger logs={logs} sidebarOpen={false} />);
+  expect(screen.getAllByText('foo').length).toBeGreaterThan(0);
+});

packages/logs-react/src/test/setup.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+// JSDOM doesn't implement scrollIntoView
+HTMLElement.prototype.scrollIntoView = function () {};

packages/logs-react/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config';
+import { resolve } from 'path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      'monaco-editor': resolve(__dirname, './__mocks__/monaco-editor.ts'),
+      'monaco-editor/esm/vs/editor/editor.worker?worker': resolve(__dirname, './__mocks__/worker.ts'),
+      '@open-rpc/monaco-editor-react': resolve(__dirname, './__mocks__/monaco.ts'),
+    },
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/test/setup.ts'],
+  },
+});