Fixes a bug that was causing tests to be added to the incorrect task.

Clean up UI for a better experience when viewing tests.

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

@@ -1702,7 +1702,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,11 @@ 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';
@@ -397,6 +397,13 @@ export default function ProcessModelEditDiagram() {
     };
   };
 
+  const jsonEditorOptions = () => {
+    return Object.assign(generalEditorOptions(), {
+        minimap: { enabled: false },
+        folding: true
+    });
+  }
+
   const setPreviousScriptUnitTest = () => {
     resetUnitTextResult();
     const newScriptIndex = currentScriptUnitTestIndex - 1;
@@ -491,11 +498,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 (
@@ -539,19 +567,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}
@@ -582,61 +620,45 @@ export default function ProcessModelEditDiagram() {
               </Col>
               <Col xs={1}>{scriptUnitTestResultBoolElement}</Col>
             </Row>
-          </Content>
+            <Row>
-          <Stack orientation="horizontal" gap={3}>
+              <Col>{unitTestFailureElement()}</Col>
-            {unitTestFailureElement()}
+            </Row>
-          </Stack>
+            <Row>
-          <Stack orientation="horizontal" gap={3}>
+              <Col>
-            <Stack>
                 <div>Input Json:</div>
                 <div>
                   <Editor
-                  height={200}
+                    height={500}
+                    width="auto"
                     defaultLanguage="json"
-                  options={Object.assign(generalEditorOptions(), {
+                    options={Object.assign(jsonEditorOptions(), {})}
-                    minimap: { enabled: false },
+                    value={inputJson}
-                  })}
-                  value={currentScriptUnitTest.inputJson.value}
                     onChange={handleEditorScriptTestUnitInputChange}
                   />
                 </div>
-            </Stack>
+              </Col>
-            <Stack>
+              <Col>
                 <div>Expected Output Json:</div>
                 <div>
                   <Editor
-                  height={200}
+                    height={500}
+                    width="auto"
                     defaultLanguage="json"
-                  options={Object.assign(generalEditorOptions(), {
+                    options={Object.assign(jsonEditorOptions(), {})}
-                    minimap: { enabled: false },
+                    value={outputJson}
-                  })}
-                  value={currentScriptUnitTest.expectedOutputJson.value}
                     onChange={handleEditorScriptTestUnitOutputChange}
                   />
                 </div>
-            </Stack>
+              </Col>
-          </Stack>
+            </Row>
+          </Content>
         </main>
       );
     }
     return null;
   };
-
   const scriptEditor = () => {
-    let scriptName = '';
-    if (scriptElement) {
-      scriptName = (scriptElement as any).di.bpmnElement.name;
-    }
-
     return (
-      <Modal
-        open={showScriptEditor}
-        modalHeading={`Editing Script: ${scriptName}`}
-        primaryButtonText="Close"
-        onRequestSubmit={handleScriptEditorClose}
-        size="lg"
-        onRequestClose={handleScriptEditorClose}
-      >
       <Editor
         height={500}
         width="auto"
@@ -646,7 +668,32 @@ export default function ProcessModelEditDiagram() {
         onChange={handleEditorScriptChange}
         onMount={handleEditorDidMount}
       />
-        {scriptUnitTestEditorElement()}
+    );
+  };
+  const scriptEditorAndTests = () => {
+    let scriptName = '';
+    if (scriptElement) {
+      scriptName = (scriptElement as any).di.bpmnElement.name;
+    }
+    return (
+      <Modal
+        open={showScriptEditor}
+        modalHeading={`Editing Script: ${scriptName}`}
+        primaryButtonText="Close"
+        onRequestSubmit={handleScriptEditorClose}
+        size="lg"
+        onRequestClose={handleScriptEditorClose}
+      >
+        <Tabs>
+          <TabList aria-label="List of tabs" activation="manual">
+            <Tab>Script Editor</Tab>
+            <Tab>Unit Tests</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>{scriptEditor()}</TabPanel>
+            <TabPanel>{scriptUnitTestEditorElement()}</TabPanel>
+          </TabPanels>
+        </Tabs>
       </Modal>
     );
   };
@@ -858,7 +905,7 @@ export default function ProcessModelEditDiagram() {
         </h1>
         {appropriateEditor()}
         {newFileNameBox()}
-        {scriptEditor()}
+        {scriptEditorAndTests()}
         {markdownEditor()}
         {processModelSelector()}
         <div id="diagram-container" />