@king-design/react 2.1.4 → 2.1.6

package/components/dropdown/index.spec.js

@@ -13,8 +13,7 @@ describe('Dropdown', function () {
   afterEach(function (done) {
     unmount();
     setTimeout(done, 500);
-  });
-  // it('demos test', () => {
+  }); // it('demos test', () => {
   // const req = require.context('~/components/dropdown/demos', true, /^((?!async).)*index\.js$/i);
   // req.keys().forEach(item => {
   // if (item.includes('contextmenu')) return;
@@ -29,326 +28,399 @@ describe('Dropdown', function () {
   // unmount(i);
   // });
   // });
+
   it('should save original events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _click, Demo, _mount, instance, element;
+
     return _regeneratorRuntime.wrap(function _callee$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _click = sinon.spy();
-          Demo = /*#__PURE__*/function (_Component) {
-            _inheritsLoose(Demo, _Component);
-            function Demo() {
-              var _context;
-              var _this;
-              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                args[_key] = arguments[_key];
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _click = sinon.spy();
+
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context;
+
+                var _this;
+
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+
+                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+                _this.Dropdown = Dropdown;
+                _this.DropdownItem = DropdownItem;
+                _this.DropdownMenu = DropdownMenu;
+                return _this;
               }
-              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
-              _this.Dropdown = Dropdown;
-              _this.DropdownItem = DropdownItem;
-              _this.DropdownMenu = DropdownMenu;
-              return _this;
-            }
-            var _proto = Demo.prototype;
-            _proto.click = function click() {
-              _click();
-            };
-            return Demo;
-          }(Component);
-          Demo.template = "\n                const {Dropdown, DropdownItem, DropdownMenu} = this;\n                <div>\n                    <Dropdown>\n                        <div ref=\"test\" ev-click={this.click}>click</div>\n                        <DropdownMenu>\n                            <DropdownItem>test</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
-          _mount = mount(Demo), instance = _mount[0], element = _mount[1];
-          instance.refs.test.click();
-          expect(_click.callCount).to.eql(1);
-          _context2.next = 8;
-          return wait();
-        case 8:
-          expect(getElement('.k-dropdown-menu').innerHTML).to.matchSnapshot();
-        case 9:
-        case "end":
-          return _context2.stop();
+
+              var _proto = Demo.prototype;
+
+              _proto.click = function click() {
+                _click();
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Dropdown, DropdownItem, DropdownMenu} = this;\n                <div>\n                    <Dropdown>\n                        <div ref=\"test\" ev-click={this.click}>click</div>\n                        <DropdownMenu>\n                            <DropdownItem>test</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
+            _mount = mount(Demo), instance = _mount[0], element = _mount[1];
+            instance.refs.test.click();
+            expect(_click.callCount).to.eql(1);
+            _context2.next = 8;
+            return wait();
+
+          case 8:
+            expect(getElement('.k-dropdown-menu').innerHTML).to.matchSnapshot();
+
+          case 9:
+          case "end":
+            return _context2.stop();
+        }
       }
     }, _callee);
   })));
   it('should move mouse to dropdown menu', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var _mount2, instance, element, dropdown;
+
     return _regeneratorRuntime.wrap(function _callee2$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
-          dispatchEvent(element.firstElementChild, 'mouseenter');
-          _context3.next = 4;
-          return wait();
-        case 4:
-          dropdown = getElement('.k-dropdown-menu');
-          expect(dropdown.innerHTML).to.matchSnapshot();
-          dispatchEvent(element.firstElementChild, 'mouseleave');
-          dispatchEvent(dropdown, 'mouseenter');
-          _context3.next = 10;
-          return wait(500);
-        case 10:
-          expect(dropdown.parentNode).to.exist;
-        case 11:
-        case "end":
-          return _context3.stop();
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
+            dispatchEvent(element.firstElementChild, 'mouseenter');
+            _context3.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-dropdown-menu');
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            dispatchEvent(element.firstElementChild, 'mouseleave');
+            dispatchEvent(dropdown, 'mouseenter');
+            _context3.next = 10;
+            return wait(500);
+
+          case 10:
+            expect(dropdown.parentNode).to.exist;
+
+          case 11:
+          case "end":
+            return _context3.stop();
+        }
       }
     }, _callee2);
   })));
   it('nested dropdown', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _mount3, instance, element, dropdown, _dropdown$querySelect, hoverItem, clickItem, clickSubDropdown, hoverSubDropdown, _hoverSubDropdown$que, hoverItem1, hoverSubDropdown1, _hoverSubDropdown1$qu, hoverItem2, hoverSubDropdown2;
+
     return _regeneratorRuntime.wrap(function _callee3$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          this.timeout(0);
-          _mount3 = mount(NestedDemo), instance = _mount3[0], element = _mount3[1];
-          element.firstElementChild.click();
-          _context4.next = 5;
-          return wait();
-        case 5:
-          dropdown = getElement('.k-dropdown-menu');
-          _dropdown$querySelect = dropdown.querySelectorAll(':scope > .k-dropdown-item'), hoverItem = _dropdown$querySelect[3], clickItem = _dropdown$querySelect[4];
-          clickItem.click();
-          _context4.next = 10;
-          return wait(500);
-        case 10:
-          clickSubDropdown = getElement('.k-dropdown-menu');
-          expect(clickSubDropdown.innerHTML).to.matchSnapshot();
-          // should hide last sub-dropdown and show next
-          dispatchEvent(hoverItem, 'mouseenter');
-          _context4.next = 15;
-          return wait(500);
-        case 15:
-          hoverSubDropdown = getElement('.k-dropdown-menu');
-          expect(hoverSubDropdown.innerHTML).to.matchSnapshot();
-          _hoverSubDropdown$que = hoverSubDropdown.querySelectorAll('.k-dropdown-item'), hoverItem1 = _hoverSubDropdown$que[0];
-          dispatchEvent(hoverItem, 'mouseleave');
-          dispatchEvent(hoverItem1, 'mouseenter');
-          _context4.next = 22;
-          return wait(500);
-        case 22:
-          hoverSubDropdown1 = getElement('.k-dropdown-menu');
-          expect(hoverSubDropdown1.textContent).to.eql('item 1item 2');
-          _hoverSubDropdown1$qu = hoverSubDropdown1.querySelectorAll('.k-dropdown-item'), hoverItem2 = _hoverSubDropdown1$qu[0];
-          dispatchEvent(hoverItem1, 'mouseleave');
-          dispatchEvent(hoverItem2, 'mouseenter');
-          _context4.next = 29;
-          return wait(1000);
-        case 29:
-          hoverSubDropdown2 = getElement('.k-dropdown-menu');
-          expect(hoverSubDropdown2 === hoverSubDropdown1).to.be.true;
-        case 31:
-        case "end":
-          return _context4.stop();
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            this.timeout(0);
+            _mount3 = mount(NestedDemo), instance = _mount3[0], element = _mount3[1];
+            element.firstElementChild.click();
+            _context4.next = 5;
+            return wait();
+
+          case 5:
+            dropdown = getElement('.k-dropdown-menu');
+            _dropdown$querySelect = dropdown.querySelectorAll(':scope > .k-dropdown-item'), hoverItem = _dropdown$querySelect[3], clickItem = _dropdown$querySelect[4];
+            clickItem.click();
+            _context4.next = 10;
+            return wait(500);
+
+          case 10:
+            clickSubDropdown = getElement('.k-dropdown-menu');
+            expect(clickSubDropdown.innerHTML).to.matchSnapshot(); // should hide last sub-dropdown and show next
+
+            dispatchEvent(hoverItem, 'mouseenter');
+            _context4.next = 15;
+            return wait(500);
+
+          case 15:
+            hoverSubDropdown = getElement('.k-dropdown-menu');
+            expect(hoverSubDropdown.innerHTML).to.matchSnapshot();
+            _hoverSubDropdown$que = hoverSubDropdown.querySelectorAll('.k-dropdown-item'), hoverItem1 = _hoverSubDropdown$que[0];
+            dispatchEvent(hoverItem, 'mouseleave');
+            dispatchEvent(hoverItem1, 'mouseenter');
+            _context4.next = 22;
+            return wait(500);
+
+          case 22:
+            hoverSubDropdown1 = getElement('.k-dropdown-menu');
+            expect(hoverSubDropdown1.textContent).to.eql('item 1item 2');
+            _hoverSubDropdown1$qu = hoverSubDropdown1.querySelectorAll('.k-dropdown-item'), hoverItem2 = _hoverSubDropdown1$qu[0];
+            dispatchEvent(hoverItem1, 'mouseleave');
+            dispatchEvent(hoverItem2, 'mouseenter');
+            _context4.next = 29;
+            return wait(1000);
+
+          case 29:
+            hoverSubDropdown2 = getElement('.k-dropdown-menu');
+            expect(hoverSubDropdown2 === hoverSubDropdown1).to.be.true;
+
+          case 31:
+          case "end":
+            return _context4.stop();
+        }
       }
     }, _callee3, this);
   })));
   it('hide on click document', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount4, instance, element;
+
     return _regeneratorRuntime.wrap(function _callee4$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
-        case 0:
-          _mount4 = mount(BasicDemo), instance = _mount4[0], element = _mount4[1];
-          dispatchEvent(element.firstElementChild, 'mouseenter');
-          _context5.next = 4;
-          return wait();
-        case 4:
-          dispatchEvent(document, 'click');
-          _context5.next = 7;
-          return wait(500);
-        case 7:
-          expect(getElement('.k-dropdown-menu')).not.exist;
-        case 8:
-        case "end":
-          return _context5.stop();
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount4 = mount(BasicDemo), instance = _mount4[0], element = _mount4[1];
+            dispatchEvent(element.firstElementChild, 'mouseenter');
+            _context5.next = 4;
+            return wait();
+
+          case 4:
+            dispatchEvent(document, 'click');
+            _context5.next = 7;
+            return wait(500);
+
+          case 7:
+            expect(getElement('.k-dropdown-menu')).not.exist;
+
+          case 8:
+          case "end":
+            return _context5.stop();
+        }
       }
     }, _callee4);
   })));
   it('operate by keyboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
     var _mount5, instance, element, dropdown, subDropdown, subDropdown1;
+
     return _regeneratorRuntime.wrap(function _callee5$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
-        case 0:
-          _mount5 = mount(NestedDemo), instance = _mount5[0], element = _mount5[1];
-          dispatchEvent(element.firstElementChild, 'click');
-          _context6.next = 4;
-          return wait();
-        case 4:
-          dropdown = getElement('.k-dropdown-menu'); // down
-          dispatchEvent(document, 'keydown', {
-            keyCode: 40
-          });
-          _context6.next = 8;
-          return wait();
-        case 8:
-          expect(dropdown.innerHTML).to.matchSnapshot();
-          // up
-          dispatchEvent(document, 'keydown', {
-            keyCode: 38
-          });
-          _context6.next = 12;
-          return wait();
-        case 12:
-          expect(dropdown.innerHTML).to.matchSnapshot();
-          // up and enter
-          dispatchEvent(document, 'keydown', {
-            keyCode: 38
-          });
-          dispatchEvent(document, 'keydown', {
-            keyCode: 13
-          });
-          _context6.next = 17;
-          return wait();
-        case 17:
-          subDropdown = getElement('.k-dropdown-menu');
-          expect(subDropdown.innerHTML).to.matchSnapshot();
-          // right
-          dispatchEvent(document, 'keydown', {
-            keyCode: 39
-          });
-          _context6.next = 22;
-          return wait();
-        case 22:
-          subDropdown1 = getElement('.k-dropdown-menu');
-          expect(subDropdown1.innerHTML).to.matchSnapshot();
-          // left
-          dispatchEvent(document, 'keydown', {
-            keyCode: 37
-          });
-          _context6.next = 27;
-          return wait(500);
-        case 27:
-          expect(subDropdown1.style.display).to.eql('none');
-          // down in sub-menu
-          dispatchEvent(document, 'keydown', {
-            keyCode: 40
-          });
-          _context6.next = 31;
-          return wait();
-        case 31:
-          expect(subDropdown.innerHTML).to.matchSnapshot();
-          // select and hide
-          dispatchEvent(document, 'keydown', {
-            keyCode: 13
-          });
-          _context6.next = 35;
-          return wait(500);
-        case 35:
-          expect(getElement('.k-dropdown-menu')).not.exist;
-        case 36:
-        case "end":
-          return _context6.stop();
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _mount5 = mount(NestedDemo), instance = _mount5[0], element = _mount5[1];
+            dispatchEvent(element.firstElementChild, 'click');
+            _context6.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-dropdown-menu'); // down
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 40
+            });
+            _context6.next = 8;
+            return wait();
+
+          case 8:
+            expect(dropdown.innerHTML).to.matchSnapshot(); // up
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 38
+            });
+            _context6.next = 12;
+            return wait();
+
+          case 12:
+            expect(dropdown.innerHTML).to.matchSnapshot(); // up and enter
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 38
+            });
+            dispatchEvent(document, 'keydown', {
+              keyCode: 13
+            });
+            _context6.next = 17;
+            return wait();
+
+          case 17:
+            subDropdown = getElement('.k-dropdown-menu');
+            expect(subDropdown.innerHTML).to.matchSnapshot(); // right
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 39
+            });
+            _context6.next = 22;
+            return wait();
+
+          case 22:
+            subDropdown1 = getElement('.k-dropdown-menu');
+            expect(subDropdown1.innerHTML).to.matchSnapshot(); // left
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 37
+            });
+            _context6.next = 27;
+            return wait(500);
+
+          case 27:
+            expect(subDropdown1.style.display).to.eql('none'); // down in sub-menu
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 40
+            });
+            _context6.next = 31;
+            return wait();
+
+          case 31:
+            expect(subDropdown.innerHTML).to.matchSnapshot(); // select and hide
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 13
+            });
+            _context6.next = 35;
+            return wait(500);
+
+          case 35:
+            expect(getElement('.k-dropdown-menu')).not.exist;
+
+          case 36:
+          case "end":
+            return _context6.stop();
+        }
       }
     }, _callee5);
   })));
   it('context menu', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
     var _mount6, instance, element, dropdown;
+
     return _regeneratorRuntime.wrap(function _callee6$(_context7) {
-      while (1) switch (_context7.prev = _context7.next) {
-        case 0:
-          _mount6 = mount(ContextMenuDemo), instance = _mount6[0], element = _mount6[1];
-          dispatchEvent(element, 'contextmenu', {
-            pageX: 10,
-            pageY: 10
-          });
-          _context7.next = 4;
-          return wait();
-        case 4:
-          dropdown = getElement('.k-dropdown-menu');
-          expect(dropdown.style.left).to.eql('10px');
-          dispatchEvent(element, 'contextmenu', {
-            pageX: 11,
-            pageY: 11
-          });
-          _context7.next = 9;
-          return wait();
-        case 9:
-          expect(dropdown.style.left).to.eql('11px');
-          _context7.next = 12;
-          return wait(500);
-        case 12:
-          expect(dropdown.style.display).to.eql('');
-        case 13:
-        case "end":
-          return _context7.stop();
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            _mount6 = mount(ContextMenuDemo), instance = _mount6[0], element = _mount6[1];
+            dispatchEvent(element, 'contextmenu', {
+              pageX: 10,
+              pageY: 10
+            });
+            _context7.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-dropdown-menu');
+            expect(dropdown.style.left).to.eql('10px');
+            dispatchEvent(element, 'contextmenu', {
+              pageX: 11,
+              pageY: 11
+            });
+            _context7.next = 9;
+            return wait();
+
+          case 9:
+            expect(dropdown.style.left).to.eql('11px');
+            _context7.next = 12;
+            return wait(500);
+
+          case 12:
+            expect(dropdown.style.display).to.eql('');
+
+          case 13:
+          case "end":
+            return _context7.stop();
+        }
       }
     }, _callee6);
   })));
   it('click mouse and move outside should not hide menu', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
     var _mount7, instance, element, dropdown, _dropdown$querySelect2, hoverItem, clickItem, clickSubDropdown;
+
     return _regeneratorRuntime.wrap(function _callee7$(_context8) {
-      while (1) switch (_context8.prev = _context8.next) {
-        case 0:
-          _mount7 = mount(NestedDemo), instance = _mount7[0], element = _mount7[1];
-          element.firstChild.click();
-          _context8.next = 4;
-          return wait();
-        case 4:
-          dropdown = getElement('.k-dropdown-menu');
-          dispatchEvent(dropdown, 'mousedown');
-          dispatchEvent(document, 'mouseup');
-          dispatchEvent(document, 'click');
-          _context8.next = 10;
-          return wait(500);
-        case 10:
-          expect(dropdown.style.display).to.eql('');
-          // on submenu
-          _dropdown$querySelect2 = dropdown.querySelectorAll(':scope > .k-dropdown-item'), hoverItem = _dropdown$querySelect2[3], clickItem = _dropdown$querySelect2[4];
-          clickItem.click();
-          _context8.next = 15;
-          return wait();
-        case 15:
-          clickSubDropdown = getElement('.k-dropdown-menu');
-          dispatchEvent(clickSubDropdown, 'mousedown');
-          dispatchEvent(document, 'mouseup');
-          dispatchEvent(document, 'click');
-          _context8.next = 21;
-          return wait(500);
-        case 21:
-          expect(dropdown.style.display).to.eql('');
-          expect(clickSubDropdown.style.display).to.eql('');
-          // should hide on click document directly
-          dispatchEvent(document, 'click');
-          _context8.next = 26;
-          return wait(500);
-        case 26:
-          expect(getElement('.k-dropdown-menu')).to.be.undefined;
-        case 27:
-        case "end":
-          return _context8.stop();
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            _mount7 = mount(NestedDemo), instance = _mount7[0], element = _mount7[1];
+            element.firstChild.click();
+            _context8.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-dropdown-menu');
+            dispatchEvent(dropdown, 'mousedown');
+            dispatchEvent(document, 'mouseup');
+            dispatchEvent(document, 'click');
+            _context8.next = 10;
+            return wait(500);
+
+          case 10:
+            expect(dropdown.style.display).to.eql(''); // on submenu
+
+            _dropdown$querySelect2 = dropdown.querySelectorAll(':scope > .k-dropdown-item'), hoverItem = _dropdown$querySelect2[3], clickItem = _dropdown$querySelect2[4];
+            clickItem.click();
+            _context8.next = 15;
+            return wait();
+
+          case 15:
+            clickSubDropdown = getElement('.k-dropdown-menu');
+            dispatchEvent(clickSubDropdown, 'mousedown');
+            dispatchEvent(document, 'mouseup');
+            dispatchEvent(document, 'click');
+            _context8.next = 21;
+            return wait(500);
+
+          case 21:
+            expect(dropdown.style.display).to.eql('');
+            expect(clickSubDropdown.style.display).to.eql(''); // should hide on click document directly
+
+            dispatchEvent(document, 'click');
+            _context8.next = 26;
+            return wait(500);
+
+          case 26:
+            expect(getElement('.k-dropdown-menu')).to.be.undefined;
+
+          case 27:
+          case "end":
+            return _context8.stop();
+        }
       }
     }, _callee7);
   })));
   it('should throw error if has whitespace between real elements', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
     var Demo;
     return _regeneratorRuntime.wrap(function _callee8$(_context10) {
-      while (1) switch (_context10.prev = _context10.next) {
-        case 0:
-          Demo = /*#__PURE__*/function (_Component2) {
-            _inheritsLoose(Demo, _Component2);
-            function Demo() {
-              var _context9;
-              var _this2;
-              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-                args[_key2] = arguments[_key2];
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component2) {
+              _inheritsLoose(Demo, _Component2);
+
+              function Demo() {
+                var _context9;
+
+                var _this2;
+
+                for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                  args[_key2] = arguments[_key2];
+                }
+
+                _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
+                _this2.Dropdown = Dropdown;
+                _this2.DropdownItem = DropdownItem;
+                _this2.DropdownMenu = DropdownMenu;
+                return _this2;
               }
-              _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
-              _this2.Dropdown = Dropdown;
-              _this2.DropdownItem = DropdownItem;
-              _this2.DropdownMenu = DropdownMenu;
-              return _this2;
-            }
-            return Demo;
-          }(Component);
-          Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown>\n                        {''}\n                        <div ref=\"trigger\">hover</div>\n                        {''}\n                        <DropdownMenu>\n                            <DropdownItem>test</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
-          expect(function () {
-            return mount(Demo);
-          }).to.throw;
-        case 3:
-        case "end":
-          return _context10.stop();
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown>\n                        {''}\n                        <div ref=\"trigger\">hover</div>\n                        {''}\n                        <DropdownMenu>\n                            <DropdownItem>test</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
+            expect(function () {
+              return mount(Demo);
+            }).to.throw;
+
+          case 3:
+          case "end":
+            return _context10.stop();
+        }
       }
     }, _callee8);
