testeranto 0.177.0 → 0.189.0

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,37 @@
 import React from 'react';
 import { Table, Alert } from 'react-bootstrap';
-import { NavBar } from '../../NavBar';
+import { NavBar } from './NavBar';
+
+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,
@@ -9,7 +40,7 @@ export const ProjectsPageView = ({
   loading,
   error,
   navigate
-}) => {
+}: ProjectsPageViewProps) => {
   const getStatusIcon = (status: string) => {
     switch (status) {
       case 'success': return '✅';
@@ -24,7 +55,7 @@ export const ProjectsPageView = ({
 
   return (
     <div className="p-3">
-      <NavBar title="Testeranto" backLink={null} />
+      <NavBar title="Testeranto" backLink={undefined} />
       <Table striped bordered hover responsive>
         <thead>
           <tr>
@@ -49,7 +80,7 @@ export const ProjectsPageView = ({
                   {summaries[project.name] ? (
                     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;
 
@@ -59,7 +90,7 @@ export const ProjectsPageView = ({
                             href={`#/projects/${project.name}/tests/${encodeURIComponent(testName)}/${runTime}`}
                           >
                             {hasRuntimeErrors ? '❌ ' : hasStaticErrors ? '⚠️ ' : ''}
-                            {testName.split('/').pop()}
+                            {testName.split('/').pop() || testName}
                           </a>
                         </div>
                       )

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,66 @@
+import React, { useState, useEffect } from "react";
+import { Button, Modal } from "react-bootstrap";
+import { ModalContent } from "./ModalContent";
+import SunriseAnimation from "../SunriseAnimation";
+
+export const SettingsButton = ({ className }: { className?: string }) => {
+  useEffect(() => {
+    return () => {
+      // Cleanup if needed
+    };
+  }, []);
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    let themeToApply = theme;
+    if (theme === 'system') {
+      themeToApply = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+    }
+    document.documentElement.setAttribute('data-bs-theme', themeToApply);
+  }, []);
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'system');
+
+  const handleThemeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newTheme = e.target.value;
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+
+    // Remove all theme classes first
+    // document.body.classList.remove('light-theme', 'dark-theme', 'lovely-theme', 'light-grayscale-theme', 'dark-grayscale-theme', 'sepia-theme');
+
+    let themeToApply = newTheme;
+    if (newTheme === 'system') {
+      themeToApply = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+    }
+
+    document.documentElement.setAttribute('data-bs-theme', themeToApply);
+
+    // Animation is now handled by SunriseAnimation component
+    // document.body.classList.add(`${themeToApply}-theme`);
+  };
+
+
+  return (
+    <>
+      <div id="settings-button">
+        <button
+          className={`btn btn-sm btn-outline-secondary ${className}`}
+          onClick={() => setShowModal(true)}
+        >
+          <div id="gear-icon-settings">⚙️</div>
+        </button>
+      </div>
+
+      <SunriseAnimation active={theme === 'daily'} />
+
+      <Modal show={showModal} onHide={() => setShowModal(false)} size="lg">
+        <ModalContent theme={theme} handleThemeChange={handleThemeChange} />
+        <Modal.Footer className="border-0">
+          <Button variant="btn-primary" onClick={() => setShowModal(false)}>
+            Done
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};

package/src/components/pure/TestPageView.test/implementation.ts

@@ -0,0 +1,194 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+
+import { assert } from "chai";
+import * as React from "react";
+import * as ReactDom from "react-dom/client";
+
+import { ITestImplementation } from "../../../CoreTypes";
+
+import { IInput, ISelection, IStore, ISubject, O } from "./types";
+
+const mockTestData = {
+  name: "Test Suite",
+  givens: [
+    {
+      name: "Given Scenario",
+      whens: [{ name: "When Action" }],
+      thens: [{ name: "Then Assertion" }],
+    },
+  ],
+};
+
+export const implementation: ITestImplementation<
+  {
+    iinput: IInput;
+    isubject: ISubject;
+    istore: IStore;
+    iselection: ISelection;
+    given: (props: IInput) => ISelection;
+    when: (sel: ISelection) => ISelection;
+    then: (sel: ISelection) => Promise<ISelection>;
+  },
+  O,
+  {}
+> = {
+  suites: {
+    Default: "TestPageView basic rendering",
+    Navigation: "TestPageView navigation behavior",
+    ErrorStates: "TestPageView error handling",
+  },
+
+  givens: {
+    Default: () => ({
+      route: "results",
+      setRoute: () => {},
+      navigate: () => {},
+      projectName: "test-project",
+      testName: "test-suite.test.ts",
+      decodedTestPath: "test-suite",
+      runtime: "node",
+      testData: mockTestData,
+      logs: "Test logs content",
+      typeErrors: "",
+      lintErrors: "",
+      testsExist: true,
+      errorCounts: {
+        runTimeErrors: 0, // BDD test failures
+        typeErrors: 0, // Type checker errors
+        staticErrors: 0, // Linter errors
+      },
+    }),
+    WithErrors: () => ({
+      route: "results",
+      setRoute: () => {},
+      navigate: () => {},
+      projectName: "test-project",
+      testName: "test-suite.test.ts",
+      decodedTestPath: "test-suite",
+      runtime: "node",
+      testData: null, // Missing tests.json indicates BDD failure
+      logs: undefined,
+      typeErrors: "Type error message", // Only shown if tests.json exists
+      lintErrors: "Lint error message", // Only shown if tests.json exists
+      testsExist: false,
+      errorCounts: {
+        runTimeErrors: 1, // Highest priority - BDD failed
+        typeErrors: 2, // Secondary - type errors
+        staticErrors: 3, // Lowest priority - linter errors
+      },
+    }),
+    WithLogs: () => ({
+      route: "logs",
+      setRoute: () => {},
+      navigate: () => {},
+      projectName: "test-project",
+      testName: "test-suite.test.ts",
+      decodedTestPath: "test-suite",
+      runtime: "node",
+      testData: mockTestData,
+      logs: "Detailed test logs\nLine 1\nLine 2",
+      typeErrors: "",
+      lintErrors: "",
+      testsExist: true,
+      errorCounts: {
+        runTimeErrors: 0,
+        typeErrors: 0,
+        staticErrors: 0,
+      },
+    }),
+  },
+
+  whens: {
+    SwitchToTab: (tabName: string) => (selection) => {
+      selection.reactElement = React.cloneElement(selection.reactElement, {
+        route: tabName,
+      });
+      ReactDom.createRoot(selection.domRoot).render(selection.reactElement);
+      return selection;
+    },
+    ClickAiderButton: () => (selection) => {
+      const button = selection.container.querySelector(
+        'button[aria-label="Aider"]'
+      );
+      if (button) {
+        (button as HTMLElement).click();
+      }
+      return selection;
+    },
+  },
+
+  thens: {
+    takeScreenshot:
+      (name: string) =>
+      async ({ htmlElement }, pm) => {
+        const p = await pm.page();
+        await pm.customScreenShot({ path: name }, p);
+        return { htmlElement };
+      },
+    RendersNavBar: () => async (selection) => {
+      const navBar = selection.container.querySelector(".navbar");
+      assert.isNotNull(navBar);
+      return selection;
+    },
+    ShowsActiveTab: (tabName: string) => async (selection) => {
+      const activeTab = selection.container.querySelector(".tab-pane.active");
+      assert.include(activeTab?.textContent, tabName);
+      return selection;
+    },
+    ShowsErrorCounts: () => async (selection) => {
+      const badges = selection.container.querySelectorAll(".badge");
+      // First check for BDD failures
+      if (!selection.testsExist) {
+        assert.isAbove(badges.length, 0);
+        const bddBadge = selection.container.querySelector(".badge.bg-danger");
+        assert.isNotNull(bddBadge);
+      }
+      // Then check type errors if BDD passed
+      else if (selection.errorCounts.typeErrors > 0) {
+        const typeBadge =
+          selection.container.querySelector(".badge.bg-warning");
+        assert.isNotNull(typeBadge);
+      }
+      // Finally check linter errors if both above passed
+      else if (selection.errorCounts.staticErrors > 0) {
+        const lintBadge = selection.container.querySelector(".badge.bg-info");
+        assert.isNotNull(lintBadge);
+      }
+      return selection;
+    },
+    ShowsTestResults: () => async (selection) => {
+      // Only expect test results if BDD tests passed
+      if (selection.testsExist) {
+        const testResults = selection.container.querySelector(".test-results");
+        assert.isNotNull(testResults);
+      }
+      return selection;
+    },
+    ShowsLogs: () => async (selection) => {
+      const logs = selection.container.querySelector("pre");
+      assert.isNotNull(logs);
+      return selection;
+    },
+    ShowsTypeErrors: () => async (selection) => {
+      const typeErrors = selection.container.querySelector("#types-tab");
+      assert.isNotNull(typeErrors);
+      return selection;
+    },
+    ShowsLintErrors: () => async (selection) => {
+      const lintErrors = selection.container.querySelector("#lint-tab");
+      assert.isNotNull(lintErrors);
+      return selection;
+    },
+    AiderButtonCopiesCommand: () => async (selection) => {
+      Object.assign(navigator, {
+        clipboard: {
+          writeText: jest.fn().mockResolvedValue(undefined),
+        },
+      });
+
+      await implementation.whens.ClickAiderButton()(selection);
+      assert.isTrue(navigator.clipboard.writeText.called);
+      return selection;
+    },
+  },
+};