@kumologica/sdk 3.2.0-beta9 → 4.0.0-alpha2

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

@@ -1,987 +0,0 @@
-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
-  let environmentSelected;
-
-  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': 
-          let rjson = editors[testCaseId].getSession().getValue();
-          let prjson = JSON.parse(rjson);
-          editors[testCaseId].getSession().setValue(JSON.stringify(prjson, null, 2));
-          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({ type: 'TestCase' });
-    // Searching for all HTTP testcases in the test.flow node.
-    let httptestcasenodes = App.nodes.filterNodes({ type: 'HTTPTestCase' });
-
-    testNodes = testcasenodes.concat(httptestcasenodes);
-    
-
-    if (testNodes && Array.isArray(testNodes) && testNodes.length > 0) {
-      $('#test-sidebar-notestfound-explainer').hide();
-      $testSidebarTestcases.empty();
-
-      testNodes.forEach(tn => {
-        let tabName = RED.nodes.getTabLabel(tn.z);
-        $testSidebarTestcases.append(
-          `<option value=${tn.id}>${tabName} > ${tn.name}</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();
-    }
-
-    refreshEnvironments();
-  }
-
-  function refreshTestCases() {
-    let config = window.__kumologica.settings.testConfig;
-    if (config) {
-      // Preselect the last testCase selected
-      testCaseIdSelected = config.getLatestSelectedTestCase();
-  
-      $(`#test-sidebar-testcases option[value="${testCaseIdSelected}"]`).attr(
-        'selected',
-        true
-      );
-    }
-    
-  }
-
-  function refreshEnvironments() {
-    let config =  window.__kumologica.settings.testConfig;
-    if (config) {
-      let environmentsList =config.listEnvironments();
-
-      let $testSidebarEnvironments = $('#test-sidebar-environments');
-      $testSidebarEnvironments.empty();
-  
-      // Attach the "no environments" option
-      $testSidebarEnvironments.append(
-        `<option value="__no_environment__">No Environment</option>`
-      );
-      environmentsList.forEach(e => {
-        $testSidebarEnvironments.append(
-          `<option value=${e}>${e}</option>`
-        );
-      });
-  
-      // Select the latest environment
-      environmentSelected = window.__kumologica.settings.testConfig.getLatestSelectedEnvironment();
-      $(`#test-sidebar-environments option[value="${environmentSelected}"]`).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. 
-   */
-  function refreshProperties() {
-    if (window.__kumologica.settings.testConfig){
-      let envvars = window.__kumologica.settings.testConfig.listVariablesByEnvironment();
-      // Clean up the table before starting injecting the new variables.
-      $('#table-test-properties').empty();
-  
-      envvars.forEach(ev => {
-        attachPropertyRow(ev.key, ev.value);
-      })
-    }
-    
-  }
-
-  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();
-    });
-    $('#test-sidebar-environments').change(e => {
-      environmentSelected = e.target.value;
-      saveSettings();
-      refreshProperties();
-    })
-
-    // Attach edit button click event
-    $('#edit-environments').click((e) => {
-      e.stopPropagation();
-      RED.actions.invoke('core:settings:select-environments');
-    });
-
-    // 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;
-      }
-    });
-
-    // Case where the environment variables config has change
-    RED.events.on('settings:environment-variables-changed', ()=> {
-      refreshEnvironments();
-    })
-
-
-  }
-
-  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();
-
-    // Run the selected case
-    // - check whether there is only one test case to run or we should run all of them
-    if (testCaseIdSelected) {
-      // Get the environment
-      let environment = {};
-      const aEnvironmentVars = window.__kumologica.settings.testConfig.listVariablesByEnvironment();
-      aEnvironmentVars.forEach(env => {
-        environment[env.key] = env.value;
-      });
-
-      // Trigger the testcases
-      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);
-          }catch(err){
-            console.log('[tab-test] error found: ', err);
-          }
-        }    
-      } else {
-        try {
-          createDebugMessageCache(testCaseIdSelected);
-          await window.__kumologica.libs.testFlow('{}', testCaseIdSelected, environment);
-        } 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">
-
-        <div style="display:flex;width:100%;padding-right:10px">
-
-          <div id="sidebar-title-wrapper-left" style="display:flex; width:50%">
-            <span>Tests</span>
-          </div>
-
-          <div id="sidebar-title-wrapper-right" style="text-align: right; display: block; width: 50%;">
-              
-              <!-- environments section -->
-              <div id="test-info-environments-wrapper" style="display:flex; height: 24px">
-                <select id="test-sidebar-environments" style="width: 100%; padding-left: 5px !important; padding: 0px; height: 23px !important;" class="palette-textinput-alt">
-                  <option value="__no_environment__">No Environment</option>
-                </select>
-              </div>
-              <span id="edit-environments" class="pointer" style="font-weight: 500;font-size: 12px; color: #2979ff;">Edit</span>
-              
-          </div>
-
-        </div>
-
-      </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; padding-left: 5px; 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="#" style="color: white !important; background: #2979ff;">
-              <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
-    refreshScreen(); 
-
-    // Append to the list of properties a fake record to append a new property
-    // attachAppendPropertyRow(); // TODO: Javier review
-    
-    // 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'
-    );
-  }
-
-  // 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 () {
-    refreshScreen();
-    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 refreshScreen() {
-    refreshTestCases();
-    refreshEnvironments();
-    refreshProperties();
-  }
-
-  
-
-  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 readonly id="key-${keyid}" class="palette-textinput" type="text" style="width:100%; font-size:12px" onfocus="this.blur()"></input>
-      </div>
-      <div class="table-cell">
-        <input readonly id="value-${keyid}" class="palette-textinput" type="text" style="width:100%; font-size:12px" onfocus="this.blur()"></input>
-      </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() {
-    let testcase = testCaseIdSelected || "";
-    let environment = environmentSelected || "__no_environment__"
-
-    return {
-      testcase,
-      environment
-    };
-  }
-
-  function saveSettings() {
-    window.__kumologica.settings.testConfig.saveTestValuesIntoConfig(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,
-  };
-})();