testeranto 0.177.0 → 0.197.0

package/src/components/pure/ProcessManagerView.tsx

@@ -0,0 +1,414 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState, useEffect, useRef } from "react";
+import { Container, Row, Col, Badge, Button, Alert } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
+
+export interface Process {
+  processId: string;
+  command: string;
+  pid?: number;
+  status?: "running" | "exited" | "error";
+  exitCode?: number;
+  error?: string;
+  timestamp: string;
+  logs?: string[];
+}
+
+interface ProcessManagerViewProps {
+  processes: Process[];
+  onRefresh: () => void;
+  onBack: () => void;
+  loading: boolean;
+  onKillProcess?: (processId: string) => void;
+}
+
+export const ProcessManagerView: React.FC<ProcessManagerViewProps> = ({
+  processes,
+  onRefresh,
+  onBack,
+  loading,
+  onKillProcess,
+}) => {
+  const navigate = useNavigate();
+  const [selectedProcess, setSelectedProcess] = useState<Process | null>(null);
+  const [ws, setWs] = useState<WebSocket | null>(null);
+  const [processLogs, setProcessLogs] = useState<string[]>([]);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const logsContainerRef = useRef<HTMLDivElement>(null);
+  const [isNavbarCollapsed, setIsNavbarCollapsed] = useState(false);
+
+  // Set up WebSocket connection
+  useEffect(() => {
+    const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = `${wsProtocol}//${window.location.host}`;
+    const websocket = new WebSocket(wsUrl);
+    setWs(websocket);
+
+    websocket.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        // Handle process data response
+        if (
+          data.type === "processData" &&
+          selectedProcess &&
+          data.processId === selectedProcess.processId
+        ) {
+          setSelectedProcess((prev) =>
+            prev
+              ? {
+                ...prev,
+                logs: data.logs || [],
+              }
+              : null
+          );
+          setProcessLogs(data.logs || []);
+        }
+        // Handle new log messages
+        else if (
+          (data.type === "processStdout" || data.type === "processStderr") &&
+          selectedProcess &&
+          data.processId === selectedProcess.processId
+        ) {
+          setProcessLogs((prev) => [...prev, data.data]);
+        }
+      } catch (error) {
+        console.error("Error parsing WebSocket message:", error);
+      }
+    };
+
+    return () => {
+      websocket.close();
+    };
+  }, [selectedProcess]);
+
+  // Request process data when selected
+  useEffect(() => {
+    if (selectedProcess && ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(
+        JSON.stringify({
+          type: "getProcess",
+          processId: selectedProcess.processId,
+        })
+      );
+    }
+  }, [selectedProcess, ws]);
+
+  // Auto-scroll to bottom when new logs arrive and autoScroll is enabled
+  useEffect(() => {
+    if (autoScroll && logsContainerRef.current) {
+      logsContainerRef.current.scrollTop =
+        logsContainerRef.current.scrollHeight;
+    }
+  }, [processLogs, autoScroll]);
+
+  // Handle scroll events to determine if we should auto-scroll
+  const handleLogsScroll = () => {
+    if (logsContainerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } =
+        logsContainerRef.current;
+      const isAtBottom = scrollHeight - scrollTop <= clientHeight + 10; // 10px threshold
+      setAutoScroll(isAtBottom);
+    }
+  };
+
+  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>;
+    }
+  };
+
+  const handleSelectProcess = (process: Process) => {
+    setSelectedProcess(process);
+    setProcessLogs(process.logs || []);
+  };
+
+  const handleInput = (data: string) => {
+    if (
+      ws &&
+      ws.readyState === WebSocket.OPEN &&
+      selectedProcess?.status === "running"
+    ) {
+      ws.send(
+        JSON.stringify({
+          type: "stdin",
+          processId: selectedProcess.processId,
+          data: data,
+        })
+      );
+    }
+  };
+
+  return (
+    <Container fluid className="px-0 h-100">
+      <Row className="g-0" style={{ height: "calc(100vh - 56px)" }}>
+        {/* Left Column - Process List (Compact) */}
+        <Col
+          sm={3}
+          className="border-end"
+          style={{
+            height: "100%",
+            overflow: "auto",
+            backgroundColor: "#f8f9fa",
+          }}
+        >
+
+          <div className="p-1">
+            {processes.map((process) => (
+              <div
+                key={process.processId}
+                className={`p-2 mb-1 rounded ${selectedProcess?.processId === process.processId
+                  ? "bg-primary text-white"
+                  : "bg-white border"
+                  }`}
+                style={{ cursor: "pointer" }}
+                onClick={() => handleSelectProcess(process)}
+                title={process.command}
+              >
+                <div className="d-flex justify-content-between align-items-start">
+                  <div className="flex-grow-1" style={{ minWidth: 0 }}>
+                    <div className="fw-bold text-truncate small">
+                      {process.command.split(" ")[0]}
+                    </div>
+                    <div
+                      className={`text-truncate ${selectedProcess?.processId === process.processId
+                        ? "text-white-50"
+                        : "text-muted"
+                        }`}
+                      style={{ fontSize: "0.7rem" }}
+                    >
+                      PID: {process.pid || "N/A"} |{" "}
+                      {new Date(process.timestamp).toLocaleTimeString()}
+                    </div>
+                  </div>
+                  <div className="ms-2">{getStatusBadge(process)}</div>
+                </div>
+                {process.error && (
+                  <div
+                    className={`mt-1 ${selectedProcess?.processId === process.processId
+                      ? "text-warning"
+                      : "text-danger"
+                      }`}
+                    style={{ fontSize: "0.7rem" }}
+                  >
+                    <div className="text-truncate">Error: {process.error}</div>
+                  </div>
+                )}
+              </div>
+            ))}
+            {processes.length === 0 && !loading && (
+              <div className="p-2 text-center text-muted small">
+                No active processes
+              </div>
+            )}
+            {loading && processes.length === 0 && (
+              <div className="p-2 text-center small">
+                <div className="spinner-border spinner-border-sm" role="status">
+                  <span className="visually-hidden">Loading...</span>
+                </div>
+              </div>
+            )}
+          </div>
+        </Col>
+
+        {/* Middle Column - Selected process details */}
+        <Col
+          sm={5}
+          className="border-end p-3"
+          style={{ height: "100%", overflow: "auto" }}
+        >
+          {selectedProcess ? (
+            <div>
+              <div className="mb-3">
+                <strong>Command:</strong>
+                <code
+                  className="bg-light p-2 rounded d-block mt-1"
+                  style={{ fontSize: "0.8rem" }}
+                >
+                  {selectedProcess.command}
+                </code>
+              </div>
+
+              <div className="mb-2">
+                <strong>Status:</strong>
+                <div className="mt-1">{getStatusBadge(selectedProcess)}</div>
+              </div>
+
+              <div className="mb-2">
+                <strong>PID:</strong>
+                <div className="text-muted">{selectedProcess.pid || "N/A"}</div>
+              </div>
+
+              <div className="mb-2">
+                <strong>Started:</strong>
+                <div className="text-muted">
+                  {new Date(selectedProcess.timestamp).toLocaleString()}
+                </div>
+              </div>
+
+              {selectedProcess.exitCode !== undefined && (
+                <div className="mb-2">
+                  <strong>Exit Code:</strong>
+                  <div className="text-muted">{selectedProcess.exitCode}</div>
+                </div>
+              )}
+
+              {selectedProcess.error && (
+                <div className="mt-3">
+                  <strong className="text-danger">Error:</strong>
+                  <div className="text-danger small mt-1">
+                    {selectedProcess.error}
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="text-center text-muted mt-5">
+              <i>Select a process to view details</i>
+            </div>
+          )}
+        </Col>
+
+        {/* Right Column - Live logs with input */}
+        <Col
+          sm={4}
+          className="p-0"
+          style={{ height: "100%", overflow: "hidden" }}
+        >
+          {selectedProcess ? (
+            <div className="d-flex flex-column h-100">
+              {/* <div className="d-flex justify-content-between align-items-center p-3 border-bottom bg-white">
+
+                <small className="text-muted">
+                  {processLogs.length} lines
+                </small>
+              </div> */}
+
+              {/* Scrollable log content */}
+              <div
+                ref={logsContainerRef}
+                className="bg-dark text-light flex-grow-1"
+                style={{
+                  overflowY: "auto",
+                  fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+                  fontSize: "14px",
+                  lineHeight: "1.4",
+                  // padding: '1rem'
+                }}
+                onScroll={handleLogsScroll}
+              >
+                {processLogs.length > 0 ? (
+                  <pre
+                    className="mb-0"
+                    style={{
+                      whiteSpace: "pre-wrap",
+                      wordBreak: "break-word",
+                      backgroundColor: "transparent",
+                      border: "none",
+                      color: "inherit",
+                    }}
+                  >
+                    {processLogs.join("")}
+                  </pre>
+                ) : (
+                  <div className="text-muted text-center py-4">
+                    <i>No output yet</i>
+                  </div>
+                )}
+                {/* Auto-scroll indicator */}
+                {!autoScroll && (
+                  <div className="position-sticky bottom-0 d-flex justify-content-center mb-2">
+                    <Button
+                      variant="primary"
+                      size="sm"
+                      onClick={() => {
+                        setAutoScroll(true);
+                        if (logsContainerRef.current) {
+                          logsContainerRef.current.scrollTop =
+                            logsContainerRef.current.scrollHeight;
+                        }
+                      }}
+                    >
+                      Scroll to Bottom
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              {/* Input area and stop button for running processes */}
+              {selectedProcess.status === "running" && (
+                <div
+                  className="border-top bg-white p-3"
+                  style={{ flexShrink: 0 }}
+                >
+                  {/* Stop button */}
+                  {onKillProcess && (
+                    <div className="mb-3">
+                      <Button
+                        variant="danger"
+                        size="sm"
+                        onClick={() => onKillProcess(selectedProcess.processId)}
+                        className="w-100"
+                      >
+                        ⏹️ Stop Process
+                      </Button>
+                    </div>
+                  )}
+
+                  {/* Input area */}
+                  <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>
+              )}
+            </div>
+          ) : (
+            <div className="p-3 text-center text-muted mt-5">
+              <i>Live logs will appear here when a process is selected</i>
+            </div>
+          )}
+        </Col>
+      </Row>
+    </Container>
+  );
+};

package/src/components/pure/ProjectPageView.test/implementation.tsx

@@ -1,4 +1,4 @@
-import { assert, expect } from "chai";
+import { assert } from "chai";
 import { ITestImplementation } from "../../../CoreTypes";
 import { I, M, O } from "./types";
 
@@ -8,77 +8,206 @@ export const implementation: ITestImplementation<I, O, M> = {
   },
 
   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 as any,
+        domRoot: null as any
+      };
+    },
+    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 as any,
+        domRoot: null as any
+      };
+    },
   },
   whens: {
 
   },
 
   thens: {
-    happyPath:
+    hasContainerFluid:
       () =>
-        async ({ container, html }, pm) => {
-          console.group('[Test] Verifying render output');
-          // debugger
-          const p = await pm.page();
-          await pm.customScreenShot({ path: "happyPath.png" }, p);
+        (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) => {
+          const htmlElement = state.htmlElement;
+          const navBarTitle = htmlElement.querySelector('nav.navbar .navbar-brand')?.textContent;
+          assert.isNotEmpty(navBarTitle, 'NavBar should have title');
+          return state;
+        },
 
-          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);
+    hasTestTable:
+      () =>
+        (state) => {
+          const htmlElement = state.htmlElement;
+          const testTable = htmlElement.querySelector('table');
+          assert.exists(testTable, 'Should render test table');
+          return state;
+        },
 
-          //   console.log('Checking for NavBar');
-          //   const navBar = container.querySelector("nav.navbar");
-          //   expect(navBar).to.exist;
+    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;
+        },
 
-          //   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;
-          // }
+    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:
       () =>
-        async ({ container }, pm) => {
-          // expect(container.textContent).contain("Test error message");
-          assert.equal(1, 1);
+        (state) => {
+          const htmlElement = state.htmlElement;
+          const errorAlert = htmlElement.querySelector('.alert-danger');
+          assert.exists(errorAlert, 'Should show error alert');
 
-          const p = await pm.page();
-          await pm.customScreenShot({ path: "unhappyPath.png" }, p);
+          const errorText = errorAlert?.textContent;
+          assert.include(errorText, 'Test error message', 'Should display error message');
 
-          return { container };
+          return state;
+        },
+
+    takeScreenshot:
+      (name: string) =>
+        async (state, pm) => {
+          const p = await pm.page();
+          await pm.customScreenShot({ path: name }, p);
+          return state;
         },
   },
 };