testeranto 0.173.0 → 0.189.0

package/dist/module/src/components/pure/ModalContent.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { Modal } from "react-bootstrap";
+import { ThemeCard } from "./ThemeCard";
+import "../../App.scss";
+export const ModalContent = ({ theme, handleThemeChange, }) => (React.createElement(React.Fragment, null,
+    React.createElement(Modal.Header, { closeButton: true, className: "border-0" },
+        React.createElement(Modal.Title, { className: "d-flex align-items-center" },
+            React.createElement("i", { className: "bi bi-palette-fill me-2" }),
+            React.createElement("span", null, "Settings"))),
+    React.createElement("div", { className: "alert alert-warning mx-3 mt-2 mb-0" },
+        React.createElement("i", { className: "bi bi-exclamation-triangle-fill me-2" }),
+        React.createElement("strong", null, "Warning:"),
+        " Themes are an experimental feature. Only \"Business casual\" is fully supported at this time."),
+    React.createElement(Modal.Body, { className: "p-0" },
+        React.createElement("div", { className: "p-3" },
+            React.createElement("div", { className: "row g-3" },
+                React.createElement(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",
+                    } }),
+                React.createElement(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",
+                    } }),
+                React.createElement(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",
+                    } }),
+                React.createElement(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",
+                    } }),
+                React.createElement(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",
+                    } }),
+                React.createElement(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",
+                    } }),
+                React.createElement(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",
+                    } }),
+                React.createElement(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",
+                    } }),
+                React.createElement(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",
+                    } }),
+                React.createElement(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",
+                    } }),
+                React.createElement(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",
+                    } }),
+                React.createElement(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",
+                    } }))))));

package/dist/module/src/components/pure/ModalContent.test/implementation.js

@@ -0,0 +1,30 @@
+import { assert } from "chai";
+export const implementation = {
+    suites: {
+        Default: "Modal Content Tests",
+    },
+    givens: {
+        Default: () => ({
+            theme: "light",
+            handleThemeChange: () => { },
+        }),
+    },
+    whens: {},
+    thens: {
+        hasModalHeader: () => async ({ htmlElement }) => {
+            const header = htmlElement.querySelector('.modal-header');
+            assert.exists(header, 'Should have Modal.Header');
+            return { htmlElement };
+        },
+        hasThemeCards: () => async ({ htmlElement }) => {
+            const themeCards = htmlElement.querySelectorAll('.theme-card');
+            assert.isAtLeast(themeCards.length, 1, 'Should render ThemeCard components');
+            return { htmlElement };
+        },
+        takeScreenshot: (name) => async ({ htmlElement }, pm) => {
+            const p = await pm.page();
+            await pm.customScreenShot({ path: name }, p);
+            return { htmlElement };
+        },
+    },
+};

package/dist/module/src/components/pure/ModalContent.test/index.js

@@ -0,0 +1,7 @@
+import Testeranto from "testeranto-react/src/react-dom/component/web";
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { ModalContent } from "../ModalContent";
+import React from "react";
+const WrappedModalContent = (props) => (React.createElement(ModalContent, Object.assign({}, props)));
+export default Testeranto(implementation, specification, WrappedModalContent);

package/dist/module/src/components/pure/ModalContent.test/specification.js

@@ -0,0 +1,15 @@
+export const specification = (Suite, Given, When, Then) => {
+    return [
+        Suite.Default("ModalContent Component Tests", {
+            basicRender: Given.Default([
+                "ModalContent should render",
+                "It should contain a Modal.Header",
+                "It should render the ThemeCard components",
+            ], [], [
+                Then.hasModalHeader(),
+                Then.hasThemeCards(),
+                Then.takeScreenshot("modal-content.png"),
+            ]),
+        }),
+    ];
+};

package/dist/module/src/components/pure/ModalContent.test/types.js

@@ -0,0 +1,3 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export {};

package/dist/module/src/components/pure/ProjectPageView.js

