testeranto 0.177.0 → 0.197.0

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

@@ -0,0 +1,72 @@
+import { assert } from "chai";
+import React from "react";
+
+import { ITestImplementation } from "../../../CoreTypes";
+
+import { I, ISelection, O } from "./types";
+
+export const implementation: ITestImplementation<I, O> = {
+  suites: {
+    Default: "AppFrame basic rendering",
+    Layout: "AppFrame layout structure",
+  },
+
+  givens: {
+    Default: () => (selection: ISelection) => ({
+      ...selection,
+      children: <div>Test Content</div>,
+    }),
+    WithChildren: (children: React.ReactNode) => () => (selection: ISelection) => ({
+      ...selection,
+      children,
+    }),
+  },
+
+  whens: {},
+
+  thens: {
+    takeScreenshot:
+      (name: string) =>
+        async ({ htmlElement, container }, pm) => {
+          if (!container) throw new Error('Container not found');
+          const p = await pm.page();
+          await pm.customScreenShot({ path: `${name}.png` }, p);
+          return {
+            htmlElement,
+            reactElement: React.createElement('div'),
+            domRoot: container,
+            container
+          };
+        },
+    RendersContainer: () => async ({ htmlElement, container }) => {
+      // const container = htmlElement.querySelector('.min-vh-100');
+      assert.exists(container, 'Should have min-vh-100 container');
+      return {
+        htmlElement,
+        reactElement: React.createElement('div'),
+        domRoot: container as HTMLElement,
+        container: container as HTMLElement
+      };
+    },
+    HasMainContent: () => async ({ htmlElement }) => {
+      const main = htmlElement.querySelector('main.flex-grow-1');
+      assert.exists(main, 'Should have main content area');
+      return { htmlElement };
+    },
+    HasFooter: () => async ({ htmlElement }) => {
+      const footer = htmlElement.querySelector('footer');
+      assert.exists(footer, 'Should have footer');
+      return { htmlElement };
+    },
+    HasSettingsButton: () => async ({ htmlElement }) => {
+      const button = htmlElement.querySelector('footer button');
+      assert.exists(button, 'Should have settings button in footer');
+      return { htmlElement };
+    },
+    HasTesterantoLink: () => async ({ htmlElement }) => {
+      const link = htmlElement.querySelector('footer a[href*="testeranto"]');
+      assert.exists(link, 'Should have testeranto link in footer');
+      return { htmlElement };
+    },
+  },
+};

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

@@ -0,0 +1,22 @@
+import React from "react";
+
+import Testeranto from "testeranto-react/src/react-dom/component/web";
+
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { AppFrame } from "../AppFrame";
+
+
+import "../../../App.scss";
+
+const WrappedAppFrame: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <div id="test-root">
+    <AppFrame data-testid="app-frame">{children}</AppFrame>
+  </div>
+);
+
+export default Testeranto(
+  implementation,
+  specification,
+  WrappedAppFrame
+);

package/src/components/pure/AppFrame.test/specification.ts

@@ -0,0 +1,35 @@
+import { ITestSpecification } from "../../../CoreTypes";
+
+import { I, O } from "./types";
+
+export const specification: ITestSpecification<I, O> = (
+  Suite,
+  Given,
+  When,
+  Then
+) => {
+  return [
+    Suite.Default("AppFrame basic rendering", {
+      "renders container": Given.Default([], [], [Then.RendersContainer()]),
+      "has main content area": Given.Default([], [], [Then.HasMainContent()]),
+      has_footer: Given.Default(
+        [], 
+        [],
+        [Then.HasFooter(), Then.takeScreenshot("hello.png")]
+      ),
+    }),
+
+    // Suite.Layout("AppFrame layout structure", {
+    //   "contains settings button": Given.Default(
+    //     [],
+    //     [],
+    //     [Then.HasSettingsButton()]
+    //   ),
+    //   "contains testeranto link": Given.Default(
+    //     [],
+    //     [],
+    //     [Then.HasTesterantoLink(), Then.takeScreenshot("hello.png")]
+    //   ),
+    // }),
+  ];
+};

package/src/components/pure/AppFrame.test/types.ts

