testeranto 0.202.0 → 0.205.0

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

@@ -1,213 +0,0 @@
-import { assert } from "chai";
-import { ITestImplementation } from "../../../CoreTypes";
-import { I, M, O } from "./types";
-
-export const implementation: ITestImplementation<I, O, M> = {
-  suites: {
-    Default: "Project Page View Tests",
-  },
-
-  givens: {
-    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
-          },
-          "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",
-        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: {
-
-  },
-
-  thens: {
-    hasContainerFluid:
-      () =>
-        (state) => {
-          const htmlElement = state.htmlElement;
-          const container = htmlElement.querySelector('.container-fluid');
-          assert.exists(container, 'Should have container-fluid div');
-          return state;
-        },
-
-    hasNavBar:
-      () =>
-        (state) => {
-          const htmlElement = state.htmlElement;
-          const navBar = htmlElement.querySelector('nav.navbar');
-          assert.exists(navBar, 'Should render NavBar component');
-          return state;
-        },
-
-    hasNavBarTitle:
-      () =>
-        (state) => {
-          const htmlElement = state.htmlElement;
-          const navBarTitle = htmlElement.querySelector('nav.navbar .navbar-brand')?.textContent;
-          assert.isNotEmpty(navBarTitle, 'NavBar should have title');
-          return state;
-        },
-
-    hasTestTable:
-      () =>
-        (state) => {
-          const htmlElement = state.htmlElement;
-          const testTable = htmlElement.querySelector('table');
-          assert.exists(testTable, 'Should render test table');
-          return state;
-        },
-
-    rendersTestSuite1:
-      () =>
-        (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 state;
-        },
-
-    rendersTestSuite2:
-      () =>
-        (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 state;
-        },
-    unhappyPath:
-      () =>
-        (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 state;
-        },
-
-    takeScreenshot:
-      (name: string) =>
-        async (state, pm) => {
-          const p = await pm.page();
-          await pm.customScreenShot({ path: name }, p);
-          return state;
-        },
-  },
-};

package/src/components/pure/ProjectPageView.tsx

@@ -1,148 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { Container, Alert, Badge, Nav, Col, Row } from 'react-bootstrap';
-
-import { TestTable } from './TestTable';
-import { BuildLogViewer } from './BuildLogViewer';
-import { NavBar } from './NavBar';
-
-import "./../../App.scss";
-
-
-export type IProjectPageViewProps = {
-  summary: any;
-  nodeLogs: any;
-  webLogs: any;
-  pureLogs: any;
-  config: any;
-  loading: boolean;
-  error: string | null;
-  projectName: string;
-  activeTab: string;
-  setActiveTab: (tab: string) => void;
-};
-
-export const ProjectPageView = ({
-  summary,
-  nodeLogs,
-  webLogs,
-  pureLogs,
-  config,
-  loading,
-  error,
-  projectName,
-  activeTab,
-  setActiveTab
-}: IProjectPageViewProps) => {
-  if (loading) return <div>Loading project data...</div>;
-  if (error) return <Alert variant="danger">Error: {error}</Alert>;
-  if (!summary) return <Alert variant="warning">No data found for project</Alert>;
-
-  const testStatuses = Object.entries(summary).map(([testName, testData]: [string, {
-    testsExist?: boolean;
-    runTimeErrors: number;
-    typeErrors: number;
-    staticErrors: number;
-    runTimeTests: number;
-  }]) => {
-    const runTime = config.tests?.find((t: [string, string]) => t[0] === testName)?.[1] || 'node';
-    return {
-      testName,
-      testsExist: testData.testsExist !== false,
-      runTimeErrors: Number(testData.runTimeErrors) || 0,
-      typeErrors: Number(testData.typeErrors) || 0,
-      staticErrors: Number(testData.staticErrors) || 0,
-      runTimeTests: Number(testData.runTimeTests) || 0,
-      runTime
-    };
-  });
-
-  return (
-    <Container fluid>
-      <NavBar
-        title={projectName}
-        backLink="/"
-      />
-
-      <Row className="g-0">
-        <Col sm={3} className="border-end">
-          <Nav variant="pills" className="flex-column">
-            <Nav.Item>
-              <Nav.Link
-                active={activeTab === 'tests'}
-                onClick={() => setActiveTab('tests')}
-                className="d-flex flex-column align-items-start"
-              >
-                <div className="d-flex justify-content-between w-100">
-                  <span>Tests</span>
-                  {testStatuses.some(t => t.runTimeErrors > 0) ? (
-                    <Badge bg="danger">❌</Badge>
-                  ) : testStatuses.some(t => t.typeErrors > 0 || t.staticErrors > 0) ? (
-                    <Badge bg="warning" text="dark">⚠️</Badge>
-                  ) : (
-                    <Badge bg="success">✓</Badge>
-                  )}
-                </div>
-              </Nav.Link>
-            </Nav.Item>
-            <Nav.Item>
-              <Nav.Link
-                active={activeTab === 'node'}
-                onClick={() => setActiveTab('node')}
-                className="d-flex justify-content-between align-items-center"
-              >
-                Node build logs
-                {nodeLogs?.errors?.length ? (
-                  <Badge bg="danger">❌ {nodeLogs.errors.length}</Badge>
-                ) : nodeLogs?.warnings?.length ? (
-                  <Badge bg="warning" text="dark">⚠️</Badge>
-                ) : null}
-              </Nav.Link>
-            </Nav.Item>
-            <Nav.Item>
-              <Nav.Link
-                active={activeTab === 'web'}
-                onClick={() => setActiveTab('web')}
-                className="d-flex justify-content-between align-items-center"
-              >
-                Web build logs
-                {webLogs?.errors?.length ? (
-                  <Badge bg="danger">❌ {webLogs.errors.length}</Badge>
-                ) : webLogs?.warnings?.length ? (
-                  <Badge bg="warning" text="dark">⚠️</Badge>
-                ) : null}
-              </Nav.Link>
-            </Nav.Item>
-            <Nav.Item>
-              <Nav.Link
-                active={activeTab === 'pure'}
-                onClick={() => setActiveTab('pure')}
-                className="d-flex justify-content-between align-items-center"
-              >
-                Pure build logs
-                {pureLogs?.errors?.length ? (
-                  <Badge bg="danger">❌ {pureLogs.errors.length}</Badge>
-                ) : pureLogs?.warnings?.length ? (
-                  <Badge bg="warning" text="dark">⚠️</Badge>
-                ) : null}
-              </Nav.Link>
-            </Nav.Item>
-          </Nav>
-        </Col>
-        <Col sm={9}>
-          <div className="p-3">
-            {activeTab === 'tests' ? (
-              <TestTable testStatuses={testStatuses} projectName={projectName} />
-            ) : activeTab === 'node' ? (
-              <BuildLogViewer logs={nodeLogs} runtime="Node" />
-            ) : activeTab === 'web' ? (
-              <BuildLogViewer logs={webLogs} runtime="Web" />
-            ) : activeTab === 'pure' ? (
-              <BuildLogViewer logs={pureLogs} runtime="Pure" />
-            ) : null}
-          </div>
-        </Col>
-      </Row>
-    </Container>
-  );
-};

