testeranto 0.177.0 → 0.197.0

package/src/components/pure/SingleProcessView.tsx

@@ -0,0 +1,235 @@
+// import React, { useEffect, useRef, useState } from 'react';
+// import { Container, Badge, Button, Alert } from 'react-bootstrap';
+// import { Process } from './ProcessManagerView';
+// import { NavBar } from './NavBar';
+
+// interface SingleProcessViewProps {
+//   process: Process | null;
+//   onBack: () => void;
+//   loading: boolean;
+//   onKillProcess?: (processId: string) => void;
+//   ws?: WebSocket | null;
+// }
+
+// export const SingleProcessView: React.FC<SingleProcessViewProps> = ({
+//   process,
+//   onBack,
+//   loading,
+//   onKillProcess,
+//   ws
+// }) => {
+//   const terminalRef = useRef<HTMLDivElement>(null);
+//   const [inputEnabled, setInputEnabled] = useState(false);
+
+//   // Phase 1: Basic implementation - just show logs in a pre element
+//   // We'll upgrade to xterm.js later when we're ready
+
+//   // Update input enabled status
+//   useEffect(() => {
+//     setInputEnabled(process?.status === 'running');
+//   }, [process?.status]);
+
+//   // Handle user input
+//   const handleInput = (data: string) => {
+//     if (ws && ws.readyState === WebSocket.OPEN && process?.status === 'running') {
+//       console.log('Sending stdin:', data);
+//       ws.send(JSON.stringify({
+//         type: 'stdin',
+//         processId: process.processId,
+//         data: data
+//       }));
+//     } else {
+//       console.log('Cannot send stdin - conditions not met:', {
+//         wsExists: !!ws,
+//         wsReady: ws?.readyState,
+//         processStatus: process?.status
+//       });
+//     }
+//   };
+//   const getStatusBadge = (process: Process) => {
+//     switch (process.status) {
+//       case 'running':
+//         return <Badge bg="success">Running</Badge>;
+//       case 'exited':
+//         return <Badge bg="secondary">Exited ({process.exitCode})</Badge>;
+//       case 'error':
+//         return <Badge bg="danger">Error</Badge>;
+//       default:
+//         return <Badge bg="warning">Unknown</Badge>;
+//     }
+//   };
+
+//   if (loading) {
+//     return <div>Initializing terminal...</div>;
+//   }
+
+//   if (!process) {
+//     return (
+//       <Alert variant="warning">
+//         Process not found or not running. The process may have completed.
+//       </Alert>
+//     );
+//   }
+
+//   return (
+//     <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+
+//       {/* Main content area */}
+//       <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+//         {/* Fixed sidebar */}
+//         <div
+//           className="bg-light border-end"
+//           style={{
+//             width: '300px',
+//             minWidth: '300px',
+//             flexShrink: 0,
+//             overflowY: 'auto'
+//           }}
+//         >
+//           <div className="p-3">
+
+
+//             <div className="mb-3">
+//               <strong>Command:</strong>
+//               <code className="bg-white p-2 rounded d-block mt-1" style={{ fontSize: '0.8rem' }}>
+//                 {process.command}
+//               </code>
+//             </div>
+
+//             <div className="mb-2">
+//               <strong>Status:</strong>
+//               <div className="mt-1">{getStatusBadge(process)}</div>
+//             </div>
+
+//             <div className="mb-2">
+//               <strong>PID:</strong>
+//               <div className="text-muted">{process.pid || 'N/A'}</div>
+//             </div>
+
+//             <div className="mb-2">
+//               <strong>Started:</strong>
+//               <div className="text-muted">{new Date(process.timestamp).toLocaleString()}</div>
+//             </div>
+
+//             {process.exitCode !== undefined && (
+//               <div className="mb-2">
+//                 <strong>Exit Code:</strong>
+//                 <div className="text-muted">{process.exitCode}</div>
+//               </div>
+//             )}
+
+//             {process.error && (
+//               <div className="mt-3">
+//                 <strong className="text-danger">Error:</strong>
+//                 <div className="text-danger small mt-1">{process.error}</div>
+//               </div>
+//             )}
+//           </div>
+//         </div>
+
+//         {/* Scrollable logs area */}
+//         <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+//           {/* Log header */}
+//           <div className="d-flex justify-content-between align-items-center p-3 border-bottom bg-white" style={{ flexShrink: 0 }}>
+
+//             <small className="text-muted">
+//               {process.logs?.length || 0} lines
+//             </small>
+//           </div>
+
+//           {/* Scrollable log content */}
+//           <div
+//             className="bg-dark text-light flex-grow-1"
+//             style={{
+//               overflowY: 'auto',
+//               fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+//               fontSize: '14px',
+//               lineHeight: '1.4',
+//               padding: '1rem'
+//             }}
+//             ref={(el) => {
+//               // Auto-scroll to bottom when logs update
+//               if (el) {
+//                 el.scrollTop = el.scrollHeight;
+//               }
+//             }}
+//           >
+//             {process.logs && process.logs.length > 0 ? (
+//               <pre className="mb-0" style={{
+//                 whiteSpace: 'pre-wrap',
+//                 wordBreak: 'break-word',
+//                 backgroundColor: 'transparent',
+//                 border: 'none',
+//                 color: 'inherit'
+//               }}>
+//                 {process.logs.join('')}
+//               </pre>
+//             ) : (
+//               <div className="text-muted text-center py-4">
+//                 <i>No output yet</i>
+//               </div>
+//             )}
+//           </div>
+//         </div>
+//       </div>
+
+//       {/* Fixed input at the bottom */}
+//       {inputEnabled && (
+//         <div className="border-top bg-white p-3" style={{ flexShrink: 0 }}>
+//           <div className="input-group">
+//             <input
+//               type="text"
+//               className="form-control"
+//               placeholder="Type input and press Enter..."
+//               onKeyPress={(e) => {
+//                 if (e.key === 'Enter') {
+//                   const target = e.target as HTMLInputElement;
+//                   const inputValue = target.value;
+//                   if (inputValue.trim()) {
+//                     handleInput(inputValue + '\n');
+//                     target.value = '';
+//                   }
+//                 }
+//               }}
+//               autoFocus
+//             />
+//             <button
+//               className="btn btn-primary"
+//               type="button"
+//               onClick={() => {
+//                 const input = document.querySelector('input') as HTMLInputElement;
+//                 const inputValue = input.value;
+//                 if (inputValue.trim()) {
+//                   handleInput(inputValue + '\n');
+//                   input.value = '';
+//                 }
+//               }}
+//             >
+//               Send
+//             </button>
+//           </div>
+//           <small className="text-muted">
+//             💡 Press Enter to send input to the process
+//           </small>
+//         </div>
+//       )}
+
+//       {/* Status alerts - fixed positioning */}
+//       {!inputEnabled && process.status === 'running' && (
+//         <Alert variant="info" className="m-3" style={{ flexShrink: 0 }}>
+//           <Alert.Heading className="h6">Input Disabled</Alert.Heading>
+//           <small>Terminal input is temporarily unavailable. Try refreshing the page.</small>
+//         </Alert>
+//       )}
+
+//       {process.status !== 'running' && (
+//         <Alert variant="secondary" className="m-3" style={{ flexShrink: 0 }}>
+//           <Alert.Heading className="h6">Read-only Mode</Alert.Heading>
+//           <small>
+//             This process is no longer running. You can view the output logs but cannot send input.
+//           </small>
+//         </Alert>
+//       )}
+//     </div>
+//   );
+// };

