chore: demo with simple mocks

Author: jarekdanielak

demo/App.jsx

@@ -1,11 +1,20 @@
+import { useState, useRef, useEffect } from 'react';
+
+import BpmnModeler from 'bpmn-js/lib/Modeler';
+
 import 'bpmn-js/dist/assets/diagram-js.css';
 import 'bpmn-js/dist/assets/bpmn-js.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
 
-import { useState, useRef, useEffect } from 'react';
-import BpmnModeler from 'bpmn-js/lib/Modeler';
+import TaskTesting from '../lib';
 
-// import TaskTesting from '../lib';
+import {
+  saveFile,
+  deploymentConfig,
+  deployResources,
+  createProcessInstance,
+  getProcessInstance
+} from '../test/mock';
 
 import diagram from './diagram.bpmn?raw';
 
@@ -43,11 +52,22 @@ function App() {
     }
   }, [ modeler ]);
 
+  const injector = modeler?.get('injector');
+
+  const props = {
+    injector,
+    saveFile,
+    deploymentConfig,
+    deployResources,
+    createProcessInstance,
+    getProcessInstance
+  };
+
   return (
     <>
       <div className="modeler" ref={ modelerRef }></div>
       <div className="bottom-panel">
-        {/* <TaskTesting /> */}
+        {injector && <TaskTesting { ...props } />}
       </div>
     </>
   );

demo/main.jsx

@@ -2,8 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.jsx';
 
-// import './index.scss';
-
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />

lib/components/TabContent.jsx

@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
+
 import classNames from 'classnames';
 
 import { is } from 'bpmn-js/lib/util/ModelUtil';
@@ -19,13 +20,24 @@ export default function TabContent(props) {
   const [ input, setInput ] = useState('{\n\n}');
   const [ loading, setLoading ] = useState(false);
   const [ selectedElement, setSelectedElement ] = useState(null);
-  const [ test, setTest ] = useState(null);
   const [ testResults, setTestResults ] = useState({});
 
-  useEffect(() => {
-    const _test = new Test(...props);
+  const utilRef = useRef(null);
 
-    setTest(_test);
+  useEffect(() => {
+    const {
+      deploymentConfig,
+      deployResources,
+      createProcessInstance,
+      getProcessInstance
+    } = props;
+
+    utilRef.current = new Test(
+      deployResources,
+      deploymentConfig,
+      createProcessInstance,
+      getProcessInstance
+    );
   }, []);
 
   useEffect(() => {
@@ -64,10 +76,6 @@ export default function TabContent(props) {
   }, [ input ]);
 
   const onTest = async () => {
-    if (!test) {
-      return;
-    }
-
     setLoading(true);
 
     saveFile();
@@ -77,7 +85,7 @@ export default function TabContent(props) {
       [ selectedElement.id ]: null
     });
 
-    const results = await test.run(selectedElement.id, input, (getProcessInstanceResult) => {
+    const results = await utilRef.current.run(selectedElement.id, input, (getProcessInstanceResult) => {
       if (getProcessInstanceResult.success) {
         setTestResults({
           ...testResults,

lib/utils/Test.js

@@ -17,7 +17,7 @@ export default class Test {
    * @param {getProcessInstance} getProcessInstance
    * @param {DeploymentConfig} deploymentConfig
    */
-  construtor(deployResources, deploymentConfig, createProcessInstance, getProcessInstance) {
+  constructor(deployResources, deploymentConfig, createProcessInstance, getProcessInstance) {
 
     this._deployResources = deployResources;
     this._deploymentConfig = deploymentConfig;
@@ -41,7 +41,7 @@ export default class Test {
     //   return deploymentResponse;
     // }
 
-    const { deployments } = deploymentResponse.response;
+    const { deployments } = deploymentResponse;
 
     // Naive approach
     const processId = deployments?.[0]?.processDefinition?.processId;

test/mock/index.js

@@ -0,0 +1,55 @@
+export const injector = {
+  get() {
+    return {
+      on: () => {},
+      off: () => {},
+    };
+  }
+};
+
+export function saveFile() {}
+
+export const deploymentConfig = {
+  tenantId: 'mock-tenant-id',
+  deploymentKey: 'mock-deployment-key',
+  resources: [
+    {
+      content: 'mock-content',
+      name: 'mock-process.bpmn'
+    }
+  ]
+};
+
+export function deployResources(resources, tenantId) {
+  return {
+    deploymentKey: 'mock-deployment-key',
+    tenantId: tenantId,
+    deployments: [
+      {
+        processDefinition: {
+          processId: 'mock-process-id'
+        }
+      }
+    ]
+  };
+}
+
+export function createProcessInstance(processId, config) {
+  return {
+    processInstanceKey: 'mock-process-instance-key'
+  };
+}
+
+export function getProcessInstance(processId, config) {
+  return {
+    success: true,
+    type: 'instanceFound',
+    response: {
+      processId: 'mock-process-id',
+      variables: {
+        input: 'mock-input',
+        output: 'mock-output'
+      }
+    }
+  };
+}