@king-design/vue 2.0.0-beta.0

package/components/dialog/index.spec.js

@@ -0,0 +1,654 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _Symbol from "@babel/runtime-corejs3/core-js/symbol";
+import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { var _context17; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context17 = Object.prototype.toString.call(o)).call(_context17, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js/instance/keys";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import { Component } from 'intact-vue-next';
+import { Dialog, BaseDialog } from './';
+import { getElement, mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import BasicDemo from '~/components/dialog/demos/basic';
+import AsyncCloseDemo from '~/components/dialog/demos/asyncClose';
+import AsyncOpenDemo from '~/components/dialog/demos/asyncOpen';
+import TerminateDemo from '~/components/dialog/demos/terminate';
+import DestroyDemo from '~/components/dialog/demos/destroy';
+describe('Dialog', function () {
+  afterEach(function (done) {
+    unmount();
+    setTimeout(done, 400);
+  });
+
+  function expectDialog() {
+    var dialog = getElement('.k-dialog');
+    expect(dialog).to.exist;
+    expect(getElement('.k-dialog-wrapper').innerHTML.replace(/[\d\.]+px/g, '')).to.matchSnapshot();
+    return dialog;
+  }
+
+  it('should show dialog correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, dialog;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0];
+            dialog = instance.refs.__demo;
+            _context.next = 4;
+            return dialog.show();
+
+          case 4:
+            expectDialog();
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should show correctly when render with value is true', function () {
+    var Demo = /*#__PURE__*/function (_Component) {
+      _inheritsLoose(Demo, _Component);
+
+      function Demo() {
+        var _context2;
+
+        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(_context2 = [this]).call(_context2, args)) || this;
+        _this.Dialog = Dialog;
+        return _this;
+      }
+
+      return Demo;
+    }(Component);
+
+    Demo.template = "const {Dialog} = this; <Dialog value={true}>test</Dialog>";
+
+    var _mount2 = mount(Demo),
+        instance = _mount2[0];
+
+    expectDialog();
+  });
+  it('show dialog as instance', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var MyDialog, dialog;
+    return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            MyDialog = /*#__PURE__*/function (_BaseDialog) {
+              _inheritsLoose(MyDialog, _BaseDialog);
+
+              function MyDialog() {
+                return _BaseDialog.apply(this, arguments) || this;
+              }
+
+              return MyDialog;
+            }(BaseDialog);
+
+            MyDialog.template = "<t:super><b:body>Dialog Instance {this.get('data')}</b:body></t:super>";
+            dialog = new MyDialog({
+              data: 1
+            });
+            _context3.next = 5;
+            return dialog.show();
+
+          case 5:
+            expectDialog();
+            dialog.close();
+            _context3.next = 9;
+            return wait(500);
+
+          case 9:
+            expect(getElement('.k-dialog')).to.be.undefined;
+
+          case 10:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should update correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, instance;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component2) {
+              _inheritsLoose(Demo, _Component2);
+
+              function Demo() {
+                var _context4;
+
+                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(_context4 = [this]).call(_context4, args)) || this;
+                _this2.Dialog = Dialog;
+                return _this2;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  content: 'a'
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                var Dialog = this.Dialog;\n                <Dialog value={true} ref=\"dialog\">{this.get('content')}</Dialog>\n            ";
+            _mount3 = mount(Demo), instance = _mount3[0];
+            instance.set('content', 'b');
+            _context5.next = 6;
+            return wait();
+
+          case 6:
+            expect(getElement('.k-dialog-body').innerText).to.eql('b');
+
+          case 7:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should prepend conent to block correctly', function () {
+    var Demo = /*#__PURE__*/function (_Component3) {
+      _inheritsLoose(Demo, _Component3);
+
+      function Demo() {
+        var _context6;
+
+        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(_context6 = [this]).call(_context6, args)) || this;
+        _this3.Dialog = Dialog;
+        return _this3;
+      }
+
+      return Demo;
+    }(Component);
+
+    Demo.template = "\n                var Dialog = this.Dialog;\n                <Dialog value={true} ref=\"dialog\">\n                    <b:footer>\n                        dialog footer\n                        {$super()}\n                    </b:footer>\n                </Dialog>\n            ";
+
+    var _mount4 = mount(Demo),
+        instance = _mount4[0];
+
+    expect(getElement('.k-dialog-footer').innerText).to.eql('dialog footer 确定取消');
+  });
+  it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount5, instance, element, btn, dialog;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            _mount5 = mount(BasicDemo), instance = _mount5[0], element = _mount5[1];
+            btn = element.querySelector('.k-btn');
+            dispatchEvent(btn, 'click');
+            _context7.next = 5;
+            return wait();
+
+          case 5:
+            dialog = expectDialog(); // click ok
+
+            dispatchEvent(dialog.querySelector('.k-dialog-ok'), 'click');
+            expect(instance.get('show')).be.false; // click cancel
+
+            dispatchEvent(btn, 'click');
+            _context7.next = 11;
+            return wait();
+
+          case 11:
+            dispatchEvent(dialog.querySelector('.k-dialog-cancel'), 'click');
+            expect(instance.get('show')).be.false; // press esc to close
+
+            dispatchEvent(btn, 'click');
+            _context7.next = 16;
+            return wait();
+
+          case 16:
+            dispatchEvent(document, 'keydown', {
+              keyCode: 27
+            });
+            expect(instance.get('show')).be.false;
+            _context7.next = 20;
+            return wait(500);
+
+          case 20:
+            expect(document.body.getAttribute('style')).to.be.null;
+
+          case 21:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('methods test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount6, instance, element, btn, dialog, ok, demo;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            _mount6 = mount(BasicDemo), instance = _mount6[0], element = _mount6[1];
+            btn = element.querySelector('.k-btn');
+            dispatchEvent(btn, 'click');
+            _context8.next = 5;
+            return wait();
+
+          case 5:
+            dialog = getElement('.k-dialog');
+            ok = dialog.querySelector('.k-dialog-ok');
+            demo = instance.refs.__demo;
+            demo.showLoading();
+            _context8.next = 11;
+            return wait();
+
+          case 11:
+            expect(ok.classList.contains('k-loading')).to.be.true;
+            demo.hideLoading();
+            _context8.next = 15;
+            return wait();
+
+          case 15:
+            expect(ok.classList.contains('k-loading')).to.be.false;
+            demo.disableOk();
+            _context8.next = 19;
+            return wait();
+
+          case 19:
+            expect(ok.classList.contains('k-disabled')).to.be.true;
+            demo.enableOk();
+            _context8.next = 23;
+            return wait();
+
+          case 23:
+            expect(ok.classList.contains('k-disabled')).to.be.false;
+
+          case 24:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('demos test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var req, _iterator, _step, item, Demo, _mount7, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context9) {
+      while (1) {
+        switch (_context9.prev = _context9.next) {
+          case 0:
+            this.timeout(0);
+            req = require.context('~/components/dialog/demos', true, /^((?!async).)*index\.ts$/i);
+            _iterator = _createForOfIteratorHelperLoose(_keysInstanceProperty(req).call(req));
+
+          case 3:
+            if ((_step = _iterator()).done) {
+              _context9.next = 18;
+              break;
+            }
+
+            item = _step.value;
+
+            if (_startsWithInstanceProperty(item).call(item, '.')) {
+              _context9.next = 7;
+              break;
+            }
+
+            return _context9.abrupt("continue", 16);
+
+          case 7:
+            if (!/static/.test(item)) {
+              _context9.next = 9;
+              break;
+            }
+
+            return _context9.abrupt("continue", 16);
+
+          case 9:
+            Demo = req(item).default;
+            _mount7 = mount(Demo), instance = _mount7[0], element = _mount7[1];
+            dispatchEvent(element.querySelector('.k-btn') || element, 'click');
+            _context9.next = 14;
+            return wait();
+
+          case 14:
+            expectDialog();
+            unmount();
+
+          case 16:
+            _context9.next = 3;
+            break;
+
+          case 18:
+            _context9.next = 20;
+            return wait(500);
+
+          case 20:
+            expect(document.body.getAttribute('style')).to.be.null;
+
+          case 21:
+          case "end":
+            return _context9.stop();
+        }
+      }
+    }, _callee6, this);
+  })));
+  it('async close', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount8, instance, element, dialog, className;
+
+    return _regeneratorRuntime.wrap(function _callee7$(_context10) {
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            _mount8 = mount(AsyncCloseDemo), instance = _mount8[0], element = _mount8[1];
+            dispatchEvent(element.firstChild, 'click');
+            instance.set('code', '111');
+            _context10.next = 5;
+            return wait();
+
+          case 5:
+            dialog = getElement('.k-dialog');
+            className = dialog.className; // click ok
+
+            dispatchEvent(dialog.querySelector('.k-dialog-ok'), 'click');
+            _context10.next = 10;
+            return wait();
+
+          case 10:
+            expect(dialog.className).to.eql(className);
+
+          case 11:
+          case "end":
+            return _context10.stop();
+        }
+      }
+    }, _callee7);
+  })));
+  it('async open', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var _mount9, instance, element, dialog;
+
+    return _regeneratorRuntime.wrap(function _callee8$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            this.timeout(0);
+            _mount9 = mount(AsyncOpenDemo), instance = _mount9[0], element = _mount9[1];
+            dispatchEvent(element.firstChild, 'click');
+            expect(getElement('.k-dialog')).to.be.undefined;
+            _context11.next = 6;
+            return wait(3000);
+
+          case 6:
+            dialog = expectDialog(); // close
+
+            dispatchEvent(dialog.querySelector('.k-dialog-ok'), 'click');
+
+          case 8:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee8, this);
+  })));
+  it('drag', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var _mount10, instance, element, dialog, top, header;
+
+    return _regeneratorRuntime.wrap(function _callee9$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            _mount10 = mount(BasicDemo), instance = _mount10[0], element = _mount10[1];
+            dispatchEvent(element.firstChild, 'click');
+            _context12.next = 4;
+            return wait();
+
+          case 4:
+            dialog = getElement('.k-dialog');
+            top = Math.round(parseFloat(dialog.style.top));
+            header = getElement('.k-dialog-header');
+            dispatchEvent(header, 'mousedown', {
+              which: 1,
+              clientY: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientY: -1
+            });
+            dispatchEvent(document, 'mouseup');
+            _context12.next = 12;
+            return wait();
+
+          case 12:
+            expect(dialog.style.top).to.eql(top - 1 + "px");
+
+          case 13:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee9);
+  })));
+  it('static methods', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var cb, dialog, cb1, cb2, overlay;
+    return _regeneratorRuntime.wrap(function _callee10$(_context13) {
+      while (1) {
+        switch (_context13.prev = _context13.next) {
+          case 0:
+            cb = sinon.spy();
+            Dialog.success({
+              content: 'test'
+            }).then(cb);
+            _context13.next = 4;
+            return wait();
+
+          case 4:
+            dialog = expectDialog();
+            dialog.querySelector('.k-btn').click();
+            _context13.next = 8;
+            return wait();
+
+          case 8:
+            expect(cb.callCount).to.eql(1);
+            cb1 = sinon.spy();
+            Dialog.confirm({
+              content: 'test',
+              hideIcon: true,
+              hideClose: false
+            }).then(cb, cb1);
+            _context13.next = 13;
+            return wait();
+
+          case 13:
+            dialog = expectDialog();
+            dialog.querySelector('.k-dialog-cancel').click();
+            _context13.next = 17;
+            return wait();
+
+          case 17:
+            expect(cb1.callCount).to.eql(1); // with title
+
+            Dialog.error({
+              title: 'error',
+              content: 'test'
+            });
+            _context13.next = 21;
+            return wait();
+
+          case 21:
+            dialog = expectDialog();
+            dialog.querySelector('.k-btn').click();
+            cb2 = sinon.spy();
+            Dialog.confirm({
+              content: 'test',
+              closable: false
+            }).then(function () {}, cb2);
+            _context13.next = 27;
+            return wait();
+
+          case 27:
+            overlay = getElement('.k-dialog-overlay');
+            overlay.click();
+            _context13.next = 31;
+            return wait();
+
+          case 31:
+            expect(cb2.callCount).to.eql(0);
+            getElement('.k-dialog').querySelector('.k-btn').click();
+
+          case 33:
+          case "end":
+            return _context13.stop();
+        }
+      }
+    }, _callee10);
+  })));
+  it('should double check for closing dialog', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var _mount11, instance, element, dialog, confirm;
+
+    return _regeneratorRuntime.wrap(function _callee11$(_context14) {
+      while (1) {
+        switch (_context14.prev = _context14.next) {
+          case 0:
+            _mount11 = mount(TerminateDemo), instance = _mount11[0], element = _mount11[1];
+            element.firstChild.click();
+            _context14.next = 4;
+            return wait();
+
+          case 4:
+            dialog = getElement('.k-dialog');
+            dialog.querySelector('.k-dialog-close').click();
+            _context14.next = 8;
+            return wait(500);
+
+          case 8:
+            expect(dialog.style.display).to.eql('');
+            confirm = getElement('.k-alert-dialog');
+            confirm.querySelector('.k-dialog-ok').click();
+            _context14.next = 13;
+            return wait(500);
+
+          case 13:
+            expect(dialog.style.display).to.eql('none');
+
+          case 14:
+          case "end":
+            return _context14.stop();
+        }
+      }
+    }, _callee11);
+  })));
+  it('should remove body', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var _mount12, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee12$(_context15) {
+      while (1) {
+        switch (_context15.prev = _context15.next) {
+          case 0:
+            _mount12 = mount(DestroyDemo), instance = _mount12[0], element = _mount12[1];
+            expect(getElement('.k-dialog')).to.be.undefined;
+            instance.set('show', true);
+            _context15.next = 5;
+            return wait(500);
+
+          case 5:
+            expectDialog();
+            instance.set('show', false);
+            _context15.next = 9;
+            return wait(500);
+
+          case 9:
+            expect(getElement('.k-dialog')).to.be.undefined;
+
+          case 10:
+          case "end":
+            return _context15.stop();
+        }
+      }
+    }, _callee12);
+  })));
+  it('should not close when click and move outside', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var _mount13, instance, element, dialog, wrapper;
+
+    return _regeneratorRuntime.wrap(function _callee13$(_context16) {
+      while (1) {
+        switch (_context16.prev = _context16.next) {
+          case 0:
+            _mount13 = mount(BasicDemo), instance = _mount13[0], element = _mount13[1];
+            element.firstChild.click();
+            _context16.next = 4;
+            return wait();
+
+          case 4:
+            dialog = getElement('.k-dialog');
+            wrapper = dialog.parentElement;
+            dispatchEvent(dialog, 'mousedown');
+            dispatchEvent(wrapper, 'mouseup');
+            dispatchEvent(wrapper, 'click');
+            _context16.next = 11;
+            return wait(500);
+
+          case 11:
+            expectDialog();
+
+          case 12:
+          case "end":
+            return _context16.stop();
+        }
+      }
+    }, _callee13);
+  }))); // it('should handle v-if and v-model at the same time correctly in Vue', async () => {
+  // const Test = {
+  // template: `<Dialog v-model="show" v-if="show" ref="dialog">test</Dialog>`,
+  // components: {
+  // Dialog
+  // },
+  // data() {
+  // return {
+  // show: false,
+  // }
+  // },
+  // };
+  // const container = document.createElement('div');
+  // document.body.appendChild(container);
+  // const app = new Vue({
+  // render: h => h('Test', {ref: 'test'}),
+  // components: {Test},
+  // }).$mount(container);
+  // app.$refs.test.show = true;
+  // await wait();
+  // // close dialog
+  // app.$refs.test.$refs.dialog.close();
+  // await wait();
+  // });
+});
+
+export {normalize} from 'intact-vue-next';

package/components/dialog/staticMethods.d.ts

@@ -0,0 +1,13 @@
+import { VNode } from 'intact-vue-next';
+import type { Dialog, DialogProps } from './';
+export interface AlertDialogProps extends DialogProps {
+    content?: string | VNode;
+    type?: 'success' | 'warning' | 'error' | 'confirm';
+    hideIcon?: boolean;
+    hideFooter?: boolean;
+}
+export declare type StaticMethod = (options?: AlertDialogProps) => Promise<void>;
+export declare function addStaticMethods(Component: typeof Dialog): void;
+
+
+export {normalize} from 'intact-vue-next';