package/src/components/pure/TestPageView.test/implementation.ts

@@ -0,0 +1,162 @@
+import { assert } from "chai";
+import * as React from "react";
+import * as ReactDom from "react-dom/client";
+
+import { ITestImplementation } from "../../../CoreTypes";
+import { IInput, ISelection, IStore, ISubject, O } from "./types";
+import { ITTestResourceConfiguration, IPM } from "../../../lib";
+
+export const implementation: ITestImplementation<
+  {
+    iinput: IInput;
+    isubject: ISubject;
+    istore: IStore;
+    iselection: ISelection;
+    given: (props: IInput) => ISelection;
+    when: (sel: ISelection, tr: ITTestResourceConfiguration, utils: IPM) => Promise<(sel: ISelection) => ISelection>;
+    then: (sel: ISelection, tr: ITTestResourceConfiguration, utils: IPM) => Promise<(sel: ISelection) => ISelection>;
+  },
+  O,
+  {}
+> = {
+  suites: {
+    Default: "TestPageView basic rendering",
+    Navigation: "TestPageView navigation behavior",
+    ErrorStates: "TestPageView error handling",
+  },
+
+  givens: {
+    Default: () => (props: IInput) => {
+      // Create a container and render the component
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      
+      const reactElement = React.createElement(props);
+      const domRoot = ReactDom.createRoot(container);
+      domRoot.render(reactElement);
+      
+      return {
+        container,
+        reactElement,
+        domRoot,
+        ...props
+      };
+    },
+    WithErrors: () => (props: IInput) => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      
+      const reactElement = React.createElement(props);
+      const domRoot = ReactDom.createRoot(container);
+      domRoot.render(reactElement);
+      
+      return {
+        container,
+        reactElement,
+        domRoot,
+        ...props,
+        errorCounts: {
+          runTimeErrors: 1,
+          typeErrors: 1,
+          staticErrors: 1
+        }
+      };
+    },
+    WithLogs: () => (props: IInput) => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      
+      const reactElement = React.createElement(props);
+      const domRoot = ReactDom.createRoot(container);
+      domRoot.render(reactElement);
+      
+      return {
+        container,
+        reactElement,
+        domRoot,
+        ...props,
+        logs: {
+          'tests.json': '{}',
+          'stdout.log': 'test log content'
+        }
+      };
+    },
+  },
+
+  whens: {
+    SwitchToTab: (tabName: string) => async (selection: ISelection, tr: ITTestResourceConfiguration, utils: IPM) => {
+      // Update the props to switch tabs
+      const newProps = { ...selection, activeTab: tabName };
+      const newReactElement = React.createElement(selection.reactElement.type, newProps);
+      selection.domRoot.render(newReactElement);
+      return (sel: ISelection) => ({
+        ...sel,
+        reactElement: newReactElement,
+        activeTab: tabName
+      });
+    },
+    ClickAiderButton: () => async (selection: ISelection, tr: ITTestResourceConfiguration, utils: IPM) => {
+      // Find and click the Aider button
+      const button = selection.container.querySelector('button');
+      if (button) {
+        button.click();
+      }
+      return (sel: ISelection) => sel;
+    },
+  },
+
+  thens: {
+    takeScreenshot: (name: string) => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+      // Screenshot functionality would be implemented here
+      return Promise.resolve(sel);
+    },
+    RendersNavBar: () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+      const navBar = sel.container.querySelector(".navbar");
+      assert.isNotNull(navBar, "Navbar should be rendered");
+      return Promise.resolve(sel);
+    },
+    ShowsActiveTab: (tabName: string) => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+      // Check if the active tab matches
+      assert.equal(sel.activeTab, tabName, `Active tab should be ${tabName}`);
+      return Promise.resolve(sel);
+    },
+    ShowsErrorCounts: () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+      // Check for error badges
+      const badges = sel.container.querySelectorAll(".badge");
+      assert.isAtLeast(badges.length, 0, "Should show at least one badge");
+      return Promise.resolve(sel);
+    },
+    ShowsTestResults: () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+      // Check if test results are shown
+      if (sel.testsExist) {
+        const testResults = sel.container.querySelector(".test-results");
+        assert.isNotNull(testResults, "Test results should be shown when tests exist");
+      }
+      return Promise.resolve(sel);
+    },
+    ShowsLogs: () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+      // Check if logs are shown
+      const logs = sel.container.querySelector("pre");
+      assert.isNotNull(logs, "Logs should be shown");
+      return Promise.resolve(sel);
+    },
+    ShowsTypeErrors: () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+      // Check if type errors are shown
+      const typeErrors = sel.container.querySelector('[data-testid="type-errors"]');
+      assert.isNotNull(typeErrors, "Type errors should be shown");
+      return Promise.resolve(sel);
+    },
+    ShowsLintErrors: () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+      // Check if lint errors are shown
+      const lintErrors = sel.container.querySelector('[data-testid="lint-errors"]');
+      assert.isNotNull(lintErrors, "Lint errors should be shown");
+      return Promise.resolve(sel);
+    },
+    AiderButtonCopiesCommand: () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+      // Check if Aider button exists
+      const aiderButton = sel.container.querySelector('button[title*="AI Assistant"]');
+      assert.isNotNull(aiderButton, "Aider button should be present");
+      return Promise.resolve(sel);
+    },
+  },
+};

