testeranto 0.189.0 → 0.197.0

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

@@ -8,101 +8,124 @@ export const implementation: ITestImplementation<I, O, M> = {
   },
 
   givens: {
-    Default: () => ({
-      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 }
+    Default: () => {
+      // Create a container to mount the component
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      
+      return {
+        summary: {
+          "test-suite-1": {
+            testsExist: true,
+            runTimeErrors: 0,
+            typeErrors: 2,
+            staticErrors: 1
           },
-          outputs: {
-            "dist/file1.js": { bytes: 1536, entryPoint: true },
-            "dist/file2.js": { bytes: 2560 }
+          "test-suite-2": {
+            testsExist: true,
+            runTimeErrors: 1,
+            typeErrors: 0,
+            staticErrors: 0
           }
-        }
-      },
-      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 }
+        },
+        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 }
+            }
           }
-        }
-      },
-      pureLogs: {
-        errors: [
-          {
-            text: "Syntax error",
-            location: { file: "src/file3.ts", line: 5 },
-            pluginName: "typescript"
+        },
+        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 }
+            }
           }
-        ],
-        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 }
+        },
+        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",
-      route: "tests",
-      setRoute: () => { },
-      navigate: () => { },
-    }),
-    WithError: () => ({
-      summary: null,
-      nodeLogs: null,
-      webLogs: null,
-      pureLogs: null,
-      config: { tests: [] },
-      loading: false,
-      error: "Test error message",
-      projectName: "test-project",
-      route: "tests",
-      setRoute: () => { },
-      navigate: () => { },
-    }),
+        },
+        config: {
+          tests: [
+            ["test-suite-1", "node"],
+            ["test-suite-2", "web"]
+          ]
+        },
+        loading: false,
+        error: null,
+        projectName: "test-project",
+        activeTab: "tests",
+        setActiveTab: () => { },
+        route: "tests",
+        setRoute: () => { },
+        navigate: () => { },
+        // Add the required properties for ISelection
+        htmlElement: container,
+        reactElement: null as any,
+        domRoot: null as any
+      };
+    },
+    WithError: () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      
+      return {
+        summary: null,
+        nodeLogs: null,
+        webLogs: null,
+        pureLogs: null,
+        config: { tests: [] },
+        loading: false,
+        error: "Test error message",
+        projectName: "test-project",
+        activeTab: "tests",
+        setActiveTab: () => { },
+        route: "tests",
+        setRoute: () => { },
+        navigate: () => { },
+        // Add the required properties for ISelection
+        htmlElement: container,
+        reactElement: null as any,
+        domRoot: null as any
+      };
+    },
   },
   whens: {
 
@@ -111,73 +134,80 @@ export const implementation: ITestImplementation<I, O, M> = {
   thens: {
     hasContainerFluid:
       () =>
-        async ({ htmlElement }) => {
+        (state) => {
+          const htmlElement = state.htmlElement;
           const container = htmlElement.querySelector('.container-fluid');
           assert.exists(container, 'Should have container-fluid div');
-          return { htmlElement };
+          return state;
         },
 
     hasNavBar:
       () =>
-        async ({ htmlElement }) => {
+        (state) => {
+          const htmlElement = state.htmlElement;
           const navBar = htmlElement.querySelector('nav.navbar');
           assert.exists(navBar, 'Should render NavBar component');
-          return { htmlElement };
+          return state;
         },
 
     hasNavBarTitle:
       () =>
-        async ({ htmlElement }) => {
+        (state) => {
+          const htmlElement = state.htmlElement;
           const navBarTitle = htmlElement.querySelector('nav.navbar .navbar-brand')?.textContent;
           assert.isNotEmpty(navBarTitle, 'NavBar should have title');
-          return { htmlElement };
+          return state;
         },
 
     hasTestTable:
       () =>
-        async ({ htmlElement }) => {
+        (state) => {
+          const htmlElement = state.htmlElement;
           const testTable = htmlElement.querySelector('table');
           assert.exists(testTable, 'Should render test table');
-          return { htmlElement };
+          return state;
         },
 
     rendersTestSuite1:
       () =>
-        async ({ htmlElement }) => {
+        (state) => {
+          const htmlElement = state.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 };
+          return state;
         },
 
     rendersTestSuite2:
       () =>
-        async ({ htmlElement }) => {
+        (state) => {
+          const htmlElement = state.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 };
+          return state;
         },
     unhappyPath:
       () =>
-        async ({ htmlElement }) => {
+        (state) => {
+          const htmlElement = state.htmlElement;
           const errorAlert = htmlElement.querySelector('.alert-danger');
           assert.exists(errorAlert, 'Should show error alert');
 
           const errorText = errorAlert?.textContent;
           assert.include(errorText, 'Test error message', 'Should display error message');
 
-          return { htmlElement };
+          return state;
         },
 
     takeScreenshot:
       (name: string) =>
-        async ({ htmlElement }, pm) => {
+        async (state, pm) => {
           const p = await pm.page();
           await pm.customScreenShot({ path: name }, p);
-          return { htmlElement };
+          return state;
         },
   },
 };

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

@@ -5,8 +5,6 @@ import { specification } from "./specification";
 import { ProjectPageView } from "../ProjectPageView";
 import React from "react";
 
-import appcss from "./../../../App.scss";
-
 const WrappedProjectPageView = (props) => (
   <MemoryRouter>
     <ProjectPageView {...props}> </ProjectPageView>

package/src/components/pure/ProjectsPageView.tsx

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

package/src/components/pure/SettingsButton.tsx

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