package/src/components/pure/Settings.test.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Settings } from './Settings';
-
-// Mock the tutorial mode context
-jest.mock('../../App', () => ({
-  useTutorialMode: () => ({
-    tutorialMode: false,
-    setTutorialMode: jest.fn()
-  })
-}));
-
-test('renders settings page', () => {
-  render(<Settings />);
-  const themeLabel = screen.getByText(/Theme/i);
-  expect(themeLabel).toBeInTheDocument();
-});
-
-test('renders theme options', () => {
-  render(<Settings />);
-  const lightModeOption = screen.getByLabelText(/Light Mode/i);
-  const darkModeOption = screen.getByLabelText(/Dark Mode/i);
-  const autoModeOption = screen.getByLabelText(/Auto/i);
-  
-  expect(lightModeOption).toBeInTheDocument();
-  expect(darkModeOption).toBeInTheDocument();
-  expect(autoModeOption).toBeInTheDocument();
-});
-
-test('renders tutorial mode switch', () => {
-  render(<Settings />);
-  const tutorialModeSwitch = screen.getByLabelText(/Tutorial Mode: OFF/i);
-  expect(tutorialModeSwitch).toBeInTheDocument();
-});

package/src/components/pure/Settings.tsx

@@ -1,163 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Form, Container, Row, Col, Card, Button } from "react-bootstrap";
-import { useTutorialMode, useAuth } from "../../App";
-import { GitHubLoginButton } from "./GitHubLoginButton";
-import { githubAuthService } from "../../services/GitHubAuthService";
-
-export const Settings = () => {
-  const [theme, setTheme] = useState<"light" | "dark" | "auto">("auto");
-  const { tutorialMode, setTutorialMode } = useTutorialMode();
-  const { isAuthenticated, logout } = useAuth();
-
-  useEffect(() => {
-    // Load saved theme from localStorage
-    const savedTheme = localStorage.getItem("theme") as
-      | "light"
-      | "dark"
-      | "auto"
-      | null;
-    if (savedTheme) {
-      setTheme(savedTheme);
-    }
-  }, []);
-
-  useEffect(() => {
-    // Apply theme when it changes
-    applyTheme(theme);
-    // Save to localStorage
-    localStorage.setItem("theme", theme);
-  }, [theme]);
-
-  const applyTheme = (selectedTheme: "light" | "dark" | "auto") => {
-    const root = document.documentElement;
-
-    if (selectedTheme === "auto") {
-      // Use system preference
-      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        root.setAttribute("data-bs-theme", "dark");
-      } else {
-        root.setAttribute("data-bs-theme", "light");
-      }
-    } else {
-      root.setAttribute("data-bs-theme", selectedTheme);
-    }
-  };
-
-  const handleThemeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setTheme(event.target.value as "light" | "dark" | "auto");
-  };
-
-  const handleTutorialModeChange = () => {
-    const newTutorialMode = !tutorialMode;
-    setTutorialMode(newTutorialMode);
-    // Save to localStorage
-    localStorage.setItem("tutorialMode", newTutorialMode.toString());
-  };
-
-
-  return (
-    <Container>
-      <Row>
-        <Col md={8} lg={6}>
-          <Card>
-            <Card.Header>
-              <h5 className="mb-0">Appearance</h5>
-            </Card.Header>
-            <Card.Body>
-              <Form>
-                <Form.Group className="mb-4">
-                  <div>
-                    <Form.Check
-                      type="radio"
-                      id="theme-light"
-                      name="theme"
-                      value="light"
-                      label="Light mode"
-                      checked={theme === "light"}
-                      onChange={handleThemeChange}
-                    />
-                    <Form.Check
-                      type="radio"
-                      id="theme-dark"
-                      name="theme"
-                      value="dark"
-                      label="Dark mode"
-                      checked={theme === "dark"}
-                      onChange={handleThemeChange}
-                    />
-                    <Form.Check
-                      type="radio"
-                      id="theme-auto"
-                      name="theme"
-                      value="auto"
-                      label="Auto mode. Use system setting"
-                      checked={theme === "auto"}
-                      onChange={handleThemeChange}
-                    />
-                  </div>
-                </Form.Group>
-
-                <Form.Group className="mb-4">
-                  <Form.Check
-                    type="switch"
-                    id="tutorial-mode"
-                    label={
-                      tutorialMode ? "Tutorial Mode: ON" : "Tutorial Mode: OFF"
-                    }
-                    checked={tutorialMode}
-                    onChange={handleTutorialModeChange}
-                  />
-                  <Form.Text className="text-muted">
-                    When enabled, helpful tooltips will appear throughout the
-                    app to guide you.
-                  </Form.Text>
-                </Form.Group>
-              </Form>
-            </Card.Body>
-          </Card>
-        </Col>
-      </Row>
-
-      {/* GitHub Authentication Section */}
-      <Row className="mt-4">
-        <Col md={8} lg={6}>
-          <Card>
-            <Card.Header>
-              <h5 className="mb-0">GitHub Integration</h5>
-            </Card.Header>
-            <Card.Body>
-              {githubAuthService.isConfigured() ? (
-                isAuthenticated ? (
-                  <div>
-                    <p>Connected to GitHub</p>
-                    <div className="d-grid gap-2">
-                      <Button variant="danger" onClick={logout}>
-                        Sign Out from GitHub
-                      </Button>
-                    </div>
-                  </div>
-                ) : (
-                  <div>
-                    <p>Connect your GitHub account to enable Git operations:</p>
-                    <GitHubLoginButton />
-                  </div>
-                )
-              ) : (
-                <div>
-                  <p className="text-danger">GitHub integration is not configured.</p>
-                  <p>To enable GitHub authentication:</p>
-                  <ol className="small">
-                    <li>Create a GitHub OAuth App at https://github.com/settings/developers</li>
-                    <li>Set Authorization callback URL to: {window.location.origin}/auth/github/callback</li>
-                    <li>Update the clientId in testeranto.config.ts</li>
-                    <li>Restart the development server</li>
-                  </ol>
-                </div>
-              )}
-            </Card.Body>
-          </Card>
-        </Col>
-      </Row>
-    </Container>
-  );
-};

package/src/components/pure/SignIn.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Container, Row, Col, Card } from 'react-bootstrap';
-
-import { githubAuthService } from '../../services/GitHubAuthService';
-
-import { GitHubLoginButton } from './GitHubLoginButton';
-
-
-export const SignIn = () => {
-  return (
-    <Container className="d-flex align-items-center justify-content-center min-vh-100">
-      <Row>
-        <Col md={12}>
-          <Card>
-            <Card.Header className="text-center">
-              <h3 className="mb-0">Sign In</h3>
-            </Card.Header>
-            <Card.Body className="text-center">
-              {githubAuthService.isConfigured() ? (
-                <GitHubLoginButton />
-              ) : (
-                <div>
-                  <p className="text-danger">GitHub authentication is not configured</p>
-                  <p>Please contact the administrator</p>
-                </div>
-              )}
-            </Card.Body>
-          </Card>
-        </Col>
-      </Row>
-    </Container>
-  );
-};