testeranto 0.200.1 → 0.202.0

package/src/components/pure/TestPageView_utils.tsx

@@ -0,0 +1,285 @@
+import React from "react";
+
+type TestData = {
+  name: string;
+  givens: {
+    name: string;
+    whens: {
+      name: string;
+      error?: string;
+      features?: string[];
+      artifacts?: string[];
+    }[];
+    thens: {
+      name: string;
+      error?: string;
+      features?: string[];
+      artifacts?: string[];
+    }[];
+    features?: string[];
+    artifacts?: string[];
+  }[];
+};
+
+// Determine language from file extension
+export const getLanguage = (path: string) => {
+  const ext = path.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "ts":
+      return "typescript";
+    case "tsx":
+      return "typescript";
+    case "js":
+      return "javascript";
+    case "json":
+      return "json";
+    case "md":
+      return "markdown";
+    default:
+      return "plaintext";
+  }
+};
+
+export const renderTestResults = (
+  testData: TestData,
+  buildErrors,
+  projectName,
+  testName,
+  runtime
+) => {
+  return (
+    <div className="test-results">
+      {testData.givens.map((given, i) => (
+        <div key={i} className="mb-4 card">
+          <div className="card-header bg-primary text-white">
+            <div className="d-flex justify-content-between align-items-center">
+              <div>
+                <h4>Given: {given.name}</h4>
+                {given.features && given.features.length > 0 && (
+                  <div className="mt-1">
+                    <small>Features:</small>
+                    <ul className="list-unstyled">
+                      {given.features.map((feature, fi) => (
+                        <li key={fi}>
+                          {feature.startsWith("http") ? (
+                            <a
+                              href={feature}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-white"
+                            >
+                              {new URL(feature).hostname}
+                            </a>
+                          ) : (
+                            <span className="text-white">{feature}</span>
+                          )}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+              {given.artifacts && given.artifacts.length > 0 && (
+                <div className="dropdown">
+                  <button
+                    className="btn btn-sm btn-light dropdown-toggle"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                  >
+                    Artifacts ({given.artifacts.length})
+                  </button>
+                  <ul className="dropdown-menu dropdown-menu-end">
+                    {given.artifacts.map((artifact, ai) => (
+                      <li key={ai}>
+                        <a
+                          className="dropdown-item"
+                          href={`reports/${projectName}/${testName
+                            .split(".")
+                            .slice(0, -1)
+                            .join(".")}/${runtime}/${artifact}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          {artifact.split("/").pop()}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="card-body">
+            {given.whens.map((when, j) => (
+              <div
+                key={`w-${j}`}
+                className={`p-3 mb-2 ${when.error ? "bg-danger text-white" : "bg-success text-white"
+                  }`}
+              >
+                <div className="d-flex justify-content-between align-items-start">
+                  <div>
+                    <div>
+                      <strong>When:</strong> {when.name}
+                      {when.features && when.features.length > 0 && (
+                        <div className="mt-2">
+                          <small>Features:</small>
+                          <ul className="list-unstyled">
+                            {when.features.map((feature, fi) => (
+                              <li key={fi}>
+                                {feature.startsWith("http") ? (
+                                  <a
+                                    href={feature}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                  >
+                                    {new URL(feature).hostname}
+                                  </a>
+                                ) : (
+                                  feature
+                                )}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                      {when.error && <pre className="mt-2">{when.error}</pre>}
+                    </div>
+                  </div>
+                  {when.artifacts && when.artifacts.length > 0 && (
+                    <div className="ms-3">
+                      <strong>Artifacts:</strong>
+                      <ul className="list-unstyled">
+                        {when.artifacts.map((artifact, ai) => (
+                          <li key={ai}>
+                            <a
+                              href={`reports/${projectName}/${testName
+                                .split(".")
+                                .slice(0, -1)
+                                .join(".")}/${runtime}/${artifact}`}
+                              target="_blank"
+                              className="text-white"
+                              rel="noopener noreferrer"
+                            >
+                              {artifact.split("/").pop()}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+            {given.thens.map((then, k) => (
+              <div
+                key={`t-${k}`}
+                className={`p-3 mb-2 ${then.error ? "bg-danger text-white" : "bg-success text-white"
+                  }`}
+              >
+                <div className="d-flex justify-content-between align-items-start">
+                  <div>
+                    <div>
+                      <strong>Then:</strong> {then.name}
+                      {then.features && then.features.length > 0 && (
+                        <div className="mt-2">
+                          <small>Features:</small>
+                          <ul className="list-unstyled">
+                            {then.features.map((feature, fi) => (
+                              <li key={fi}>
+                                {feature.startsWith("http") ? (
+                                  <a
+                                    href={feature}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                  >
+                                    {new URL(feature).hostname}
+                                  </a>
+                                ) : (
+                                  feature
+                                )}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                      {then.error && <pre className="mt-2">{then.error}</pre>}
+                    </div>
+                  </div>
+                  {then.artifacts && then.artifacts.length > 0 && (
+                    <div className="ms-3">
+                      <strong>Artifacts:</strong>
+                      <ul className="list-unstyled">
+                        {then.artifacts.map((artifact, ai) => (
+                          <li key={ai}>
+                            <a
+                              href={`reports/${projectName}/${testName
+                                .split(".")
+                                .slice(0, -1)
+                                .join(".")}/${runtime}/${artifact}`}
+                              target="_blank"
+                              className="text-white"
+                              rel="noopener noreferrer"
+                            >
+                              {artifact.split("/").pop()}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+      {/* Render build errors and warnings */}
+      {(buildErrors.errors.length > 0 || buildErrors.warnings.length > 0) && (
+        <div className="mb-4 card border-danger">
+          <div className="card-header bg-danger text-white">
+            <h4>Build Errors and Warnings</h4>
+          </div>
+          <div className="card-body">
+            {buildErrors.errors.length > 0 && (
+              <>
+                <h5>Errors</h5>
+                <ul>
+                  {buildErrors.errors.map((error, idx) => (
+                    <li key={`build-error-${idx}`}>
+                      <strong>{error.text}</strong>
+                      {error.location && (
+                        <div>
+                          File: {error.location.file} Line:{" "}
+                          {error.location.line} Column: {error.location.column}
+                        </div>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+            {buildErrors.warnings.length > 0 && (
+              <>
+                <h5>Warnings</h5>
+                <ul>
+                  {buildErrors.warnings.map((warning, idx) => (
+                    <li key={`build-warning-${idx}`}>
+                      <strong>{warning.text}</strong>
+                      {warning.location && (
+                        <div>
+                          File: {warning.location.file} Line:{" "}
+                          {warning.location.line} Column:{" "}
+                          {warning.location.column}
+                        </div>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/pure/TestTable.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { Table, Badge } from "react-bootstrap";
+import { TestStatusBadge } from "../TestStatusBadge";
+
+interface TestStatus {
+  testName: string;
+  testsExist: boolean;
+  runTimeErrors: number;
+  typeErrors: number;
+  staticErrors: number;
+  runTime: string;
+  runTimeTests: number;
+}
+
+interface TestTableProps {
+  testStatuses: TestStatus[];
+  projectName: string;
+}
+
+export const TestTable: React.FC<TestTableProps> = ({
+  testStatuses,
+  projectName,
+}) => {
+  return (
+    <Table striped bordered hover>
+      <thead>
+        <tr>
+          <th>Test</th>
+          <th>Runtime</th>
+          <th>Status</th>
+          <th>Total Tests</th>
+          <th>Type Errors</th>
+          <th>Lint Errors</th>
+        </tr>
+      </thead>
+      <tbody>
+        {testStatuses.map((test) => (
+          <tr key={test.testName} data-testid={`test-row-${test.testName}`}>
+            <td>
+              <a
+                href={`#/projects/${projectName}/tests/${encodeURIComponent(
+                  test.testName
+                )}/${test.runTime}`}
+              >
+                {test.testName}
+              </a>
+            </td>
+            <td>
+              <Badge bg="secondary" className="ms-2">
+                {test.runTime}
+              </Badge>
+            </td>
+            <td>
+              <TestStatusBadge
+                testName={test.testName}
+                testsExist={test.testsExist}
+                runTimeErrors={test.runTimeErrors}
+                typeErrors={test.typeErrors}
+                staticErrors={test.staticErrors}
+              />
+            </td>
+            <td>
+              {test.runTimeTests >= 0 ? test.runTimeTests : "N/A"}
+            </td>
+            <td>
+              <a
+                href={`#/projects/${projectName}/tests/${encodeURIComponent(
+                  test.testName
+                )}/${test.runTime}#types`}
+              >
+                {test.typeErrors > 0 ? `❌ ${test.typeErrors}` : "✅"}
+              </a>
+            </td>
+            <td>
+              <a
+                href={`#/projects/${projectName}/tests/${encodeURIComponent(
+                  test.testName
+                )}/${test.runTime}#lint`}
+              >
+                {test.staticErrors > 0 ? `❌ ${test.staticErrors}` : "✅"}
+              </a>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+};

package/src/components/pure/ToastNotification.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ToastContainer, Toast } from "react-bootstrap";
+
+export const ToastNotification = ({ showToast, setShowToast, toastVariant, toastMessage }) => (
+  <ToastContainer position="top-end" className="p-3">
+    <Toast
+      show={showToast}
+      onClose={() => setShowToast(false)}
+      delay={3000}
+      autohide
+      bg={toastVariant}
+    >
+      <Toast.Header>
+        <strong className="me-auto">Command Status</strong>
+      </Toast.Header>
+      <Toast.Body className="text-white">{toastMessage}</Toast.Body>
+    </Toast>
+  </ToastContainer>
+);

package/src/components/pure/UserProfile.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Dropdown, Image, Nav } from 'react-bootstrap';
+import { githubAuthService } from '../../services/GitHubAuthService';
+
+export const UserProfile: React.FC = () => {
+  const user = githubAuthService.userInfo;
+
+  if (!githubAuthService.isAuthenticated || !user) {
+    return null;
+  }
+
+  const handleLogout = () => {
+    githubAuthService.logout();
+  };
+
+  return (
+    <Dropdown align="end">
+      <Dropdown.Toggle
+        variant="outline-light"
+        id="user-profile-dropdown"
+        className="d-flex align-items-center"
+      >
+        <Image
+          src={user.avatar_url}
+          roundedCircle
+          width="32"
+          height="32"
+          className="me-2"
+        />
+        {user.login}
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        <Dropdown.Item href={`https://github.com/${user.login}`} target="_blank">
+          View on GitHub
+        </Dropdown.Item>
+        <Dropdown.Divider />
+        <Dropdown.Item onClick={handleLogout}>
+          Sign out
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};

package/src/components/stateful/AuthCallbackPage.tsx

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import { Spinner, Container } from 'react-bootstrap';
+
+export const AuthCallbackPage: React.FC = () => {
+  useEffect(() => {
+    // This page is only used in the popup window
+    // The actual authentication handling is done via the message listener in App.tsx
+    // This component just shows a loading spinner and will be closed automatically
+  }, []);
+
+  return (
+    <Container className="d-flex justify-content-center align-items-center" style={{ minHeight: '50vh' }}>
+      <div className="text-center">
+        <Spinner animation="border" role="status" className="mb-3">
+          <span className="visually-hidden">Authenticating...</span>
+        </Spinner>
+        <h4>Completing GitHub authentication...</h4>
+      </div>
+    </Container>
+  );
+};

package/src/components/stateful/FeaturesReporter.tsx

@@ -1,4 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useEffect, useState } from 'react';
+
 import { FeaturesReporterView } from '../pure/FeaturesReporterView';
 import { buildTree } from '../../types/features';
 
@@ -8,7 +10,7 @@ export const FeaturesReporter: React.FC = () => {
   useEffect(() => {
     const fetchProjects = async () => {
       try {
-        const response = await fetch('/projects.json');
+        const response = await fetch('projects.json');
         if (!response.ok) throw new Error('Failed to fetch projects');
         const projectNames: string[] = await response.json();
         setTreeData(buildTree(projectNames));

package/src/components/stateful/FileTree.tsx

@@ -1,66 +1,66 @@
-import React from 'react';
-import { FileType } from './TextEditorPage';
+// import React from 'react';
+// import { FileType } from './TextEditorPage';
 
-type FileTreeProps = {
-  files: FileType[];
-  onSelect: (path: string) => void;
-  activeFile: string | null;
-};
+// type FileTreeProps = {
+//   files: FileType[];
+//   onSelect: (path: string) => void;
+//   activeFile: string | null;
+// };
 
-export const FileTree = ({ files, onSelect, activeFile }: FileTreeProps) => {
-  // Group files by directory
-  const fileGroups = files.reduce((acc, file) => {
-    const dir = file.path.split('/').slice(0, -1).join('/');
-    if (!acc[dir]) {
-      acc[dir] = [];
-    }
-    acc[dir].push(file);
-    return acc;
-  }, {} as Record<string, FileType[]>);
+// export const FileTree = ({ files, onSelect, activeFile }: FileTreeProps) => {
+//   // Group files by directory
+//   const fileGroups = files.reduce((acc, file) => {
+//     const dir = file.path.split('/').slice(0, -1).join('/');
+//     if (!acc[dir]) {
+//       acc[dir] = [];
+//     }
+//     acc[dir].push(file);
+//     return acc;
+//   }, {} as Record<string, FileType[]>);
 
-  const fileTreeStyle = {
-    padding: '8px',
-    fontFamily: 'monospace'
-  };
+//   const fileTreeStyle = {
+//     padding: '8px',
+//     fontFamily: 'monospace'
+//   };
 
-  const directoryStyle = {
-    marginBottom: '8px'
-  };
+//   const directoryStyle = {
+//     marginBottom: '8px'
+//   };
 
-  const directoryNameStyle = {
-    fontWeight: 'bold',
-    padding: '4px 0',
-    color: '#555'
-  };
+//   const directoryNameStyle = {
+//     fontWeight: 'bold',
+//     padding: '4px 0',
+//     color: '#555'
+//   };
 
-  const fileStyle = {
-    padding: '4px 8px',
-    cursor: 'pointer',
-    borderRadius: '4px'
-  };
+//   const fileStyle = {
+//     padding: '4px 8px',
+//     cursor: 'pointer',
+//     borderRadius: '4px'
+//   };
 
-  const activeFileStyle = {
-    ...fileStyle,
-    backgroundColor: '#e0e0e0',
-    fontWeight: 'bold'
-  };
+//   const activeFileStyle = {
+//     ...fileStyle,
+//     backgroundColor: '#e0e0e0',
+//     fontWeight: 'bold'
+//   };
 
-  return (
-    <div style={fileTreeStyle}>
-      {Object.entries(fileGroups).map(([dir, dirFiles]) => (
-        <div key={dir} style={directoryStyle}>
-          <div style={directoryNameStyle}>{dir || '/'}</div>
-          {dirFiles.map(file => (
-            <div 
-              key={file.path}
-              style={activeFile === file.path ? activeFileStyle : fileStyle}
-              onClick={() => onSelect(file.path)}
-            >
-              {file.path.split('/').pop()}
-            </div>
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-};
+//   return (
+//     <div style={fileTreeStyle}>
+//       {Object.entries(fileGroups).map(([dir, dirFiles]) => (
+//         <div key={dir} style={directoryStyle}>
+//           <div style={directoryNameStyle}>{dir || '/'}</div>
+//           {dirFiles.map(file => (
+//             <div 
+//               key={file.path}
+//               style={activeFile === file.path ? activeFileStyle : fileStyle}
+//               onClick={() => onSelect(file.path)}
+//             >
+//               {file.path.split('/').pop()}
+//             </div>
+//           ))}
+//         </div>
+//       ))}
+//     </div>
+//   );
+// };

package/src/components/stateful/GitIntegrationPage.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { GitIntegrationView } from '../pure/GitIntegrationView';
+
+export const GitIntegrationPage = () => {
+  return (
+    <GitIntegrationView />
+  );
+};

package/src/components/stateful/ProcessManagerPage.tsx

@@ -1,26 +1,17 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ProcessManagerView, Process } from '../pure/ProcessManagerView';
-import { AppFrame } from '../pure/AppFrame';
+import { useWebSocket } from '../../App';
 
 export const ProcessManagerPage: React.FC = () => {
   const [processes, setProcesses] = useState<Process[]>([]);
-  const [ws, setWs] = useState<WebSocket | null>(null);
+  const { ws } = useWebSocket();
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
 
-  // Connect to WebSocket
+  // Handle WebSocket messages
   useEffect(() => {
-    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${wsProtocol}//${window.location.host}`;
-    const websocket = new WebSocket(wsUrl);
-    setWs(websocket);
-
-    // Request current processes when connected
-    websocket.onopen = () => {
-      setLoading(true);
-      websocket.send(JSON.stringify({ type: 'getRunningProcesses' }));
-    };
+    if (!ws) return;
 
     const handleMessage = (event: MessageEvent) => {
       try {
@@ -67,13 +58,18 @@ export const ProcessManagerPage: React.FC = () => {
       }
     };
 
-    websocket.addEventListener('message', handleMessage);
+    ws.addEventListener('message', handleMessage);
+
+    // Request current processes when connected
+    if (ws.readyState === WebSocket.OPEN) {
+      setLoading(true);
+      ws.send(JSON.stringify({ type: 'getRunningProcesses' }));
+    }
 
     return () => {
-      websocket.removeEventListener('message', handleMessage);
-      websocket.close();
+      ws.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [ws]);
 
   const handleRefresh = useCallback(() => {
     if (ws && ws.readyState === WebSocket.OPEN) {