@king-design/react 2.0.0-beta.0

package/components/table/index.spec.js

@@ -0,0 +1,1044 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/table/demos/basic';
+import CheckTypeDemo from '~/components/table/demos/checkType';
+import ExpandDemo from '~/components/table/demos/rowExpandable';
+import SortDemo from '~/components/table/demos/sort';
+import GroupDemo from '~/components/table/demos/group';
+import FixColumnDemo from '~/components/table/demos/fixColumn';
+import LoadingDemo from '~/components/table/demos/loading';
+import ExportDemo from '~/components/table/demos/export';
+import SelectedKeysDemo from '~/components/table/demos/selectedKeys';
+import ResizableDemo, { data as ResizableDemoData } from '~/components/table/demos/resizable';
+import TooltipDemo from '~/components/table/demos/tooltip';
+import TreeDemo from '~/components/table/demos/tree';
+import DisabledDemo from '~/components/table/demos/disableRow';
+import ScrollToRowDemo from '~/components/table/demos/scrollToRow';
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { Component } from 'intact-react';
+import { Table, TableColumn } from './';
+import DraggableTable from '~/components/table/demos/draggable';
+import MergeCellDemo from '~/components/table/demos/mergeCell';
+import { AllCheckedStatus } from './useChecked';
+describe('Table', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('check & uncheck', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, table, checked, spy, _element$querySelecto, tr1, tr2, all;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            table = instance.$lastInput.children;
+            checked = table.checked; // bind $change:checked event
+
+            spy = sinon.spy(function (v) {
+              return console.log(v);
+            });
+            table.on('$change:checkedKeys', spy); // click row
+
+            _element$querySelecto = element.querySelectorAll('tbody tr'), tr1 = _element$querySelecto[0], tr2 = _element$querySelecto[1];
+            tr1.click();
+            _context.next = 9;
+            return wait();
+
+          case 9:
+            expect(table.get('checkedKeys')).to.eql([0]);
+            tr2.click();
+            _context.next = 13;
+            return wait();
+
+          case 13:
+            expect(table.get('checkedKeys')).to.eql([0, 1]);
+            expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.All);
+            tr1.click();
+            _context.next = 18;
+            return wait();
+
+          case 18:
+            expect(table.get('checkedKeys')).to.eql([1]);
+            expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.Indeterminate);
+            all = element.querySelector('.k-checkbox');
+            all.click();
+            _context.next = 24;
+            return wait();
+
+          case 24:
+            expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.All);
+            all.click();
+            _context.next = 28;
+            return wait();
+
+          case 28:
+            expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.None);
+            expect(table.get('checkedKeys')).to.eql([]);
+            expect(spy.callCount).to.eql(5); // clear data of table should only trigger $change:checked event once, #407
+
+            all.click();
+            table.set('data', []);
+            _context.next = 35;
+            return wait();
+
+          case 35:
+            expect(spy.callCount).to.eql(7);
+
+          case 36:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('click row of radio table', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, table, _element$querySelecto2, tr1, tr2;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(CheckTypeDemo), instance = _mount2[0], element = _mount2[1];
+            table = instance.refs.__radio; // click row
+
+            _element$querySelecto2 = element.querySelectorAll('.k-table:nth-child(2) tbody tr'), tr1 = _element$querySelecto2[0], tr2 = _element$querySelecto2[1];
+            tr1.click();
+            _context2.next = 6;
+            return wait();
+
+          case 6:
+            expect(table.get('checkedKeys')).eql([0]);
+            tr2.click();
+            _context2.next = 10;
+            return wait();
+
+          case 10:
+            expect(table.get('checkedKeys')).eql([1]);
+
+          case 11:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('getCheckedData', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, instance, element, _instance$refs, checkboxTable, radioTable, _element$querySelecto3, tr1, tr2, _element$querySelecto4, tr11, tr22;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(CheckTypeDemo), instance = _mount3[0], element = _mount3[1];
+            _instance$refs = instance.refs, checkboxTable = _instance$refs.__checkbox, radioTable = _instance$refs.__radio;
+            _element$querySelecto3 = element.querySelectorAll('.k-table:nth-child(1) tbody tr'), tr1 = _element$querySelecto3[0], tr2 = _element$querySelecto3[1];
+            tr1.click();
+            _context3.next = 6;
+            return wait();
+
+          case 6:
+            expect(_JSON$stringify(checkboxTable.getCheckedData())).to.matchSnapshot();
+            tr2.click();
+            _context3.next = 10;
+            return wait();
+
+          case 10:
+            expect(_JSON$stringify(checkboxTable.getCheckedData())).to.matchSnapshot();
+            _element$querySelecto4 = element.querySelectorAll('.k-table:nth-child(2) tbody tr'), tr11 = _element$querySelecto4[0], tr22 = _element$querySelecto4[1];
+            tr11.click();
+            _context3.next = 15;
+            return wait();
+
+          case 15:
+            expect(_JSON$stringify(radioTable.getCheckedData())).to.matchSnapshot();
+            tr22.click();
+            _context3.next = 19;
+            return wait();
+
+          case 19:
+            expect(_JSON$stringify(radioTable.getCheckedData())).to.matchSnapshot();
+
+          case 20:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('expand & shrink', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount4, instance, element, _instance$refs2, rowExpandableTable, rowUnExpandableTable, _element$querySelecto5, table1, table2, _table1$querySelector, tr, _table2$querySelector, tr1, icon;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount4 = mount(ExpandDemo), instance = _mount4[0], element = _mount4[1];
+            _instance$refs2 = instance.refs, rowExpandableTable = _instance$refs2.__test1, rowUnExpandableTable = _instance$refs2.__test2;
+            _element$querySelecto5 = element.querySelectorAll('.k-table'), table1 = _element$querySelecto5[0], table2 = _element$querySelecto5[1];
+            _table1$querySelector = table1.querySelectorAll('tbody tr'), tr = _table1$querySelector[0];
+            tr.click();
+            _context4.next = 7;
+            return wait();
+
+          case 7:
+            expect(table1.outerHTML).to.matchSnapshot();
+            tr.click();
+            _context4.next = 11;
+            return wait();
+
+          case 11:
+            expect(table1.outerHTML).to.matchSnapshot();
+            _table2$querySelector = table2.querySelectorAll('tbody tr'), tr1 = _table2$querySelector[0];
+            tr1.click();
+            _context4.next = 16;
+            return wait();
+
+          case 16:
+            expect(table2.outerHTML).to.matchSnapshot();
+            icon = tr1.querySelector('.icon');
+            icon.click();
+            _context4.next = 21;
+            return wait();
+
+          case 21:
+            expect(table2.outerHTML).to.matchSnapshot();
+            icon.click();
+            _context4.next = 25;
+            return wait();
+
+          case 25:
+            expect(table2.outerHTML).to.matchSnapshot();
+
+          case 26:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('merge cells', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount5, instance, element, _instance$refs3, mergeCheckboxTable, mergeRadioTable, _element$querySelecto6, table1, table2, _table1$querySelector2, tr3, tr4, tr5, _table2$querySelector2, _tr1, _tr4;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount5 = mount(MergeCellDemo), instance = _mount5[0], element = _mount5[1];
+            _instance$refs3 = instance.refs, mergeCheckboxTable = _instance$refs3.__test1, mergeRadioTable = _instance$refs3.__test2;
+            _element$querySelecto6 = element.querySelectorAll('.k-table'), table1 = _element$querySelecto6[0], table2 = _element$querySelecto6[1];
+            _table1$querySelector2 = table1.querySelectorAll('tbody tr'), tr3 = _table1$querySelector2[2], tr4 = _table1$querySelector2[3], tr5 = _table1$querySelector2[4];
+            expect(mergeCheckboxTable.get('checkedKeys')).eql([3]);
+            expect(table1.outerHTML).to.matchSnapshot();
+            tr3.click();
+            _context5.next = 9;
+            return wait();
+
+          case 9:
+            expect(mergeCheckboxTable.get('checkedKeys')).eql([3, 2]);
+            expect(table1.outerHTML).to.matchSnapshot();
+            tr4.click();
+            _context5.next = 14;
+            return wait();
+
+          case 14:
+            expect(mergeCheckboxTable.get('checkedKeys')).eql([2]);
+            expect(table1.outerHTML).to.matchSnapshot();
+            tr4.click();
+            _context5.next = 19;
+            return wait();
+
+          case 19:
+            expect(mergeCheckboxTable.get('checkedKeys')).eql([2, 3]);
+            expect(table1.outerHTML).to.matchSnapshot();
+            tr5.click();
+            _context5.next = 24;
+            return wait();
+
+          case 24:
+            expect(mergeCheckboxTable.get('checkedKeys')).eql([2, 3, 4]);
+            expect(table1.outerHTML).to.matchSnapshot();
+            _table2$querySelector2 = table2.querySelectorAll('tbody tr'), _tr1 = _table2$querySelector2[0], _tr4 = _table2$querySelector2[3];
+            expect(mergeRadioTable.get('checkedKeys')).eql([0, 1]);
+            expect(table2.outerHTML).to.matchSnapshot();
+
+            _tr4.click();
+
+            _context5.next = 32;
+            return wait();
+
+          case 32:
+            expect(mergeRadioTable.get('checkedKeys')).eql([1, 2, 3, 4]);
+            expect(table2.outerHTML).to.matchSnapshot();
+
+            _tr1.click();
+
+            _context5.next = 37;
+            return wait();
+
+          case 37:
+            expect(mergeRadioTable.get('checkedKeys')).eql([1, 0]);
+            expect(table2.outerHTML).to.matchSnapshot();
+
+          case 39:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('sort', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount6, instance, element, _element$querySelecto7, th1, th2;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _mount6 = mount(SortDemo), instance = _mount6[0], element = _mount6[1];
+            _element$querySelecto7 = element.querySelectorAll('thead th'), th1 = _element$querySelecto7[1], th2 = _element$querySelecto7[2];
+            th1.click();
+            _context6.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.get('sort')).to.eql({
+              key: 'name',
+              type: 'desc'
+            });
+            th2.click();
+            _context6.next = 9;
+            return wait();
+
+          case 9:
+            expect(instance.get('sort')).to.eql({
+              key: 'age',
+              type: 'desc'
+            });
+            th2.click();
+            _context6.next = 13;
+            return wait();
+
+          case 13:
+            expect(instance.get('sort')).to.eql({
+              key: 'age',
+              type: 'asc'
+            });
+            th2.click();
+            _context6.next = 17;
+            return wait();
+
+          case 17:
+            expect(instance.get('sort')).to.eql({});
+
+          case 18:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  it('group', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount7, instance, element, _instance$refs4, __test1, __test2, _element$querySelecto8, table1, table2, icon, dropdown, item, icon2, dropdown2, _dropdown2$querySelec, item1, item2;
+
+    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            _mount7 = mount(GroupDemo), instance = _mount7[0], element = _mount7[1];
+            _instance$refs4 = instance.refs, __test1 = _instance$refs4.__test1, __test2 = _instance$refs4.__test2;
+            _element$querySelecto8 = element.querySelectorAll('.k-table'), table1 = _element$querySelecto8[0], table2 = _element$querySelecto8[1];
+            icon = table1.querySelector('.k-table-group');
+            dispatchEvent(icon, 'mouseenter');
+            _context7.next = 7;
+            return wait();
+
+          case 7:
+            dropdown = getElement('.k-table-group-dropdown');
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            item = dropdown.querySelector('.k-dropdown-item:nth-child(2)');
+            item.click();
+            _context7.next = 13;
+            return wait();
+
+          case 13:
+            expect(instance.get('group')).to.eql({
+              status: 'active'
+            });
+            expect(table1.innerHTML).to.matchSnapshot();
+            icon2 = table2.querySelector('.k-table-group');
+            dispatchEvent(icon2, 'mouseenter');
+            _context7.next = 19;
+            return wait();
+
+          case 19:
+            dropdown2 = getElement('.k-table-group-dropdown');
+            expect(dropdown2.innerHTML).to.matchSnapshot();
+            _dropdown2$querySelec = dropdown2.querySelectorAll('.k-checkbox'), item1 = _dropdown2$querySelec[0], item2 = _dropdown2$querySelec[1];
+            item1.click();
+            _context7.next = 25;
+            return wait();
+
+          case 25:
+            expect(instance.get('multipleGroup')).to.eql({
+              status: ['active']
+            });
+            expect(table2.innerHTML).to.matchSnapshot();
+            item2.click();
+            _context7.next = 30;
+            return wait();
+
+          case 30:
+            expect(instance.get('multipleGroup')).to.eql({
+              status: ['active', 'stopped']
+            });
+            expect(table2.innerHTML).to.matchSnapshot();
+
+          case 32:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
+  it('fix columns', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var _mount8, instance, element, table, tableElement, scrollElement;
+
+    return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            _mount8 = mount(FixColumnDemo), instance = _mount8[0], element = _mount8[1];
+            table = instance.refs.__test;
+            element.style.width = "1000px";
+            tableElement = element.querySelector('.k-table:nth-child(2)');
+            scrollElement = tableElement.querySelector('.k-table-wrapper'); // should add k-scroll-middle classname
+
+            scrollElement.scrollLeft = 100;
+            _context8.next = 8;
+            return wait(100);
+
+          case 8:
+            expect(tableElement.outerHTML).to.matchSnapshot(); // should add k-scroll-right classname
+
+            scrollElement.scrollLeft = 1000;
+            _context8.next = 12;
+            return wait(100);
+
+          case 12:
+            expect(tableElement.outerHTML).to.matchSnapshot(); // should change max-height if we set fixHeader to true
+
+            table.set('fixHeader', true);
+            _context8.next = 16;
+            return wait();
+
+          case 16:
+            expect(tableElement.outerHTML).to.matchSnapshot();
+
+          case 17:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  it('resize', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var _mount9, instance, element, table, resize;
+
+    return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+      while (1) {
+        switch (_context9.prev = _context9.next) {
+          case 0:
+            _mount9 = mount(BasicDemo), instance = _mount9[0], element = _mount9[1];
+            table = instance.refs.__test;
+            resize = element.querySelector('.k-table-resize');
+            dispatchEvent(resize, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 1
+            });
+            dispatchEvent(document, 'mouseup');
+            _context9.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 9:
+          case "end":
+            return _context9.stop();
+        }
+      }
+    }, _callee9);
+  })));
+  it('store width on resizing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var _mount10, instance, element, resize, innerHTML, _mount11, table;
+
+    return _regeneratorRuntime.wrap(function _callee10$(_context10) {
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            localStorage.removeItem('resizableTable');
+            _mount10 = mount(ResizableDemo), instance = _mount10[0], element = _mount10[1]; // should equal to minWidth
+
+            _context10.next = 4;
+            return wait();
+
+          case 4:
+            expect(element.querySelector('thead th:nth-child(4)').offsetWidth).to.eql(300);
+            resize = element.querySelector('.k-table-resize');
+            dispatchEvent(resize, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 1
+            });
+            dispatchEvent(document, 'mouseup');
+            _context10.next = 11;
+            return wait();
+
+          case 11:
+            // rerender
+            innerHTML = element.innerHTML;
+            unmount();
+            _mount11 = mount(ResizableDemo), table = _mount11[1];
+            expect(table.innerHTML).to.matchSnapshot();
+            expect(table.innerHTML).to.eql(innerHTML);
+            localStorage.removeItem('resizableTable');
+
+          case 17:
+          case "end":
+            return _context10.stop();
+        }
+      }
+    }, _callee10);
+  })));
+  it('resize column that its previous column is hidden', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var _mount12, instance, element, resize;
+
+    return _regeneratorRuntime.wrap(function _callee11$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            localStorage.removeItem('resizableTable');
+            _mount12 = mount(ResizableDemo, null, ResizableDemoData), instance = _mount12[0], element = _mount12[1];
+            resize = element.querySelector('thead th:nth-child(4) .k-table-resize');
+            dispatchEvent(resize, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 1
+            });
+            dispatchEvent(document, 'mouseup');
+            _context11.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.innerHTML).to.matchSnapshot();
+            localStorage.removeItem('resizableTable');
+
+          case 10:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee11);
+  })));
+  it('should set the width of table equal to container after resizing and expanding container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var _mount13, instance, element, resize, container;
+
+    return _regeneratorRuntime.wrap(function _callee12$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            _mount13 = mount(BasicDemo), instance = _mount13[0], element = _mount13[1];
+            resize = element.querySelector('.k-table-resize');
+            dispatchEvent(resize, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 1
+            });
+            dispatchEvent(document, 'mouseup');
+            _context12.next = 7;
+            return wait();
+
+          case 7:
+            container = element.parentNode;
+            container.style.width = '1000px';
+            _context12.next = 11;
+            return wait(200);
+
+          case 11:
+            expect(element.querySelector('table').style.width).to.eql('1000px');
+
+          case 12:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee12);
+  })));
+  it('loading', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var _mount14, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee13$(_context13) {
+      while (1) {
+        switch (_context13.prev = _context13.next) {
+          case 0:
+            _mount14 = mount(LoadingDemo), instance = _mount14[0], element = _mount14[1];
+            instance.set('loading', true);
+            _context13.next = 4;
+            return wait();
+
+          case 4:
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('loading', false);
+            _context13.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 9:
+          case "end":
+            return _context13.stop();
+        }
+      }
+    }, _callee13);
+  })));
+  it('export', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var _mount15, instance, element, content, content1;
+
+    return _regeneratorRuntime.wrap(function _callee14$(_context14) {
+      while (1) {
+        switch (_context14.prev = _context14.next) {
+          case 0:
+            this.timeout(0);
+            _mount15 = mount(ExportDemo), instance = _mount15[0], element = _mount15[1];
+            _context14.next = 4;
+            return instance.refs.table.exportTable();
+
+          case 4:
+            content = _context14.sent;
+            expect(content.replace(/\r\n|\r/g, '\n')).to.matchSnapshot();
+            _context14.next = 8;
+            return instance.refs.table.exportTable([{
+              a: '1',
+              b: 2,
+              c: 3
+            }]);
+
+          case 8:
+            content1 = _context14.sent;
+            expect(content1.replace(/\r\n|\r/g, '\n')).to.matchSnapshot();
+
+          case 10:
+          case "end":
+            return _context14.stop();
+        }
+      }
+    }, _callee14, this);
+  })));
+  it('selectedKeys', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var _mount16, instance, element, _element$querySelecto9, table1, table2, _table1$querySelector3, tr1, tr2, _table2$querySelector3, tr21, tr22;
+
+    return _regeneratorRuntime.wrap(function _callee15$(_context15) {
+      while (1) {
+        switch (_context15.prev = _context15.next) {
+          case 0:
+            _mount16 = mount(SelectedKeysDemo), instance = _mount16[0], element = _mount16[1];
+            _element$querySelecto9 = element.querySelectorAll('tbody'), table1 = _element$querySelecto9[0], table2 = _element$querySelecto9[1];
+            _table1$querySelector3 = table1.querySelectorAll('tr'), tr1 = _table1$querySelector3[0], tr2 = _table1$querySelector3[1];
+            tr1.click();
+            _context15.next = 6;
+            return wait();
+
+          case 6:
+            expect(table1.innerHTML).to.matchSnapshot();
+            tr2.click();
+            _context15.next = 10;
+            return wait();
+
+          case 10:
+            expect(table1.innerHTML).to.matchSnapshot();
+            expect(instance.refs.__test1.getSelectedData()).to.have.lengthOf(1);
+            tr2.click();
+            _context15.next = 15;
+            return wait();
+
+          case 15:
+            expect(table1.innerHTML).to.matchSnapshot();
+            expect(instance.refs.__test1.getSelectedData()).to.have.lengthOf(0);
+            _table2$querySelector3 = table2.querySelectorAll('tr'), tr21 = _table2$querySelector3[0], tr22 = _table2$querySelector3[1];
+            tr21.click();
+            _context15.next = 21;
+            return wait();
+
+          case 21:
+            expect(table2.innerHTML).to.matchSnapshot();
+            tr22.click();
+            _context15.next = 25;
+            return wait();
+
+          case 25:
+            expect(table2.innerHTML).to.matchSnapshot();
+            expect(instance.refs.__test2.getSelectedData()).to.have.lengthOf(2);
+            tr22.click();
+            _context15.next = 30;
+            return wait();
+
+          case 30:
+            expect(table2.innerHTML).to.matchSnapshot();
+            expect(instance.refs.__test2.getSelectedData()).to.have.lengthOf(1);
+
+          case 32:
+          case "end":
+            return _context15.stop();
+        }
+      }
+    }, _callee15);
+  })));
+  it('tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+    var _mount17, instance, element, tr, content;
+
+    return _regeneratorRuntime.wrap(function _callee16$(_context16) {
+      while (1) {
+        switch (_context16.prev = _context16.next) {
+          case 0:
+            _mount17 = mount(TooltipDemo), instance = _mount17[0], element = _mount17[1];
+            tr = element.querySelector('tbody tr');
+            dispatchEvent(tr, 'mouseenter');
+            _context16.next = 5;
+            return wait();
+
+          case 5:
+            content = getElement('.k-tooltip-content');
+            expect(content.textContent).to.matchSnapshot();
+
+          case 7:
+          case "end":
+            return _context16.stop();
+        }
+      }
+    }, _callee16);
+  })));
+  it('tree', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+    var _mount18, instance, element, table, checkbox, arrow;
+
+    return _regeneratorRuntime.wrap(function _callee17$(_context17) {
+      while (1) {
+        switch (_context17.prev = _context17.next) {
+          case 0:
+            _mount18 = mount(TreeDemo), instance = _mount18[0], element = _mount18[1];
+            table = instance.$lastInput.children; // check all
+
+            checkbox = element.querySelector('.k-checkbox');
+            checkbox.click();
+            _context17.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(table.getCheckedData()).to.have.lengthOf(8);
+            arrow = element.querySelector('.k-table-arrow');
+            arrow.click();
+            _context17.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.innerHTML).to.matchSnapshot();
+            arrow.click();
+            _context17.next = 16;
+            return wait();
+
+          case 16:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(table.getCheckedData()).to.have.lengthOf(8);
+
+          case 18:
+          case "end":
+            return _context17.stop();
+        }
+      }
+    }, _callee17);
+  })));
+  it('should keep checked status of the disabled row', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
+    var _mount19, instance, element, checked, checkbox, _element$querySelecto10, checkbox2, checkbox4;
+
+    return _regeneratorRuntime.wrap(function _callee18$(_context18) {
+      while (1) {
+        switch (_context18.prev = _context18.next) {
+          case 0:
+            _mount19 = mount(DisabledDemo), instance = _mount19[0], element = _mount19[1];
+            checked = instance.$lastInput.children.checked;
+            checkbox = element.querySelector('.k-checkbox');
+            checkbox.click();
+            _context18.next = 6;
+            return wait();
+
+          case 6:
+            expect(instance.get('checkedKeys')).to.eql(['3', '2', '4']);
+            checkbox.click();
+            _context18.next = 10;
+            return wait();
+
+          case 10:
+            expect(instance.get('checkedKeys')).to.eql(['3']);
+            _element$querySelecto10 = element.querySelectorAll('.k-checkbox'), checkbox2 = _element$querySelecto10[2], checkbox4 = _element$querySelecto10[4];
+            checkbox2.click();
+            _context18.next = 15;
+            return wait();
+
+          case 15:
+            expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.Indeterminate);
+            checkbox4.click();
+            _context18.next = 19;
+            return wait();
+
+          case 19:
+            expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.All);
+
+          case 20:
+          case "end":
+            return _context18.stop();
+        }
+      }
+    }, _callee18);
+  })));
+  it('scroll to row', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+    var _mount20, instance, element, table, scroll, tr, height, test;
+
+    return _regeneratorRuntime.wrap(function _callee19$(_context19) {
+      while (1) {
+        switch (_context19.prev = _context19.next) {
+          case 0:
+            _mount20 = mount(ScrollToRowDemo), instance = _mount20[0], element = _mount20[1];
+            table = instance.refs.table;
+            scroll = element.querySelector('.k-table-wrapper');
+            tr = element.querySelector('tbody tr');
+            height = tr.offsetHeight;
+
+            test = function test(rows) {
+              expect(scroll.scrollTop).to.eql(height * rows);
+            };
+
+            _context19.next = 8;
+            return table.scrollToRowByIndex(2);
+
+          case 8:
+            test(2);
+            _context19.next = 11;
+            return table.scrollToRowByIndex(1);
+
+          case 11:
+            test(1);
+            _context19.next = 14;
+            return table.scrollToRowByKey('name 3');
+
+          case 14:
+            test(2);
+            _context19.next = 17;
+            return table.scrollToRowByKey('name 2');
+
+          case 17:
+            test(1);
+
+          case 18:
+          case "end":
+            return _context19.stop();
+        }
+      }
+    }, _callee19);
+  })));
+  it('render a hidden table with minWidth', function () {
+    var Demo = /*#__PURE__*/function (_Component) {
+      _inheritsLoose(Demo, _Component);
+
+      function Demo() {
+        var _context20;
+
+        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(_context20 = [this]).call(_context20, args)) || this;
+        _this.Table = Table;
+        _this.TableColumn = TableColumn;
+        return _this;
+      }
+
+      return Demo;
+    }(Component);
+
+    Demo.template = "\n                const {Table, TableColumn} = this;\n                <div style=\"display: none;\">\n                    <Table>\n                        <TableColumn key=\"a\" minWidth={30} />\n                    </Table>\n                </div>\n            ";
+
+    var _mount21 = mount(Demo),
+        element = _mount21[1];
+
+    expect(element.innerHTML).to.matchSnapshot();
+  });
+  it('draggable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+    var _mount22, instance, element, _element$querySelecto11, tr1, tr2, _element$getBoundingC, top;
+
+    return _regeneratorRuntime.wrap(function _callee20$(_context21) {
+      while (1) {
+        switch (_context21.prev = _context21.next) {
+          case 0:
+            _mount22 = mount(DraggableTable), instance = _mount22[0], element = _mount22[1];
+            _element$querySelecto11 = element.querySelectorAll('tbody tr'), tr1 = _element$querySelecto11[0], tr2 = _element$querySelecto11[1];
+            _element$getBoundingC = element.getBoundingClientRect(), top = _element$getBoundingC.top;
+            dispatchEvent(tr2, 'dragstart');
+            dispatchEvent(tr1, 'dragover', {
+              clientY: top + 41 + 20
+            });
+            dispatchEvent(tr2, 'dragend');
+            _context21.next = 8;
+            return wait(300);
+
+          case 8:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 9:
+          case "end":
+            return _context21.stop();
+        }
+      }
+    }, _callee20);
+  })));
+  it('should not check all even though the keys is equal but the checkedKeys have some keys that not in rowKeys', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+    var Demo, _mount23, instance, element, table, checked;
+
+    return _regeneratorRuntime.wrap(function _callee21$(_context23) {
+      while (1) {
+        switch (_context23.prev = _context23.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component2) {
+              _inheritsLoose(Demo, _Component2);
+
+              function Demo() {
+                var _context22;
+
+                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(_context22 = [this]).call(_context22, args)) || this;
+                _this2.Table = Table;
+                _this2.TableColumn = TableColumn;
+                return _this2;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  data: [{
+                    a: 1
+                  }, {
+                    a: 2
+                  }],
+                  checkedKeys: [3, 4]
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Table, TableColumn} = this;\n                <Table v-model:checkedKeys=\"checkedKeys\"\n                    data={this.get('data')}\n                    rowKey={i => i.a}\n                    ref=\"table\"\n                    keepStatus={true}\n                >\n                    <TableColumn key=\"a\" />\n                </Table>\n            ";
+            _mount23 = mount(Demo), instance = _mount23[0], element = _mount23[1];
+            table = instance.refs.table;
+            checked = table.checked;
+            expect(checked.getAllCheckedStatus()).to.eql(AllCheckedStatus.None);
+            table.checkAll();
+            expect(instance.get('checkedKeys')).to.eql([3, 4, 1, 2]);
+            table.uncheckAll();
+            expect(instance.get('checkedKeys')).to.eql([3, 4]);
+            instance.set('checkedKeys', [3, 4, 1]);
+            _context23.next = 13;
+            return wait();
+
+          case 13:
+            expect(checked.getAllCheckedStatus()).to.eql(AllCheckedStatus.Indeterminate);
+            table.checkAll();
+            expect(instance.get('checkedKeys')).to.eql([3, 4, 1, 2]); // destroy one row
+
+            instance.set('data', [{
+              a: 1
+            }]);
+            _context23.next = 19;
+            return wait();
+
+          case 19:
+            expect(instance.get('checkedKeys')).to.eql([3, 4, 1, 2]);
+
+          case 20:
+          case "end":
+            return _context23.stop();
+        }
+      }
+    }, _callee21);
+  }))); // it('should render dropdown in header of fixed table correctly in Vue', async () => {
+  // const Demo = {
+  // template: `
+  // <Table :data="data" style="width: 800px;">
+  // <TableColumn key="a" width="300" fixed="left" />
+  // <TableColumn key="b" width="300">
+  // <template slot="title">
+  // <Dropdown trigger="click" :container="dom => dom.parentElement.closest('.k-table')">
+  // <Icon class="ion-ios-arrow-down" style="margin-left: 100px;" />
+  // <DropdownMenu>
+  // <DropdownItem>1</DropdownItem>
+  // <DropdownItem>2</DropdownItem>
+  // <DropdownItem>3</DropdownItem>
+  // </DropdownMenu>
+  // </Dropdown>
+  // </template>
+  // </TableColumn>
+  // <TableColumn key="c" width="300" fixed="right" />
+  // </Table>
+  // `,
+  // components: {
+  // Table,
+  // TableColumn,
+  // Dropdown,
+  // DropdownMenu,
+  // DropdownItem,
+  // Icon,
+  // },
+  // data() {
+  // return {
+  // data: [
+  // {a: 1, b: 1, c: 1},
+  // {a: 2, b: 2, c: 2},
+  // ],
+  // };
+  // }
+  // };
+  // const container = document.createElement('div');
+  // document.body.appendChild(container);
+  // const app = new Vue({
+  // render: h => h('Demo'),
+  // components: {
+  // Demo
+  // }
+  // }).$mount(container);
+  // // should show the first dropdown menu
+  // app.$el.querySelector('.k-icon').click();
+  // const dropdownMenu = app.$el.querySelectorAll('.k-dropdown-menu')[0];
+  // expect(dropdownMenu.style.display).to.eql('');
+  // app.$destroy();
+  // document.body.removeChild(app.$el);
+  // });
+});
+
+export {normalize} from 'intact-react';