Merge branch 'main' of github.com:sartography/spiff-arena into main

spiffworkflow-backend/src/spiffworkflow_backend/routes/process_api_blueprint.py

@@ -1669,7 +1669,7 @@ def script_unit_test_create(
 
     extension_elements = None
     extension_elements_array = script_task_element.xpath(
-        "//bpmn:extensionElements",
+        ".//bpmn:extensionElements",
         namespaces={"bpmn": "http://www.omg.org/spec/BPMN/20100524/MODEL"},
     )
     if len(extension_elements_array) == 0:

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -6,11 +6,20 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 // @ts-ignore
-import { Button, Modal, Stack, Content } from '@carbon/react';
+import {
+  Button,
+  Modal,
+  Content,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+} from '@carbon/react';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 
-import Editor from '@monaco-editor/react';
+import Editor, { DiffEditor } from '@monaco-editor/react';
 
 import MDEditor from '@uiw/react-md-editor';
 import ReactDiagramEditor from '../components/ReactDiagramEditor';
@@ -401,6 +410,13 @@ export default function ProcessModelEditDiagram() {
     };
   };
 
+  const jsonEditorOptions = () => {
+    return Object.assign(generalEditorOptions(), {
+      minimap: { enabled: false },
+      folding: true,
+    });
+  };
+
   const setPreviousScriptUnitTest = () => {
     resetUnitTextResult();
     const newScriptIndex = currentScriptUnitTestIndex - 1;
@@ -495,11 +511,32 @@ export default function ProcessModelEditDiagram() {
       }
       let errorContextElement = null;
       if (scriptUnitTestResult.context) {
+        errorStringElement = (
+          <span>Unexpected result. Please see the comparison below.</span>
+        );
+        let outputJson = '{}';
+        if (currentScriptUnitTest) {
+          outputJson = JSON.stringify(
+            JSON.parse(currentScriptUnitTest.expectedOutputJson.value),
+            null,
+            '  '
+          );
+        }
+        const contextJson = JSON.stringify(
+          scriptUnitTestResult.context,
+          null,
+          '  '
+        );
         errorContextElement = (
-          <span>
+          <DiffEditor
-            Received unexpected output:{' '}
+            height={200}
-            {JSON.stringify(scriptUnitTestResult.context)}
+            width="auto"
-          </span>
+            originalLanguage="json"
+            modifiedLanguage="json"
+            options={Object.assign(jsonEditorOptions(), {})}
+            original={outputJson}
+            modified={contextJson}
+          />
         );
       }
       return (
@@ -543,19 +580,29 @@ export default function ProcessModelEditDiagram() {
           </Col>
         );
       }
+      const inputJson = JSON.stringify(
+        JSON.parse(currentScriptUnitTest.inputJson.value),
+        null,
+        '  '
+      );
+      const outputJson = JSON.stringify(
+        JSON.parse(currentScriptUnitTest.expectedOutputJson.value),
+        null,
+        '  '
+      );
+
       return (
         <main>
           <Content>
             <Row>
               <Col xs={8}>
-                <Button variant="link" disabled style={{ fontSize: '1.5em' }}>
+                <Button variant="link" disabled>
                   Unit Test: {currentScriptUnitTest.id}
                 </Button>
               </Col>
               <Col xs={1}>
                 <Button
                   data-qa="unit-test-previous-button"
-                  style={{ fontSize: '1.5em' }}
                   onClick={setPreviousScriptUnitTest}
                   variant="link"
                   disabled={previousButtonDisable}
@@ -586,52 +633,61 @@ export default function ProcessModelEditDiagram() {
               </Col>
               <Col xs={1}>{scriptUnitTestResultBoolElement}</Col>
             </Row>
+            <Row>
+              <Col>{unitTestFailureElement()}</Col>
+            </Row>
+            <Row>
+              <Col>
+                <div>Input Json:</div>
+                <div>
+                  <Editor
+                    height={500}
+                    width="auto"
+                    defaultLanguage="json"
+                    options={Object.assign(jsonEditorOptions(), {})}
+                    value={inputJson}
+                    onChange={handleEditorScriptTestUnitInputChange}
+                  />
+                </div>
+              </Col>
+              <Col>
+                <div>Expected Output Json:</div>
+                <div>
+                  <Editor
+                    height={500}
+                    width="auto"
+                    defaultLanguage="json"
+                    options={Object.assign(jsonEditorOptions(), {})}
+                    value={outputJson}
+                    onChange={handleEditorScriptTestUnitOutputChange}
+                  />
+                </div>
+              </Col>
+            </Row>
           </Content>
-          <Stack orientation="horizontal" gap={3}>
-            {unitTestFailureElement()}
-          </Stack>
-          <Stack orientation="horizontal" gap={3}>
-            <Stack>
-              <div>Input Json:</div>
-              <div>
-                <Editor
-                  height={200}
-                  defaultLanguage="json"
-                  options={Object.assign(generalEditorOptions(), {
-                    minimap: { enabled: false },
-                  })}
-                  value={currentScriptUnitTest.inputJson.value}
-                  onChange={handleEditorScriptTestUnitInputChange}
-                />
-              </div>
-            </Stack>
-            <Stack>
-              <div>Expected Output Json:</div>
-              <div>
-                <Editor
-                  height={200}
-                  defaultLanguage="json"
-                  options={Object.assign(generalEditorOptions(), {
-                    minimap: { enabled: false },
-                  })}
-                  value={currentScriptUnitTest.expectedOutputJson.value}
-                  onChange={handleEditorScriptTestUnitOutputChange}
-                />
-              </div>
-            </Stack>
-          </Stack>
         </main>
       );
     }
     return null;
   };
-
   const scriptEditor = () => {
+    return (
+      <Editor
+        height={500}
+        width="auto"
+        options={generalEditorOptions()}
+        defaultLanguage="python"
+        value={scriptText}
+        onChange={handleEditorScriptChange}
+        onMount={handleEditorDidMount}
+      />
+    );
+  };
+  const scriptEditorAndTests = () => {
     let scriptName = '';
     if (scriptElement) {
       scriptName = (scriptElement as any).di.bpmnElement.name;
     }
-
     return (
       <Modal
         open={showScriptEditor}
@@ -641,16 +697,16 @@ export default function ProcessModelEditDiagram() {
         size="lg"
         onRequestClose={handleScriptEditorClose}
       >
-        <Editor
+        <Tabs>
-          height={500}
+          <TabList aria-label="List of tabs" activation="manual">
-          width="auto"
+            <Tab>Script Editor</Tab>
-          options={generalEditorOptions()}
+            <Tab>Unit Tests</Tab>
-          defaultLanguage="python"
+          </TabList>
-          value={scriptText}
+          <TabPanels>
-          onChange={handleEditorScriptChange}
+            <TabPanel>{scriptEditor()}</TabPanel>
-          onMount={handleEditorDidMount}
+            <TabPanel>{scriptUnitTestEditorElement()}</TabPanel>
-        />
+          </TabPanels>
-        {scriptUnitTestEditorElement()}
+        </Tabs>
       </Modal>
     );
   };
@@ -878,7 +934,7 @@ export default function ProcessModelEditDiagram() {
         {saveFileMessage()}
         {appropriateEditor()}
         {newFileNameBox()}
-        {scriptEditor()}
+        {scriptEditorAndTests()}
         {markdownEditor()}
         {processModelSelector()}
         <div id="diagram-container" />