testeranto 0.177.0 → 0.197.0

package/dist/module/src/components/pure/ProjectPageView.test/implementation.js

@@ -4,65 +4,178 @@ export const implementation = {
         Default: "Project Page View Tests",
     },
     givens: {
-        Default: () => ({
-            summary: {},
-            nodeLogs: null,
-            webLogs: null,
-            pureLogs: null,
-            config: { tests: [] },
-            loading: false,
-            error: null,
-            projectName: "test-project",
-            route: "tests",
-            setRoute: () => { },
-            navigate: () => { },
-        }),
-        WithError: () => ({
-            summary: null,
-            nodeLogs: null,
-            webLogs: null,
-            pureLogs: null,
-            config: { tests: [] },
-            loading: false,
-            error: "Test error message",
-            projectName: "test-project",
-            route: "tests",
-            setRoute: () => { },
-            navigate: () => { },
-        }),
+        Default: () => {
+            // Create a container to mount the component
+            const container = document.createElement('div');
+            document.body.appendChild(container);
+            return {
+                summary: {
+                    "test-suite-1": {
+                        testsExist: true,
+                        runTimeErrors: 0,
+                        typeErrors: 2,
+                        staticErrors: 1
+                    },
+                    "test-suite-2": {
+                        testsExist: true,
+                        runTimeErrors: 1,
+                        typeErrors: 0,
+                        staticErrors: 0
+                    }
+                },
+                nodeLogs: {
+                    errors: [],
+                    warnings: [
+                        {
+                            text: "Unused variable",
+                            location: { file: "src/file1.ts", line: 10 },
+                            pluginName: "typescript"
+                        }
+                    ],
+                    metafile: {
+                        inputs: {
+                            "src/file1.ts": { bytes: 1024 },
+                            "src/file2.ts": { bytes: 2048 }
+                        },
+                        outputs: {
+                            "dist/file1.js": { bytes: 1536, entryPoint: true },
+                            "dist/file2.js": { bytes: 2560 }
+                        }
+                    }
+                },
+                webLogs: {
+                    errors: [],
+                    warnings: [],
+                    metafile: {
+                        inputs: {
+                            "src/file1.ts": { bytes: 1024 },
+                            "src/file2.ts": { bytes: 2048 }
+                        },
+                        outputs: {
+                            "dist/file1.js": { bytes: 1536, entryPoint: true },
+                            "dist/file2.js": { bytes: 2560 }
+                        }
+                    }
+                },
+                pureLogs: {
+                    errors: [
+                        {
+                            text: "Syntax error",
+                            location: { file: "src/file3.ts", line: 5 },
+                            pluginName: "typescript"
+                        }
+                    ],
+                    warnings: [],
+                    metafile: {
+                        inputs: {
+                            "src/file3.ts": { bytes: 512 },
+                            "src/file4.ts": { bytes: 768 }
+                        },
+                        outputs: {
+                            "dist/file3.js": { bytes: 1024, entryPoint: true },
+                            "dist/file4.js": { bytes: 1280 }
+                        }
+                    }
+                },
+                config: {
+                    tests: [
+                        ["test-suite-1", "node"],
+                        ["test-suite-2", "web"]
+                    ]
+                },
+                loading: false,
+                error: null,
+                projectName: "test-project",
+                activeTab: "tests",
+                setActiveTab: () => { },
+                route: "tests",
+                setRoute: () => { },
+                navigate: () => { },
+                // Add the required properties for ISelection
+                htmlElement: container,
+                reactElement: null,
+                domRoot: null
+            };
+        },
+        WithError: () => {
+            const container = document.createElement('div');
+            document.body.appendChild(container);
+            return {
+                summary: null,
+                nodeLogs: null,
+                webLogs: null,
+                pureLogs: null,
+                config: { tests: [] },
+                loading: false,
+                error: "Test error message",
+                projectName: "test-project",
+                activeTab: "tests",
+                setActiveTab: () => { },
+                route: "tests",
+                setRoute: () => { },
+                navigate: () => { },
+                // Add the required properties for ISelection
+                htmlElement: container,
+                reactElement: null,
+                domRoot: null
+            };
+        },
     },
     whens: {},
     thens: {
-        happyPath: () => async ({ container, html }, pm) => {
-            console.group('[Test] Verifying render output');
-            // debugger
-            const p = await pm.page();
-            await pm.customScreenShot({ path: "happyPath.png" }, p);
-            assert.equal(1, 1);
-            // try {
-            //   console.log('Checking for container-fluid');
-            //   const containerFluid = container.querySelector(".container-fluid");
-            //   expect(containerFluid).to.exist;
-            //   expect(containerFluid?.children.length).to.be.greaterThan(0);
-            //   console.log('Checking for NavBar');
-            //   const navBar = container.querySelector("nav.navbar");
-            //   expect(navBar).to.exist;
-            //   console.log('Render verification passed');
-            //   console.groupEnd();
-            //   return { container, html };
-            // } catch (err) {
-            //   console.error('Verification failed:', err);
-            //   console.error('Full HTML:', html);
-            //   console.groupEnd();
-            //   throw err;
-            // }
+        hasContainerFluid: () => (state) => {
+            const htmlElement = state.htmlElement;
+            const container = htmlElement.querySelector('.container-fluid');
+            assert.exists(container, 'Should have container-fluid div');
+            return state;
+        },
+        hasNavBar: () => (state) => {
+            const htmlElement = state.htmlElement;
+            const navBar = htmlElement.querySelector('nav.navbar');
+            assert.exists(navBar, 'Should render NavBar component');
+            return state;
+        },
+        hasNavBarTitle: () => (state) => {
+            var _a;
+            const htmlElement = state.htmlElement;
+            const navBarTitle = (_a = htmlElement.querySelector('nav.navbar .navbar-brand')) === null || _a === void 0 ? void 0 : _a.textContent;
+            assert.isNotEmpty(navBarTitle, 'NavBar should have title');
+            return state;
+        },
+        hasTestTable: () => (state) => {
+            const htmlElement = state.htmlElement;
+            const testTable = htmlElement.querySelector('table');
+            assert.exists(testTable, 'Should render test table');
+            return state;
+        },
+        rendersTestSuite1: () => (state) => {
+            const htmlElement = state.htmlElement;
+            const testTable = htmlElement.querySelector('table');
+            const testNames = Array.from(testTable.querySelectorAll('tbody tr td:first-child'))
+                .map(el => el.textContent);
+            assert.include(testNames, 'test-suite-1', 'Should render test-suite-1');
+            return state;
+        },
+        rendersTestSuite2: () => (state) => {
+            const htmlElement = state.htmlElement;
+            const testTable = htmlElement.querySelector('table');
+            const testNames = Array.from(testTable.querySelectorAll('tbody tr td:first-child'))
+                .map(el => el.textContent);
+            assert.include(testNames, 'test-suite-2', 'Should render test-suite-2');
+            return state;
+        },
+        unhappyPath: () => (state) => {
+            const htmlElement = state.htmlElement;
+            const errorAlert = htmlElement.querySelector('.alert-danger');
+            assert.exists(errorAlert, 'Should show error alert');
+            const errorText = errorAlert === null || errorAlert === void 0 ? void 0 : errorAlert.textContent;
+            assert.include(errorText, 'Test error message', 'Should display error message');
+            return state;
         },
-        unhappyPath: () => async ({ container }, pm) => {
-            // expect(container.textContent).contain("Test error message");
-            assert.equal(1, 1);
+        takeScreenshot: (name) => async (state, pm) => {
             const p = await pm.page();
-            await pm.customScreenShot({ path: "unhappyPath.png" }, p);
-            return { container };
+            await pm.customScreenShot({ path: name }, p);
+            return state;
         },
     },
 };

package/dist/module/src/components/pure/ProjectPageView.test/index.js

@@ -1,5 +1,9 @@
 import Testeranto from "testeranto-react/src/react-dom/component/web";
+import { MemoryRouter } from "react-router-dom";
 import { implementation } from "./implementation";
 import { specification } from "./specification";
 import { ProjectPageView } from "../ProjectPageView";
-export default Testeranto(implementation, specification, ProjectPageView);
+import React from "react";
+const WrappedProjectPageView = (props) => (React.createElement(MemoryRouter, null,
+    React.createElement(ProjectPageView, Object.assign({}, props), " ")));
+export default Testeranto(implementation, specification, WrappedProjectPageView);

package/dist/module/src/components/pure/ProjectPageView.test/specification.js

@@ -5,11 +5,24 @@ export const specification = (Suite, Given, When, Then) => {
                 "ProjectPageView should render",
                 "It should contain a container-fluid div",
                 "It should render the NavBar component",
-            ], [], [Then.happyPath()]),
+                "NavBar should display project title",
+                "It should render test results table",
+                "It should display test-suite-1 results",
+                "It should display test-suite-2 results",
+            ], [], [
+                Then.hasContainerFluid(),
+                Then.hasNavBar(),
+                Then.hasNavBarTitle(),
+                Then.hasTestTable(),
+                Then.rendersTestSuite1(),
+                Then.rendersTestSuite2(),
+                Then.takeScreenshot("happy-state.png"),
+            ]),
             errorHandling: Given.WithError([
                 "ProjectPageView should handle errors",
                 "It should display error messages when present",
-            ], [], [Then.unhappyPath()]),
+                "It should capture screenshots of error state",
+            ], [], [Then.unhappyPath(), Then.takeScreenshot("error-state.png")]),
         }),
     ];
 };

