testeranto 0.177.0 → 0.189.0

package/src/components/pure/TestPageView.tsx

@@ -1,25 +1,218 @@
-import React from 'react';
-import { Tab, Container, Alert, Button } from 'react-bootstrap';
-import { NavBar } from '../../NavBar';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { ReactElement } from 'react';
+import { Container, Row, Col, Nav, Alert, Button } from 'react-bootstrap';
+import { NavBar } from './NavBar';
 import { TestStatusBadge } from '../TestStatusBadge';
 
+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[];
+  }[];
+};
+
+type TestPageViewProps = {
+  projectName: string;
+  testName: string;
+  decodedTestPath: string;
+  runtime: string;
+  logs: Record<string, string>;
+  testsExist: boolean;
+  errorCounts: {
+    runTimeErrors: number;
+    typeErrors: number;
+    staticErrors: number;
+  };
+};
+
 export const TestPageView = ({
-  route,
-  setRoute,
-  navigate,
   projectName,
   testName,
   decodedTestPath,
   runtime,
-  testData,
-  logs,
-  typeErrors,
-  lintErrors,
   testsExist,
   errorCounts,
-}) => {
+  logs,
+}: TestPageViewProps) => {
+  const [activeTab, setActiveTab] = React.useState('tests.json');
+
+  const renderTestResults = (testData: TestData) => {
+    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>
+        ))}
+      </div>
+    );
+  };
+
   return (
-    <Container fluid={true}>
+    <Container fluid className="px-0">
       <NavBar
         title={decodedTestPath}
         backLink={`/projects/${projectName}`}
@@ -33,41 +226,7 @@ export const TestPageView = ({
               text: runtime
             },
             className: 'pe-none d-flex align-items-center gap-2'
-          },
-          {
-            to: `#results`,
-            label: (
-              <TestStatusBadge
-                testName={decodedTestPath}
-                testsExist={testsExist}
-                runTimeErrors={errorCounts.runTimeErrors}
-                variant="compact"
-              />
-            ),
-            className: !testsExist || errorCounts.runTimeErrors > 0
-              ? 'text-danger fw-bold'
-              : '',
-            active: route === 'results'
-          },
-          {
-            to: `#logs`,
-            label: `Runtime logs`,
-            active: route === 'logs'
-          },
-          {
-            to: `#types`,
-            label: errorCounts.typeErrors > 0
-              ? `tsc (❌ * ${errorCounts.typeErrors})`
-              : 'tsc ✅ ',
-            active: route === 'types'
-          },
-          {
-            to: `#lint`,
-            label: errorCounts.staticErrors > 0
-              ? `eslint (❌ *${errorCounts.staticErrors}) `
-              : 'eslint ✅',
-            active: route === 'lint'
-          },
+          }
         ]}
         rightContent={
           <Button
@@ -91,248 +250,78 @@ export const TestPageView = ({
         }
       />
 
-      <Tab.Container activeKey={route} onSelect={(k) => {
-        if (k) {
-          setRoute(k);
-          navigate(`#${k}`, { replace: true });
-        }
-      }}>
-        <Tab.Content className="mt-3">
-          <Tab.Pane eventKey="results">
-            {!testsExist ? (
-              <Alert variant="danger" className="mt-3">
-                <h4>Tests did not run to completion</h4>
-                <p>The test results file (tests.json) was not found or could not be loaded.</p>
-                <div className="mt-3">
-                  <Button
-                    variant="outline-light"
-                    onClick={() => setRoute('logs')}
-                    className="me-2"
-                  >
-                    View Runtime Logs
-                  </Button>
-                  <Button
-                    variant="outline-light"
-                    onClick={() => navigate(`/projects/${projectName}#${runtime}`)}
+      <Row className="g-0">
+        <Col sm={3} className="border-end">
+          <Nav variant="pills" className="flex-column">
+            {Object.keys(logs).map((logName) => {
+              const displayName = logName.replace('.json', '').replace(/_/g, ' ');
+              let statusIndicator: ReactElement<any, any> | null = null;
+
+              // Add error indicators for specific log types
+              if (logName === 'type_errors.txt' && errorCounts.typeErrors > 0) {
+                statusIndicator = <span className="ms-1">❌ {errorCounts.typeErrors}</span>;
+              } else if (logName === 'lint_errors.txt' && errorCounts.staticErrors > 0) {
+                statusIndicator = <span className="ms-1">❌ {errorCounts.staticErrors}</span>;
+              } else if (logName === 'stderr.log' && errorCounts.runTimeErrors > 0) {
+                statusIndicator = <span className="ms-1">❌ {errorCounts.runTimeErrors}</span>;
+              } else if (logName === 'exit.log' && logs['exit.log']?.trim() !== '0') {
+                statusIndicator = <span className="ms-1">⚠️</span>;
+              } else if (logName === 'tests.json' && logs['tests.json']) {
+                statusIndicator = <div className="ms-1">
+                  <TestStatusBadge
+                    testName={decodedTestPath}
+                    testsExist={testsExist}
+                    runTimeErrors={errorCounts.runTimeErrors}
+                    typeErrors={errorCounts.typeErrors}
+                    staticErrors={errorCounts.staticErrors}
+                    variant="compact"
+                    className="mt-1"
+                  />
+                </div>;
+              }
+
+              return (
+                <Nav.Item key={logName}>
+                  <Nav.Link
+                    eventKey={logName}
+                    active={activeTab === logName}
+                    onClick={() => setActiveTab(logName)}
+                    className="d-flex flex-column align-items-start"
                   >
-                    View Build Logs
-                  </Button>
-                </div>
-              </Alert>
-            ) : testData ? (
-              <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?.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?.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={`/testeranto/reports/${projectName}/${testName.split('.').slice(0, -1).join('.')}/${runtime}/${artifact}`}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                  >
-                                    {artifact.split('/').pop()}
-                                  </a>
-                                </li>
-                              ))}
-                            </ul>
-                          </div>
-                        )}
-                      </div>
+                    <div className="d-flex justify-content-between w-100">
+                      <span className="text-capitalize">{displayName}</span>
+                      {statusIndicator}
                     </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?.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?.length > 0 && (
-                              <div className="ms-3">
-                                <strong>Artifacts:</strong>
-                                <ul className="list-unstyled">
-                                  {when.artifacts.map((artifact, ai) => (
-                                    <li key={ai}>
-                                      <a
-                                        href={`/testeranto/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?.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?.length > 0 && (
-                              <div className="ms-3">
-                                <strong>Artifacts:</strong>
-                                <ul className="list-unstyled">
-                                  {then.artifacts.map((artifact, ai) => (
-                                    <li key={ai}>
-                                      <a
-                                        href={`/testeranto/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>
-                ))}
-              </div>
-            ) : (
-              <Alert variant="warning">No test results found</Alert>
-            )}
-          </Tab.Pane>
-          <Tab.Pane eventKey="logs">
-            {logs === undefined ? (
+                  </Nav.Link>
+                </Nav.Item>
+              );
+            })}
+          </Nav>
+        </Col>
+        <Col sm={9}>
+          <div className="p-3">
+            {!testsExist && activeTab === 'tests.json' ? (
               <Alert variant="danger">
-                <h4>Logs file missing</h4>
-                <p>The runtime logs file (logs.txt) was not found.</p>
-                <p>This suggests the test may not have executed properly.</p>
-              </Alert>
-            ) : logs === '' ? (
-              <Alert variant="success">
-                <h4>No runtime logs</h4>
-                <p>The test executed successfully with no log output.</p>
+                <h4>Tests did not run to completion</h4>
+                <p>The test results file (tests.json) was not found or could not be loaded.</p>
               </Alert>
+            ) : activeTab === 'tests.json' && logs['tests.json'] ? (
+              typeof logs['tests.json'] === 'string'
+                ? renderTestResults(JSON.parse(logs['tests.json']))
+                : renderTestResults(logs['tests.json'])
+            ) : logs[activeTab] ? (
+              <pre className="bg-dark text-white p-3">
+                <code>{typeof logs[activeTab] === 'string'
+                  ? logs[activeTab]
+                  : JSON.stringify(logs[activeTab], null, 2)}
+                </code>
+              </pre>
             ) : (
-              <pre className="bg-dark text-white p-3">{logs}</pre>
+              <Alert variant="info">No content available for this log</Alert>
             )}
-          </Tab.Pane>
-          <Tab.Pane eventKey="types">
-            {typeErrors ? (
-              <pre className="bg-dark text-white p-3">{typeErrors}</pre>
-            ) : (
-              <Alert variant="warning">No type errors found</Alert>
-            )}
-          </Tab.Pane>
-          <Tab.Pane eventKey="lint">
-            {lintErrors ? (
-              <pre className="bg-dark text-white p-3">{lintErrors}</pre>
-            ) : (
-              <Alert variant="warning">No lint errors found</Alert>
-            )}
-          </Tab.Pane>
-          <Tab.Pane eventKey="coverage">
-            <div className="coverage-report">
-              <Alert variant="info">
-                Coverage reports coming soon!
-              </Alert>
-              <div className="coverage-stats">
-                <div className="stat-card bg-success text-white">
-                  <h4>85%</h4>
-                  <p>Lines Covered</p>
-                </div>
-                <div className="stat-card bg-warning text-dark">
-                  <h4>72%</h4>
-                  <p>Branches Covered</p>
-                </div>
-                <div className="stat-card bg-info text-white">
-                  <h4>91%</h4>
-                  <p>Functions Covered</p>
-                </div>
-              </div>
-            </div>
-          </Tab.Pane>
-        </Tab.Content>
-      </Tab.Container>
+          </div>
+        </Col>
+      </Row>
     </Container>
   );
 };

