frame.simulator 1.0.0 → 1.0.2

package/batch.ts

@@ -0,0 +1,82 @@
+import { Command } from './command';
+import { TUserAction } from './types';
+
+const PORT: number = parseInt(process.env.PORT || '3010', 10);
+
+export class Batch {
+  constructor() {
+    // Initialize any necessary properties here
+  }
+
+  private async sendRequest(
+    command: string,
+    data?: TUserAction,
+  ): Promise<string> {
+    let status = 'blocked';
+    try {
+      const response = await fetch(`http://localhost:${PORT}/send-command`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          command,
+          data,
+        }),
+      });
+      // console.log(`response: ${JSON.stringify(response, null)}`);
+      // console.log(`response.status: ${response.status}`);
+      if (response.status === 200) {
+        status = 'ok';
+      }
+      return status;
+    } catch (error) {
+      console.log(`error.status: ${status}`);
+      console.error('Error:', error);
+    }
+    console.log(`return status: ${status}`);
+    return status;
+  }
+
+  async selectButton(
+    testId: string,
+    retries: number = 5,
+    delay: number = 1000,
+  ): Promise<void> {
+    const sleep = (ms: number) =>
+      new Promise((resolve) => setTimeout(resolve, ms));
+
+    for (let attempt = 1; attempt <= retries; attempt++) {
+      try {
+        if (attempt >= 1) {
+          console.log(
+            `Attempt ${attempt}/${retries} to click button: ${testId}`,
+          );
+        }
+
+        const status = await this.sendRequest(Command.SimulateClick, {
+          testId,
+        });
+
+        if (status !== 'ok') {
+          console.log('Failed to send button simulation command');
+        }
+        await sleep(delay);
+        return; // Success, exit the retry loop
+      } catch (error) {
+        console.error('Error in main:', error);
+      }
+    }
+  }
+
+  async sampleClickCanvasDrawAt(x: number, y: number) {
+    console.log(`sampleClickCanvasDrawAt(${x}, ${y})`);
+    await this.sendRequest(Command.SimulateClickOnCanvas, {
+      testId: 'canvas.draw',
+      x,
+      y,
+    });
+    // Small delay to ensure element is fully ready
+    await new Promise((resolve) => setTimeout(resolve, 300));
+  }
+}

package/command-server.ts

@@ -32,7 +32,7 @@ interface HealthResponse {
 }
 
 const app: express.Application = express();
-const PORT: number = 3010;
+const PORT: number = parseInt(process.env.PORT || '3010', 10);
 
 // Middleware
 app.use(cors());

package/command.ts

@@ -0,0 +1,6 @@
+export enum Command {
+  SimulateClick = 'SimulateClick',
+  SimulateClickOnCanvas = 'SimulateClickOnCanvas',
+  SimulateInput = 'SimulateInput',
+  SimulateCheck = 'SimulateUserCheck',
+}

package/commandHandler.ts

@@ -0,0 +1,30 @@
+import { Command } from './command';
+import { Simulator } from './simulator';
+import { TUserAction, TClick, TClickOnCanvas, TInput } from './types';
+
+export function useCommandHandler() {
+  const handleCommand = async (command: string, data: TUserAction) => {
+    const simulator = new Simulator();
+
+    switch (command) {
+      case Command.SimulateClick:
+        return simulator.simulateUserClick(data as TClick);
+      case Command.SimulateClickOnCanvas:
+        return simulator.simulateClickOnCanvas(data as TClickOnCanvas);
+      // case Command.MainScaleFrame:
+      //   return simulator.simulateScaleFrame(data as TScaleFrame);
+      case Command.SimulateInput:
+        return simulator.simulateUserInput(data as TInput);
+      case Command.SimulateCheck:
+        return simulator.simulateUserCheck(data as TClick);
+      default:
+        console.warn('Unknown command:', command);
+        console.log(`SimulateUserAction command received with data:`, data);
+        throw new Error(
+          'SimulateUserAction command should be handled by simulateUserAction function directly',
+        );
+    }
+  };
+
+  return { handleCommand };
+}

package/index.ts

@@ -0,0 +1,4 @@
+export { Simulator } from './simulator';
+export { TClick, TClickOnCanvas, TScaleFrame, TUserAction } from './types';
+export { Command } from './command';
+export { useCommandHandler } from './commandHandler';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.simulator",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A simulator for testing form interactions in a controlled environment.",
   "main": "index.js",
   "license": "MIT",
