feat: implement task testing business logic

* chore: simplify gitignore
* chore: fix eslint
* chore: add tsconfig
* chore: handle `npm start` with no .env gracefully

Author: philippfromme

.gitignore

@@ -1,25 +1,5 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-public
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.env
+dist
+node_modules
+public

demo/App.jsx

@@ -7,37 +7,114 @@ import TaskTesting from '../lib';
 
 import diagram from './diagram.bpmn';
 
+import connectorTemplates from './connectorTemplates.json';
+
+import '@carbon/styles/css/styles.min.css';
 import './style.css';
 
 function App() {
   const modelerRef = useRef(null);
 
   const [ modeler, setModeler ] = useState(null);
-  const [ tab, setTab ] = useState('test');
 
-  const [ config, setConfig ] = useState({
-    input: {},
-    output: {}
-  });
+  const [ canExecuteTask, setCanExecuteTask ] = useState(false);
+
+  const [ config, setConfig ] = useState(undefined);
 
   useEffect(() => {
     setTimeout(() => {
-
-      // simulate fetching config asynchronously
       setConfig({
         input: {
-          'ServiceTask_1': '{\n  "foo": "bar"\n}'
+          'ServiceTask_1': JSON.stringify({
+            a: 1,
+            b: 2,
+            c: {
+              d: 3,
+              e: 4,
+              f: [ 5, 6, 7 ]
+            },
+            g: 8,
+            h: 9,
+            i: 10,
+            j: {
+              k: 11,
+              l: 12
+            },
+            m: 13,
+            n: 14,
+            o: 15,
+            p: 16,
+            q: 17,
+            r: 18,
+            s: 19,
+            t: 20
+          }, null, 2)
         },
         output: {
           'ServiceTask_1': {
             success: true,
             variables: {
-              foo: 'baz'
+              'm': 13,
+              'g': 8,
+              'a': 1,
+              'c': {
+                'd': 3,
+                'e': 4,
+                'f': [
+                  5,
+                  6,
+                  7
+                ]
+              },
+              'p': 16,
+              'j': {
+                'k': 11,
+                'l': 12
+              },
+              'i': 10,
+              'h': 9,
+              's': 19,
+              'o': 15,
+              't': 20,
+              'n': 14,
+              'q': 17,
+              'r': 18,
+              'b': 2,
+              'fooPlusOne': null,
+              'output1': 1,
+              'output4': 'foo',
+              'output2': true,
+              'output3': {
+                'foo': 1
+              }
+            }
+          },
+          'ServiceTask_2': {
+            success: true,
+            variables: {
+              'a': 'foo',
+              'c': 'bar',
+              'e': 'baz'
+            }
+          },
+          'ServiceTask_4': {
+            success: false,
+            variables: null,
+            incident: {
+              key: '2251799814592731',
+              processDefinitionKey: '2251799814239639',
+              processInstanceKey: '2251799814592711',
+              type: 'JOB_NO_RETRIES',
+              message: 'Bad gateway',
+              creationTime: '2025-08-21T14:40:55.402+0000',
+              state: 'ACTIVE',
+              jobKey: '2251799814592726',
+              tenantId: '<default>'
             }
           }
         }
       });
-    }, 2000);
+    }, 3000);
   }, []);
 
   useEffect(() => {
@@ -46,14 +123,16 @@ function App() {
         container: '#canvas',
         propertiesPanel: {
           parent: '#properties'
-        }
+        },
+        elementTemplates: connectorTemplates
       }));
     }
   }, []);
 
   useEffect(() => {
     async function importXml() {
       await modeler.importXML(diagram);
+
       modeler.get('canvas').zoom('fit-viewport');
     }
 
@@ -64,19 +143,55 @@ function App() {
 
   const injector = modeler?.get('injector');
 
-  const props = {
-    injector,
-    deploy: () => {
-      console.log('Deploying...');
-    },
-    startInstance: () => {
-      console.log('Starting instance...');
-    },
-    getInstance: () => {
-      console.log('Getting instance...');
-    },
-    config,
-    saveConfig: (config) => setConfig(config)
+  const deploy = async () => {
+    const { xml } = await modeler.saveXML();
+
+    const response = await fetch('/api/deploy', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        xml
+      })
+    });
+
+    return await response.json();
+  };
+
+  const startInstance = async (processId, elementId, variables) => {
+    const response = await fetch('/api/startInstance', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        processId,
+        elementId,
+        variables
+      })
+    });
+
+    return response.json();
+  };
+
+  const getProcessInstance = (processInstanceKey) => {
+    return fetch(`/api/getProcessInstance/${processInstanceKey}`)
+      .then(response => response.json());
+  };
+
+  const getProcessInstanceVariables = async (processInstanceKey) => {
+    return fetch(`/api/getProcessInstanceVariables/${processInstanceKey}`)
+      .then(response => response.json());
+  };
+
+  const getProcessInstanceIncident = async (processInstanceKey) => {
+    return fetch(`/api/getProcessInstanceIncident/${processInstanceKey}`)
+      .then(response => response.json());
+  };
+
+  const onConfigChanged = (config) => {
+    setConfig(config);
   };
 
   return (
@@ -85,19 +200,23 @@ function App() {
         <div id="canvas" className="canvas"></div>
         <div id="properties" className="properties-panel"></div>
       </div>
-      <div className="bottom-panel">
-        <div className="bottom-panel_tabs">
-          <div className={ `bottom-panel_tabs-item ${tab === 'problems' ? 'active' : ''}` } onClick={ () => setTab('problems') }>
-            Problems
-          </div>
-          <div className={ `bottom-panel_tabs-item ${tab === 'test' ? 'active' : ''}` } onClick={ () => setTab('test') }>
-            Task testing
-          </div>
-        </div>
-        <div className="bottom-panel_tabs-content">
-          {tab === 'problems' && <ProblemsTab />}
-          {tab === 'test' && <TestTab { ...props } />}
-        </div>
+      <div className="task-testing">
+        <TestTab
+          injector={ injector }
+          canExecuteTask={ canExecuteTask }
+          cannotExecuteTaskLabel="Cannot test task"
+          cannotExecuteTaskDescription="Configure your connection to test the task"
+          cannotExecuteTaskCallback={ () => setCanExecuteTask(true) }
+          api={ {
+            deploy,
+            startInstance,
+            getProcessInstance,
+            getProcessInstanceVariables,
+            getProcessInstanceIncident
+          } }
+          config={ config }
+          onConfigChanged={ onConfigChanged }
+        />
       </div>
     </>
   );
@@ -107,14 +226,10 @@ function TestTab(props) {
   const { injector } = props;
 
   if (!injector) {
-    return <div>Loading...</div>;
+    return null;
   }
 
   return <TaskTesting { ...props } />;
 }
 
-function ProblemsTab() {
-  return <div style={ { padding: '10px' } }>I got 99 problems but running a single task ain&apos;t one.</div>;
-}
-
 export default App;