testeranto 0.200.1 → 0.203.0

package/README.md

@@ -2,7 +2,7 @@
 
 ## Brings vibe coding to the real world
 
-Testeranto lets you vibe code large, real-world codebases by intelligently managing the AI context
+Testeranto lets you vibe code large, real-world polyglot codebases by intelligently managing the AI context
 
 #### 🚀 Join Our Beta Program! 🚀
 
@@ -28,6 +28,7 @@ We're launching a private beta for GitHub stargazers first, followed by a public
 ## What is testeranto?
 
 - Testeranto produces test results that can be fed to Aider.ai to automatically fix failing tests.
+- Testeranto supports TypeScript/Javascript, golang and python (with more planed)
 - Testeranto tests are specified in a strongly-typed gherkin-like syntax. Rather than testing your code directly, Testeranto requires you to wrap your code with a semantic interface that is based on TS type signatures.
 - Testeranto can run tests in the frontend, the backend, or both.
 - Testeranto can be used to test anything that can be bundled with esbuild.
@@ -56,6 +57,30 @@ We're launching a private beta for GitHub stargazers first, followed by a public
 
 0. Install Aider and signup for a LLM service.
 
+### Server-Side Setup for GitHub OAuth
+
+For GitHub authentication to work properly, you need to set up the server-side token exchange:
+
+1. Add the following environment variables to your server:
+   ```
+   GITHUB_CLIENT_ID=your_github_oauth_client_id
+   GITHUB_CLIENT_SECRET=your_github_oauth_client_secret
+   ```
+
+2. The server will handle the OAuth token exchange at the `/api/auth/github/token` endpoint
+
+### GitHub Authentication Setup
+
+To enable Git operations with GitHub:
+
+1. Create a GitHub OAuth App at https://github.com/settings/developers
+2. Set the Authorization callback URL to: `http://localhost:3000/auth/github/callback`
+3. Copy the Client ID
+4. Update the `clientId` field in the `githubOAuth` section of `testeranto.config.ts`
+5. Restart the development server
+
+**Note**: The client secret is not needed for the frontend application as it will be handled by the server-side component for token exchange.
+
 1. Install testeranto:
 
 ```bash
@@ -208,3 +233,26 @@ Test a react component. You can choose from a variety of types (jsx functions, c
 ## Sidecars (COMING SOON)
 
 Alongside your test, you can include a number of "sidecars" - other bundled JavaScript assets upon which your test depends. For example, suppose you have an app with frontend and backend components. You could run a React test in the web and include the Node HTTP server as a sidecar.
+# Testeranto
+
+A multi-language testing framework.
+
+## Python Setup
+
+Python tests require a virtual environment to be set up:
+
+1. Navigate to the project root
+2. Create a virtual environment:
+   ```bash
+   python3 -m venv venv
+   ```
+3. Activate the virtual environment:
+   ```bash
+   source venv/bin/activate
+   ```
+4. Install the pitono package:
+   ```bash
+   pip install -e ./src/pitono
+   ```
+
+Make sure to activate the virtual environment before running tests.

package/UX/chache/index.md

@@ -0,0 +1,11 @@
+# Chache's feedback
+
+navbar made sense when pointed out but user did not notice the bar at all at startup. User was hesitant to click because icons purpose was unclear. User wants "non-scary" names, like "eddy" and "procman" rather than "editor" or "process manager".
+
+# dislike
+
+- not clear what user should do.
+
+# likes
+
+- fun esperanto names

package/design-editor/DesignEditor.tsx

@@ -1,251 +1,50 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState, useEffect, useRef } from 'react';
-import { Canvas, Rect, Circle, Text } from 'fabric';
-import { toPng } from 'html-to-image';
+import React, { useEffect, useRef } from 'react';
+import { Canvas, Rect, Text } from 'fabric';
 
-interface DesignObject {
-  type: string;
-  [key: string]: any;
-}
-
-interface Design {
-  version: string;
-  background: string;
-  objects: DesignObject[];
-}
-
-interface Collaborator {
-  id: string;
-  name: string;
-}
-
-export interface DesignEditorRef {
-  loadDesign: (design: Design) => void;
-  saveDesign: () => Design | null;
-}
-
-export const DesignEditor = React.forwardRef<DesignEditorRef, { projectId: string }>(
-  ({ projectId }, ref) => {
-  const canvasRef = useRef<any>(null);
-  const [design, setDesign] = useState<Design>({
-    objects: [],
-    background: '#ffffff',
-    version: '1.0'
-  });
-  const [collaborators, setCollaborators] = useState<Collaborator[]>([]);
-  const wsRef = useRef<WebSocket | null>(null);
-
-  // Initialize canvas and WebSocket connection
+export const DesignEditor = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  
   useEffect(() => {
-    // @ts-ignore
-    const canvas = new fabric.Canvas('design-canvas', {
+    if (!canvasRef.current) return;
+    
+    // Initialize the fabric canvas
+    const canvas = new Canvas(canvasRef.current, {
       width: 800,
-      height: 600
+      height: 600,
+      backgroundColor: '#f0f0f0'
     });
-    canvas.backgroundColor = design.background;
-    canvasRef.current = canvas;
-
-    const wsPort = window.location.port ? Number(window.location.port) + 1 : 3001;
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const host = window.location.hostname;
-    wsRef.current = new WebSocket(`${protocol}//${host}:${wsPort}/design?project=${projectId}`);
-
-    wsRef.current.onmessage = (event) => {
-      const message = JSON.parse(event.data);
-      if (message.type === 'design_update' && canvasRef.current) {
-        canvasRef.current.loadFromJSON(message.data, () => {
-          canvasRef.current?.renderAll();
-        });
-      } else if (message.type === 'collaborators_update') {
-        setCollaborators(message.data);
-      }
-    };
-
+    
+    // Add a simple rectangle
+    const rect = new Rect({
+      left: 100,
+      top: 100,
+      width: 100,
+      height: 100,
+      fill: 'red',
+      angle: 0
+    });
+    
+    // Add text
+    const text = new Text('Hello Fabric.js!', {
+      left: 50,
+      top: 50,
+      fontSize: 20,
+      fill: 'blue'
+    });
+    
+    // Add objects to canvas
+    canvas.add(rect, text);
+    canvas.renderAll();
+    
+    // Cleanup
     return () => {
-      wsRef.current?.close();
       canvas.dispose();
     };
