Skip to content

Manual Guide: Flow Tester

The Flow Tester module is an advanced debugging and simulation workspace designed to test API endpoints, inspect request headers, manipulate JSON payloads via the editor attach dynamic multipart files, and trace multi-step execution graphs (Logic Flow Steps Trace) using interactive diagrams.

1. Interface & Architecture Overview

The Flow Tester features a multi-tiered diagnostic layout integrated within an offcanvas drawer and full-screen trace modals:

  • Simulation Control Bar: Combines a folder browser modal trigger a list of availabel Logic Flow that you can select to test, an HTTP method selector (POST, GET, PUT), a target URL input field, and a primary execution action (SEND).

  • Tabbed Request Editor :

    • Body Tab: Houses an code editor instance configured for JSON syntax highlighting and a robust file attachment system.

    • Headers Tab: Dynamic key-value table supporting custom HTTP headers, including secure authorization management (X-API-Key).

  • Console Terminal : A dark-themed diagnostic monitor displaying real-time responses, statuses, payload strings, and auto-generated Logic Flow debugging links.

2. Core Features & Components

Dynamic Flow Exploration & Simulation (Resource Browser)

  • Hierarchical Tree Loader: Fetches a resource directory tree from /logic-flow/resource-tree, rendering collapsible folder lists and individual flow targets via a Bootstrap accordion.

  • Auto-Population: Selecting a flow item automatically normalizes and injects its target URL (/api/v1/...), decodes embedded descriptions, extracts payload templates into the Ace Editor, and clears stale attachment references.

Request Execution & Persistence

  • LocalStorage State Caching: Automatically persists last-used body contents, simulation methods, URLs, and authentication tokens via utility wrappers (setFTStorage/getFTStorage).

  • Smart Content-Type Negotiation: Automatically switches between raw JSON payloads, form-encoded key-value entries, and multipart FormData objects depending on attached files (#sim-attachment) or linked resource metadata.

Interactive Step Trace & Log Visualizer (lineageModal)

  • Graph Mapping: Renders visual node states (Success, Partial, Failed, Error, Skipped) and edge conditions (On Success, On Failed, Catch Exception).

  • Log Drawer : Provides a scrollable diagnostic viewport with scroll-spy navigation between INPUT, OUTPUT, and PATH ANALYSIS sections, complete with clipboard and download utilities.