testeranto 0.177.0 → 0.197.0

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

@@ -0,0 +1,18 @@
+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";
+import React from "react";
+
+const WrappedProjectPageView = (props) => (
+  <MemoryRouter>
+    <ProjectPageView {...props}> </ProjectPageView>
+  </MemoryRouter>
+);
+
+export default Testeranto(
+  implementation,
+  specification,
+  WrappedProjectPageView
+);

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

@@ -14,17 +14,30 @@ export const specification: ITestSpecification<I, O> = (
           "ProjectPageView should render",
           "It should contain a container-fluid div",
           "It should render the NavBar component",
+          "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.happyPath()]
+        [
+          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",
+          "It should capture screenshots of error state",
         ],
         [],
-        [Then.unhappyPath()]
+        [Then.unhappyPath(), Then.takeScreenshot("error-state.png")]
       ),
     }),
   ];

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

@@ -1,23 +1,60 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
+import ReactDom from "react-dom/client";
+
 import { Ibdd_in, Ibdd_out } from "../../../CoreTypes";
 import { IProjectPageViewProps } from "../ProjectPageView";
 
+export type IInput = IProjectPageViewProps;
+
+export type ISelection = {
+  htmlElement: HTMLElement;
+  reactElement: React.ReactElement;
+  domRoot: ReactDom.Root;
+};
+
+export type IStore = ISelection;
+
+export type ISubject = {
+  htmlElement: HTMLElement;
+  domRoot: ReactDom.Root;
+};
+
 export type I = Ibdd_in<
-  null,
-  IProjectPageViewProps,
-  IProjectPageViewProps & { container?: HTMLElement },
-  IProjectPageViewProps & { container?: HTMLElement },
-  (...args: any[]) => IProjectPageViewProps,
-  () => (
-    props: IProjectPageViewProps,
-    utils: any
-  ) => IProjectPageViewProps & { container?: HTMLElement },
-  () => (
-    state: IProjectPageViewProps & { container?: HTMLElement }
-  ) => IProjectPageViewProps & { container?: HTMLElement }
+  IInput,
+  ISubject,
+  ISelection,
+  IStore,
+  (s: IStore) => IStore,
+  (s: IStore) => IStore,
+  {
+    hasContainerFluid: () => (s: IStore) => IStore;
+    hasNavBar: () => (s: IStore) => IStore;
+    hasNavBarTitle: () => (s: IStore) => IStore;
+    hasTestTable: () => (s: IStore) => IStore;
+    rendersTestSuite1: () => (s: IStore) => IStore;
+    rendersTestSuite2: () => (s: IStore) => IStore;
+    unhappyPath: () => (s: IStore) => IStore;
+    takeScreenshot: (name: string) => (s: IStore, pm: any) => Promise<IStore>;
+  }
 >;
 