@@ -0,0 +1,65 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+
+import * as React from "react";
+import * as ReactDom from "react-dom/client";
+
+import { Ibdd_in, Ibdd_out } from "../../../CoreTypes";
+
+export type IInput = {
+  children: React.ReactNode;
+};
+
+export type ISelection = {
+  htmlElement: HTMLElement;
+  reactElement: React.ReactElement;
+  domRoot: HTMLElement | null;
+  container?: HTMLElement;
+  testId?: string;
+};
+
+export type IStore = ISelection;
+
+export type ISubject = {
+  htmlElement: HTMLElement;
+  domRoot: ReactDom.Root;
+};
+
+export type O = Ibdd_out<
+  {
+    Default: [string];
+    Layout: [string];
+  },
+  {
+    Default: [];
+    WithChildren: [React.ReactNode];
+  },
+  {},
+  {
+    RendersContainer: [];
+    HasMainContent: [];
+    HasFooter: [];
+    HasSettingsButton: [];
+    HasTesterantoLink: [];
+    takeScreenshot: [string];
+  }
+>;
+
+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: IPM) => Promise<IStore>;
+  // }
+>;

package/src/components/pure/AppFrame.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState } from 'react';
+import { Container, Nav } from 'react-bootstrap';
+import { NavLink } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+
+type AppFrameProps = {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  'data-testid'?: string;
+  title?: string;
+  rightContent?: React.ReactNode;
+};
+
+export const AppFrame = ({ children, title, rightContent }: AppFrameProps) => {
+  const location = useLocation();
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  return (
+    <div className="d-flex min-vh-100" style={{ backgroundColor: '#f8f9fa' }}>
+      {/* Sidebar */}
+      <div
+        className="bg-light border-end d-flex flex-column"
+        style={{
+          width: isExpanded ? '250px' : '60px',
+          minHeight: '100vh',
+          transition: 'width 0.3s ease'
+        }}
+        onMouseEnter={() => setIsExpanded(true)}
+        onMouseLeave={() => setIsExpanded(false)}
+      >
+        <div className="p-3 border-bottom d-flex align-items-center justify-content-center">
+          {isExpanded ? (
+            <img
+              src="/logo.svg"
+              alt="Testeranto Logo"
+              style={{ width: '128px', height: '128px' }}
+            />
+          ) : (
+            <img
+              src="/logo.svg"
+              alt="Testeranto Logo"
+              style={{ width: '40px', height: '40px' }}
+            />
+          )}
+        </div>
+        <Nav variant="pills" className="flex-column p-2 flex-grow-1">
+          <Nav.Link
+            as={NavLink}
+            to="/"
+            className={`${location.pathname === '/' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Projects"
+          >
+            <span className="me-2">📁</span>
+            {isExpanded && 'Projects'}
+          </Nav.Link>
+
+          {/* temporarily disabled */}
+          {/* <Nav.Link
+            as={NavLink}
+            to="/features-reporter"
+            className={`${location.pathname === '/features-reporter' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Features Reporter"
+          >
+            <span className="me-2">📊</span>
+            {isExpanded && 'Features Reporter'}
+          </Nav.Link>
+          <Nav.Link
+            as={NavLink}
+            to="/design-editor"
+            className={`${location.pathname === '/design-editor' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Design Editor"
+          >
+            <span className="me-2">🎨</span>
+            {isExpanded && 'Design Editor'}
+          </Nav.Link>
+          <Nav.Link
+            as={NavLink}
+            to="/text-editor"
+            className={`${location.pathname === '/text-editor' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Text Editor"
+          >
+            <span className="me-2">📝</span>
+            {isExpanded && 'Text Editor'}
+          </Nav.Link> */}
+
+          <Nav.Link
+            as={NavLink}
+            to="/processes"
+            className={`${location.pathname.startsWith('/processes') ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Process Manager"
+          >
+            <span className="me-2">📊</span>
+            {isExpanded && 'Process Manager'}
+          </Nav.Link>
+          <Nav.Link
+            as={NavLink}
+            to="/settings"
+            className={`${location.pathname === '/settings' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Settings"
+          >
+            <span className="me-2">⚙️</span>
+            {isExpanded && 'Settings'}
+          </Nav.Link>
+        </Nav>
+
+        <div className="p-3 border-top text-center mt-auto">
+          {isExpanded ? (
+            <small className="text-muted">
+              made with ❤️ and <a href="https://www.npmjs.com/package/testeranto">testeranto</a>
+            </small>
+          ) : (
+            <small className="text-muted">❤️</small>
+          )}
+        </div>
+      </div>
+
+      <div className="flex-grow-1 d-flex flex-column">
+        <main className="flex-grow-1 p-4" style={{ overflow: 'auto' }}>
+          <Container fluid className="h-100">
+            {children}
+          </Container>
+        </main>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,106 @@
+import { assert } from "chai";
+import { ITestImplementation } from "../../../CoreTypes";
+import { I, M, O } from "./types";
+import { TreeNode } from "../../../types/features";
+
+const mockTreeData: TreeNode[] = [
+  {
+    name: "project-1",
+    type: "project",
+    children: [
+      {
+        name: "src/file1.test.ts",
+        type: "file",
+        path: "src/file1.test.ts",
+        children: [
+          {
+            name: "test1",
+            type: "test",
+            status: "passed",
+            children: [
+              {
+                name: "given1",
+                type: "given",
+                status: "passed",
+                children: [
+                  {
+                    name: "then1",
+                    type: "then",
+                    status: "passed"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+];
+
+export const implementation: ITestImplementation<I, O, M> = {
+  suites: {
+    Default: "Features Reporter View Tests",
+  },
+
+  givens: {
+    Default: () => ({
+      treeData: mockTreeData
+    }),
+    WithEmptyData: () => ({
+      treeData: []
+    }),
+  },
+
+  whens: {},
+
+  thens: {
+    hasProjectNames: 
+      () =>
+        async ({ htmlElement }) => {
+          const projectNodes = htmlElement.querySelectorAll('.tree-node.project');
+          assert.isAtLeast(projectNodes.length, 1, 'Should show project names');
+          return { htmlElement };
+        },
+
+    hasFilePaths:
+      () =>
+        async ({ htmlElement }) => {
+          const fileNodes = htmlElement.querySelectorAll('.tree-node.file');
+          assert.isAtLeast(fileNodes.length, 1, 'Should show file paths');
+          return { htmlElement };
+        },
+
+    hasTestNames:
+      () =>
+        async ({ htmlElement }) => {
+          const testNodes = htmlElement.querySelectorAll('.tree-node.test');
+          assert.isAtLeast(testNodes.length, 1, 'Should show test names');
+          return { htmlElement };
+        },
+
+    hasStatusBadges:
+      () =>
+        async ({ htmlElement }) => {
+          const statusBadges = htmlElement.querySelectorAll('.status-badge');
+          assert.isAtLeast(statusBadges.length, 1, 'Should show status badges');
+          return { htmlElement };
+        },
+
+    showsEmptyMessage:
+      () =>
+        async ({ htmlElement }) => {
+          const emptyMessage = htmlElement.querySelector('.empty-message');
+          assert.exists(emptyMessage, 'Should show empty message');
+          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/FeaturesReporterView.test/index.tsx

@@ -0,0 +1,18 @@
+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 { FeaturesReporterView } from "../FeaturesReporterView";
+import React from "react";
+
+const WrappedFeaturesReporterView = (props) => (
+  <MemoryRouter>
+    <FeaturesReporterView {...props} />
+  </MemoryRouter>
+);
+
+export default Testeranto(
+  implementation,
+  specification,
+  WrappedFeaturesReporterView
+);

package/src/components/pure/FeaturesReporterView.test/specification.ts

@@ -0,0 +1,39 @@
+import { ITestSpecification } from "../../../CoreTypes";
+import { I, O } from "./types";
+
+export const specification: ITestSpecification<I, O> = (
+  Suite,
+  Given,
+  When,
+  Then
+) => {
+  return [
+    Suite.Default("FeaturesReporterView Component Tests", {
+      basicRender: Given.Default(
+        [
+          "FeaturesReporterView should render",
+          "It should show project names",
+          "It should show file paths",
+          "It should show test names",
+          "It should show test statuses"
+        ],
+        [],
+        [
+          Then.hasProjectNames(),
+          Then.hasFilePaths(),
+          Then.hasTestNames(),
+          Then.hasStatusBadges(),
+          Then.takeScreenshot("features-reporter.png")
+        ]
+      ),
+      emptyState: Given.WithEmptyData(
+        [
+          "FeaturesReporterView should handle empty state",
+          "It should show empty message when no projects exist"
+        ],
+        [],
+        [Then.showsEmptyMessage()]
+      ),
+    }),
+  ];
+};

package/src/components/pure/FeaturesReporterView.test/types.ts

@@ -0,0 +1,77 @@
+import ReactDom from "react-dom/client";
+import { Ibdd_in, Ibdd_out } from "../../../CoreTypes";
+import { TreeNode } from "../../../types/features";
+
+export type IInput = {
+  treeData: TreeNode[];
+};
+
+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,
+  {
+    hasProjectNames: () => (s: IStore) => IStore;
+    hasFilePaths: () => (s: IStore) => IStore;
+    hasTestNames: () => (s: IStore) => IStore;
+    hasStatusBadges: () => (s: IStore) => IStore;
+    showsEmptyMessage: () => (s: IStore) => IStore;
+    takeScreenshot: (name: string) => (s: IStore, pm: any) => Promise<IStore>;
+  }
+>;
+
+export type O = Ibdd_out<
+  {
+    Default: [string];
+  },
+  {
+    Default: [];
+    WithEmptyData: [];
+  },
+  {},
+  {
+    hasProjectNames: [];
+    hasFilePaths: [];
+    hasTestNames: [];
+    hasStatusBadges: [];
+    showsEmptyMessage: [];
+    takeScreenshot: [string];
+  }
+>;
+
+export type M = {
+  givens: {
+    [K in keyof O["givens"]]: (...args: any[]) => IInput;
+  };
+  whens: {
+    [K in keyof O["whens"]]: (
+      ...args: any[]
+    ) => (
+      props: IInput,
+      utils: any
+    ) => IInput & { container?: HTMLElement };
+  };
+  thens: {
+    [K in keyof O["thens"]]: (
+      ...args: any[]
+    ) => (
+      state: IInput & { container?: HTMLElement }
+    ) => IInput & { container?: HTMLElement };
+  };
+};

package/src/components/pure/FeaturesReporterView.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TreeNode } from '../../types/features';
+
+interface FeaturesReporterViewProps {
+  treeData: TreeNode[];
+}
+
+export const FeaturesReporterView: React.FC<FeaturesReporterViewProps> = ({ treeData }) => {
+  return (
+    <div className="features-reporter">
+      <h1>File Structure</h1>
+      <div className="tree-container">
+        {treeData.map(project => (
+          <div key={project.name} className="project">
+            <h3>{project.name}</h3>
+            <ul className="file-tree">
+              {project.children?.map(file => renderFile(file))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+function renderFile(node: TreeNode): React.ReactNode {
+  return (
+    <li key={node.name}>
+      <span>{node.name}</span>
+      {node.children && (
+        <ul>
+          {node.children.map(child => renderFile(child))}
+        </ul>
+      )}
+    </li>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { assert } from "chai";
+import { ITestImplementation } from "../../../CoreTypes";
+import { I, M, O } from "./types";
+import { IModalContentProps } from "../ModalContent";
+import { IPM } from "../../../lib/types";
+
+export const implementation: ITestImplementation<I, O, M> = {
+  suites: {
+    Default: "Modal Content Tests",
+  },
+
+  givens: {
+    Default: (): IModalContentProps => ({
+      theme: "light",
+      handleThemeChange: () => {},
+    }),
+  },
+  whens: {},
+
+  thens: {
+    hasModalHeader:
+      () =>
+        (state) => {
+          const header = state.htmlElement?.querySelector('.modal-header');
+          assert.exists(header, 'Should have Modal.Header');
+          return state;
+        },
+
+    hasThemeCards:
+      () =>
+        (state) => {
+          const themeCards = state.htmlElement?.querySelectorAll('.theme-card');
+          assert.isAtLeast(themeCards?.length, 1, 'Should render ThemeCard components');
+          return state;
+        },
+
+    takeScreenshot:
+      (name: string) =>
+        async (state, pm: IPM) => {
+          // For web tests, we can use the PM's screenshot capability
+          // The actual implementation will be handled by the test runner
+          return state;
+        },
+  },
+};