package/dist/module/src/components/pure/ProjectPageView.test/types.js

@@ -1 +1,3 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export {};

package/dist/module/src/components/pure/ProjectsPageView.js

@@ -1,13 +1,16 @@
-import React from 'react';
-import { Table, Alert } from 'react-bootstrap';
-import { NavBar } from '../../NavBar';
-export const ProjectsPageView = ({ projects, summaries, configs, loading, error, navigate }) => {
+import React from "react";
+import { Table, Alert } from "react-bootstrap";
+export const ProjectsPageView = ({ projects, summaries, configs, loading, error, navigate, }) => {
     const getStatusIcon = (status) => {
         switch (status) {
-            case 'success': return '✅';
-            case 'failed': return '❌';
-            case 'warning': return '⚠️';
-            default: return '❓';
+            case "success":
+                return "✅";
+            case "failed":
+                return "❌";
+            case "warning":
+                return "⚠️";
+            default:
+                return "❓";
         }
     };
     if (loading)
@@ -16,8 +19,7 @@ export const ProjectsPageView = ({ projects, summaries, configs, loading, error,
         return React.createElement(Alert, { variant: "danger" },
             "Error: ",
             error);
-    return (React.createElement("div", { className: "p-3" },
-        React.createElement(NavBar, { title: "Testeranto", backLink: null }),
+    return (React.createElement("div", { className: "" },
         React.createElement(Table, { striped: true, bordered: true, hover: true, responsive: true },
             React.createElement("thead", null,
                 React.createElement("tr", null,
@@ -33,15 +35,20 @@ export const ProjectsPageView = ({ projects, summaries, configs, loading, error,
                             navigate(`/projects/${project.name}`);
                         } }, project.name)),
                 React.createElement("td", null,
-                    React.createElement("div", { style: { maxHeight: '200px', overflowY: 'auto' } }, summaries[project.name] ? (Object.keys(summaries[project.name]).map(testName => {
+                    React.createElement("div", null, summaries[project.name] ? (Object.keys(summaries[project.name]).map((testName) => {
+                        var _a, _b, _c;
                         const testData = summaries[project.name][testName];
-                        const runTime = configs[project.name].tests.find((t) => t[0] === testName)[1];
+                        const runTime = ((_c = (_b = (_a = configs[project.name]) === null || _a === void 0 ? void 0 : _a.tests) === null || _b === void 0 ? void 0 : _b.find((t) => t[0] === testName)) === null || _c === void 0 ? void 0 : _c[1]) || "node";
                         const hasRuntimeErrors = testData.runTimeErrors > 0;
                         const hasStaticErrors = testData.typeErrors > 0 || testData.staticErrors > 0;
                         return (React.createElement("div", { key: testName },
                             React.createElement("a", { href: `#/projects/${project.name}/tests/${encodeURIComponent(testName)}/${runTime}` },
-                                hasRuntimeErrors ? '❌ ' : hasStaticErrors ? '⚠️ ' : '',
-                                testName.split('/').pop())));
+                                hasRuntimeErrors
+                                    ? "❌ "
+                                    : hasStaticErrors
+                                        ? "⚠️ "
+                                        : "",
+                                testName.split("/").pop() || testName)));
                     })) : (React.createElement("div", null, "Loading tests...")))),
                 React.createElement("td", null,
                     React.createElement("a", { href: `#/projects/${project.name}#node` },

package/dist/module/src/components/pure/SettingsButton.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Nav } from 'react-bootstrap';
+import { NavLink } from 'react-router-dom';
+export const SettingsButton = () => {
+    return (React.createElement(Nav.Link, { as: NavLink, to: "/settings" }, "Settings"));
+};

package/dist/module/src/components/pure/SingleProcessView.js

@@ -0,0 +1,214 @@
+"use strict";
+// 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>
+//   );
+// };