testeranto 0.173.0 → 0.189.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,29 @@
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { SettingsButton } from './SettingsButton';
+
+type AppFrameProps = {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  'data-testid'?: string;
+};
+
+export const AppFrame = ({ children }: AppFrameProps) => {
+  return (
+    <div className="d-flex flex-column min-vh-100" key={window.location.pathname}>
+
+      <main className="flex-grow-1 p-3">
+        <Container fluid>
+          {children}
+        </Container>
+      </main>
+      <footer className="bg-light py-2 d-flex justify-content-between align-items-center">
+        <SettingsButton />
+        <Container className="text-end" fluid={true}>
+          made with ❤️ and <a href="https://www.npmjs.com/package/testeranto">testeranto</a>
+        </Container>
+      </footer>
+    </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,43 @@
+import { assert } from "chai";
+import { ITestImplementation } from "../../../CoreTypes";
+import { I, M, O } from "./types";
+
+export const implementation: ITestImplementation<I, O, M> = {
+  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: string) =>
+        async ({ htmlElement }, pm) => {
+          const p = await pm.page();
+          await pm.customScreenShot({ path: name }, p);
+          return { htmlElement };
+        },
+  },
+};

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

@@ -0,0 +1,15 @@
+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) => (
+  <ModalContent {...props} />
+);
+
+export default Testeranto(
+  implementation,
+  specification,
+  WrappedModalContent
+);

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

@@ -0,0 +1,27 @@
+import { ITestSpecification } from "../../../CoreTypes";
+import { I, O } from "./types";
+
+export const specification: ITestSpecification<I, O> = (
+  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/src/components/pure/ModalContent.test/types.ts

@@ -0,0 +1,72 @@
+/* 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 { IModalContentProps } from "../ModalContent";
+
+export type IInput = IModalContentProps;
+
+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,
+  {
+    hasModalHeader: () => (s: IStore) => IStore;
+    hasThemeCards: () => (s: IStore) => IStore;
+    takeScreenshot: (name: string) => (s: IStore, pm: any) => Promise<IStore>;
+  }
+>;
+
+export type O = Ibdd_out<
+  {
+    Default: [string];
+  },
+  {
+    Default: [];
+  },
+  {},
+  {
+    hasModalHeader: [];
+    hasThemeCards: [];
+    takeScreenshot: [string];
+  }
+>;
+
+export type M = {
+  givens: {
+    [K in keyof O["givens"]]: (...args: any[]) => IModalContentProps;
+  };
+  whens: {
+    [K in keyof O["whens"]]: (
+      ...args: any[]
+    ) => (
+      props: IModalContentProps,
+      utils: any
+    ) => IModalContentProps & { container?: HTMLElement };
+  };
+  thens: {
+    [K in keyof O["thens"]]: (
+      ...args: any[]
+    ) => (
+      state: IModalContentProps & { container?: HTMLElement }
+    ) => IModalContentProps & { container?: HTMLElement };
+  };
+};