-  })));
-  // it('should hydrate dropdown correctly', () => {
+  }))); // it('should hydrate dropdown correctly', () => {
   // class Demo extends Component {
   // static template = `
   // const {Dropdown, DropdownMenu, DropdownItem} = this;
@@ -377,138 +449,174 @@ describe('Dropdown', function () {
   // demo.destroy();
   // document.body.removeChild(container);
   // });
+
   it('should scroll to view when we focus on DropdownItem', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
     var Demo, _mount8, instance, element, dropdown, _dropdown$querySelect3, item, parent;
+
     return _regeneratorRuntime.wrap(function _callee9$(_context12) {
-      while (1) switch (_context12.prev = _context12.next) {
-        case 0:
-          Demo = /*#__PURE__*/function (_Component3) {
-            _inheritsLoose(Demo, _Component3);
-            function Demo() {
-              var _context11;
-              var _this3;
-              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-                args[_key3] = arguments[_key3];
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component3) {
+              _inheritsLoose(Demo, _Component3);
+
+              function Demo() {
+                var _context11;
+
+                var _this3;
+
+                for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                  args[_key3] = arguments[_key3];
+                }
+
+                _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context11 = [this]).call(_context11, args)) || this;
+                _this3.Dropdown = Dropdown;
+                _this3.DropdownItem = DropdownItem;
+                _this3.DropdownMenu = DropdownMenu;
+                return _this3;
               }
-              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context11 = [this]).call(_context11, args)) || this;
-              _this3.Dropdown = Dropdown;
-              _this3.DropdownItem = DropdownItem;
-              _this3.DropdownMenu = DropdownMenu;
-              return _this3;
-            }
-            return Demo;
-          }(Component);
-          Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown>\n                        <div ref=\"trigger\">hover</div>\n                        <DropdownMenu>\n                            <div style=\"height: 40px; overflow: auto;\">\n                                <DropdownItem>test1</DropdownItem>\n                                <DropdownItem>test2</DropdownItem>\n                            </div>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
-          _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
-          dispatchEvent(instance.refs.trigger, 'mouseenter');
-          _context12.next = 6;
-          return wait(500);
-        case 6:
-          dropdown = getElement('.k-dropdown-menu');
-          _dropdown$querySelect3 = dropdown.querySelectorAll('.k-dropdown-item'), item = _dropdown$querySelect3[1];
-          parent = item.parentNode;
-          dispatchEvent(item, 'mouseenter');
-          _context12.next = 12;
-          return wait();
-        case 12:
-          expect(parent.scrollTop).to.eql(item.offsetHeight * 2 - 40);
-        case 13:
-        case "end":
-          return _context12.stop();
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown>\n                        <div ref=\"trigger\">hover</div>\n                        <DropdownMenu>\n                            <div style=\"height: 40px; overflow: auto;\">\n                                <DropdownItem>test1</DropdownItem>\n                                <DropdownItem>test2</DropdownItem>\n                            </div>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
+            _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
+            dispatchEvent(instance.refs.trigger, 'mouseenter');
+            _context12.next = 6;
+            return wait(500);
+
+          case 6:
+            dropdown = getElement('.k-dropdown-menu');
+            _dropdown$querySelect3 = dropdown.querySelectorAll('.k-dropdown-item'), item = _dropdown$querySelect3[1];
+            parent = item.parentNode;
+            dispatchEvent(item, 'mouseenter');
+            _context12.next = 12;
+            return wait();
+
+          case 12:
+            expect(parent.scrollTop).to.eql(item.offsetHeight * 2 - 40);
+
+          case 13:
+          case "end":
+            return _context12.stop();
+        }
       }
     }, _callee9);
   })));
   it('focus trigger type', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
     var Demo, _mount9, instance;
+
     return _regeneratorRuntime.wrap(function _callee10$(_context14) {
-      while (1) switch (_context14.prev = _context14.next) {
-        case 0:
-          Demo = /*#__PURE__*/function (_Component4) {
-            _inheritsLoose(Demo, _Component4);
-            function Demo() {
-              var _context13;
-              var _this4;
-              for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-                args[_key4] = arguments[_key4];
+      while (1) {
+        switch (_context14.prev = _context14.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component4) {
+              _inheritsLoose(Demo, _Component4);
+
+              function Demo() {
+                var _context13;
+
+                var _this4;
+
+                for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                  args[_key4] = arguments[_key4];
+                }
+
+                _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
+                _this4.Dropdown = Dropdown;
+                _this4.DropdownItem = DropdownItem;
+                _this4.DropdownMenu = DropdownMenu;
+                _this4.onFocus = sinon.spy(function (e) {
+                  return console.log(e);
+                });
+                return _this4;
               }
-              _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
-              _this4.Dropdown = Dropdown;
-              _this4.DropdownItem = DropdownItem;
-              _this4.DropdownMenu = DropdownMenu;
-              _this4.onFocus = sinon.spy(function (e) {
-                return console.log(e);
-              });
-              return _this4;
-            }
-            return Demo;
-          }(Component);
-          Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown trigger=\"focus\">\n                        <input ref=\"trigger\" ev-focusin={this.onFocus} />\n                        <DropdownMenu>\n                            <DropdownItem>test1</DropdownItem>\n                            <DropdownItem>test2</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
-          _mount9 = mount(Demo), instance = _mount9[0];
-          dispatchEvent(instance.refs.trigger, 'focusin');
-          _context14.next = 6;
-          return wait(500);
-        case 6:
-          expect(getElement('.k-dropdown-menu')).to.be.exist;
-          expect(instance.onFocus.callCount).to.eql(1);
-          // clicking anywhere should not hide menu
-          dispatchEvent(document, 'click');
-          _context14.next = 11;
-          return wait(500);
-        case 11:
-          expect(getElement('.k-dropdown-menu')).to.be.exist;
-          dispatchEvent(instance.refs.trigger, 'focusout');
-          _context14.next = 15;
-          return wait(700);
-        case 15:
-          expect(getElement('.k-dropdown-menu')).to.not.be.exist;
-        case 16:
-        case "end":
-          return _context14.stop();
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown trigger=\"focus\">\n                        <input ref=\"trigger\" ev-focusin={this.onFocus} />\n                        <DropdownMenu>\n                            <DropdownItem>test1</DropdownItem>\n                            <DropdownItem>test2</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
+            _mount9 = mount(Demo), instance = _mount9[0];
+            dispatchEvent(instance.refs.trigger, 'focusin');
+            _context14.next = 6;
+            return wait(500);
+
+          case 6:
+            expect(getElement('.k-dropdown-menu')).to.be.exist;
+            expect(instance.onFocus.callCount).to.eql(1); // clicking anywhere should not hide menu
+
+            dispatchEvent(document, 'click');
+            _context14.next = 11;
+            return wait(500);
+
+          case 11:
+            expect(getElement('.k-dropdown-menu')).to.be.exist;
+            dispatchEvent(instance.refs.trigger, 'focusout');
+            _context14.next = 15;
+            return wait(700);
+
+          case 15:
+            expect(getElement('.k-dropdown-menu')).to.not.be.exist;
+
+          case 16:
+          case "end":
+            return _context14.stop();
+        }
       }
     }, _callee10);
   })));
   it('wrap by tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
     var _mount10, instance, element, dropdown, _dropdown$querySelect4, item1, item2, item3, item4;
+
     return _regeneratorRuntime.wrap(function _callee11$(_context15) {
-      while (1) switch (_context15.prev = _context15.next) {
-        case 0:
-          _mount10 = mount(TooltipDemo), instance = _mount10[0], element = _mount10[1];
-          dispatchEvent(element.firstChild, 'mouseenter');
-          _context15.next = 4;
-          return wait();
-        case 4:
-          dropdown = getElement('.k-dropdown-menu');
-          _dropdown$querySelect4 = dropdown.querySelectorAll('.k-dropdown-item'), item1 = _dropdown$querySelect4[0], item2 = _dropdown$querySelect4[1], item3 = _dropdown$querySelect4[2], item4 = _dropdown$querySelect4[3];
-          dispatchEvent(item1, 'mouseenter');
-          _context15.next = 9;
-          return wait();
-        case 9:
-          expect(getElement('.k-tooltip-content').textContent).to.eql('item 1');
-          dispatchEvent(item1, 'mouseleave');
-          dispatchEvent(item3, 'mouseenter');
-          _context15.next = 14;
-          return wait();
-        case 14:
-          expect(getElement('.k-tooltip-content').textContent).to.eql('disabled');
-          dispatchEvent(item3, 'mouseleave');
-          dispatchEvent(item4, 'mouseenter');
-          _context15.next = 19;
-          return wait();
-        case 19:
-          expect(getElement('.k-tooltip-content').textContent).to.eql('This is a nested Dropdown.');
-          dispatchEvent(item4, 'click');
-          _context15.next = 23;
-          return wait();
-        case 23:
-          expect(getElement('.k-dropdown-menu').textContent).to.eql('item 1item 2');
-          dispatchEvent(item4, 'mouseleave');
-          _context15.next = 27;
-          return wait(800);
-        case 27:
-          expect(getElement('.k-dropdown-menu')).to.not.be.exist;
-        case 28:
-        case "end":
-          return _context15.stop();
+      while (1) {
+        switch (_context15.prev = _context15.next) {
+          case 0:
+            _mount10 = mount(TooltipDemo), instance = _mount10[0], element = _mount10[1];
+            dispatchEvent(element.firstChild, 'mouseenter');
+            _context15.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-dropdown-menu');
+            _dropdown$querySelect4 = dropdown.querySelectorAll('.k-dropdown-item'), item1 = _dropdown$querySelect4[0], item2 = _dropdown$querySelect4[1], item3 = _dropdown$querySelect4[2], item4 = _dropdown$querySelect4[3];
+            dispatchEvent(item1, 'mouseenter');
+            _context15.next = 9;
+            return wait();
+
+          case 9:
+            expect(getElement('.k-tooltip-content').textContent).to.eql('item 1');
+            dispatchEvent(item1, 'mouseleave');
+            dispatchEvent(item3, 'mouseenter');
+            _context15.next = 14;
+            return wait();
+
+          case 14:
+            expect(getElement('.k-tooltip-content').textContent).to.eql('disabled');
+            dispatchEvent(item3, 'mouseleave');
+            dispatchEvent(item4, 'mouseenter');
+            _context15.next = 19;
+            return wait();
+
+          case 19:
+            expect(getElement('.k-tooltip-content').textContent).to.eql('This is a nested Dropdown.');
+            dispatchEvent(item4, 'click');
+            _context15.next = 23;
+            return wait();
+
+          case 23:
+            expect(getElement('.k-dropdown-menu').textContent).to.eql('item 1item 2');
+            dispatchEvent(item4, 'mouseleave');
+            _context15.next = 27;
+            return wait(800);
+
+          case 27:
+            expect(getElement('.k-dropdown-menu')).to.not.be.exist;
+
+          case 28:
+          case "end":
+            return _context15.stop();
+        }
       }
     }, _callee11);
   })));