testeranto 0.202.0 → 0.205.0

package/src/app/frontend/testPage/TestPageMainContent.tsx

@@ -0,0 +1,181 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import { Col, Button } from "react-bootstrap";
+import { renderTestResults } from "./TestPageView_utils";
+
+export const TestPageMainContent = ({
+  selectedFile,
+  buildErrors,
+  projectName,
+  testName,
+  runtime,
+}) => (
+  <div className="p-3">
+    {selectedFile?.path.endsWith("tests.json") && (
+      <div className="test-results-preview">
+        {typeof selectedFile.content === "string"
+          ? renderTestResults(
+            JSON.parse(selectedFile.content),
+            buildErrors,
+            projectName,
+            testName,
+            runtime
+          )
+          : renderTestResults(
+            selectedFile.content,
+            buildErrors,
+            projectName,
+            testName,
+            runtime
+          )}
+      </div>
+    )}
+
+    {selectedFile?.path.match(/\.(png|jpg|jpeg|gif|svg)$/i) && (
+      <div className="text-center">
+        <img
+          src={selectedFile.content}
+          alt={selectedFile.path}
+          className="img-fluid"
+          style={{ maxHeight: "300px" }}
+        />
+        <div className="mt-2">
+          <a
+            href={selectedFile.content}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn btn-sm btn-outline-primary"
+          >
+            Open Full Size
+          </a>
+        </div>
+      </div>
+    )}
+
+    {selectedFile?.path.endsWith("build.json") && (
+      <div>
+        <h5>Build Information</h5>
+        {(() => {
+          try {
+            const buildData = JSON.parse(selectedFile.content);
+            return (
+              <>
+                {buildData.errors?.length > 0 && (
+                  <div className="mb-3">
+                    <h6 className="text-danger">
+                      Errors ({buildData.errors.length})
+                    </h6>
+                    <ul className="list-unstyled">
+                      {buildData.errors.map((error: any, index: number) => (
+                        <li key={index} className="mb-2 p-2  rounded">
+                          <div className="text-danger fw-bold">
+                            {error.text}
+                          </div>
+                          {error.location && (
+                            <div className="small text-muted">
+                              File: {error.location.file}
+                              Line: {error.location.line}
+                              Column: {error.location.column}
+                            </div>
+                          )}
+                          {error.notes && error.notes.length > 0 && (
+                            <div className="small">
+                              Notes:
+                              <ul>
+                                {error.notes.map(
+                                  (note: any, noteIndex: number) => (
+                                    <li key={noteIndex}>{note.text}</li>
+                                  )
+                                )}
+                              </ul>
+                            </div>
+                          )}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+                {buildData.warnings?.length > 0 && (
+                  <div className="mb-3">
+                    <h6 className="text-warning">
+                      Warnings ({buildData.warnings.length})
+                    </h6>
+                    <ul className="list-unstyled">
+                      {buildData.warnings.map((warning: any, index: number) => (
+                        <li key={index} className="mb-2 p-2  rounded">
+                          <div className="text-warning fw-bold">
+                            {warning.text}
+                          </div>
+                          {warning.location && (
+                            <div className="small text-muted">
+                              File: {warning.location.file}
+                              Line: {warning.location.line}
+                              Column: {warning.location.column}
+                            </div>
+                          )}
+                          {warning.notes && warning.notes.length > 0 && (
+                            <div className="small">
+                              Notes:
+                              <ul>
+                                {warning.notes.map(
+                                  (note: any, noteIndex: number) => (
+                                    <li key={noteIndex}>{note.text}</li>
+                                  )
+                                )}
+                              </ul>
+                            </div>
+                          )}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+                {(!buildData.errors || buildData.errors.length === 0) &&
+                  (!buildData.warnings || buildData.warnings.length === 0) && (
+                    <div className="alert alert-success">
+                      No build errors or warnings
+                    </div>
+                  )}
+              </>
+            );
+          } catch (e) {
+            return (
+              <div className="alert alert-danger">
+                Error parsing build.json: {e.message}
+              </div>
+            );
+          }
+        })()}
+      </div>
+    )}
+
+    {selectedFile?.path.endsWith(".json") &&
+      !selectedFile.path.endsWith("tests.json") &&
+      !selectedFile.path.endsWith("build.json") && (
+        <pre className=" p-2 small">
+          <code>{selectedFile.content}</code>
+        </pre>
+      )}
+
+    {selectedFile?.path.includes("source_files") && (
+      <div>
+        <div className="mb-2 small text-muted">
+          <i className="bi bi-file-earmark-text me-1"></i>
+          {selectedFile.path.split("/").pop()}
+        </div>
+        <Button
+          variant="outline-primary"
+          size="sm"
+          className="mb-2"
+          onClick={() => {
+            // TODO: Add save functionality
+            alert("Save functionality will be implemented here");
+          }}
+        >
+          Save Changes
+        </Button>
+      </div>
+    )}
+  </div>
+);

package/src/app/frontend/testPage/TestPageNavbar.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import { NavBar } from "../components/pure/NavBar";
+
+export const TestPageNavbar = ({ decodedTestPath, projectName, runtime, setShowAiderModal, isWebSocketConnected }) => {
+  return <NavBar
+    title={decodedTestPath}
+    backLink={`/projects/${projectName}`}
+    navItems={[
+      {
+        label: "",
+        badge: {
+          variant:
+            runtime === "node"
+              ? "primary"
+              : runtime === "web"
+                ? "success"
+                : runtime === "golang"
+                  ? "warning"
+                  : "info",
+          text: runtime,
+        },
+        className: "pe-none d-flex align-items-center gap-2",
+      },
+    ]}
+    rightContent={
+      <Button
+        variant="info"
+        onClick={() => setShowAiderModal(true)}
+        className="ms-2 position-relative"
+        title={
+          isWebSocketConnected
+            ? "AI Assistant"
+            : "AI Assistant (WebSocket not connected)"
+        }
+        disabled={!isWebSocketConnected}
+      >
+        🤖
+        {!isWebSocketConnected && (
+          <span
+            className="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle"
+            title="WebSocket disconnected"
+          >
+            <span className="visually-hidden">
+              WebSocket disconnected
+            </span>
+          </span>
+        )}
+      </Button>
+    }
+  />;
+}

package/src/app/frontend/testPage/TestPageView.test/implementation.ts

@@ -0,0 +1,209 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { assert } from "chai";
+import * as React from "react";
+import * as ReactDom from "react-dom/client";
+
+import { ITestImplementation } from "../../../../CoreTypes";
+import { ITTestResourceConfiguration } from "../../../../lib";
+import { IPM } from "../../../../lib/types";
+
+import { IInput, ISelection, IStore, ISubject, O } from "./types";
+
+export const implementation: ITestImplementation<
+  {
+    iinput: IInput;
+    isubject: ISubject;
+    istore: IStore;
+    iselection: ISelection;
+    given: (props: IInput) => ISelection;
+    when: (
+      sel: ISelection,
+      tr: ITTestResourceConfiguration,
+      utils: IPM
+    ) => Promise<(sel: ISelection) => ISelection>;
+    then: (
+      sel: ISelection,
+      tr: ITTestResourceConfiguration,
+      utils: IPM
+    ) => Promise<(sel: ISelection) => ISelection>;
+  },
+  O
+> = {
+  suites: {
+    Default: "TestPageView basic rendering",
+    Navigation: "TestPageView navigation behavior",
+    ErrorStates: "TestPageView error handling",
+  },
+
+  givens: {
+    Default: () => (props: IInput) => {
+      // Create a container and render the component
+      const container = document.createElement("div");
+      document.body.appendChild(container);
+
+      const reactElement = React.createElement(props);
+      const domRoot = ReactDom.createRoot(container);
+      domRoot.render(reactElement);
+
+      return {
+        container,
+        reactElement,
+        domRoot,
+        ...props,
+      };
+    },
+    WithErrors: () => (props: IInput) => {
+      const container = document.createElement("div");
+      document.body.appendChild(container);
+
+      const reactElement = React.createElement(props);
+      const domRoot = ReactDom.createRoot(container);
+      domRoot.render(reactElement);
+
+      return {
+        container,
+        reactElement,
+        domRoot,
+        ...props,
+        errorCounts: {
+          runTimeErrors: 1,
+          typeErrors: 1,
+          staticErrors: 1,
+        },
+      };
+    },
+    WithLogs: () => (props: IInput) => {
+      const container = document.createElement("div");
+      document.body.appendChild(container);
+
+      const reactElement = React.createElement(props);
+      const domRoot = ReactDom.createRoot(container);
+      domRoot.render(reactElement);
+
+      return {
+        container,
+        reactElement,
+        domRoot,
+        ...props,
+        logs: {
+          "tests.json": "{}",
+          "stdout.log": "test log content",
+        },
+      };
+    },
+  },
+
+  whens: {
+    SwitchToTab:
+      (tabName: string) =>
+      async (
+        selection: ISelection,
+        tr: ITTestResourceConfiguration,
+        utils: IPM
+      ) => {
+        // Update the props to switch tabs
+        const newProps = { ...selection, activeTab: tabName };
+        const newReactElement = React.createElement(
+          selection.reactElement.type,
+          newProps
+        );
+        selection.domRoot.render(newReactElement);
+        return (sel: ISelection) => ({
+          ...sel,
+          reactElement: newReactElement,
+          activeTab: tabName,
+        });
+      },
+    ClickAiderButton:
+      () =>
+      async (
+        selection: ISelection,
+        tr: ITTestResourceConfiguration,
+        utils: IPM
+      ) => {
+        // Find and click the Aider button
+        const button = selection.container.querySelector("button");
+        if (button) {
+          button.click();
+        }
+        return (sel: ISelection) => sel;
+      },
+  },
+
+  thens: {
+    takeScreenshot:
+      (name: string) =>
+      async (ssel: ISelection, utils: IPM) =>
+      (sel: ISelection) => {
+        // Screenshot functionality would be implemented here
+        return Promise.resolve(sel);
+      },
+    RendersNavBar:
+      () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+        const navBar = sel.container.querySelector(".navbar");
+        assert.isNotNull(navBar, "Navbar should be rendered");
+        return Promise.resolve(sel);
+      },
+    ShowsActiveTab:
+      (tabName: string) =>
+      async (ssel: ISelection, utils: IPM) =>
+      (sel: ISelection) => {
+        // Check if the active tab matches
+        assert.equal(sel.activeTab, tabName, `Active tab should be ${tabName}`);
+        return Promise.resolve(sel);
+      },
+    ShowsErrorCounts:
+      () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+        // Check for error badges
+        const badges = sel.container.querySelectorAll(".badge");
+        assert.isAtLeast(badges.length, 0, "Should show at least one badge");
+        return Promise.resolve(sel);
+      },
+    ShowsTestResults:
+      () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+        // Check if test results are shown
+        if (sel.testsExist) {
+          const testResults = sel.container.querySelector(".test-results");
+          assert.isNotNull(
+            testResults,
+            "Test results should be shown when tests exist"
+          );
+        }
+        return Promise.resolve(sel);
+      },
+    ShowsLogs:
+      () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+        // Check if logs are shown
+        const logs = sel.container.querySelector("pre");
+        assert.isNotNull(logs, "Logs should be shown");
+        return Promise.resolve(sel);
+      },
+    ShowsTypeErrors:
+      () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+        // Check if type errors are shown
+        const typeErrors = sel.container.querySelector(
+          '[data-testid="type-errors"]'
+        );
+        assert.isNotNull(typeErrors, "Type errors should be shown");
+        return Promise.resolve(sel);
+      },
+    ShowsLintErrors:
+      () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+        // Check if lint errors are shown
+        const lintErrors = sel.container.querySelector(
+          '[data-testid="lint-errors"]'
+        );
+        assert.isNotNull(lintErrors, "Lint errors should be shown");
+        return Promise.resolve(sel);
+      },
+    AiderButtonCopiesCommand:
+      () => async (ssel: ISelection, utils: IPM) => (sel: ISelection) => {
+        // Check if Aider button exists
+        const aiderButton = sel.container.querySelector(
+          'button[title*="AI Assistant"]'
+        );
+        assert.isNotNull(aiderButton, "Aider button should be present");
+        return Promise.resolve(sel);
+      },
+  },
+};

package/src/app/frontend/testPage/TestPageView.test/index.tsx

@@ -0,0 +1,22 @@
+import Testeranto from "testeranto-react/src/react-dom/jsx/web";
+
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { TestPageView } from "../TestPageView";
+
+import "./../../../App.scss";
+
+const WrappedTestPageView = (props) => (
+  <MemoryRouter>
+    <TestPageView {...props} />
+  </MemoryRouter>
+);
+
+export default Testeranto(
+  implementation,
+  specification,
+  WrappedTestPageView
+);

package/src/app/frontend/testPage/TestPageView.test/specification.ts

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { ITestSpecification } from "../../../../CoreTypes";
+import { ISelection, O } from "./types";
+
+export const specification: ITestSpecification<
+  {
+    iinput: any;
+    isubject: any;
+    istore: ISelection;
+    iselection: ISelection;
+    given: any;
+    when: any;
+    then: any;
+  },
+  O
+> = (Suite, Given, When, Then) => {
+  return [
+    Suite.Default("TestPageView basic rendering", {
+      "renders navigation bar": Given.Default([], [], [Then.RendersNavBar()]),
+      "shows error counts": Given.Default([], [], [Then.ShowsErrorCounts()]),
+      "shows test results when data exists": Given.Default(
+        [],
+        [],
+        [Then.takeScreenshot("shot.png"), Then.ShowsTestResults()]
+      ),
+    }),
+
+    Suite.Navigation("TestPageView navigation behavior", {
+      "shows results tab by default": Given.Default(
+        [],
+        [],
+        [Then.ShowsActiveTab("results")]
+      ),
+      "switches to logs tab": Given.Default(
+        [],
+        [When.SwitchToTab("logs")],
+        [Then.ShowsActiveTab("logs"), Then.ShowsLogs()]
+      ),
+      "copies aider command when button clicked": Given.Default(
+        [],
+        [When.ClickAiderButton()],
+        [Then.AiderButtonCopiesCommand()]
+      ),
+    }),
+
+    Suite.ErrorStates("TestPageView error handling", {
+      "shows error state when tests fail": Given.WithErrors(
+        [],
+        [],
+        [
+          Then.ShowsErrorCounts(),
+          Then.ShowsTypeErrors(),
+          Then.ShowsLintErrors(),
+        ]
+      ),
+      "shows logs when available": Given.WithLogs([], [], [Then.ShowsLogs()]),
+    }),
+  ];
+};

package/src/app/frontend/testPage/TestPageView.test/types.ts

@@ -0,0 +1,92 @@
+/* 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 "../../components/pure/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<
+  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 O = Ibdd_out<
+  {
+    Default: [string];
+    Navigation: [string];
+    ErrorStates: [string];
+  },
+  {
+    Default: [];
+    WithError: [];
+    Navigation: [];
+    WithErrors: [];
+    WithLogs: [];
+  },
+  {
+    SwitchToTab: [string];
+    ClickAiderButton: [];
+  },
+  {
+    RendersNavBar: [];
+    ShowsErrorCounts: [];
+    ShowsTestResults: [];
+    ShowsActiveTab: [string];
+    ShowsLogs: [];
+    AiderButtonCopiesCommand: [];
+    takeScreenshot: [string];
+    ShowsTypeErrors: [];
+    ShowsLintErrors: [];
+  }
+>;
+
+export type M = {
+  givens: {
+    [K in keyof O["givens"]]: (...args: any[]) => IProjectPageViewProps;
+  };
+  whens: {
+    [K in keyof O["whens"]]: (
+      ...args: any[]
+    ) => (
+      props: IProjectPageViewProps,
+      utils: any
+    ) => IProjectPageViewProps & { container?: HTMLElement };
+  };
+  thens: {
+    [K in keyof O["thens"]]: (
+      ...args: any[]
+    ) => (
+      state: IProjectPageViewProps & { container?: HTMLElement }
+    ) => IProjectPageViewProps & { container?: HTMLElement };
+  };
+};