package/src/components/pure/TestPageView.test/index.tsx

@@ -0,0 +1,20 @@
+import Testeranto from "testeranto-react/src/react-dom/jsx/web";
+import { MemoryRouter } from "react-router-dom";
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { TestPageView } from "../TestPageView";
+import React from "react";
+
+import "./../../../App.scss";
+
+const WrappedTestPageView = (props) => (
+  <MemoryRouter>
+    <TestPageView {...props} />
+  </MemoryRouter>
+);
+
+export default Testeranto(
+  implementation,
+  specification,
+  WrappedTestPageView
+);

package/src/components/pure/TestPageView.test/specification.ts

@@ -0,0 +1,58 @@
+import { ITestSpecification } from "../../../CoreTypes";
+import { ISelection, O } from "./types";
+
+export const specification: ITestSpecification<
+  {
+    iinput: any;
+    isubject: any;
+    istore: ISelection;
+    iselection: ISelection;
+    given: any;
+    when: any;
+    then: any;
+  },
+  O
+> = (Suite, Given, When, Then) => {
+  return [
+    Suite.Default("TestPageView basic rendering", {
+      "renders navigation bar": Given.Default([], [], [Then.RendersNavBar()]),
+      "shows error counts": Given.Default([], [], [Then.ShowsErrorCounts()]),
+      "shows test results when data exists": Given.Default(
+        [],
+        [],
+        [Then.takeScreenshot("shot.png"), Then.ShowsTestResults()]
+      ),
+    }),
+
+    Suite.Navigation("TestPageView navigation behavior", {
+      "shows results tab by default": Given.Default(
+        [],
+        [],
+        [Then.ShowsActiveTab("results")]
+      ),
+      "switches to logs tab": Given.Default(
+        [],
+        [When.SwitchToTab("logs")],
+        [Then.ShowsActiveTab("logs"), Then.ShowsLogs()]
+      ),
+      "copies aider command when button clicked": Given.Default(
+        [],
+        [When.ClickAiderButton()],
+        [Then.AiderButtonCopiesCommand()]
+      ),
+    }),
+
+    Suite.ErrorStates("TestPageView error handling", {
+      "shows error state when tests fail": Given.WithErrors(
+        [],
+        [],
+        [
+          Then.ShowsErrorCounts(),
+          Then.ShowsTypeErrors(),
+          Then.ShowsLintErrors(),
+        ]
+      ),
+      "shows logs when available": Given.WithLogs([], [], [Then.ShowsLogs()]),
+    }),
+  ];
+};

