testeranto 0.177.0 → 0.189.0

package/src/components/pure/ModalContent.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import { Modal } from "react-bootstrap";
+import { ThemeCard } from "./ThemeCard";
+
+import "../../App.scss";
+
+export type IModalContentProps = {
+  theme: string;
+  handleThemeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const ModalContent = ({
+  theme,
+  handleThemeChange,
+}: IModalContentProps) => (
+  <>
+    <Modal.Header closeButton className="border-0">
+      <Modal.Title className="d-flex align-items-center">
+        <i className="bi bi-palette-fill me-2"></i>
+        <span>Settings</span>
+      </Modal.Title>
+    </Modal.Header>
+    <div className="alert alert-warning mx-3 mt-2 mb-0">
+      <i className="bi bi-exclamation-triangle-fill me-2"></i>
+      <strong>Warning:</strong> Themes are an experimental feature. Only
+      "Business casual" is fully supported at this time.
+    </div>
+    <Modal.Body className="p-0">
+      <div className="p-3">
+        <div className="row g-3">
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="system"
+            title="9 to 5"
+            description="Follows your OS theme"
+            style={{
+              background: "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
+              borderColor: "#adb5bd",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="light"
+            title="Business casual"
+            description="Clean & professional"
+            style={{
+              background: "linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%)",
+              borderColor: "#ced4da",
+              color: "#212529",
+              borderWidth: "2px",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="dark"
+            title="Business formal"
+            description="Premium & focused"
+            style={{
+              background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
+              borderColor: "#4ecdc4",
+              color: "#f8f9fa",
+              borderWidth: "2px",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="light-vibrant"
+            title="Office Party"
+            description="Colorful & fun"
+            style={{
+              background: "linear-gradient(135deg, #ff2d75 0%, #00e5ff 100%)",
+              borderColor: "#ffeb3b",
+              color: "#fff",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="dark-vibrant"
+            title="After Party"
+            description="Neon nightlife"
+            style={{
+              background: "linear-gradient(135deg, #16213e 0%, #e94560 100%)",
+              borderColor: "#00e5ff",
+              color: "#fff",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="sepia"
+            title="WFH"
+            description="Vintage warmth"
+            style={{
+              background: "linear-gradient(135deg, #f4ecd8 0%, #d0b88f 100%)",
+              borderColor: "#8b6b4a",
+              color: "#3a3226",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="light-grayscale"
+            title="Serious Business"
+            description="Simple & distraction-free"
+            style={{
+              background: "linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%)",
+              borderColor: "#666",
+              color: "#333",
+              borderWidth: "2px",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="dark-grayscale"
+            title="Very Serious business"
+            description="Maximum readability"
+            style={{
+              background: "linear-gradient(135deg, #111 0%, #333 100%)",
+              borderColor: "#ff6b6b",
+              color: "#e0e0e0",
+              borderWidth: "2px",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="daily"
+            title="Dreaming of PTO"
+            description="Sunrise, sunset"
+            style={{
+              background: "linear-gradient(135deg, #6eafff 0%, #f9fbf0 100%)",
+              borderColor: "#f7d62e",
+              color: "#00192d",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="protanopia"
+            title="Protanopia"
+            description="Red-blind mode"
+            style={{
+              background: "linear-gradient(135deg, #f8f9fa 0%, #e0e8ff 100%)",
+              borderColor: "#3366cc",
+              color: "#333",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="deuteranopia"
+            title="Deuteranopia"
+            description="Green-blind mode"
+            style={{
+              background: "linear-gradient(135deg, #f8f9fa 0%, #ffe0e0 100%)",
+              borderColor: "#cc6633",
+              color: "#333",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="tritanopia"
+            title="Tritanopia"
+            description="Blue-blind mode"
+            style={{
+              background: "linear-gradient(135deg, #f8f9fa 0%, #e0ffe0 100%)",
+              borderColor: "#00aa66",
+              color: "#333",
+            }}
+          />
+        </div>
+      </div>
+    </Modal.Body>
+  </>
+);

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

@@ -1,4 +1,4 @@
-import { assert, expect } from "chai";
+import { assert } from "chai";
 import { ITestImplementation } from "../../../CoreTypes";
 import { I, M, O } from "./types";
 
@@ -9,11 +9,80 @@ export const implementation: ITestImplementation<I, O, M> = {
 
   givens: {
     Default: () => ({
-      summary: {},
-      nodeLogs: null,
-      webLogs: null,
-      pureLogs: null,
-      config: { tests: [] },
+      summary: {
+        "test-suite-1": {
+          testsExist: true,
+          runTimeErrors: 0,
+          typeErrors: 2,
+          staticErrors: 1
+        },
+        "test-suite-2": {
+          testsExist: true,
+          runTimeErrors: 1,
+          typeErrors: 0,
+          staticErrors: 0
+        }
+      },
+      nodeLogs: {
+        errors: [],
+        warnings: [
+          {
+            text: "Unused variable",
+            location: { file: "src/file1.ts", line: 10 },
+            pluginName: "typescript"
+          }
+        ],
+        metafile: {
+          inputs: {
+            "src/file1.ts": { bytes: 1024 },
+            "src/file2.ts": { bytes: 2048 }
+          },
+          outputs: {
+            "dist/file1.js": { bytes: 1536, entryPoint: true },
+            "dist/file2.js": { bytes: 2560 }
+          }
+        }
+      },
+      webLogs: {
+        errors: [],
+        warnings: [],
+        metafile: {
+          inputs: {
+            "src/file1.ts": { bytes: 1024 },
+            "src/file2.ts": { bytes: 2048 }
+          },
+          outputs: {
+            "dist/file1.js": { bytes: 1536, entryPoint: true },
+            "dist/file2.js": { bytes: 2560 }
+          }
+        }
+      },
+      pureLogs: {
+        errors: [
+          {
+            text: "Syntax error",
+            location: { file: "src/file3.ts", line: 5 },
+            pluginName: "typescript"
+          }
+        ],
+        warnings: [],
+        metafile: {
+          inputs: {
+            "src/file3.ts": { bytes: 512 },
+            "src/file4.ts": { bytes: 768 }
+          },
+          outputs: {
+            "dist/file3.js": { bytes: 1024, entryPoint: true },
+            "dist/file4.js": { bytes: 1280 }
+          }
+        }
+      },
+      config: {
+        tests: [
+          ["test-suite-1", "node"],
+          ["test-suite-2", "web"]
+        ]
+      },
       loading: false,
       error: null,
       projectName: "test-project",
@@ -40,45 +109,75 @@ export const implementation: ITestImplementation<I, O, M> = {
   },
 
   thens: {
-    happyPath:
+    hasContainerFluid:
       () =>
-        async ({ container, html }, pm) => {
-          console.group('[Test] Verifying render output');
-          // debugger
-          const p = await pm.page();
-          await pm.customScreenShot({ path: "happyPath.png" }, p);
+        async ({ htmlElement }) => {
+          const container = htmlElement.querySelector('.container-fluid');
+          assert.exists(container, 'Should have container-fluid div');
+          return { htmlElement };
+        },
+
+    hasNavBar:
+      () =>
+        async ({ htmlElement }) => {
+          const navBar = htmlElement.querySelector('nav.navbar');
+          assert.exists(navBar, 'Should render NavBar component');
+          return { htmlElement };
+        },
+
+    hasNavBarTitle:
+      () =>
+        async ({ htmlElement }) => {
+          const navBarTitle = htmlElement.querySelector('nav.navbar .navbar-brand')?.textContent;
+          assert.isNotEmpty(navBarTitle, 'NavBar should have title');
+          return { htmlElement };
+        },
 
-          assert.equal(1, 1);
-          // try {
-          //   console.log('Checking for container-fluid');
-          //   const containerFluid = container.querySelector(".container-fluid");
-          //   expect(containerFluid).to.exist;
-          //   expect(containerFluid?.children.length).to.be.greaterThan(0);
+    hasTestTable:
+      () =>
+        async ({ htmlElement }) => {
+          const testTable = htmlElement.querySelector('table');
+          assert.exists(testTable, 'Should render test table');
+          return { htmlElement };
+        },
 
-          //   console.log('Checking for NavBar');
-          //   const navBar = container.querySelector("nav.navbar");
-          //   expect(navBar).to.exist;
+    rendersTestSuite1:
+      () =>
+        async ({ htmlElement }) => {
+          const testTable = htmlElement.querySelector('table');
+          const testNames = Array.from(testTable.querySelectorAll('tbody tr td:first-child'))
+            .map(el => el.textContent);
+          assert.include(testNames, 'test-suite-1', 'Should render test-suite-1');
+          return { htmlElement };
+        },
 
-          //   console.log('Render verification passed');
-          //   console.groupEnd();
-          //   return { container, html };
-          // } catch (err) {
-          //   console.error('Verification failed:', err);
-          //   console.error('Full HTML:', html);
-          //   console.groupEnd();
-          //   throw err;
-          // }
+    rendersTestSuite2:
+      () =>
+        async ({ htmlElement }) => {
+          const testTable = htmlElement.querySelector('table');
+          const testNames = Array.from(testTable.querySelectorAll('tbody tr td:first-child'))
+            .map(el => el.textContent);
+          assert.include(testNames, 'test-suite-2', 'Should render test-suite-2');
+          return { htmlElement };
         },
     unhappyPath:
       () =>
-        async ({ container }, pm) => {
-          // expect(container.textContent).contain("Test error message");
-          assert.equal(1, 1);
+        async ({ htmlElement }) => {
+          const errorAlert = htmlElement.querySelector('.alert-danger');
+          assert.exists(errorAlert, 'Should show error alert');
 
-          const p = await pm.page();
-          await pm.customScreenShot({ path: "unhappyPath.png" }, p);
+          const errorText = errorAlert?.textContent;
+          assert.include(errorText, 'Test error message', 'Should display error message');
 
-          return { container };
+          return { htmlElement };
+        },
+
+    takeScreenshot:
+      (name: string) =>
+        async ({ htmlElement }, pm) => {
+          const p = await pm.page();
+          await pm.customScreenShot({ path: name }, p);
+          return { htmlElement };
         },
   },
 };

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

@@ -0,0 +1,20 @@
+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";
+
+import appcss from "./../../../App.scss";
+
+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];
   }
 >;