fix: do not generate a new element for a floating layer if flElement …

…exists (fix #58) (#62)

* bugfix: wrong context menu initialization (fix #58)

* test: add a context-menu's init test

* chore: apply code review

* chore: apply code review 2

Co-authored-by: lightway82 <lightway82@gmail.com>

src/js/features/contextMenu.js

@@ -34,6 +34,7 @@ var ContextMenu = defineClass(
         return API_LIST.slice();
       }
     },
+
     init: function(tree, options) {
       var containerId = tree.rootElement.parentNode.id;
 
@@ -56,18 +57,18 @@ var ContextMenu = defineClass(
        */
       this.flId = containerId + '-fl';
 
-      /**
-       * Info of context menu in tree
-       * @type {Object}
-       */
-      this.menu = this._generateContextMenu(options.usageStatistics);
-
       /**
        * Floating layer element
        * @type {HTMLElement}
        */
       this.flElement = document.getElementById(this.flId);
 
+      /**
+       * Info of context menu in tree
+       * @type {Object}
+       */
+      this.menu = this._generateContextMenu(options.usageStatistics);
+
       /**
        * Id of selected tree item
        * @type {string}

test/features/contextMenu.spec.js

@@ -1,6 +1,18 @@
 var Tree = require('../../src/js/tree');
 var TuiContextMenu = require('tui-context-menu');
 
+function clearBody() {
+  var flElement = document.getElementById('tree-fl');
+  var treeElement = document.getElementById('tree');
+
+  if (flElement && flElement.parentNode) {
+    flElement.parentNode.removeChild(flElement);
+  }
+  if (treeElement && treeElement.parentNode) {
+    treeElement.parentNode.removeChild(treeElement);
+  }
+}
+
 describe('contextMenu feature', function() {
   var rootElement, tree, contextMenu, menuData;
   var data = [
@@ -56,8 +68,31 @@ describe('contextMenu feature', function() {
     contextMenu = tree.enabledFeatures.ContextMenu;
   });
 
+  afterEach(function() {
+    clearBody();
+  });
+
   describe('When _generateContextMenu() is called,', function() {
-    it('new floating layer should be generarated', function() {
+    it('should not generate new floating layer, if flElement exist', function() {
+      var flElement = document.createElement('div');
+      flElement.id = 'tree-fl';
+
+      clearBody();
+      loadFixtures('basicFixture.html');
+      document.body.appendChild(flElement);
+
+      tree = new Tree('#tree', {
+        rootElement: 'treeRoot',
+        data: data
+      });
+      tree.enableFeature('ContextMenu', {
+        menuData: menuData
+      });
+
+      expect(tree.enabledFeatures.ContextMenu.flElement).toEqual(flElement);
+    });
+
+    it('new floating layer should be generated', function() {
       contextMenu.flElement = null;
 
       spyOn(contextMenu, '_createFloatingLayer');