jsTree set_id/create_node simpler scenario

refined set_id/create_node test to simpler scenario.

by Frank Long

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<div>
  <b>Background:</b> A problem is observed with node HTML that should remain unchanged, but gets reverted to an earlier state. This seems to be triggered when a create_node call follows a set_id.
  <br/>This test simulates a portion of behavior from a larger workflow. The goal of this test is to isolate that behavior, not to solve a valid business requirement.
</div>
<div id="tree" class="jstree jstree-default"></div>
<div>Before creating nodes all is well, click button below to run test</div>
<div>
  This Test
  <ol>
    <li>Sets the ID of an existing node (Category 3)
      <li>Creates a new node (category 11).</li>
  </ol>
  It records Category 3's outerHTML at each step.
</div>
<button id="TestButton">Run Test</button>
<br />
<button id="ResetButton">Reset</button>
<div id="outputdiv"></div>
<div id="aftertest" style="display:none">
  <hr>
  <ul>
    <li><b>Summary:</b> HTML appears properly formed after the set_id call. After creating a new node on the tree part of Category 3's HTML reverts to ID 3 while the LI's ID remains 4 as expected.</li>
    <li><b>Expected:</b>At step 2 the HTML for Category 3's node remains unchanged</li>
    <li><b>Actual:</b>At step 2 the HTML for Category 3's node has two unexpected changes, while the rest of the HTML remains unchanged. 1) the parent LI's attribute aria-labelledby value changes to 3_anchor. 2) the child a tag's id changes to 3_anchor.</li>
  </ul>
</div>

CSS

body {
  font: 10pt verdana
}

JavaScript

$('#tree').jstree({
   "core": {
     check_callback: true,
     data: [{
       "id": "1",
       "parent": "#",
       "text": "Category 1"
     }, {
       "id": "3",
       "parent": "#",
       "text": "Category 3"
     }, {
       "id": "5",
       "parent": "#",
       "text": "Category 5"
     }]
   }
 });


 $('#TestButton').click(test);
 $('#ResetButton').click(reset);

 function escapeHTML(html) {
   //return html;
   return html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }

 function test() {
   var inst = $('#tree').jstree(true),
     root = inst.get_node('#');
   //Create then Update several nodes in a row
   var inst = $('#tree').jstree(true),
     root = inst.get_node('#'),
     outtxt = "";
   outtxt += '<div style="font-weight:bold">0) Initial state of Category 3 node below</div>';
   console.log(inst.get_node('3', true));
   outtxt += '<pre>' + escapeHTML(inst.get_node('3', true)[0].outerHTML) + '</pre>';

   outtxt += '<div style="font-weight:bold">1) set_id - Category 3 id from 3 to 4 - expected id\'s to change in next line (success)</div>';
   inst.set_id(inst.get_node('3'), '4');
   outtxt += '<pre>' + escapeHTML(inst.get_node('4', true)[0].outerHTML) + '</pre>';

   outtxt += '<div style="font-weight:bold">2) create_node - Category 15 - expected no change in next line (partial failure - li\'s id is 4 as expected - a\'s id has reverted to 3</div>';
   inst.create_node(root, {
     id: "15",
     text: "Category 15"
   });
   outtxt += '<pre>' + escapeHTML(inst.get_node('4', true)[0].outerHTML) + '</pre>';
   $('#outputdiv').html(outtxt);
   $('#TestButton').prop("disabled", true);
   $('#aftertest').show();
 };

 function reset() {
   var inst = $('#tree').jstree(true),
     root = inst.get_node('#');
   $('#outputdiv').html("");
   $('#aftertest').hide();
$('#TestButton').prop("disabled", false);
   inst.refresh();

 }