+// export type I = Ibdd_in<
+//   null,
+//   IProjectPageViewProps,
+//   IProjectPageViewProps & { container?: HTMLElement },
+//   IProjectPageViewProps & { container?: HTMLElement },
+//   (...args: any[]) => IProjectPageViewProps,
+//   () => (
+//     props: IProjectPageViewProps,
+//     utils: any
+//   ) => IProjectPageViewProps & { container?: HTMLElement },
+//   () => (
+//     state: IProjectPageViewProps & { container?: HTMLElement }
+//   ) => IProjectPageViewProps & { container?: HTMLElement }
+// >;
+
 export type O = Ibdd_out<
   {
     Default: [string];
@@ -25,11 +62,18 @@ export type O = Ibdd_out<
   {
     Default: [];
     WithError: [];
+    Navigation: [];
   },
   {},
   {
-    happyPath: [];
+    hasContainerFluid: [];
+    hasNavBar: [];
+    hasNavBarTitle: [];
+    hasTestTable: [];
+    rendersTestSuite1: [];
+    rendersTestSuite2: [];
     unhappyPath: [];
+    takeScreenshot: [string];
   }
 >;
 

package/src/components/pure/ProjectPageView.tsx

@@ -1,9 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
-import { Tab, Container, Alert, Table, Badge, Nav, Card, ListGroup } from 'react-bootstrap';
-import { NavBar } from '../../NavBar';
+import { Tab, Container, Alert, Table, Badge, Nav, Card, ListGroup, Col, Row } from 'react-bootstrap';
+
 import { TestStatusBadge } from '../TestStatusBadge';
 
+import { NavBar } from './NavBar';
+
+import "./../../App.scss";
+
 const BuildLogViewer = ({ logs, runtime }: { logs: any, runtime: string }) => {
   if (!logs) return <Alert variant="info">Loading {runtime.toLowerCase()} build logs...</Alert>;
 
@@ -108,16 +112,16 @@ const BuildLogViewer = ({ logs, runtime }: { logs: any, runtime: string }) => {
                         </div>
                         <div className="mt-1">
                           <pre className="mb-0 p-2 bg-light rounded">
-                            {warn.text || warn.message || JSON.stringify(warn)}
+                            {JSON.stringify(warn)}
                           </pre>
                         </div>
-                        {warn.detail && (
+                        {/* {warn.detail && (
                           <div className="mt-1 small text-muted">
                             <pre className="mb-0 p-2 bg-light rounded">
                               {warn.detail}
                             </pre>
                           </div>
-                        )}
+                        )} */}
                       </ListGroup.Item>
                     ))}
                   </ListGroup>
@@ -151,16 +155,17 @@ const BuildLogViewer = ({ logs, runtime }: { logs: any, runtime: string }) => {
                         </div>
                         <div className="mt-1">
                           <pre className="mb-0 p-2 bg-light rounded">
-                            {err.text || err.message || JSON.stringify(err)}
+                            {/* {err.text || err.message || JSON.stringify(err)} */}
+                            {JSON.stringify(err)}
                           </pre>
                         </div>
-                        {err.detail && (
+                        {/* {err.detail && (
                           <div className="mt-1 small text-muted">
                             <pre className="mb-0 p-2 bg-light rounded">
                               {err.detail}
                             </pre>
                           </div>
-                        )}
+                        )} */}
                       </ListGroup.Item>
                     ))}
                   </ListGroup>
@@ -180,17 +185,16 @@ const BuildLogViewer = ({ logs, runtime }: { logs: any, runtime: string }) => {
 };
 
 export type IProjectPageViewProps = {
-  summary,
-  nodeLogs,
-  webLogs,
-  pureLogs,
-  config,
-  loading,
-  error,
-  projectName,
-  route,
-  setRoute,
-  navigate
+  summary: any;
+  nodeLogs: any;
+  webLogs: any;
+  pureLogs: any;
+  config: any;
+  loading: boolean;
+  error: string | null;
+  projectName: string;
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
 };
 
 export const ProjectPageView = ({
@@ -202,16 +206,20 @@ export const ProjectPageView = ({
   loading,
   error,
   projectName,
-  route,
-  setRoute,
-  navigate
+  activeTab,
+  setActiveTab
 }: IProjectPageViewProps) => {
   if (loading) return <div>Loading project data...</div>;
   if (error) return <Alert variant="danger">Error: {error}</Alert>;
   if (!summary) return <Alert variant="warning">No data found for project</Alert>;
 
-  const testStatuses = Object.entries(summary).map(([testName, testData]) => {
-    const runTime = config.tests?.find((t) => t[0] === testName)?.[1] || 'node';
+  const testStatuses = Object.entries(summary).map(([testName, testData]: [string, {
+    testsExist?: boolean;
+    runTimeErrors: number;
+    typeErrors: number;
+    staticErrors: number;
+  }]) => {
+    const runTime = config.tests?.find((t: [string, string]) => t[0] === testName)?.[1] || 'node';
     return {
       testName,
       testsExist: testData.testsExist !== false,
@@ -227,106 +235,132 @@ export const ProjectPageView = ({
       <NavBar
         title={projectName}
         backLink="/"
-        navItems={[
-          {
-            to: `#tests`,
-            label: testStatuses.some(t => t.runTimeErrors > 0) ? '❌ Tests' :
-              testStatuses.some(t => t.typeErrors > 0 || t.staticErrors > 0) ? '⚠️ Tests' : '✅ Tests',
-            active: route === 'tests',
-            className: testStatuses.some(t => t.runTimeErrors > 0) ? 'text-danger fw-bold' :
-              testStatuses.some(t => t.typeErrors > 0 || t.staticErrors > 0) ? 'text-warning fw-bold' : ''
-          },
-          {
-            to: `#node`,
-            label: nodeLogs?.errors?.length ? '❌ Node Build' :
-              nodeLogs?.warnings?.length ? '⚠️ Node Build' : 'Node Build',
-            active: route === 'node',
-            className: nodeLogs?.errors?.length ? 'text-danger fw-bold' :
-              nodeLogs?.warnings?.length ? 'text-warning fw-bold' : ''
-          },
-          {
-            to: `#web`,
-            label: webLogs?.errors?.length ? '❌ Web Build' :
-              webLogs?.warnings?.length ? '⚠️ Web Build' : 'Web Build',
-            active: route === 'web',
-            className: webLogs?.errors?.length ? 'text-danger fw-bold' :
-              webLogs?.warnings?.length ? 'text-warning fw-bold' : ''
-          },
-          {
-            to: `#pure`,
-            label: pureLogs?.errors?.length ? '❌ Pure Build' :
-              pureLogs?.warnings?.length ? '⚠️ Pure Build' : 'Pure Build',
-            active: route === 'pure',
-            className: pureLogs?.errors?.length ? 'text-danger fw-bold' :
-              pureLogs?.warnings?.length ? 'text-warning fw-bold' : ''
-          },
-        ]}
       />
 
-      <Tab.Container activeKey={route} onSelect={(k) => {
-        if (k) {
-          setRoute(k);
-          navigate(`#${k}`, { replace: true });
-        }
-      }}>
-        <Tab.Content>
-          <Tab.Pane eventKey="tests">
-            <Table striped bordered hover>
-              <thead>
-                <tr>
-                  <th>Test</th>
-                  <th>Runtime</th>
-                  <th>Status</th>
-                  <th>Type Errors</th>
-                  <th>Lint Errors</th>
-                </tr>
-              </thead>
-              <tbody>
-                {testStatuses.map((test) => (
-                  <tr key={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}
-                      />
-                    </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>
+      <Row className="g-0">
+        <Col sm={3} className="border-end">
+          <Nav variant="pills" className="flex-column">
+            <Nav.Item>
+              <Nav.Link
+                active={activeTab === 'tests'}
+                onClick={() => setActiveTab('tests')}
+                className="d-flex flex-column align-items-start"
+              >
+                <div className="d-flex justify-content-between w-100">
+                  <span>Tests</span>
+                  {testStatuses.some(t => t.runTimeErrors > 0) ? (
+                    <Badge bg="danger">❌</Badge>
+                  ) : testStatuses.some(t => t.typeErrors > 0 || t.staticErrors > 0) ? (
+                    <Badge bg="warning" text="dark">⚠️</Badge>
+                  ) : (
+                    <Badge bg="success">✓</Badge>
+                  )}
+                </div>
+              </Nav.Link>
+            </Nav.Item>
+            <Nav.Item>
+              <Nav.Link
+                active={activeTab === 'node'}
+                onClick={() => setActiveTab('node')}
+                className="d-flex justify-content-between align-items-center"
+              >
+                Node build logs
+                {nodeLogs?.errors?.length ? (
+                  <Badge bg="danger">❌ {nodeLogs.errors.length}</Badge>
+                ) : nodeLogs?.warnings?.length ? (
+                  <Badge bg="warning" text="dark">⚠️</Badge>
+                ) : null}
+              </Nav.Link>
+            </Nav.Item>
+            <Nav.Item>
+              <Nav.Link
+                active={activeTab === 'web'}
+                onClick={() => setActiveTab('web')}
+                className="d-flex justify-content-between align-items-center"
+              >
+                Web build logs
+                {webLogs?.errors?.length ? (
+                  <Badge bg="danger">❌ {webLogs.errors.length}</Badge>
+                ) : webLogs?.warnings?.length ? (
+                  <Badge bg="warning" text="dark">⚠️</Badge>
+                ) : null}
+              </Nav.Link>
+            </Nav.Item>
+            <Nav.Item>
+              <Nav.Link
+                active={activeTab === 'pure'}
+                onClick={() => setActiveTab('pure')}
+                className="d-flex justify-content-between align-items-center"
+              >
+                Pure build logs
+                {pureLogs?.errors?.length ? (
+                  <Badge bg="danger">❌ {pureLogs.errors.length}</Badge>
+                ) : pureLogs?.warnings?.length ? (
+                  <Badge bg="warning" text="dark">⚠️</Badge>
+                ) : null}
+              </Nav.Link>
+            </Nav.Item>
+          </Nav>
+        </Col>
+        <Col sm={9}>
+          <div className="p-3">
+            {activeTab === 'tests' ? (
+              <Table striped bordered hover>
+                <thead>
+                  <tr>
+                    <th>Test</th>
+                    <th>Runtime</th>
+                    <th>Status</th>
+                    <th>Type Errors</th>
+                    <th>Lint Errors</th>
                   </tr>
-                ))}
-              </tbody>
-            </Table>
-          </Tab.Pane>
-          <Tab.Pane eventKey="node">
-            <BuildLogViewer logs={nodeLogs} runtime="Node" />
-          </Tab.Pane>
-          <Tab.Pane eventKey="web">
-            <BuildLogViewer logs={webLogs} runtime="Web" />
-          </Tab.Pane>
-          <Tab.Pane eventKey="pure">
-            <BuildLogViewer logs={pureLogs} runtime="Pure" />
-          </Tab.Pane>
-        </Tab.Content>
-      </Tab.Container>
+                </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>
+                        <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>
+            ) : activeTab === 'node' ? (
+              <BuildLogViewer logs={nodeLogs} runtime="Node" />
+            ) : activeTab === 'web' ? (
+              <BuildLogViewer logs={webLogs} runtime="Web" />
+            ) : activeTab === 'pure' ? (
+              <BuildLogViewer logs={pureLogs} runtime="Pure" />
+            ) : null}
+          </div>
+        </Col>
+      </Row>
     </Container>
   );
 };

package/src/components/pure/ProjectsPageView.tsx

@@ -1,6 +1,36 @@
-import React from 'react';
-import { Table, Alert } from 'react-bootstrap';
-import { NavBar } from '../../NavBar';
+import React from "react";
+import { Table, Alert } from "react-bootstrap";
+
+type Project = {
+  name: string;
+  nodeStatus: string;
+  webStatus: string;
+  pureStatus: string;
+};
+
+type TestSummary = {
+  [testName: string]: {
+    testsExist?: boolean;
+    runTimeErrors?: number;
+    typeErrors?: number;
+    staticErrors?: number;
+  };
+};
+
+type ProjectConfig = {
+  [projectName: string]: {
+    tests: [string, string][]; // [testName, runtime]
+  };
+};
+
+type ProjectsPageViewProps = {
+  projects: Project[];
+  summaries: TestSummary;
+  configs: ProjectConfig;
+  loading: boolean;
+  error: string | null;
+  navigate: (path: string) => void;
+};
 
 export const ProjectsPageView = ({
   projects,
@@ -8,14 +38,18 @@ export const ProjectsPageView = ({
   configs,
   loading,
   error,
-  navigate
-}) => {
+  navigate,
+}: ProjectsPageViewProps) => {
   const getStatusIcon = (status: string) => {
     switch (status) {
-      case 'success': return '✅';
-      case 'failed': return '❌';
-      case 'warning': return '⚠️';
-      default: return '❓';
+      case "success":
+        return "✅";
+      case "failed":
+        return "❌";
+      case "warning":
+        return "⚠️";
+      default:
+        return "❓";
     }
   };
 
@@ -23,8 +57,7 @@ export const ProjectsPageView = ({
   if (error) return <Alert variant="danger">Error: {error}</Alert>;
 
   return (
-    <div className="p-3">
-      <NavBar title="Testeranto" backLink={null} />
+    <div className="">
       <Table striped bordered hover responsive>
         <thead>
           <tr>
@@ -39,30 +72,44 @@ export const ProjectsPageView = ({
           {projects.map((project) => (
             <tr key={project.name}>
               <td>
-                <a href="#" onClick={(e) => {
-                  e.preventDefault();
-                  navigate(`/projects/${project.name}`);
-                }}>{project.name}</a>
+                <a
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    navigate(`/projects/${project.name}`);
+                  }}
+                >
+                  {project.name}
+                </a>
               </td>
               <td>
-                <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
+                <div>
                   {summaries[project.name] ? (
-                    Object.keys(summaries[project.name]).map(testName => {
+                    Object.keys(summaries[project.name]).map((testName) => {
                       const testData = summaries[project.name][testName];
-                      const runTime = configs[project.name].tests.find((t) => t[0] === testName)[1];
+                      const runTime =
+                        configs[project.name]?.tests?.find(
+                          (t) => t[0] === testName
+                        )?.[1] || "node";
                       const hasRuntimeErrors = testData.runTimeErrors > 0;
-                      const hasStaticErrors = testData.typeErrors > 0 || testData.staticErrors > 0;
+                      const hasStaticErrors =
+                        testData.typeErrors > 0 || testData.staticErrors > 0;
 
                       return (
                         <div key={testName}>
                           <a
-                            href={`#/projects/${project.name}/tests/${encodeURIComponent(testName)}/${runTime}`}
+                            href={`#/projects/${project.name
+                              }/tests/${encodeURIComponent(testName)}/${runTime}`}
                           >
-                            {hasRuntimeErrors ? '❌ ' : hasStaticErrors ? '⚠️ ' : ''}
-                            {testName.split('/').pop()}
+                            {hasRuntimeErrors
+                              ? "❌ "
+                              : hasStaticErrors
+                                ? "⚠️ "
+                                : ""}
+                            {testName.split("/").pop() || testName}
                           </a>
                         </div>
-                      )
+                      );
                     })
                   ) : (
                     <div>Loading tests...</div>
@@ -70,23 +117,17 @@ export const ProjectsPageView = ({
                 </div>
               </td>
               <td>
-                <a
-                  href={`#/projects/${project.name}#node`}
-                >
+                <a href={`#/projects/${project.name}#node`}>
                   {getStatusIcon(project.nodeStatus)} Node build logs
                 </a>
               </td>
               <td>
-                <a
-                  href={`#/projects/${project.name}#web`}
-                >
+                <a href={`#/projects/${project.name}#web`}>
                   {getStatusIcon(project.webStatus)} Web build logs
                 </a>
               </td>
               <td>
-                <a
-                  href={`#/projects/${project.name}#pure`}
-                >
+                <a href={`#/projects/${project.name}#pure`}>
                   {getStatusIcon(project.pureStatus)} Pure build logs
                 </a>
               </td>

package/src/components/pure/SettingsButton.md

@@ -0,0 +1 @@
+The settings button should set theme once upon creation.

package/src/components/pure/SettingsButton.tsx

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