package/src/components/pure/ThemeCard.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+export const ThemeCard = ({
+  theme,
+  handleThemeChange,
+  value,
+  title,
+  description,
+  style,
+}: {
+  theme: string;
+  handleThemeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+  title: string;
+  description: string;
+  style: React.CSSProperties;
+}) => (
+  <div className="col-md-4">
+    <div
+      className={`card theme-card ${theme === value ? "border-primary" : ""}`}
+      onClick={() =>
+        handleThemeChange({
+          target: { value },
+        } as React.ChangeEvent<HTMLInputElement>)
+      }
+      style={style}
+    >
+      <div className="card-body text-center p-3">
+        <h5 className="card-title mb-1">{title}</h5>
+        <p className="small text-muted mb-0">{description}</p>
+      </div>
+    </div>
+  </div>
+);

package/src/components/stateful/FeaturesReporter.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import { FeaturesReporterView } from '../pure/FeaturesReporterView';
+import { buildTree } from '../../types/features';
+
+export const FeaturesReporter: React.FC = () => {
+  const [treeData, setTreeData] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchProjects = async () => {
+      try {
+        const response = await fetch('testeranto/projects.json');
+        if (!response.ok) throw new Error('Failed to fetch projects');
+        const projectNames: string[] = await response.json();
+        setTreeData(buildTree(projectNames));
+      } catch (error) {
+        console.error('Error loading projects:', error);
+      }
+    };
+
+    fetchProjects();
+  }, []);
+
+  return <FeaturesReporterView treeData={treeData} />;
+};

package/src/components/stateful/ProjectPage.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
+
 import { ProjectPageView } from '../pure/ProjectPageView';
 import { ISummary } from '../../Types';
 
@@ -75,9 +77,8 @@ export const ProjectPage = () => {
       loading={loading}
       error={error}
       projectName={projectName}
-      route={route}
-      setRoute={setRoute}
-      navigate={navigate}
+      activeTab={route}
+      setActiveTab={setRoute}
     />
   );
 };