@@ -12,6 +12,9 @@
     "frame.constants": "^1.0.5"
   },
   "devDependencies": {
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/node": "^25.3.0",
     "cors": "^2.8.5",
     "express": "^5.2.1",
     "frame.constants": "^1.0.5",

package/simulator.ts

@@ -1,5 +1,5 @@
 import { green, red, reset } from 'frame.constants';
-import { TClick, TClickOnCanvas, TScaleFrame } from './types';
+import { TClick, TClickOnCanvas, TInput } from './types';
 
 export class Simulator {
   constructor() {
@@ -77,7 +77,8 @@ export class Simulator {
     }
   }
 
-  simulateUserInput(testId: string, value: string) {
+  simulateUserInput(data: TInput) {
+    const { testId, value } = data;
     const element = this.findHTMLElement(testId, HTMLDivElement, 'input');
 
     if (element) {
@@ -95,15 +96,15 @@ export class Simulator {
     }
   }
 
-  simulateScaleFrame(scaleValues: TScaleFrame) {
-    const { length, height } = scaleValues;
-    console.log(
-      `${red}Simulating scale frame with length: ${length}, height: ${height}${reset}`,
-    );
-    this.simulateUserInput('ScaleInput.input.length', length.toString());
-    this.simulateUserInput('ScaleInput.input.height', height.toString());
-    this.simulateUserCheck({ testId: 'ShowOptions.cbx.scaledBox' });
-    this.simulateUserClick({ testId: 'ScaleForm.button.apply' });
-    this.simulateUserCheck({ testId: 'ShowOptions.cbx.points' });
-  }
+  // simulateScaleFrame(scaleValues: TScaleFrame) {
+  //   const { length, height } = scaleValues;
+  //   console.log(
+  //     `${red}Simulating scale frame with length: ${length}, height: ${height}${reset}`,
+  //   );
+  //   this.simulateUserInput('ScaleInput.input.length', length.toString());
+  //   this.simulateUserInput('ScaleInput.input.height', height.toString());
+  //   this.simulateUserCheck({ testId: 'ShowOptions.cbx.scaledBox' });
+  //   this.simulateUserClick({ testId: 'ScaleForm.button.apply' });
+  //   this.simulateUserCheck({ testId: 'ShowOptions.cbx.points' });
+  // }
 }

package/types.ts

@@ -2,6 +2,11 @@ export type TClick = {
   testId: string;
 };
 
+export type TInput = {
+  testId: string;
+  value: string;
+};
+
 export type TClickOnCanvas = {
   x: number;
   y: number;
@@ -12,4 +17,4 @@ export type TScaleFrame = {
   height: number;
 };
 
-export type TUserAction = TClickOnCanvas | TScaleFrame | TClick;
+export type TUserAction = TClickOnCanvas | TScaleFrame | TClick | TInput;

package/command-server.js

@@ -1,132 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var express_1 = require("express");
-var cors_1 = require("cors");
-var app = (0, express_1.default)();
-var PORT = 3010;
-// Middleware
-app.use((0, cors_1.default)());
-app.use(express_1.default.json());
-// Store for command queue and results
-var commandQueue = [];
-var commandResults = new Map();
-// Endpoint to receive commands from batch processor
-app.post('/send-command', function (req, res) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, command, data, commandId, attempts, maxAttempts, result, error_1;
-    return __generator(this, function (_b) {
-        switch (_b.label) {
-            case 0:
-                _b.trys.push([0, 4, , 5]);
-                _a = req.body, command = _a.command, data = _a.data;
-                console.log('Received command:', command, data);
-                commandId = Date.now().toString();
-                commandQueue.push({
-                    id: commandId,
-                    command: command,
-                    data: data,
-                    timestamp: new Date(),
-                });
-                attempts = 0;
-                maxAttempts = 50;
-                _b.label = 1;
-            case 1:
-                if (!(attempts < maxAttempts)) return [3 /*break*/, 3];
-                if (commandResults.has(commandId)) {
-                    result = commandResults.get(commandId);
-                    commandResults.delete(commandId);
-                    return [2 /*return*/, res.json(result)];
-                }
-                return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 100); })];
-            case 2:
-                _b.sent();
-                attempts++;
-                return [3 /*break*/, 1];
-            case 3:
-                // Timeout
-                res.status(408).json({
-                    status: 'error',
-                    message: 'Command timeout',
-                });
-                return [3 /*break*/, 5];
-            case 4:
-                error_1 = _b.sent();
-                console.error('Server error:', error_1);
-                res.status(500).json({
-                    status: 'error',
-                    message: error_1 instanceof Error ? error_1.message : 'Unknown error',
-                });
-                return [3 /*break*/, 5];
-            case 5: return [2 /*return*/];
-        }
-    });
-}); });
-// Endpoint for React app to poll for commands
-app.get('/poll-commands', function (req, res) {
-    if (commandQueue.length > 0) {
-        var command = commandQueue.shift();
-        res.json(command || null);
-    }
-    else {
-        res.json(null);
-    }
-});
-// Endpoint for React app to send command results
-app.post('/command-result', function (req, res) {
-    var _a = req.body, commandId = _a.commandId, result = _a.result;
-    commandResults.set(commandId, result);
-    res.json({ status: 'ok' });
-});
-// Health check
-app.get('/health', function (req, res) {
-    res.json({
-        status: 'healthy',
-        queueLength: commandQueue.length,
-        timestamp: new Date(),
-    });
-});
-app.listen(PORT, function () {
-    console.log('COMMAND SERVER (TYPESCRIPT VERSION)');
-    console.log("Command server running on http://localhost:".concat(PORT));
-    console.log('Endpoints:');
-    console.log('  POST /send-command - Receive batch commands');
-    console.log('  GET  /poll-commands - React app polls for commands');
-    console.log('  POST /command-result - React app sends results');
-    console.log('  GET  /health - Server health check');
-});
-exports.default = app;