-  }, [projectId]);
-
-  const addShape = (shape: string) => {
-    if (!canvasRef.current) return;
-
-    let object;
-    switch (shape) {
-      case 'rectangle':
-        // @ts-ignore
-        object = new fabric.Rect({
-          width: 100,
-          height: 100,
-          fill: 'red',
-          left: 100,
-          top: 100
-        });
-        break;
-      case 'circle':
-        // @ts-ignore
-        object = new fabric.Circle({
-          radius: 50,
-          fill: 'blue',
-          left: 200,
-          top: 200
-        });
-        break;
-      case 'text':
-        // @ts-ignore
-        object = new fabric.Text('Double click to edit', {
-          fontFamily: 'Arial',
-          fontSize: 20,
-          left: 100,
-          top: 300
-        });
-        break;
-      default:
-        return;
-    }
-
-    canvasRef.current.add(object);
-    canvasRef.current.renderAll();
-  };
-
-  const saveDesign = (): Design | null => {
-    if (!canvasRef.current) {
-      console.warn('Canvas ref is null, cannot save design');
-      return null;
-    }
-    
-    try {
-      // Get current canvas state
-      const json = canvasRef.current.toJSON() as Design;
-      setDesign(json);
-      
-      // Send update to collaborators
-      if (wsRef.current) {
-        wsRef.current.send(JSON.stringify({
-          type: 'design_update',
-          data: json
-        }));
-      }
-      
-      // Force re-render of all objects
-      canvasRef.current.getObjects().forEach(obj => {
-        obj.set('dirty', true);
-      });
-      canvasRef.current.renderAll();
-      
-      console.log('Design saved:', json);
-      return json;
-    } catch (err) {
-      console.error('Error saving design:', err);
-      return null;
-    }
-  };
-
-  const loadDesign = (design: Design) => {
-    console.log('loadDesign called with:', design);
-    if (!canvasRef.current) {
-      console.warn('Canvas ref is null, cannot load design');
-      return;
-    }
-
-    try {
-      console.log('Loading design into canvas...');
-
-      // Clear existing canvas
-      canvasRef.current.clear();
-
-      // Set background color
-      if (design.background) {
-        canvasRef.current.backgroundColor = design.background;
-      }
-
-      // Load objects if they exist
-      if (design.objects && design.objects.length > 0) {
-        console.log('Loading objects:', design.objects.length);
-        canvasRef.current.loadFromJSON(design, () => {
-          console.log('Design loaded, rendering canvas...');
-          // Force re-render of all objects
-          canvasRef.current?.getObjects().forEach(obj => {
-            obj.set('dirty', true);
-          });
-          canvasRef.current?.renderAll();
-          console.log('Canvas rendered with new design');
-        });
-      } else {
-        console.log('No objects to load, rendering empty canvas');
-        canvasRef.current.renderAll();
-      }
-
-      // Force immediate render
-      canvasRef.current.renderAll();
-    } catch (err) {
-      console.error('Error loading design:', err);
-      if (err instanceof Error) {
-        console.error('Error details:', {
-          name: err.name,
-          message: err.message,
-          stack: err.stack
-        });
-      }
-    }
-  };
-
-  // Expose methods via ref
-  React.useImperativeHandle(ref, () => ({
-    loadDesign,
-    saveDesign
-  }));
-
-  const exportAsPNG = async () => {
-    if (!canvasRef.current) return;
-
-    try {
-      // Store current active object and hide controls
-      const activeObject = canvasRef.current.getActiveObject();
-      if (activeObject) {
-        canvasRef.current.discardActiveObject();
-      }
-
-      // Render once to clear controls
-      canvasRef.current.renderAll();
-
-      // Get canvas element and export
-      const canvasElement = document.getElementById('design-canvas');
-      if (!canvasElement) return;
-      
-      const dataUrl = await toPng(canvasElement);
-      const link = document.createElement('a');
-      link.download = `design-${projectId}.png`;
-      link.href = dataUrl;
-      link.click();
-
-      // Restore active object if there was one
-      if (activeObject) {
-        canvasRef.current.setActiveObject(activeObject);
-        canvasRef.current.renderAll();
-      }
-    } catch (error) {
-      console.error('Error exporting PNG:', error);
-    }
-  };
-
+  }, []);
+  
   return (
-    <div className="design-editor">
-      <div className="toolbar">
-        <button onClick={() => addShape('rectangle')}>Add Rectangle</button>
-        <button onClick={() => addShape('circle')}>Add Circle</button>
-        <button onClick={() => addShape('text')}>Add Text</button>
-        <button onClick={exportAsPNG}>Export PNG</button>
-      </div>
-      <canvas id="design-canvas" />
-      <div className="collaborators">
-        <h3>Collaborators ({collaborators.length})</h3>
-        <ul>
-          {collaborators.map(user => (
-            <li key={user.id}>{user.name}</li>
-          ))}
-        </ul>
-      </div>
+    <div>
+      <canvas ref={canvasRef} />
     </div>
   );
-});
+};