@@ -1,8 +1,9 @@
 /* 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 }) => {
     var _a, _b, _c, _d, _e, _f;
     if (!logs)
@@ -76,9 +77,7 @@ const BuildLogViewer = ({ logs, runtime }) => {
                                         ((_b = warn.location) === null || _b === void 0 ? void 0 : _b.line) && `:${warn.location.line}`),
                                     React.createElement("small", { className: "text-muted" }, warn.pluginName ? `[${warn.pluginName}]` : '')),
                                 React.createElement("div", { className: "mt-1" },
-                                    React.createElement("pre", { className: "mb-0 p-2 bg-light rounded" }, warn.text || warn.message || JSON.stringify(warn))),
-                                warn.detail && (React.createElement("div", { className: "mt-1 small text-muted" },
-                                    React.createElement("pre", { className: "mb-0 p-2 bg-light rounded" }, warn.detail)))));
+                                    React.createElement("pre", { className: "mb-0 p-2 bg-light rounded" }, JSON.stringify(warn)))));
                         }))))) : (React.createElement(Alert, { variant: "info" }, "No warnings found"))),
                 React.createElement(Tab.Pane, { eventKey: "errors" }, hasErrors ? (React.createElement(Card, { className: "border-danger" },
                     React.createElement(Card.Header, { className: "bg-danger text-white d-flex justify-content-between align-items-center" },
@@ -97,15 +96,13 @@ const BuildLogViewer = ({ logs, runtime }) => {
                                         ((_b = err.location) === null || _b === void 0 ? void 0 : _b.line) && `:${err.location.line}`),
                                     React.createElement("small", { className: "text-muted" }, err.pluginName ? `[${err.pluginName}]` : '')),
                                 React.createElement("div", { className: "mt-1" },
-                                    React.createElement("pre", { className: "mb-0 p-2 bg-light rounded" }, err.text || err.message || JSON.stringify(err))),
-                                err.detail && (React.createElement("div", { className: "mt-1 small text-muted" },
-                                    React.createElement("pre", { className: "mb-0 p-2 bg-light rounded" }, err.detail)))));
+                                    React.createElement("pre", { className: "mb-0 p-2 bg-light rounded" }, JSON.stringify(err)))));
                         }))))) : (React.createElement(Alert, { variant: "success" },
                     React.createElement("h5", null, "No Errors Found"),
                     React.createElement("p", { className: "mb-0" }, "The build completed without any errors."))))))));
 };
-export const ProjectPageView = ({ summary, nodeLogs, webLogs, pureLogs, config, loading, error, projectName, route, setRoute, navigate }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+export const ProjectPageView = ({ summary, nodeLogs, webLogs, pureLogs, config, loading, error, projectName, activeTab, setActiveTab }) => {
+    var _a, _b, _c, _d, _e, _f;
     if (loading)
         return React.createElement("div", null, "Loading project data...");
     if (error)
@@ -127,71 +124,51 @@ export const ProjectPageView = ({ summary, nodeLogs, webLogs, pureLogs, config,
         };
     });
     return (React.createElement(Container, { fluid: true },
-        React.createElement(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: ((_a = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.errors) === null || _a === void 0 ? void 0 : _a.length) ? '❌ Node Build' :
-                        ((_b = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.warnings) === null || _b === void 0 ? void 0 : _b.length) ? '⚠️ Node Build' : 'Node Build',
-                    active: route === 'node',
-                    className: ((_c = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.errors) === null || _c === void 0 ? void 0 : _c.length) ? 'text-danger fw-bold' :
-                        ((_d = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.warnings) === null || _d === void 0 ? void 0 : _d.length) ? 'text-warning fw-bold' : ''
-                },
-                {
-                    to: `#web`,
-                    label: ((_e = webLogs === null || webLogs === void 0 ? void 0 : webLogs.errors) === null || _e === void 0 ? void 0 : _e.length) ? '❌ Web Build' :
-                        ((_f = webLogs === null || webLogs === void 0 ? void 0 : webLogs.warnings) === null || _f === void 0 ? void 0 : _f.length) ? '⚠️ Web Build' : 'Web Build',
-                    active: route === 'web',
-                    className: ((_g = webLogs === null || webLogs === void 0 ? void 0 : webLogs.errors) === null || _g === void 0 ? void 0 : _g.length) ? 'text-danger fw-bold' :
-                        ((_h = webLogs === null || webLogs === void 0 ? void 0 : webLogs.warnings) === null || _h === void 0 ? void 0 : _h.length) ? 'text-warning fw-bold' : ''
-                },
-                {
-                    to: `#pure`,
-                    label: ((_j = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.errors) === null || _j === void 0 ? void 0 : _j.length) ? '❌ Pure Build' :
-                        ((_k = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.warnings) === null || _k === void 0 ? void 0 : _k.length) ? '⚠️ Pure Build' : 'Pure Build',
-                    active: route === 'pure',
-                    className: ((_l = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.errors) === null || _l === void 0 ? void 0 : _l.length) ? 'text-danger fw-bold' :
-                        ((_m = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.warnings) === null || _m === void 0 ? void 0 : _m.length) ? 'text-warning fw-bold' : ''
-                },
-            ] }),
-        React.createElement(Tab.Container, { activeKey: route, onSelect: (k) => {
-                if (k) {
-                    setRoute(k);
-                    navigate(`#${k}`, { replace: true });
-                }
-            } },
-            React.createElement(Tab.Content, null,
-                React.createElement(Tab.Pane, { eventKey: "tests" },
-                    React.createElement(Table, { striped: true, bordered: true, hover: true },
-                        React.createElement("thead", null,
-                            React.createElement("tr", null,
-                                React.createElement("th", null, "Test"),
-                                React.createElement("th", null, "Runtime"),
-                                React.createElement("th", null, "Status"),
-                                React.createElement("th", null, "Type Errors"),
-                                React.createElement("th", null, "Lint Errors"))),
-                        React.createElement("tbody", null, testStatuses.map((test) => (React.createElement("tr", { key: test.testName },
-                            React.createElement("td", null,
-                                React.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}` }, test.testName)),
-                            React.createElement("td", null,
-                                React.createElement(Badge, { bg: "secondary", className: "ms-2" }, test.runTime)),
-                            React.createElement("td", null,
-                                React.createElement(TestStatusBadge, { testName: test.testName, testsExist: test.testsExist, runTimeErrors: test.runTimeErrors })),
-                            React.createElement("td", null,
-                                React.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#types` }, test.typeErrors > 0 ? `❌ ${test.typeErrors}` : '✅')),
-                            React.createElement("td", null,
-                                React.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#lint` }, test.staticErrors > 0 ? `❌ ${test.staticErrors}` : '✅')))))))),
-                React.createElement(Tab.Pane, { eventKey: "node" },
-                    React.createElement(BuildLogViewer, { logs: nodeLogs, runtime: "Node" })),
-                React.createElement(Tab.Pane, { eventKey: "web" },
-                    React.createElement(BuildLogViewer, { logs: webLogs, runtime: "Web" })),
-                React.createElement(Tab.Pane, { eventKey: "pure" },
-                    React.createElement(BuildLogViewer, { logs: pureLogs, runtime: "Pure" }))))));
+        React.createElement(NavBar, { title: projectName, backLink: "/" }),
+        React.createElement(Row, { className: "g-0" },
+            React.createElement(Col, { sm: 3, className: "border-end" },
+                React.createElement(Nav, { variant: "pills", className: "flex-column" },
+                    React.createElement(Nav.Item, null,
+                        React.createElement(Nav.Link, { active: activeTab === 'tests', onClick: () => setActiveTab('tests'), className: "d-flex flex-column align-items-start" },
+                            React.createElement("div", { className: "d-flex justify-content-between w-100" },
+                                React.createElement("span", null, "Tests"),
+                                testStatuses.some(t => t.runTimeErrors > 0) ? (React.createElement(Badge, { bg: "danger" }, "\u274C")) : testStatuses.some(t => t.typeErrors > 0 || t.staticErrors > 0) ? (React.createElement(Badge, { bg: "warning", text: "dark" }, "\u26A0\uFE0F")) : (React.createElement(Badge, { bg: "success" }, "\u2713"))))),
+                    React.createElement(Nav.Item, null,
+                        React.createElement(Nav.Link, { active: activeTab === 'node', onClick: () => setActiveTab('node'), className: "d-flex justify-content-between align-items-center" },
+                            "Node build logs",
+                            ((_a = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.errors) === null || _a === void 0 ? void 0 : _a.length) ? (React.createElement(Badge, { bg: "danger" },
+                                "\u274C ",
+                                nodeLogs.errors.length)) : ((_b = nodeLogs === null || nodeLogs === void 0 ? void 0 : nodeLogs.warnings) === null || _b === void 0 ? void 0 : _b.length) ? (React.createElement(Badge, { bg: "warning", text: "dark" }, "\u26A0\uFE0F")) : null)),
+                    React.createElement(Nav.Item, null,
+                        React.createElement(Nav.Link, { active: activeTab === 'web', onClick: () => setActiveTab('web'), className: "d-flex justify-content-between align-items-center" },
+                            "Web build logs",
+                            ((_c = webLogs === null || webLogs === void 0 ? void 0 : webLogs.errors) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(Badge, { bg: "danger" },
+                                "\u274C ",
+                                webLogs.errors.length)) : ((_d = webLogs === null || webLogs === void 0 ? void 0 : webLogs.warnings) === null || _d === void 0 ? void 0 : _d.length) ? (React.createElement(Badge, { bg: "warning", text: "dark" }, "\u26A0\uFE0F")) : null)),
+                    React.createElement(Nav.Item, null,
+                        React.createElement(Nav.Link, { active: activeTab === 'pure', onClick: () => setActiveTab('pure'), className: "d-flex justify-content-between align-items-center" },
+                            "Pure build logs",
+                            ((_e = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.errors) === null || _e === void 0 ? void 0 : _e.length) ? (React.createElement(Badge, { bg: "danger" },
+                                "\u274C ",
+                                pureLogs.errors.length)) : ((_f = pureLogs === null || pureLogs === void 0 ? void 0 : pureLogs.warnings) === null || _f === void 0 ? void 0 : _f.length) ? (React.createElement(Badge, { bg: "warning", text: "dark" }, "\u26A0\uFE0F")) : null)))),
+            React.createElement(Col, { sm: 9 },
+                React.createElement("div", { className: "p-3" }, activeTab === 'tests' ? (React.createElement(Table, { striped: true, bordered: true, hover: true },
+                    React.createElement("thead", null,
+                        React.createElement("tr", null,
+                            React.createElement("th", null, "Test"),
+                            React.createElement("th", null, "Runtime"),
+                            React.createElement("th", null, "Status"),
+                            React.createElement("th", null, "Type Errors"),
+                            React.createElement("th", null, "Lint Errors"))),
+                    React.createElement("tbody", null, testStatuses.map((test) => (React.createElement("tr", { key: test.testName, "data-testid": `test-row-${test.testName}` },
+                        React.createElement("td", null,
+                            React.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}` }, test.testName)),
+                        React.createElement("td", null,
+                            React.createElement(Badge, { bg: "secondary", className: "ms-2" }, test.runTime)),
+                        React.createElement("td", null,
+                            React.createElement(TestStatusBadge, { testName: test.testName, testsExist: test.testsExist, runTimeErrors: test.runTimeErrors, typeErrors: test.typeErrors, staticErrors: test.staticErrors })),
+                        React.createElement("td", null,
+                            React.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#types` }, test.typeErrors > 0 ? `❌ ${test.typeErrors}` : '✅')),
+                        React.createElement("td", null,
+                            React.createElement("a", { href: `#/projects/${projectName}/tests/${encodeURIComponent(test.testName)}/${test.runTime}#lint` }, test.staticErrors > 0 ? `❌ ${test.staticErrors}` : '✅')))))))) : activeTab === 'node' ? (React.createElement(BuildLogViewer, { logs: nodeLogs, runtime: "Node" })) : activeTab === 'web' ? (React.createElement(BuildLogViewer, { logs: webLogs, runtime: "Web" })) : activeTab === 'pure' ? (React.createElement(BuildLogViewer, { logs: pureLogs, runtime: "Pure" })) : null)))));
 };

package/dist/module/src/components/pure/ProjectPageView.test/implementation.js

@@ -5,11 +5,80 @@ export const implementation = {
     },
     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",
@@ -33,36 +102,52 @@ export const implementation = {
     },
     whens: {},
     thens: {
-        happyPath: () => async ({ container, html }, pm) => {
-            console.group('[Test] Verifying render output');
-            // debugger
-            const p = await pm.page();
-            await pm.customScreenShot({ path: "happyPath.png" }, p);
-            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);
-            //   console.log('Checking for NavBar');
-            //   const navBar = container.querySelector("nav.navbar");
-            //   expect(navBar).to.exist;
-            //   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;
-            // }
+        hasContainerFluid: () => 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 }) => {
+            var _a;
+            const navBarTitle = (_a = htmlElement.querySelector('nav.navbar .navbar-brand')) === null || _a === void 0 ? void 0 : _a.textContent;
+            assert.isNotEmpty(navBarTitle, 'NavBar should have title');
+            return { htmlElement };
+        },
+        hasTestTable: () => async ({ htmlElement }) => {
+            const testTable = htmlElement.querySelector('table');
+            assert.exists(testTable, 'Should render test table');
+            return { htmlElement };
+        },
+        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 };
+        },
+        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 ({ htmlElement }) => {
+            const errorAlert = htmlElement.querySelector('.alert-danger');
+            assert.exists(errorAlert, 'Should show error alert');
+            const errorText = errorAlert === null || errorAlert === void 0 ? void 0 : errorAlert.textContent;
+            assert.include(errorText, 'Test error message', 'Should display error message');
+            return { htmlElement };
         },
-        unhappyPath: () => async ({ container }, pm) => {
-            // expect(container.textContent).contain("Test error message");
-            assert.equal(1, 1);
+        takeScreenshot: (name) => async ({ htmlElement }, pm) => {
             const p = await pm.page();
-            await pm.customScreenShot({ path: "unhappyPath.png" }, p);
-            return { container };
+            await pm.customScreenShot({ path: name }, p);
+            return { htmlElement };
         },
     },
 };

package/dist/module/src/components/pure/ProjectPageView.test/index.js

@@ -1,5 +1,9 @@
 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";
-export default Testeranto(implementation, specification, ProjectPageView);
+import React from "react";
+const WrappedProjectPageView = (props) => (React.createElement(MemoryRouter, null,
+    React.createElement(ProjectPageView, Object.assign({}, props), " ")));
+export default Testeranto(implementation, specification, WrappedProjectPageView);

package/dist/module/src/components/pure/ProjectPageView.test/specification.js

@@ -5,11 +5,24 @@ export const specification = (Suite, Given, When, Then) => {
                 "ProjectPageView should render",
                 "It should contain a container-fluid div",
                 "It should render the NavBar component",
-            ], [], [Then.happyPath()]),
+                "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.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",
-            ], [], [Then.unhappyPath()]),
+                "It should capture screenshots of error state",
+            ], [], [Then.unhappyPath(), Then.takeScreenshot("error-state.png")]),
         }),
     ];
 };

package/dist/module/src/components/pure/ProjectPageView.test/types.js

@@ -1 +1,3 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export {};

package/dist/module/src/components/pure/ProjectsPageView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table, Alert } from 'react-bootstrap';
-import { NavBar } from '../../NavBar';
+import { NavBar } from './NavBar';
 export const ProjectsPageView = ({ projects, summaries, configs, loading, error, navigate }) => {
     const getStatusIcon = (status) => {
         switch (status) {
@@ -17,7 +17,7 @@ export const ProjectsPageView = ({ projects, summaries, configs, loading, error,
             "Error: ",
             error);
     return (React.createElement("div", { className: "p-3" },
-        React.createElement(NavBar, { title: "Testeranto", backLink: null }),
+        React.createElement(NavBar, { title: "Testeranto", backLink: undefined }),
         React.createElement(Table, { striped: true, bordered: true, hover: true, responsive: true },
             React.createElement("thead", null,
                 React.createElement("tr", null,
@@ -34,14 +34,15 @@ export const ProjectsPageView = ({ projects, summaries, configs, loading, error,
                         } }, project.name)),
                 React.createElement("td", null,
                     React.createElement("div", { style: { maxHeight: '200px', overflowY: 'auto' } }, summaries[project.name] ? (Object.keys(summaries[project.name]).map(testName => {
+                        var _a, _b, _c;
                         const testData = summaries[project.name][testName];
-                        const runTime = configs[project.name].tests.find((t) => t[0] === testName)[1];
+                        const runTime = ((_c = (_b = (_a = configs[project.name]) === null || _a === void 0 ? void 0 : _a.tests) === null || _b === void 0 ? void 0 : _b.find((t) => t[0] === testName)) === null || _c === void 0 ? void 0 : _c[1]) || 'node';
                         const hasRuntimeErrors = testData.runTimeErrors > 0;
                         const hasStaticErrors = testData.typeErrors > 0 || testData.staticErrors > 0;
                         return (React.createElement("div", { key: testName },
                             React.createElement("a", { href: `#/projects/${project.name}/tests/${encodeURIComponent(testName)}/${runTime}` },
                                 hasRuntimeErrors ? '❌ ' : hasStaticErrors ? '⚠️ ' : '',
-                                testName.split('/').pop())));
+                                testName.split('/').pop() || testName)));
                     })) : (React.createElement("div", null, "Loading tests...")))),
                 React.createElement("td", null,
                     React.createElement("a", { href: `#/projects/${project.name}#node` },

package/dist/module/src/components/pure/SettingsButton.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from "react";
+import { Button, Modal } from "react-bootstrap";
+import { ModalContent } from "./ModalContent";
+import SunriseAnimation from "../SunriseAnimation";
+export const SettingsButton = ({ className }) => {
+    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) => {
+        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 (React.createElement(React.Fragment, null,
+        React.createElement("div", { id: "settings-button" },
+            React.createElement("button", { className: `btn btn-sm btn-outline-secondary ${className}`, onClick: () => setShowModal(true) },
+                React.createElement("div", { id: "gear-icon-settings" }, "\u2699\uFE0F"))),
+        React.createElement(SunriseAnimation, { active: theme === 'daily' }),
+        React.createElement(Modal, { show: showModal, onHide: () => setShowModal(false), size: "lg" },
+            React.createElement(ModalContent, { theme: theme, handleThemeChange: handleThemeChange }),
+            React.createElement(Modal.Footer, { className: "border-0" },
+                React.createElement(Button, { variant: "btn-primary", onClick: () => setShowModal(false) }, "Done")))));
+};