package/dist/command-server.d.ts

@@ -1,3 +0,0 @@
-import express from 'express';
-declare const app: express.Application;
-export default app;

package/dist/command-server.js

@@ -1,89 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const express_1 = __importDefault(require("express"));
-const cors_1 = __importDefault(require("cors"));
-const app = (0, express_1.default)();
-const PORT = 3010;
-// Middleware
-app.use((0, cors_1.default)());
-app.use(express_1.default.json());
-// Store for command queue and results
-let commandQueue = [];
-let commandResults = new Map();
-// Endpoint to receive commands from batch processor
-app.post('/send-command', async (req, res) => {
-    try {
-        const { command, data } = req.body;
-        console.log('Received command:', command, data);
-        // For browser-based commands, we'll use a different approach
-        // Store the command and let the React app poll for it
-        const commandId = Date.now().toString();
-        commandQueue.push({
-            id: commandId,
-            command,
-            data,
-            timestamp: new Date(),
-        });
-        // Wait for result (with timeout)
-        let attempts = 0;
-        const maxAttempts = 50; // 5 seconds timeout
-        while (attempts < maxAttempts) {
-            if (commandResults.has(commandId)) {
-                const result = commandResults.get(commandId);
-                commandResults.delete(commandId);
-                return res.json(result);
-            }
-            await new Promise((resolve) => setTimeout(resolve, 100));
-            attempts++;
-        }
-        // Timeout
-        res.status(408).json({
-            status: 'error',
-            message: 'Command timeout',
-        });
-    }
-    catch (error) {
-        console.error('Server error:', error);
-        res.status(500).json({
-            status: 'error',
-            message: error instanceof Error ? error.message : 'Unknown error',
-        });
-    }
-});
-// Endpoint for React app to poll for commands
-app.get('/poll-commands', (req, res) => {
-    if (commandQueue.length > 0) {
-        const command = commandQueue.shift();
-        res.json(command || null);
-    }
-    else {
-        res.json(null);
-    }
-});
-// Endpoint for React app to send command results
-app.post('/command-result', (req, res) => {
-    const { commandId, result } = req.body;
-    commandResults.set(commandId, result);
-    res.json({ status: 'ok' });
-});
-// Health check
-app.get('/health', (req, res) => {
-    res.json({
-        status: 'healthy',
-        queueLength: commandQueue.length,
-        timestamp: new Date(),
-    });
-});
-app.listen(PORT, () => {
-    console.log('COMMAND SERVER (TYPESCRIPT VERSION)');
-    console.log(`Command server running on http://localhost:${PORT}`);
-    console.log('Endpoints:');
-    console.log('  POST /send-command - Receive batch commands');
-    console.log('  GET  /poll-commands - React app polls for commands');
-    console.log('  POST /command-result - React app sends results');
-    console.log('  GET  /health - Server health check');
-});
-exports.default = app;

package/dist/simulator.d.ts

@@ -1,12 +0,0 @@
-import { TClick, TClickOnCanvas, TScaleFrame } from './types';
-export declare class Simulator {
-    constructor();
-    findHTMLElement(testId: string, elementType: typeof HTMLElement, type?: string): HTMLElement | null;
-    simulateClickOnCanvas(data: TClickOnCanvas): void;
-    simulateUserClick(data: TClick): void;
-    simulateUserCheck(data: TClick): void;
-    simulateUserInput(testId: string, value: string): {
-        status: string;
-    } | undefined;
-    simulateScaleFrame(scaleValues: TScaleFrame): void;
-}

