@king-design/vue 3.8.0-beta.0 → 3.8.0-beta.2

package/components/bubbleList/index.spec.js

@@ -7,6 +7,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
 import _atInstanceProperty from "@babel/runtime-corejs3/core-js/instance/at";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
 import { Component } from 'intact-vue-next';
 import { dispatchEvent, mount, unmount, wait } from '../../test/utils';
 import { BubbleList } from '.';
@@ -513,8 +514,8 @@ describe('BubbleList', function () {
       }
     }, _callee8);
   })));
-  it('should scroll correctly when using a custom item slot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
-    var Demo, _mount9, instance, element, scrollBox, targetRow, scrollBoxRect, targetRect;
+  it('should keep scroll content flush and add gap only when scrollbar appears', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount9, instance, element, scrollBox, scrollContent, contentStyle;
     return _regeneratorRuntime.wrap(function _callee9$(_context30) {
       while (1) switch (_context30.prev = _context30.next) {
         case 0:
@@ -527,7 +528,6 @@ describe('BubbleList', function () {
                 args[_key9] = arguments[_key9];
               }
               _this9 = _Component9.call.apply(_Component9, _concatInstanceProperty(_context28 = [this]).call(_context28, args)) || this;
-              _this9.listRef = null;
               _this9.BubbleList = BubbleList;
               return _this9;
             }
@@ -535,38 +535,50 @@ describe('BubbleList', function () {
               var _context29;
               return {
                 items: _mapInstanceProperty(_context29 = _Array$from({
-                  length: 12
+                  length: 6
                 })).call(_context29, function (_, index) {
                   return {
-                    key: index + 1,
-                    content: "row-" + (index + 1)
+                    key: index,
+                    content: "row-" + index
                   };
                 })
               };
             };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                >\n                    <b:item args=\"scope\">\n                        <div class=\"custom-item-shell\" style=\"height: 48px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    style=\"height: 120px;\"\n                    items={this.get('items')}\n                >\n                    <b:item args=\"scope\">\n                        <div class=\"scrollbar-gap-row\" style=\"height: 48px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
           _mount9 = mount(Demo), instance = _mount9[0], element = _mount9[1];
           _context30.next = 5;
           return wait(80);
         case 5:
-          instance.listRef.scrollToKey(6, 'auto');
-          _context30.next = 8;
-          return wait(30);
-        case 8:
           scrollBox = element.querySelector('.k-bubble-list-scroll');
-          targetRow = element.querySelectorAll('.custom-item-shell')[5];
-          scrollBoxRect = scrollBox.getBoundingClientRect();
-          targetRect = targetRow.getBoundingClientRect();
-          expect(Math.abs(targetRect.top - scrollBoxRect.top)).to.be.lessThan(4);
-        case 13:
+          scrollContent = element.querySelector('.k-bubble-list-scroll-content');
+          contentStyle = getComputedStyle(scrollContent);
+          expect(scrollBox.scrollHeight).to.be.greaterThan(scrollBox.clientHeight);
+          expect(scrollBox.classList.contains('k-bubble-list-scroll-has-scrollbar')).to.be.true;
+          expect(getComputedStyle(scrollBox).paddingInlineEnd).to.eql('6px');
+          expect(contentStyle.paddingInlineStart).to.eql('0px');
+          expect(contentStyle.paddingInlineEnd).to.eql('0px');
+          instance.set('items', [{
+            key: 'short',
+            content: 'short'
+          }]);
+          _context30.next = 16;
+          return wait(120);
+        case 16:
+          contentStyle = getComputedStyle(scrollContent);
+          expect(scrollBox.scrollHeight - scrollBox.clientHeight).to.be.lessThan(2);
+          expect(scrollBox.classList.contains('k-bubble-list-scroll-has-scrollbar')).to.be.false;
+          expect(getComputedStyle(scrollBox).paddingInlineEnd).to.eql('0px');
+          expect(contentStyle.paddingInlineStart).to.eql('0px');
+          expect(contentStyle.paddingInlineEnd).to.eql('0px');
+        case 22:
         case "end":
           return _context30.stop();
       }
     }, _callee9);
   })));
-  it('should scroll the target item near the top when calling scrollToKey', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+  it('should scroll correctly when using a custom item slot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
     var Demo, _mount10, instance, element, scrollBox, targetRow, scrollBoxRect, targetRect;
     return _regeneratorRuntime.wrap(function _callee10$(_context33) {
       while (1) switch (_context33.prev = _context33.next) {
@@ -587,25 +599,11 @@ describe('BubbleList', function () {
             Demo.defaults = function defaults() {
               var _context32;
               return {
-                roles: {
-                  ai: {
-                    placement: 'start',
-                    avatar: true,
-                    roleName: 'AI'
-                  },
-                  user: {
-                    placement: 'end',
-                    avatar: true,
-                    roleName: 'Me',
-                    variant: 'outlined'
-                  }
-                },
                 items: _mapInstanceProperty(_context32 = _Array$from({
                   length: 12
                 })).call(_context32, function (_, index) {
                   return {
                     key: index + 1,
-                    role: index % 2 ? 'user' : 'ai',
                     content: "row-" + (index + 1)
                   };
                 })
@@ -613,7 +611,7 @@ describe('BubbleList', function () {
             };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    roles={this.get('roles')}\n                />\n            ";
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                >\n                    <b:item args=\"scope\">\n                        <div class=\"custom-item-shell\" style=\"height: 48px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
           _mount10 = mount(Demo), instance = _mount10[0], element = _mount10[1];
           _context33.next = 5;
           return wait(80);
@@ -623,7 +621,7 @@ describe('BubbleList', function () {
           return wait(30);
         case 8:
           scrollBox = element.querySelector('.k-bubble-list-scroll');
-          targetRow = element.querySelectorAll('.k-bubble-list-item')[5];
+          targetRow = element.querySelectorAll('.custom-item-shell')[5];
           scrollBoxRect = scrollBox.getBoundingClientRect();
           targetRect = targetRow.getBoundingClientRect();
           expect(Math.abs(targetRect.top - scrollBoxRect.top)).to.be.lessThan(4);
@@ -633,7 +631,7 @@ describe('BubbleList', function () {
       }
     }, _callee10);
   })));
-  it('should support resolving keys from itemKey function when scrolling to a message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+  it('should scroll the target item near the top when calling scrollToKey', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
     var Demo, _mount11, instance, element, scrollBox, targetRow, scrollBoxRect, targetRect;
     return _regeneratorRuntime.wrap(function _callee11$(_context36) {
       while (1) switch (_context36.prev = _context36.next) {
@@ -671,7 +669,7 @@ describe('BubbleList', function () {
                   length: 12
                 })).call(_context35, function (_, index) {
                   return {
-                    id: "msg-" + (index + 1),
+                    key: index + 1,
                     role: index % 2 ? 'user' : 'ai',
                     content: "row-" + (index + 1)
                   };
@@ -680,12 +678,12 @@ describe('BubbleList', function () {
             };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    itemKey={(item) => item.id}\n                    roles={this.get('roles')}\n                />\n            ";
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    roles={this.get('roles')}\n                />\n            ";
           _mount11 = mount(Demo), instance = _mount11[0], element = _mount11[1];
           _context36.next = 5;
           return wait(80);
         case 5:
-          instance.listRef.scrollToKey('msg-6', 'auto');
+          instance.listRef.scrollToKey(6, 'auto');
           _context36.next = 8;
           return wait(30);
         case 8:
@@ -700,11 +698,10 @@ describe('BubbleList', function () {
       }
     }, _callee11);
   })));
-  it('should keep per-item slot updates working when list boundaries change', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
-    var _context38, _context39, _context40;
-    var Demo, _mount12, instance, element;
-    return _regeneratorRuntime.wrap(function _callee12$(_context41) {
-      while (1) switch (_context41.prev = _context41.next) {
+  it('should support resolving keys from itemKey function when scrolling to a message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var Demo, _mount12, instance, element, scrollBox, targetRow, scrollBoxRect, targetRect;
+    return _regeneratorRuntime.wrap(function _callee12$(_context39) {
+      while (1) switch (_context39.prev = _context39.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component12) {
             _inheritsLoose(Demo, _Component12);
@@ -715,9 +712,77 @@ describe('BubbleList', function () {
                 args[_key12] = arguments[_key12];
               }
               _this12 = _Component12.call.apply(_Component12, _concatInstanceProperty(_context37 = [this]).call(_context37, args)) || this;
+              _this12.listRef = null;
               _this12.BubbleList = BubbleList;
               return _this12;
             }
+            Demo.defaults = function defaults() {
+              var _context38;
+              return {
+                roles: {
+                  ai: {
+                    placement: 'start',
+                    avatar: true,
+                    roleName: 'AI'
+                  },
+                  user: {
+                    placement: 'end',
+                    avatar: true,
+                    roleName: 'Me',
+                    variant: 'outlined'
+                  }
+                },
+                items: _mapInstanceProperty(_context38 = _Array$from({
+                  length: 12
+                })).call(_context38, function (_, index) {
+                  return {
+                    id: "msg-" + (index + 1),
+                    role: index % 2 ? 'user' : 'ai',
+                    content: "row-" + (index + 1)
+                  };
+                })
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    itemKey={(item) => item.id}\n                    roles={this.get('roles')}\n                />\n            ";
+          _mount12 = mount(Demo), instance = _mount12[0], element = _mount12[1];
+          _context39.next = 5;
+          return wait(80);
+        case 5:
+          instance.listRef.scrollToKey('msg-6', 'auto');
+          _context39.next = 8;
+          return wait(30);
+        case 8:
+          scrollBox = element.querySelector('.k-bubble-list-scroll');
+          targetRow = element.querySelectorAll('.k-bubble-list-item')[5];
+          scrollBoxRect = scrollBox.getBoundingClientRect();
+          targetRect = targetRow.getBoundingClientRect();
+          expect(Math.abs(targetRect.top - scrollBoxRect.top)).to.be.lessThan(4);
+        case 13:
+        case "end":
+          return _context39.stop();
+      }
+    }, _callee12);
+  })));
+  it('should keep per-item slot updates working when list boundaries change', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var _context41, _context42, _context43;
+    var Demo, _mount13, instance, element;
+    return _regeneratorRuntime.wrap(function _callee13$(_context44) {
+      while (1) switch (_context44.prev = _context44.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component13) {
+            _inheritsLoose(Demo, _Component13);
+            function Demo() {
+              var _context40;
+              var _this13;
+              for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+                args[_key13] = arguments[_key13];
+              }
+              _this13 = _Component13.call.apply(_Component13, _concatInstanceProperty(_context40 = [this]).call(_context40, args)) || this;
+              _this13.BubbleList = BubbleList;
+              return _this13;
+            }
             Demo.defaults = function defaults() {
               return {
                 items: [{
@@ -732,54 +797,54 @@ describe('BubbleList', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList items={this.get('items')}>\n                    <b:footer args=\"scope\">\n                        <span class=\"last-flag\">{scope.item.key}:{scope.isLast ? 'last' : 'normal'}</span>\n                    </b:footer>\n                </BubbleList>\n            ";
-          _mount12 = mount(Demo), instance = _mount12[0], element = _mount12[1];
-          _context41.next = 5;
+          _mount13 = mount(Demo), instance = _mount13[0], element = _mount13[1];
+          _context44.next = 5;
           return wait(50);
         case 5:
-          expect(_mapInstanceProperty(_context38 = _Array$from(element.querySelectorAll('.last-flag'))).call(_context38, function (item) {
+          expect(_mapInstanceProperty(_context41 = _Array$from(element.querySelectorAll('.last-flag'))).call(_context41, function (item) {
             return item.textContent;
           })).to.eql(['1:normal', '2:last']);
-          instance.set('items', _concatInstanceProperty(_context39 = []).call(_context39, instance.get('items'), [{
+          instance.set('items', _concatInstanceProperty(_context42 = []).call(_context42, instance.get('items'), [{
             key: 3,
             content: 'third'
           }]));
-          _context41.next = 9;
+          _context44.next = 9;
           return wait(50);
         case 9:
-          expect(_mapInstanceProperty(_context40 = _Array$from(element.querySelectorAll('.last-flag'))).call(_context40, function (item) {
+          expect(_mapInstanceProperty(_context43 = _Array$from(element.querySelectorAll('.last-flag'))).call(_context43, function (item) {
             return item.textContent;
           })).to.eql(['1:normal', '2:normal', '3:last']);
         case 10:
         case "end":
-          return _context41.stop();
+          return _context44.stop();
       }
-    }, _callee12);
+    }, _callee13);
   })));
-  it('should trigger loadHistory once when scrolling near the top', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
-    var Demo, _mount13, instance, element, scrollBox;
-    return _regeneratorRuntime.wrap(function _callee13$(_context44) {
-      while (1) switch (_context44.prev = _context44.next) {
+  it('should trigger loadHistory once when scrolling near the top', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var Demo, _mount14, instance, element, scrollBox;
+    return _regeneratorRuntime.wrap(function _callee14$(_context47) {
+      while (1) switch (_context47.prev = _context47.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component13) {
-            _inheritsLoose(Demo, _Component13);
+          Demo = /*#__PURE__*/function (_Component14) {
+            _inheritsLoose(Demo, _Component14);
             function Demo() {
-              var _context42;
-              var _this13;
-              for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
-                args[_key13] = arguments[_key13];
+              var _context45;
+              var _this14;
+              for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
+                args[_key14] = arguments[_key14];
               }
-              _this13 = _Component13.call.apply(_Component13, _concatInstanceProperty(_context42 = [this]).call(_context42, args)) || this;
-              _this13.BubbleList = BubbleList;
-              return _this13;
+              _this14 = _Component14.call.apply(_Component14, _concatInstanceProperty(_context45 = [this]).call(_context45, args)) || this;
+              _this14.BubbleList = BubbleList;
+              return _this14;
             }
             Demo.defaults = function defaults() {
-              var _context43;
+              var _context46;
               return {
                 count: 0,
                 loadingHistory: false,
-                items: _mapInstanceProperty(_context43 = _Array$from({
+                items: _mapInstanceProperty(_context46 = _Array$from({
                   length: 10
-                })).call(_context43, function (_, index) {
+                })).call(_context46, function (_, index) {
                   return {
                     key: index,
                     content: "history-" + index
@@ -790,40 +855,40 @@ describe('BubbleList', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    hasMoreHistory={true}\n                    loadingHistory={this.get('loadingHistory')}\n                    ev-loadHistory={() => this.set({count: this.get('count') + 1, loadingHistory: true})}\n                >\n                    <b:item args=\"scope\">\n                        <div style=\"height: 44px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
-          _mount13 = mount(Demo), instance = _mount13[0], element = _mount13[1];
-          _context44.next = 5;
+          _mount14 = mount(Demo), instance = _mount14[0], element = _mount14[1];
+          _context47.next = 5;
           return wait(80);
         case 5:
           scrollBox = element.querySelector('.k-bubble-list-scroll');
           scrollBox.scrollTop = 0;
           dispatchEvent(scrollBox, 'scroll');
           dispatchEvent(scrollBox, 'scroll');
-          _context44.next = 11;
+          _context47.next = 11;
           return wait(40);
         case 11:
           expect(instance.get('count')).to.eql(1);
         case 12:
         case "end":
-          return _context44.stop();
+          return _context47.stop();
       }
-    }, _callee13);
+    }, _callee14);
   })));
-  it('should show the default history loading text only while loadingHistory is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
-    var Demo, _mount14, instance, element;
-    return _regeneratorRuntime.wrap(function _callee14$(_context46) {
-      while (1) switch (_context46.prev = _context46.next) {
+  it('should show the default history loading text only while loadingHistory is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var Demo, _mount15, instance, element;
+    return _regeneratorRuntime.wrap(function _callee15$(_context49) {
+      while (1) switch (_context49.prev = _context49.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component14) {
-            _inheritsLoose(Demo, _Component14);
+          Demo = /*#__PURE__*/function (_Component15) {
+            _inheritsLoose(Demo, _Component15);
             function Demo() {
-              var _context45;
-              var _this14;
-              for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
-                args[_key14] = arguments[_key14];
+              var _context48;
+              var _this15;
+              for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
+                args[_key15] = arguments[_key15];
               }
-              _this14 = _Component14.call.apply(_Component14, _concatInstanceProperty(_context45 = [this]).call(_context45, args)) || this;
-              _this14.BubbleList = BubbleList;
-              return _this14;
+              _this15 = _Component15.call.apply(_Component15, _concatInstanceProperty(_context48 = [this]).call(_context48, args)) || this;
+              _this15.BubbleList = BubbleList;
+              return _this15;
             }
             Demo.defaults = function defaults() {
               return {
@@ -837,46 +902,46 @@ describe('BubbleList', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    loadingHistory={this.get('loadingHistory')}\n                />\n            ";
-          _mount14 = mount(Demo), instance = _mount14[0], element = _mount14[1];
-          _context46.next = 5;
+          _mount15 = mount(Demo), instance = _mount15[0], element = _mount15[1];
+          _context49.next = 5;
           return wait(50);
         case 5:
           expect(element.querySelector('.k-bubble-list-history')).to.be.null;
           instance.set('loadingHistory', true);
-          _context46.next = 9;
+          _context49.next = 9;
           return wait(50);
         case 9:
           expect(element.querySelector('.k-bubble-list-history span').textContent).to.eql('加载历史中...');
           instance.set('loadingHistory', false);
-          _context46.next = 13;
+          _context49.next = 13;
           return wait(50);
         case 13:
           expect(element.querySelector('.k-bubble-list-history')).to.be.null;
         case 14:
         case "end":
-          return _context46.stop();
+          return _context49.stop();
       }
-    }, _callee14);
+    }, _callee15);
   })));
-  it('should warn only once when items are missing stable keys', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+  it('should warn only once when items are missing stable keys', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
     var warn, spy, Demo;
-    return _regeneratorRuntime.wrap(function _callee15$(_context48) {
-      while (1) switch (_context48.prev = _context48.next) {
+    return _regeneratorRuntime.wrap(function _callee16$(_context51) {
+      while (1) switch (_context51.prev = _context51.next) {
         case 0:
           warn = console.warn;
           spy = sinon.spy();
           console.warn = spy;
-          Demo = /*#__PURE__*/function (_Component15) {
-            _inheritsLoose(Demo, _Component15);
+          Demo = /*#__PURE__*/function (_Component16) {
+            _inheritsLoose(Demo, _Component16);
             function Demo() {
-              var _context47;
-              var _this15;
-              for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
-                args[_key15] = arguments[_key15];
+              var _context50;
+              var _this16;
+              for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
+                args[_key16] = arguments[_key16];
               }
-              _this15 = _Component15.call.apply(_Component15, _concatInstanceProperty(_context47 = [this]).call(_context47, args)) || this;
-              _this15.BubbleList = BubbleList;
-              return _this15;
+              _this16 = _Component16.call.apply(_Component16, _concatInstanceProperty(_context50 = [this]).call(_context50, args)) || this;
+              _this16.BubbleList = BubbleList;
+              return _this16;
             }
             Demo.defaults = function defaults() {
               return {
@@ -890,39 +955,39 @@ describe('BubbleList', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList items={this.get('items')}>\n                    <b:item args=\"scope\">\n                        <div style=\"height: 40px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
-          _context48.prev = 5;
+          _context51.prev = 5;
           mount(Demo);
-          _context48.next = 9;
+          _context51.next = 9;
           return wait(50);
         case 9:
           expect(spy.callCount).to.eql(1);
           expect(spy.args[0][0]).to.contain('stable `key`');
         case 11:
-          _context48.prev = 11;
+          _context51.prev = 11;
           console.warn = warn;
-          return _context48.finish(11);
+          return _context51.finish(11);
         case 14:
         case "end":
-          return _context48.stop();
+          return _context51.stop();
       }
-    }, _callee15, null, [[5,, 11, 14]]);
+    }, _callee16, null, [[5,, 11, 14]]);
   })));
-  it('should render empty slot only when there are no items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
-    var Demo, _mount15, instance, element;
-    return _regeneratorRuntime.wrap(function _callee16$(_context50) {
-      while (1) switch (_context50.prev = _context50.next) {
+  it('should render empty slot only when there are no items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+    var Demo, _mount16, instance, element;
+    return _regeneratorRuntime.wrap(function _callee17$(_context53) {
+      while (1) switch (_context53.prev = _context53.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component16) {
-            _inheritsLoose(Demo, _Component16);
+          Demo = /*#__PURE__*/function (_Component17) {
+            _inheritsLoose(Demo, _Component17);
             function Demo() {
-              var _context49;
-              var _this16;
-              for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
-                args[_key16] = arguments[_key16];
+              var _context52;
+              var _this17;
+              for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
+                args[_key17] = arguments[_key17];
               }
-              _this16 = _Component16.call.apply(_Component16, _concatInstanceProperty(_context49 = [this]).call(_context49, args)) || this;
-              _this16.BubbleList = BubbleList;
-              return _this16;
+              _this17 = _Component17.call.apply(_Component17, _concatInstanceProperty(_context52 = [this]).call(_context52, args)) || this;
+              _this17.BubbleList = BubbleList;
+              return _this17;
             }
             Demo.defaults = function defaults() {
               return {
@@ -932,8 +997,8 @@ describe('BubbleList', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    items={this.get('items')}\n                >\n                    <b:empty>\n                        <div class=\"custom-empty\">empty</div>\n                    </b:empty>\n                </BubbleList>\n            ";
-          _mount15 = mount(Demo), instance = _mount15[0], element = _mount15[1];
-          _context50.next = 5;
+          _mount16 = mount(Demo), instance = _mount16[0], element = _mount16[1];
+          _context53.next = 5;
           return wait(50);
         case 5:
           expect(element.querySelector('.custom-empty').textContent).to.eql('empty');
@@ -941,32 +1006,32 @@ describe('BubbleList', function () {
             key: 1,
             content: 'hello'
           }]);
-          _context50.next = 9;
+          _context53.next = 9;
           return wait(50);
         case 9:
           expect(element.querySelector('.custom-empty')).to.be.null;
         case 10:
         case "end":
-          return _context50.stop();
+          return _context53.stop();
       }
-    }, _callee16);
+    }, _callee17);
   })));
-  it('should keep custom historyLoading slot visible for final no-more-history text', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
-    var Demo, _mount16, element;
-    return _regeneratorRuntime.wrap(function _callee17$(_context52) {
-      while (1) switch (_context52.prev = _context52.next) {
+  it('should keep custom historyLoading slot visible for final no-more-history text', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
+    var Demo, _mount17, element;
+    return _regeneratorRuntime.wrap(function _callee18$(_context55) {
+      while (1) switch (_context55.prev = _context55.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component17) {
-            _inheritsLoose(Demo, _Component17);
+          Demo = /*#__PURE__*/function (_Component18) {
+            _inheritsLoose(Demo, _Component18);
             function Demo() {
-              var _context51;
-              var _this17;
-              for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
-                args[_key17] = arguments[_key17];
+              var _context54;
+              var _this18;
+              for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
+                args[_key18] = arguments[_key18];
               }
-              _this17 = _Component17.call.apply(_Component17, _concatInstanceProperty(_context51 = [this]).call(_context51, args)) || this;
-              _this17.BubbleList = BubbleList;
-              return _this17;
+              _this18 = _Component18.call.apply(_Component18, _concatInstanceProperty(_context54 = [this]).call(_context54, args)) || this;
+              _this18.BubbleList = BubbleList;
+              return _this18;
             }
             Demo.defaults = function defaults() {
               return {
@@ -979,33 +1044,33 @@ describe('BubbleList', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    hasMoreHistory={false}\n                    loadingHistory={false}\n                >\n                    <b:historyLoading args=\"scope\">\n                        <div class=\"history-status\">\n                            {scope.loadingHistory ? 'loading' : scope.hasMoreHistory ? 'more' : 'done'}\n                        </div>\n                    </b:historyLoading>\n                </BubbleList>\n            ";
-          _mount16 = mount(Demo), element = _mount16[1];
-          _context52.next = 5;
+          _mount17 = mount(Demo), element = _mount17[1];
+          _context55.next = 5;
           return wait(50);
         case 5:
           expect(element.querySelector('.history-status').textContent).to.eql('done');
         case 6:
         case "end":
-          return _context52.stop();
+          return _context55.stop();
       }
-    }, _callee17);
+    }, _callee18);
   })));
-  it('should not render bubble wrappers for empty scoped slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
-    var Demo, _mount17, element;
-    return _regeneratorRuntime.wrap(function _callee18$(_context54) {
-      while (1) switch (_context54.prev = _context54.next) {
+  it('should not render bubble wrappers for empty scoped slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+    var Demo, _mount18, element;
+    return _regeneratorRuntime.wrap(function _callee19$(_context57) {
+      while (1) switch (_context57.prev = _context57.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component18) {
-            _inheritsLoose(Demo, _Component18);
+          Demo = /*#__PURE__*/function (_Component19) {
+            _inheritsLoose(Demo, _Component19);
             function Demo() {
-              var _context53;
-              var _this18;
-              for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
-                args[_key18] = arguments[_key18];
+              var _context56;
+              var _this19;
+              for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
+                args[_key19] = arguments[_key19];
               }
-              _this18 = _Component18.call.apply(_Component18, _concatInstanceProperty(_context53 = [this]).call(_context53, args)) || this;
-              _this18.BubbleList = BubbleList;
-              return _this18;
+              _this19 = _Component19.call.apply(_Component19, _concatInstanceProperty(_context56 = [this]).call(_context56, args)) || this;
+              _this19.BubbleList = BubbleList;
+              return _this19;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1030,34 +1095,34 @@ describe('BubbleList', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    items={this.get('items')}\n                    roles={this.get('roles')}\n                >\n                    <b:extra args=\"scope\">\n                        <span v-if={scope.item.completed} class=\"scoped-extra\">\u5DF2\u5B8C\u6210</span>\n                    </b:extra>\n                </BubbleList>\n            ";
-          _mount17 = mount(Demo), element = _mount17[1];
-          _context54.next = 5;
+          _mount18 = mount(Demo), element = _mount18[1];
+          _context57.next = 5;
           return wait(50);
         case 5:
           expect(element.querySelectorAll('.k-bubble-extra').length).to.eql(1);
           expect(element.querySelector('.scoped-extra').textContent).to.eql('已完成');
         case 7:
         case "end":
-          return _context54.stop();
+          return _context57.stop();
       }
-    }, _callee18);
+    }, _callee19);
   })));
-  it('should not render wrappers for empty outer slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
-    var Demo, _mount18, element;
-    return _regeneratorRuntime.wrap(function _callee19$(_context56) {
-      while (1) switch (_context56.prev = _context56.next) {
+  it('should not render wrappers for empty outer slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+    var Demo, _mount19, element;
+    return _regeneratorRuntime.wrap(function _callee20$(_context59) {
+      while (1) switch (_context59.prev = _context59.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component19) {
-            _inheritsLoose(Demo, _Component19);
+          Demo = /*#__PURE__*/function (_Component20) {
+            _inheritsLoose(Demo, _Component20);
             function Demo() {
-              var _context55;
-              var _this19;
-              for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
-                args[_key19] = arguments[_key19];
+              var _context58;
+              var _this20;
+              for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
+                args[_key20] = arguments[_key20];
               }
-              _this19 = _Component19.call.apply(_Component19, _concatInstanceProperty(_context55 = [this]).call(_context55, args)) || this;
-              _this19.BubbleList = BubbleList;
-              return _this19;
+              _this20 = _Component20.call.apply(_Component20, _concatInstanceProperty(_context58 = [this]).call(_context58, args)) || this;
+              _this20.BubbleList = BubbleList;
+              return _this20;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1070,8 +1135,8 @@ describe('BubbleList', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    items={this.get('items')}\n                    loadingHistory={true}\n                >\n                    <b:header>\n                        <span v-if={false} class=\"empty-header\">header</span>\n                    </b:header>\n                    <b:historyLoading>\n                        <span v-if={false} class=\"empty-history\">history</span>\n                    </b:historyLoading>\n                    <b:listFooter>\n                        <span v-if={false} class=\"empty-footer\">footer</span>\n                    </b:listFooter>\n                </BubbleList>\n            ";
-          _mount18 = mount(Demo), element = _mount18[1];
-          _context56.next = 5;
+          _mount19 = mount(Demo), element = _mount19[1];
+          _context59.next = 5;
           return wait(50);
         case 5:
           expect(element.querySelector('.k-bubble-list-header')).to.eql(null);
@@ -1080,70 +1145,70 @@ describe('BubbleList', function () {
           expect(element.querySelector('.k-bubble')).not.to.eql(null);
         case 9:
         case "end":
-          return _context56.stop();
+          return _context59.stop();
       }
-    }, _callee19);
+    }, _callee20);
   })));
-  it('should not render empty wrapper when empty slot is empty', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
-    var Demo, _mount19, element;
-    return _regeneratorRuntime.wrap(function _callee20$(_context58) {
-      while (1) switch (_context58.prev = _context58.next) {
+  it('should not render empty wrapper when empty slot is empty', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+    var Demo, _mount20, element;
+    return _regeneratorRuntime.wrap(function _callee21$(_context61) {
+      while (1) switch (_context61.prev = _context61.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component20) {
-            _inheritsLoose(Demo, _Component20);
+          Demo = /*#__PURE__*/function (_Component21) {
+            _inheritsLoose(Demo, _Component21);
             function Demo() {
-              var _context57;
-              var _this20;
-              for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
-                args[_key20] = arguments[_key20];
+              var _context60;
+              var _this21;
+              for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
+                args[_key21] = arguments[_key21];
               }
-              _this20 = _Component20.call.apply(_Component20, _concatInstanceProperty(_context57 = [this]).call(_context57, args)) || this;
-              _this20.BubbleList = BubbleList;
-              return _this20;
+              _this21 = _Component21.call.apply(_Component21, _concatInstanceProperty(_context60 = [this]).call(_context60, args)) || this;
+              _this21.BubbleList = BubbleList;
+              return _this21;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList items={[]}>\n                    <b:empty>\n                        <span v-if={false} class=\"empty-content\">empty</span>\n                    </b:empty>\n                </BubbleList>\n            ";
-          _mount19 = mount(Demo), element = _mount19[1];
-          _context58.next = 5;
+          _mount20 = mount(Demo), element = _mount20[1];
+          _context61.next = 5;
           return wait(50);
         case 5:
           expect(element.querySelector('.k-bubble-list-empty')).to.eql(null);
           expect(element.querySelector('.k-bubble-list-items')).not.to.eql(null);
         case 7:
         case "end":
-          return _context58.stop();
+          return _context61.stop();
       }
-    }, _callee20);
+    }, _callee21);
   })));
-  it('should emit scroll state events and honor showScrollToBottom=false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
-    var _context61, _context62;
-    var Demo, _mount20, instance, element, scrollBox;
-    return _regeneratorRuntime.wrap(function _callee21$(_context63) {
-      while (1) switch (_context63.prev = _context63.next) {
+  it('should emit scroll state events and honor showScrollToBottom=false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+    var _context64, _context65;
+    var Demo, _mount21, instance, element, scrollBox;
+    return _regeneratorRuntime.wrap(function _callee22$(_context66) {
+      while (1) switch (_context66.prev = _context66.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component21) {
-            _inheritsLoose(Demo, _Component21);
+          Demo = /*#__PURE__*/function (_Component22) {
+            _inheritsLoose(Demo, _Component22);
             function Demo() {
-              var _context59;
-              var _this21;
-              for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
-                args[_key21] = arguments[_key21];
+              var _context62;
+              var _this22;
+              for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
+                args[_key22] = arguments[_key22];
               }
-              _this21 = _Component21.call.apply(_Component21, _concatInstanceProperty(_context59 = [this]).call(_context59, args)) || this;
-              _this21.listRef = null;
-              _this21.BubbleList = BubbleList;
-              return _this21;
+              _this22 = _Component22.call.apply(_Component22, _concatInstanceProperty(_context62 = [this]).call(_context62, args)) || this;
+              _this22.listRef = null;
+              _this22.BubbleList = BubbleList;
+              return _this22;
             }
             Demo.defaults = function defaults() {
-              var _context60;
+              var _context63;
               return {
                 scrollCount: 0,
                 bottomStates: [],
                 autoStates: [],
-                items: _mapInstanceProperty(_context60 = _Array$from({
+                items: _mapInstanceProperty(_context63 = _Array$from({
                   length: 12
-                })).call(_context60, function (_, index) {
+                })).call(_context63, function (_, index) {
                   return {
                     key: index,
                     content: "row-" + index
@@ -1154,8 +1219,8 @@ describe('BubbleList', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    ref={(i) => this.listRef = i}\n                    style=\"height: 180px;\"\n                    items={this.get('items')}\n                    showScrollToBottom={false}\n                    ev-scroll={() => this.set('scrollCount', this.get('scrollCount') + 1)}\n                    ev-scrollBottomChange={(value) => this.set('bottomStates', [...this.get('bottomStates'), value])}\n                    ev-autoScrollChange={(value) => this.set('autoStates', [...this.get('autoStates'), value])}\n                >\n                    <b:item args=\"scope\">\n                        <div style=\"height: 44px;\">{scope.item.content}</div>\n                    </b:item>\n                </BubbleList>\n            ";
-          _mount20 = mount(Demo), instance = _mount20[0], element = _mount20[1];
-          _context63.next = 5;
+          _mount21 = mount(Demo), instance = _mount21[0], element = _mount21[1];
+          _context66.next = 5;
           return wait(80);
         case 5:
           instance.set({
@@ -1167,7 +1232,7 @@ describe('BubbleList', function () {
           scrollBox.scrollTop = 40;
           dispatchEvent(scrollBox, 'scroll');
           dispatchEvent(scrollBox, 'scroll');
-          _context63.next = 12;
+          _context66.next = 12;
           return wait(40);
         case 12:
           _atInstanceProperty(expect(instance.get('scrollCount')).to.be).least(2);
@@ -1175,37 +1240,37 @@ describe('BubbleList', function () {
           expect(instance.get('autoStates')).to.eql([false]);
           expect(element.querySelector('.k-bubble-list-scroll-to-bottom')).to.be.null;
           instance.listRef.scrollToBottom('auto');
-          _context63.next = 19;
+          _context66.next = 19;
           return wait(50);
         case 19:
-          expect(_sliceInstanceProperty(_context61 = instance.get('bottomStates')).call(_context61, -1)[0]).to.eql(true);
-          expect(_sliceInstanceProperty(_context62 = instance.get('autoStates')).call(_context62, -1)[0]).to.eql(true);
+          expect(_sliceInstanceProperty(_context64 = instance.get('bottomStates')).call(_context64, -1)[0]).to.eql(true);
+          expect(_sliceInstanceProperty(_context65 = instance.get('autoStates')).call(_context65, -1)[0]).to.eql(true);
           expect(instance.listRef.isAtBottom()).to.be.true;
           expect(element.querySelector('.k-bubble-list-scroll-to-bottom')).to.be.null;
         case 23:
         case "end":
-          return _context63.stop();
+          return _context66.stop();
       }
-    }, _callee21);
+    }, _callee22);
   })));
-  it('should forward typing events to role handlers and component events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
-    var roleTypingPayload, roleTypingCompletePayload, Demo, _mount21, instance;
-    return _regeneratorRuntime.wrap(function _callee22$(_context65) {
-      while (1) switch (_context65.prev = _context65.next) {
+  it('should forward typing events to role handlers and component events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+    var roleTypingPayload, roleTypingCompletePayload, Demo, _mount22, instance;
+    return _regeneratorRuntime.wrap(function _callee23$(_context68) {
+      while (1) switch (_context68.prev = _context68.next) {
         case 0:
           roleTypingPayload = null;
           roleTypingCompletePayload = null;
-          Demo = /*#__PURE__*/function (_Component22) {
-            _inheritsLoose(Demo, _Component22);
+          Demo = /*#__PURE__*/function (_Component23) {
+            _inheritsLoose(Demo, _Component23);
             function Demo() {
-              var _context64;
-              var _this22;
-              for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
-                args[_key22] = arguments[_key22];
+              var _context67;
+              var _this23;
+              for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
+                args[_key23] = arguments[_key23];
               }
-              _this22 = _Component22.call.apply(_Component22, _concatInstanceProperty(_context64 = [this]).call(_context64, args)) || this;
-              _this22.BubbleList = BubbleList;
-              return _this22;
+              _this23 = _Component23.call.apply(_Component23, _concatInstanceProperty(_context67 = [this]).call(_context67, args)) || this;
+              _this23.BubbleList = BubbleList;
+              return _this23;
             }
             Demo.defaults = function defaults() {
               return {
@@ -1246,8 +1311,8 @@ describe('BubbleList', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    items={this.get('items')}\n                    roles={this.get('roles')}\n                    ev-typing={() => this.set('typingCount', this.get('typingCount') + 1)}\n                    ev-typingComplete={(item, content) => this.set({\n                        completeCount: this.get('completeCount') + 1,\n                        completedContent: item.key + ':' + content,\n                    })}\n                />\n            ";
-          _mount21 = mount(Demo), instance = _mount21[0];
-          _context65.next = 7;
+          _mount22 = mount(Demo), instance = _mount22[0];
+          _context68.next = 7;
           return wait(120);
         case 7:
           expect(instance.get('typingCount')).to.be.greaterThan(0);
@@ -1261,8 +1326,84 @@ describe('BubbleList', function () {
           expect(roleTypingCompletePayload.index).to.eql(0);
         case 16:
         case "end":
-          return _context65.stop();
+          return _context68.stop();
       }
-    }, _callee22);
+    }, _callee23);
+  })));
+  it('should pass typing resume options to rendered bubbles', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
+    var Demo, _mount23, element, text, nextText, i;
+    return _regeneratorRuntime.wrap(function _callee24$(_context70) {
+      while (1) switch (_context70.prev = _context70.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component24) {
+            _inheritsLoose(Demo, _Component24);
+            function Demo() {
+              var _context69;
+              var _this24;
+              for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
+                args[_key24] = arguments[_key24];
+              }
+              _this24 = _Component24.call.apply(_Component24, _concatInstanceProperty(_context69 = [this]).call(_context69, args)) || this;
+              _this24.BubbleList = BubbleList;
+              return _this24;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                roles: {
+                  ai: {
+                    placement: 'start',
+                    typing: {
+                      interval: 16,
+                      step: 1
+                    }
+                  }
+                },
+                items: [{
+                  key: 1,
+                  role: 'ai',
+                  content: 'hello world',
+                  streaming: true,
+                  typing: {
+                    interval: 16,
+                    step: 2,
+                    resumeFrom: 'hello'
+                  }
+                }]
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { BubbleList } = this;\n                <BubbleList\n                    items={this.get('items')}\n                    roles={this.get('roles')}\n                />\n            ";
+          _mount23 = mount(Demo), element = _mount23[1];
+          text = element.querySelector('.k-bubble-text').textContent || '';
+          expect(text).to.eql('hello');
+          nextText = text;
+          i = 0;
+        case 7:
+          if (!(i < 6)) {
+            _context70.next = 16;
+            break;
+          }
+          _context70.next = 10;
+          return wait(20);
+        case 10:
+          nextText = element.querySelector('.k-bubble-text').textContent || '';
+          if (!(nextText.length > text.length)) {
+            _context70.next = 13;
+            break;
+          }
+          return _context70.abrupt("break", 16);
+        case 13:
+          i++;
+          _context70.next = 7;
+          break;
+        case 16:
+          expect(_startsWithInstanceProperty(nextText).call(nextText, 'hello')).to.be.true;
+          expect(nextText.length).to.be.greaterThan(text.length);
+        case 18:
+        case "end":
+          return _context70.stop();
+      }
+    }, _callee24);
   })));
 });