package/src/components/pure/TestPageView.test/types.ts

@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import ReactDom from "react-dom/client";
+
+import { Ibdd_in, Ibdd_out } from "../../../CoreTypes";
+import { IProjectPageViewProps } from "../ProjectPageView";
+
+export type IInput = IProjectPageViewProps;
+
+export type ISelection = {
+  htmlElement: HTMLElement;
+  reactElement: React.ReactElement;
+  domRoot: ReactDom.Root;
+};
+
+export type IStore = ISelection;
+
+export type ISubject = {
+  htmlElement: HTMLElement;
+  domRoot: ReactDom.Root;
+};
+
+export type I = Ibdd_in<
+  IInput,
+  ISubject,
+  ISelection,
+  IStore,
+  (s: IStore) => IStore,
+  (s: IStore) => IStore,
+  {
+    hasContainerFluid: () => (s: IStore) => IStore;
+    hasNavBar: () => (s: IStore) => IStore;
+    hasNavBarTitle: () => (s: IStore) => IStore;
+    hasTestTable: () => (s: IStore) => IStore;
+    rendersTestSuite1: () => (s: IStore) => IStore;
+    rendersTestSuite2: () => (s: IStore) => IStore;
+    unhappyPath: () => (s: IStore) => IStore;
+    takeScreenshot: (name: string) => (s: IStore, pm: any) => Promise<IStore>;
+  }
+>;
+
+export type O = Ibdd_out<
+  {
+    Default: [string];
+    Navigation: [string];
+    ErrorStates: [string];
+  },
+  {
+    Default: [];
+    WithError: [];
+    Navigation: [];
+    WithErrors: [];
+    WithLogs: [];
+  },
+  {
+    SwitchToTab: [string];
+    ClickAiderButton: [];
+  },
+  {
+    RendersNavBar: [];
+    ShowsErrorCounts: [];
+    ShowsTestResults: [];
+    ShowsActiveTab: [string];
+    ShowsLogs: [];
+    AiderButtonCopiesCommand: [];
+    takeScreenshot: [string];
+    ShowsTypeErrors: [];
+    ShowsLintErrors: [];
+  }
+>;
+
+export type M = {
+  givens: {
+    [K in keyof O["givens"]]: (...args: any[]) => IProjectPageViewProps;
+  };
+  whens: {
+    [K in keyof O["whens"]]: (
+      ...args: any[]
+    ) => (
+      props: IProjectPageViewProps,
+      utils: any
+    ) => IProjectPageViewProps & { container?: HTMLElement };
+  };
+  thens: {
+    [K in keyof O["thens"]]: (
+      ...args: any[]
+    ) => (
+      state: IProjectPageViewProps & { container?: HTMLElement }
+    ) => IProjectPageViewProps & { container?: HTMLElement };
+  };
+};