package/dist/simulator.js

@@ -1,93 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Simulator = void 0;
-const frame_constants_1 = require("frame.constants");
-class Simulator {
-    constructor() {
-        console.log('Simulator initialized');
-    }
-    findHTMLElement(testId, elementType, type) {
-        if (type) {
-            console.log(`${frame_constants_1.green}Simulating ${type} on element with testId: ${testId}${frame_constants_1.reset}`);
-        }
-        const element = document.querySelector(`[data-testid="${testId}"]`);
-        if (element) {
-            if (element instanceof elementType) {
-            }
-            else {
-                console.error(`Element found but not a ${elementType.name} for ${type} simulation: ${testId}`);
-            }
-        }
-        else {
-            console.error(`Element not found for ${type} simulation: ${testId}`);
-        }
-        return element;
-    }
-    simulateClickOnCanvas(data) {
-        const { x, y } = data;
-        const canvas = this.findHTMLElement('canvas.draw', HTMLCanvasElement, 'click');
-        if (canvas) {
-            const rect = canvas.getBoundingClientRect();
-            const event = new MouseEvent('click', {
-                clientX: rect.left + rect.width / 2 + x, // Convert canvas-relative to screen coordinates
-                clientY: rect.top + rect.height / 2 - y, // Convert canvas-relative to screen coordinates (flip Y)
-                bubbles: true,
-            });
-            // Set batch properties
-            // @ts-ignore - Add custom properties for batch identification
-            event.isBatch = true;
-            // @ts-ignore - Store original canvas-relative coordinates
-            event.batchX = x;
-            // @ts-ignore - Store original canvas-relative coordinates
-            event.batchY = y;
-            canvas.dispatchEvent(event);
-        }
-    }
-    simulateUserClick(data) {
-        const { testId } = data;
-        const element = this.findHTMLElement(testId, HTMLButtonElement, 'click');
-        if (element) {
-            const event = new MouseEvent('click', { bubbles: true });
-            // @ts-ignore - Add custom property to identify this as a batch click
-            event.isBatch = true;
-            element.click();
-        }
-    }
-    simulateUserCheck(data) {
-        const { testId } = data;
-        const element = this.findHTMLElement(testId, HTMLInputElement, 'check');
-        if (element) {
-            const event = new MouseEvent('click', { bubbles: true });
-            // @ts-ignore - Add custom property to identify this as a batch click
-            event.isBatch = true;
-            element.dispatchEvent(event);
-        }
-    }
-    simulateUserInput(testId, value) {
-        const element = this.findHTMLElement(testId, HTMLDivElement, 'input');
-        if (element) {
-            if (element instanceof HTMLInputElement) {
-                element.value = value.toString();
-                element.dispatchEvent(new Event('input', { bubbles: true }));
-                return { status: 'ok' };
-            }
-            else if (element instanceof HTMLDivElement) {
-                const childElement = element.firstChild;
-                if (childElement instanceof HTMLInputElement) {
-                    childElement.value = value || '';
-                    childElement.dispatchEvent(new Event('input', { bubbles: true }));
-                }
-            }
-        }
-    }
-    simulateScaleFrame(scaleValues) {
-        const { length, height } = scaleValues;
-        console.log(`${frame_constants_1.red}Simulating scale frame with length: ${length}, height: ${height}${frame_constants_1.reset}`);
-        this.simulateUserInput('ScaleInput.input.length', length.toString());
-        this.simulateUserInput('ScaleInput.input.height', height.toString());
-        this.simulateUserCheck({ testId: 'ShowOptions.cbx.scaledBox' });
-        this.simulateUserClick({ testId: 'ScaleForm.button.apply' });
-        this.simulateUserCheck({ testId: 'ShowOptions.cbx.points' });
-    }
-}
-exports.Simulator = Simulator;

package/dist/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../command-server.ts","../simulator.ts","../types.ts"],"errors":true,"version":"5.6.3"}

package/dist/types.d.ts

@@ -1,12 +0,0 @@
-export type TClick = {
-    testId: string;
-};
-export type TClickOnCanvas = {
-    x: number;
-    y: number;
-};
-export type TScaleFrame = {
-    length: number;
-    height: number;
-};
-export type TUserAction = TClickOnCanvas | TScaleFrame | TClick;

package/dist/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });