@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/js/ui/tab-test.js

@@ -0,0 +1,915 @@
+RED.sidebar.test = (function() {
+  let editors = {};
+
+  // html anchors
+  let tabContent;
+  let sections;
+  let testCaseSection;
+  let stackContainer;
+  let testNodes;
+  let triggeredTest; // Flag to indicate when launch a test. As we dont want to launch test for every deployment
+  
+  // control variables
+  let testCaseIdSelected; // nodeID | __runall | undefined
+  const RUN_ALL_TEST_CASES = '__runAll';
+
+  // properties section state
+  let propertiesOpened = false;
+
+  // references
+  let ipcRenderer = window.__kumologica.electron.ipcRenderer;
+
+  function updateTestCaseInit(event, msg) {
+    let { testCaseID, testCaseDescription } = msg.payload.testCase;
+     
+    // sanitize the testCaseId, i.e. removing dots as jquery selector does not like it
+    let testCaseId = testCaseID.replace(/\./g, '_');
+
+    testCaseSection = sections.add({
+      title: testCaseDescription,
+      collapsible: true,
+      titleId: `section-${testCaseId}`
+    });
+
+    let wrapperTestCaseResults = $(`<div style="margin-top: 6px"></div>`);
+    wrapperTestCaseResults.appendTo(testCaseSection.content);
+
+    // Attach the tabs part selector for the testcase
+    let testcaseTabs = $(
+      `<div class="testcase-info-selector button-group"></div>`
+    );
+    testcaseTabs.appendTo(wrapperTestCaseResults);
+
+    // Response tab
+    $(
+      `<button id=testcase-tab-response-${testCaseId} href="#" class="editor-button-small testcase-tab selected">Response</button>`
+    )
+      .click((e) => {
+        e.preventDefault();
+        selectTestcaseTab('response', testCaseId);
+      })
+      .appendTo(testcaseTabs);
+
+    // Assertion tab
+    $(
+      `<button id=testcase-tab-assertion-${testCaseId} href="#" class="editor-button-small testcase-tab" style="margin-right: -2px">Assertions</button>`
+    )
+      .click((e) => {
+        e.preventDefault();
+        selectTestcaseTab('assertion', testCaseId);
+      })
+      .appendTo(testcaseTabs);
+
+    // Traces tab
+    $(
+      `<button id=testcase-tab-traces-${testCaseId} href="#" class="editor-button-small testcase-tab">Traces</button>`
+    )
+      .click((e) => {
+        e.preventDefault();
+        // Go to main workspace when debug message is hovered
+        // $('#view-main-flow').click();
+        selectTestcaseTab('traces', testCaseId);
+      })
+      .appendTo(testcaseTabs);
+
+      // This is the dropzone for content that will be selected in the tabs
+      $(`<div class="testcase-info-container">
+      <div id="testcase-info-response-${testCaseId}" class="testcase-info selected">
+      <div style="display: flex; justify-content: flex-end; margin-right: 10px"><span class="testcase-resp-status">Status: </span><span id="testcase-status-${testCaseId}" style="font-size: 12px; color:#2979ff; margin-right: 4px"></span></div>
+        <div id="testcase-info-response-header">
+          <div id="testcase-info-response-bodyheaders">
+            <span id="tab-body-selected-${testCaseId}" class="tab-label-bh tab-separation selected">Body</span>
+            <span id="tab-headers-selected-${testCaseId}" class="tab-label-bh tab-separation">Headers</span>
+          </div>
+          <div id="testcase-info-response-bodyformat-container-${testCaseId}" class="testcase-info-response-bodyformat-container">
+            <select id="testcase-info-response-bodyformat-${testCaseId}" class="testcase-info-response-bodyformat">
+              <option value="text" selected="selected">Text</option>
+              <option value="json">JSON</option>
+              <option value="xml">XML</option>
+              <option value="html">HTML</option>
+            </select>
+          </div>
+          <div id="testcase-info-wrap-container-${testCaseId}" class="testcase-info-wrap-container">
+            <a id="testcase-wrap-btn-${testCaseId}" class="testcase-wrap-btn-clazz" href="#">
+            <i class="fa fa-paragraph"></i>  
+            </a>
+          </div>
+
+          <div id="testcase-info-copypaste-container-${testCaseId}" class="testcase-info-copypaste-container">
+            <a id="testcase-copypaste-btn-${testCaseId}" class="testcase-wrap-btn-clazz" href="#">
+            <i class="fa fa-copy"></i>  
+          </a>
+          </div>
+        </div>
+
+        <div id="testcase-resp-body-${testCaseId}" class="tab-content-bh selected selectable" style="height: 45vh"></div>
+        <div id="testcase-resp-headers-${testCaseId}" class="tab-content-bh selectable"></div>
+      </div>
+      <div id="testcase-info-assertion-${testCaseId}" class="testcase-info"></div>
+      <div id="testcase-info-traces-${testCaseId}" class="testcase-info testcase-info-traces"></div>
+    </div>`).appendTo(wrapperTestCaseResults);
+
+    // Put an ref element in place ready to attach debug messages from the nodes ...
+    $(`#test-debug-message-cache-${testCaseId}`).appendTo($(`#testcase-info-traces-${testCaseId}`));
+
+    // attach events to the selection of the tabs
+    $(`#tab-body-selected-${testCaseId}`).click(event => {
+      event.preventDefault();
+      changeTabSelection('body', testCaseId);
+    });
+
+    $(`#tab-headers-selected-${testCaseId}`).click(event => {
+      event.preventDefault();
+      changeTabSelection('headers', testCaseId);
+    });
+
+    // Create an editor the the response body
+    editors[testCaseId] =  RED.editor.createEditor({
+      id: `testcase-resp-body-${testCaseId}`,
+      lineNumbers: true,
+      showFoldWidgets: true,
+      mode:"ace/mode/text",
+      options: {
+        wrap: true
+      }
+    });
+
+    // Listen for the editor format to be set
+    $(`#testcase-info-response-bodyformat-${testCaseId}`).on('change', function (e) {
+      var valueSelected = this.value;
+      switch (valueSelected) {
+        case 'json': 
+          editors[testCaseId].getSession().setMode('ace/mode/json'); 
+          break;
+        case 'xml': 
+          editors[testCaseId].getSession().setMode('ace/mode/xml'); 
+          let vxml = editors[testCaseId].getSession().getValue();
+          editors[testCaseId].getSession().setValue(formatXml(vxml));
+          break;
+        case 'html': 
+          editors[testCaseId].getSession().setMode('ace/mode/html'); 
+          let vhtml = editors[testCaseId].getSession().getValue();
+          editors[testCaseId].getSession().setValue(formatXml(vhtml));
+          break;
+        default: 
+          editors[testCaseId].getSession().setMode('ace/mode/text'); 
+          break
+      }
+    });
+
+    // Listen to wrap mode
+    $(`#testcase-wrap-btn-${testCaseId}`).click(e => {
+      editors[testCaseId].getSession().setOptions({
+        wrap: !editors[testCaseId].getSession().getUseWrapMode()
+      })
+    });
+
+    $(`#testcase-info-copypaste-container-${testCaseId}`).click(e=> {
+      RED.clipboard.copyText(
+        editors[testCaseId].getSession().getValue(), 
+        $(`#testcase-info-copypaste-container-${testCaseId}`), 
+        'Response Copied to Clipboard');
+    });
+
+    RED.popover.tooltip($(`#testcase-info-wrap-container-${testCaseId}`), 'Wrap Line');
+  }
+
+  function formatXml(xml, tab) { // tab = optional indent value, default is tab (\t)
+    var formatted = '', indent= '';
+    tab = tab || '\t';
+    xml.split(/>\s*</).forEach(function(node) {
+        if (node.match( /^\/\w/ )) indent = indent.substring(tab.length); // decrease indent by one 'tab'
+        formatted += indent + '<' + node + '>\r\n';
+        if (node.match( /^<?\w[^>]*[^\/]$/ )) indent += tab;              // increase indent
+    });
+    return formatted.substring(1, formatted.length-3);
+  }
+
+  function updateTestCaseStart(event, msg) {
+    let { testCaseID, targetOutput } = msg.payload.testCaseResults;
+
+    // sanitize the testCaseId, i.e. removing dots as jquery selector does not like it
+    let testCaseId = testCaseID.replace(/\./g, '_')
+
+
+    let flowres = targetOutput.response;
+
+    // Attach the response and the status
+    $(`#testcase-status-${testCaseId}`).text(`${flowres.statusCode} ${flowres.statusMessage}`);
+    //$(`#testcase-resp-body-${testCaseId}`).text(convertBodyToString(flowres.body)); 
+    editors[testCaseId].getSession().setValue(convertBodyToString(flowres.body));
+    editors[testCaseId].resize();
+    // attach the response headers
+    attachHeaders(flowres.headers, testCaseId);
+
+  }
+
+  function convertBodyToString(body){
+    let typeBody = typeof body;
+
+    if (typeBody === 'object'){
+      return JSON.stringify(body, null, 2);
+    }else if (typeBody === 'string') {
+      //return body.replace(/['"]+/g, '');;
+      return body;
+    } else {
+      return ""
+    }
+   
+  }
+
+  function attachHeaders(headers, testCaseId){
+    let headersContainerEl = $(`#testcase-resp-headers-${testCaseId}`);
+    for (let header in headers) {
+      $(`
+      <div>
+        <span class="testcase-resp-header" style="color: #757575; font-weight: 500">
+          ${header} <i class="fa fa-long-arrow-right" style="color: #757575;"></i>
+        </span>
+        <span style="color: #757575;">
+          ${headers[header]}
+        </span>
+      </div>`).appendTo(headersContainerEl)
+    }
+  }
+
+  function changeTabSelection(key, testCaseId){
+    // if headers selected, then disable the output format and wrap line option
+    if (key === 'headers') {
+      $(`#testcase-info-response-bodyformat-container-${testCaseId}`).hide();
+      $(`#testcase-info-wrap-container-${testCaseId}`).hide();
+      $(`#testcase-info-copypaste-container-${testCaseId}`).hide();
+    } else {
+      $(`#testcase-info-response-bodyformat-container-${testCaseId}`).show();
+      $(`#testcase-info-wrap-container-${testCaseId}`).show();
+      $(`#testcase-info-copypaste-container-${testCaseId}`).show();
+    }
+
+
+    // Reset selectors
+    $(`#tab-body-selected-${testCaseId}`).removeClass('selected');
+    $(`#tab-headers-selected-${testCaseId}`).removeClass('selected');
+
+    // Reset containers
+    $(`#testcase-resp-body-${testCaseId}`).removeClass('selected');
+    $(`#testcase-resp-headers-${testCaseId}`).removeClass('selected');
+
+    // Mark it as selected
+    $(`#tab-${key}-selected-${testCaseId}`).addClass('selected');
+    $(`#testcase-resp-${key}-${testCaseId}`).addClass('selected');
+  }
+
+  function selectTestcaseTab(key, testCaseID){
+    // Reset the tabs
+    $(`#testcase-tab-assertion-${testCaseID}`).removeClass('selected');
+    $(`#testcase-tab-response-${testCaseID}`).removeClass('selected');
+    $(`#testcase-tab-traces-${testCaseID}`).removeClass('selected');
+
+    // Reset the content
+    $(`#testcase-info-assertion-${testCaseID}`).removeClass('selected');
+    $(`#testcase-info-response-${testCaseID}`).removeClass('selected');
+    $(`#testcase-info-traces-${testCaseID}`).removeClass('selected');
+
+    // Add the selection
+    $(`#testcase-tab-${key}-${testCaseID}`).addClass('selected');
+    $(`#testcase-info-${key}-${testCaseID}`).addClass('selected');
+
+  }
+
+  function updateTestCaseEnd(event, msg) {
+    hideDebuggerControls();
+    let { testCaseID, assertionResults } = msg.payload.testCaseResults;
+    // sanitize the testCaseId, i.e. removing dots as jquery selector does not like it
+    let testCaseId = testCaseID.replace(/\./g, '_')
+    let status = 'passed';
+
+    // Check whether the testcase is failed or not ...
+    for (let i=0; i < assertionResults.length; i++){
+      if (assertionResults[i].status === 'failed') {
+        status = 'failed';
+        break;
+      }
+    }
+    // Find the testcase section
+    if (status === 'failed'){
+      $(`#section-${testCaseId}`).parent().parent().addClass('failed');
+    } else {
+      $(`#section-${testCaseId}`).parent().parent().addClass('passed');
+    }
+  }
+
+  function updateTestCaseAssertion(event, msg) {
+    const { testCaseID, description, status, diffReported } = msg.payload;
+    // sanitize the testCaseId, i.e. removing dots as jquery selector does not like it
+    let testCaseId = testCaseID.replace(/\./g, '_')
+
+    let assertionSectionHtml
+    if (status === 'failed'){
+      assertionSectionHtml = `
+      <div class="assertion assertion-failed" style="display: flex; flex-direction: column;">
+        <div style="display:flex; align-items: center;">
+          <i class="fa fa-times" style="color:red"></i> 
+          <span style="padding-left: 5px">${description}</span><br/>
+        </div>
+        <div style="font-size: 10px; padding-left: 17px; margin-top:-3px">${diffReported}</div>
+      </div>
+      `;
+    } else {
+      assertionSectionHtml = `
+      <div class="assertion assertion-passed">
+      <i class="fa fa-check" style="color:green"></i> 
+      <span>${description}</span>
+      </div>
+      `;
+    }
+    
+    let testCaseAssertionsContainer = $(`#testcase-info-assertion-${testCaseId}`)
+
+    $(assertionSectionHtml).appendTo(testCaseAssertionsContainer);
+    testCaseSection.container.show();
+  }
+
+  function onsame(){
+    RED.actions.invoke('core:hide-sidebar');
+  }
+
+  // Refresh the test tab
+  // silently - if true, we will update the nodes if required, but do not show the sidebar. Used primarily for the save button
+  function refreshTab(silently) {
+    if (!silently){
+      RED.actions.invoke('core:show-sidebar');
+    }
+
+    // Append to the selector all testcases found in the project
+    let $testSidebarTestcases = $('#test-sidebar-testcases');
+    
+    // Searching for all testcases in the test.flow node.
+    let testcasenodes = App.nodes.filterNodes({ z: 'test.flow', type: 'TestCase' });
+    // Searching for all HTTP testcases in the test.flow node.
+    let httptestcasenodes = App.nodes.filterNodes({ z: 'test.flow', type: 'HTTPTestCase' });
+
+    testNodes = testcasenodes.concat(httptestcasenodes);
+    if (testNodes && Array.isArray(testNodes) && testNodes.length > 0) {
+      $('#test-sidebar-notestfound-explainer').hide();
+      $testSidebarTestcases.empty();
+
+      testNodes.forEach(tn => {
+        $testSidebarTestcases.append(
+          `<option value=${tn.id}>${tn.name} (${tn.id})</option>`
+        );
+      });
+      $testSidebarTestcases.append(
+        `<option disabled>────────────────────</option>`
+      );
+      $testSidebarTestcases.append(
+        `<option value="${RUN_ALL_TEST_CASES}"> Run all TestCases</option>`
+      ); 
+      // Check which option will be selected
+      // a) If nothing was selected, select the empty
+      if (testCaseIdSelected === undefined || testCaseIdSelected === null) {
+        $('#test-sidebar-testcases').val('');
+      } else {
+        // b) Otherwise select the testcase previously selected
+        $(`#test-sidebar-testcases option[value="${testCaseIdSelected}"]`).attr(
+          'selected',
+          true
+        );
+      }
+    } else {
+      $testSidebarTestcases.empty();
+      $testSidebarTestcases.append(
+        `<option disabled>No testcases found</option>`
+      );
+      // Add image in the sidebar explaining why this space is empty
+      $('#test-sidebar-notestfound-explainer').show();
+    }
+  }
+
+  function init() {
+    // Subcribe to runtime events for test
+    ipcRenderer.removeAllListeners('test:testcase-init');
+    ipcRenderer.removeAllListeners('test:testcase-start');
+    ipcRenderer.removeAllListeners('test:testcase-end');
+    ipcRenderer.removeAllListeners('test:testcase-start');
+    ipcRenderer.removeAllListeners('debugger:stopped');
+
+    ipcRenderer.on('test:testcase-init', updateTestCaseInit);
+    ipcRenderer.on('test:testcase-start', updateTestCaseStart);
+    ipcRenderer.on('test:testcase-end', updateTestCaseEnd);
+    ipcRenderer.on('test:assertion-report', updateTestCaseAssertion);
+
+    ipcRenderer.on('debugger:stopped', debuggerStoppedOnBreakpoint);
+    
+
+    // Prepare the html wrappers
+    initHtml();
+
+    // Attach click event to the "run test" button
+    $('#test-sidebar-run-btn').click(triggerExecuteTestSuite);
+
+    // Attach a click event to the debu button
+    $('#test-sidebar-debug-btn').click(triggerDebugTestSuite);
+
+    // Attach click event to the "clear tests" button
+    $('#test-sidebar-clear').click(clearTestSuite)
+
+    // Attach the change event to the "testcase" select
+    $('#test-sidebar-testcases').change(e => {
+      testCaseIdSelected = e.target.value;
+      saveSettings();
+    });
+
+    // Attach debugger events
+    $('#test-sidebar-debug-continue').click( async (e)=> {
+      await window.__kumologica.debugger.continue()
+    });
+
+    $('#test-sidebar-debug-terminate').click( async (e)=> {
+      await window.__kumologica.debugger.terminate();
+    });
+
+    $('#test-sidebar-debug-next').click( async (e)=> {
+      await window.__kumologica.debugger.next();
+    });
+
+
+    $('#test-sidebar-debug-restart').click( async (e)=> {
+      await window.__kumologica.debugger.terminate();
+      // give 1 sec to clean up the tab
+      setTimeout(async()=> {
+        await triggerDebugTestSuite();
+      }, 500);
+    });
+
+    RED.events.on('deploy:finished', async()=> {
+      if (triggeredTest){
+        await executeTestSuite();
+        triggeredTest = false;
+      }
+     
+    });
+
+
+  }
+
+  function show() {
+    RED.sidebar.show('test');
+  }
+
+  function clearTestSuite() {
+    $('#test-results-wrapper').empty();
+  }
+
+  async function triggerExecuteTestSuite(opts){
+    // Clean up the test results from the secion
+    if (sections) {
+      sections.removeAll();
+    }
+    // Enable debug?
+    if (opts && opts.debug) {
+      await window.__kumologica.debugger.enable();
+    } else {
+      await window.__kumologica.debugger.disable();
+    }
+    // The test will be triggered automatically, when the deployment is finished.
+    triggeredTest = true;
+    RED.deploy.save(); // onDeploy finished --> invoke `executeTestSuite()`;
+  }
+
+  async function executeTestSuite() {
+    editors = {};
+    //Update the testCase selected
+    testCaseIdSelected = $(`#test-sidebar-testcases`).children("option:selected").val();
+
+    // Clean up the previous test results
+    $('#test-results-wrapper').empty();
+    
+    // Show the terminal if close
+    let terminalOpen = $('#workspace-terminal').is(":visible");
+    if (!terminalOpen){
+      $('#shelve-middle').click();
+    }
+
+    // Clear the cache of debug messages
+    $('#test-debug-messages-caches').empty();
+
+    // Check if traceability is enabled
+    let traceabilityEnabled = $('#isTraceabilitySelected').is(':checked');
+
+    // Run the selected case
+    // - check whether there is only one test case to run or we should run all of them
+    if (testCaseIdSelected) {
+      const environment = getValues().properties;
+
+      if (RUN_ALL_TEST_CASES === testCaseIdSelected) {
+        for (let i=0; i < testNodes.length; i++) { 
+          createDebugMessageCache(testNodes[i].id);
+          try{
+            // console.log(`[tab-test] Running testcase: ${testNodes[i].id} ...`, )
+            await window.__kumologica.libs.testFlow('{}', testNodes[i].id, environment, traceabilityEnabled);
+          }catch(err){
+            console.log('[tab-test] error found: ', err);
+          }
+        }    
+      } else {
+        try {
+          createDebugMessageCache(testCaseIdSelected);
+          await window.__kumologica.libs.testFlow('{}', testCaseIdSelected, environment, traceabilityEnabled);
+        } catch(err) {
+          console.log('[tab-test] error found: ', err);
+          //App.notify(`Error found: ${JSON.stringify(err)}`, { type: 'error'});
+        }
+      }
+    } else {
+      RED.notify('No selected Testcase', { type: 'warning' });
+    }
+  }
+
+  function createDebugMessageCache(testCaseID){
+    let sanitizeTestCaseID = testCaseID.replace(/\./g, '_')
+    $(`<div id="test-debug-message-cache-${sanitizeTestCaseID}" style="margin-right: 2px"></div>`).appendTo($('#test-debug-messages-caches'));
+  }
+
+  function initHtml() {
+    tabContent = document.createElement('div');
+    tabContent.className = 'sidebar-test';
+
+    RED.actions.add('core:show-test-tab', show);
+
+    stackContainer = $('<div>', {
+      class: 'sidebar-node-info-stack'
+    }).appendTo(tabContent);
+
+    // Append the header
+    let headerContentHtml = `
+      <div class="sidebar-title-wrapper">
+        <span>Tests</span>
+      </div>
+      <div id="test-sidebar-header" class="sidebar-header">
+        <div id="test-info-wrapper" style="display:flex">
+          <div id="test-sidebar-header-wrapper-left">
+            <select id="test-sidebar-testcases" style="width: 100%; padding: 0px; height: 23px !important;" class="palette-textinput">
+                <option disabled>No Testcases Found</option>
+            </select>
+          </div>
+          <div id="test-sidebar-header-wrapper-right">
+            <!-- run btn -->
+            <a id="test-sidebar-run-btn" class="sidebar-header-button" href="#">
+              <i class="fa fa-play"></i>  
+              Run
+            </a>
+
+            <!-- debug btn -->
+            <a id="test-sidebar-debug-btn" class="sidebar-header-button" href="#">
+            <i class="fa fa-bug"></i>  
+            </a>
+
+            <!-- Environment properties btn -->
+            <a id="switchPropertiesBtn" class="sidebar-header-button" href="#">
+              <i class="icofont-eye-alt"></i>
+            </a>
+
+            <!-- clear btn -->
+            <a id="test-sidebar-clear" class="sidebar-header-button" href="#">
+            <i class="fa fa-trash"></i></a>
+          </div>
+        </div>
+        <div id="debugger-wrapper" style="display:none">
+          <div id="test-sidebar-debug-continue" class="sidebar-header-button debugger-button" href="#">
+            <img src="red/images/debugger/continue-full.png" width="20" height="20" style="filter: invert(55%)"> 
+            <span class="debug-button-label" style="margin-left:2px" >Continue</span>
+          </div>
+          <div id="test-sidebar-debug-next" class="sidebar-header-button debugger-button" href="#">
+            <img src="red/images/debugger/stepover.png" width="20" height="20" style="filter: invert(55%)"> 
+            <span class="debug-button-label">Next</span> 
+          </div>
+          <div id="test-sidebar-debug-restart" class="sidebar-header-button debugger-button" href="#">
+            <img src="red/images/debugger/restart.png" width="20" height="20" style="filter: invert(55%)"> 
+            <span class="debug-button-label">Restart</span> 
+          </div>
+          <div id="test-sidebar-debug-terminate" class="sidebar-header-button debugger-button" href="#">
+            <img src="red/images/debugger/stop.png" width="20" height="20" style="filter: invert(55%)">
+            <span class="debug-button-label">Stop</span> 
+          </div>
+        </div>
+        <div id="properties-wrapper">
+          <div id="propertiesWrapperHeader" style="display: flex; padding-bottom: 10px;">
+            <div id="enableTraceabilityWrapper" style="width: 50%; padding: 5px 0px 5px 5px;">
+            <!--
+               <input type="checkbox" id="isTraceabilitySelected" style="margin-top:0px"> Enable traceability
+               </input>
+               -->
+            </div>
+          </div>
+          <div id="propertiesSection" style="display:none">
+            <div id="propertiesLabel">Environment Variables</div>
+            <div id="table-test-properties">
+            </div>
+          </div>
+        </div>
+        <div id="test-debug-messages-caches" style="display:none">
+        </div>
+        <div id="test-debug-messages-caches" style="display:none">
+        </div>
+      </div>
+    `;
+
+    $(headerContentHtml).appendTo(stackContainer);
+
+    // Append the testResults wrapper
+    let testResultsWrapperHtml = `
+
+    <div id="test-results-wrapper">
+      <div id="test-sidebar-notestfound-explainer" style="display:none">
+        <div style="display:flex; flex-direction: column; align-items: center; margin-top: 150px">
+          <img style="width: 80px" src="red/images/test-icon.png" />
+          <div style="font-weight: bold; font-size: 22px; margin-top: 15px;color: grey;">No test found</div>
+          <div style="margin-top: 5px; color: grey;">Add a new <b>TestCase</b> node into the <b>Test</b> tab.</div>
+        </div>
+      </div>
+    </div>`;
+
+    let testResultsWrapper = $(testResultsWrapperHtml).appendTo(stackContainer);
+
+    sections = RED.stack.create({
+      container: testResultsWrapper
+    });
+
+    RED.sidebar.addTab({
+      id: 'test',
+      label: ' Test',
+      name: 'Test Case Runner',
+      iconClass: 'fa fa-flask',
+      action: 'core:show-test-tab',
+      content: tabContent,
+      pinned: true,
+      enableOnEdit: true,
+      onchange: refreshTab,
+      onsame: onsame
+    });
+
+    // Attach events
+
+    // Click event for toggle properties
+    $('#switchPropertiesBtn').click(e => {
+      toggleProperties();
+    });
+
+    // ==> Load initial data to the screen
+    // --> test config
+    // if config not loaded yet then test-config event handler will load it
+    //
+    let config = readPropertiesFromConfig();
+    attachProperties(config);
+
+    // Append to the list of properties a fake record to append a new property
+    attachAppendPropertyRow();
+    // Load the tooltips
+    RED.popover.tooltip($('#test-sidebar-header-wrapper-left'), 'Select Test Case to Run');
+    RED.popover.tooltip(
+      $('#test-sidebar-run-btn'),
+      'Run Test Case'
+    );
+    RED.popover.tooltip(
+      $('#test-sidebar-debug-btn'),
+      'Debug Test Case'
+    );
+    RED.popover.tooltip(
+      $('#test-sidebar-clear'),
+      'Clear Test Case Results'
+    );
+    RED.popover.tooltip(
+      $('#switchPropertiesBtn'),
+      'Environment Configuration'
+    );
+  }
+
+  function readPropertiesFromConfig() {
+    if (window.__kumologica.settings.testConfig) {
+      return window.__kumologica.settings.testConfig.getTestConfig();
+    }
+  }
+
+  // event triggered from header.js when test-config.json file has been loaded
+  // re-set properties in case they were not loaded during init
+  //
+  RED.events.on('test-config', function () {
+    let config = readPropertiesFromConfig();
+    attachProperties(config);
+    attachAppendPropertyRow();
+  });
+
+  function toggleProperties(){
+    if (propertiesOpened){
+      // close the properties window
+      $('#propertiesSection').hide();
+    } else {
+      // open the properties window
+      $('#propertiesSection').show();
+    }
+    // toggle the global switch
+    propertiesOpened = !propertiesOpened;
+  }
+
+  /**
+   * 
+   * @param {object} properties - { key:value, key:value, key: value,... }
+   */
+  function attachProperties(config) {
+
+    if (config) {
+      if(config.test) {
+        testCaseIdSelected = config.test;
+        $(`#test-sidebar-testcases option[value="${testCaseIdSelected}"]`).attr(
+          'selected',
+          true
+        );
+      }
+
+      // Add properties (key, value)
+      // interacting with reverse order because attachPropertyRow 
+      // calls prependTo so its always as first row. 
+      // this to keep fake new row at the bottom. 
+      //
+      
+      let keys = Object.keys(config.properties || {});
+      for (var i = keys.length - 1; i >= 0; i--) {
+        attachPropertyRow(keys[i], config.properties[keys[i]]);
+      }
+    }
+  }
+
+  function attachPropertyRow(key, value){
+    const s = key;
+    const keyid = s.replace(/[^a-zA-Z0-9-]/g, '_');
+    let propertyRow = `
+    <div class="table-row" id="row-${keyid}">
+      <div class="table-cell"><input id="key-${keyid}" class="palette-textinput" type="text" style="width:100%; font-size:12px"></input></div>
+      <div class="table-cell"><input id="value-${keyid}" class="palette-textinput" type="text" style="width:100%; font-size:12px"></input></div>
+      <div class="table-cell-btn" id="remove-property-${keyid}"><i class="fa fa-minus"></i></div>
+    </div>
+  `;
+    $(propertyRow).prependTo($('#table-test-properties'));
+
+    // Add values
+    $(`#key-${keyid}`).val(key);
+    $(`#value-${keyid}`).val(value);
+
+    // auto save post property update
+    $(`#key-${keyid}, #value-${keyid}`).change(function () {
+      saveSettings();
+    });
+
+    // remove property button click event
+    $(`#remove-property-${keyid}`).click((e) => {
+      deleteProperty(keyid);
+    });
+  }
+
+  function deleteProperty(key){
+    // detach the DOM element
+    $(`#row-${key}`).remove();
+    saveSettings();
+  }
+
+  function addProperty(key, value){
+    // reset the errors have happened in the past,... pity we cannot do the same in real life
+    $('#new-prop-key').removeClass('wrong-value');
+    $('#new-prop-value').removeClass('wrong-value');
+
+    let errorsFound = false;
+
+    if (!key){
+      errorsFound = true;
+      $('#new-prop-key').addClass('wrong-value');
+    }
+
+    if (!value){
+      errorsFound = true;
+      $('#new-prop-value').addClass('wrong-value');
+    }
+
+    if (!errorsFound){
+      // remove the addPropertyRow...
+      $('#table-row-append').remove();
+      // Sanitize the key. As this will be used as a valid `id` property of the html element
+      key = key.trim();
+
+      // add the new property
+      attachPropertyRow(key, value);
+      attachAppendPropertyRow();
+      saveSettings();
+    }
+  }
+
+  function getValues() {
+    // selected test case
+    // console.log('[tab-test] testCaseIdSelected=', testCaseIdSelected);
+    
+    let fnTest = testCaseIdSelected || "";
+    
+    // test properties
+    let properties = {};
+    let propRows = $('#table-test-properties .table-row');
+
+    propRows.map((index, row) => {
+      let prop = $(row).find('.table-cell').find('input');
+      let key = $(prop[0]).val();
+      let value = $(prop[1]).val();
+      properties[key] = value;
+    });
+
+    return {
+      test: fnTest,
+      properties: properties
+    };
+  }
+
+  function saveSettings() {
+    window.__kumologica.settings.testConfig.setTestConfig(getValues());
+  }
+
+  function attachAppendPropertyRow() {
+    if ($('#table-row-append').length) {
+      return; // no need to add append row, already defined
+    }
+
+    // add property button click event 
+    let addPropertyRow = `
+      <div id="table-row-append">
+        <div class="table-cell">
+            <input id="new-prop-key" class="palette-textinput" type="text" style="width:100%; font-size:12px" placeholder="key"></input>
+        </div>
+        <div class="table-cell">
+           <input id="new-prop-value" class="palette-textinput" type="text" style="width:100%; font-size:12px" placeholder="value"></input>
+        </div>
+        <div id="addSaveProperty" class="table-cell-btn"><i class="icofont-save"></i></div>
+      </div>
+    `;
+   $(addPropertyRow).appendTo($('#table-test-properties'));
+
+   // Attach the save event
+   $('#addSaveProperty').click(e => {
+    let key = $('#new-prop-key').val();
+    let value = $('#new-prop-value').val();
+    addProperty(key, value);
+   });
+   // Do not allow spaces on the key - replace if for dashes
+   $('#new-prop-key').on('input', () => {
+    let old = $('#new-prop-key').val();
+    $('#new-prop-key').val(old.replace(/\s+/g, '-') );
+   });
+  }
+
+  // Debugger operations
+  async function triggerDebugTestSuite() {
+    // console.log('[tab-test] Debugger started ...');
+    let { body}  = await window.__kumologica.debugger.listBreakpoints();
+    // console.log('[tab-test] Breakpoints =', body);
+    if ( body.length === 0 ) {
+      // case of no breakpoints found in the flow
+      await triggerExecuteTestSuite({ debug: false });
+      RED.notifications.notify('No breakpoints found in the flow', 'warning', undefined, 2000);
+    } else{
+      $('#test-info-wrapper').hide();
+      $('#properties-wrapper').hide();
+      $('#debugger-wrapper').show();
+      await triggerExecuteTestSuite({ debug: true });
+    }
+    
+  }
+
+  async function hideDebuggerControls() {
+    // console.log('[tab-test] Hiding debugger controls...');
+    $('#test-info-wrapper').show();
+    $('#properties-wrapper').show();
+    $('#debugger-wrapper').hide();
+  }
+
+  function showDebuggerControls() {
+    // console.log('[tab-test] Showing debugger controls ...');
+    $('#test-info-wrapper').hide();
+    $('#properties-wrapper').hide();
+    $('#debugger-wrapper').show();
+  }
+
+  function debuggerStoppedOnBreakpoint(e,msg) {
+    // console.log('[tab-test] Debugger stopped on breakpoint ...e=', e);
+    // console.log('[tab-test] Debugger stopped on breakpoint ...msg=', msg);
+
+    showDebuggerControls();
+
+    let universalNodeId = msg.payload.nodeId; 
+    let testCaseID = universalNodeId.split('::')[0];
+    // sanitize the testCaseId, i.e. removing dots as jquery selector does not like it
+    testCaseId = testCaseID.replace(/\./g, '_');
+    
+    sections.expandLastEntry();
+    selectTestcaseTab('traces', testCaseId);
+  }
+
+  return {
+    init,
+    refreshTab,
+  };
+})();