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

package/components/bubble/index.spec.js

@@ -0,0 +1,771 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
+import { Component } from 'intact-vue-next';
+import { mount, unmount, wait } from '../../test/utils';
+import { Bubble } from '.';
+describe('Bubble', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('should render placement, avatar and role name', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, instance, element, bubbles, endMeta, endHeader, middleMeta;
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component) {
+            _inheritsLoose(Demo, _Component);
+            function Demo() {
+              var _context;
+              var _this;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+              _this.Bubble = Bubble;
+              return _this;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble avatar={true} roleName=\"\u52A9\u624B\" content=\"hello\" />\n                    <Bubble placement=\"end\" avatar={true} roleName=\"\u6211\" content=\"world\" variant=\"outlined\" />\n                    <Bubble placement=\"middle\" avatar={false} content=\"system\" variant=\"plain\" />\n                </div>\n            ";
+          _mount = mount(Demo), instance = _mount[0], element = _mount[1];
+          bubbles = element.querySelectorAll('.k-bubble');
+          expect(bubbles.length).to.eql(3);
+          expect(bubbles[0].classList.contains('k-bubble-start')).to.be.true;
+          expect(bubbles[0].querySelector('.k-bubble-avatar')).not.to.eql(null);
+          expect(bubbles[0].querySelector('.k-bubble-header').textContent).to.contain('助手');
+          expect(bubbles[1].classList.contains('k-bubble-end')).to.be.true;
+          expect(bubbles[1].classList.contains('k-bubble-outlined')).to.be.true;
+          expect(bubbles[2].classList.contains('k-bubble-middle')).to.be.true;
+          expect(bubbles[2].classList.contains('k-bubble-plain')).to.be.true;
+          endMeta = bubbles[1].querySelector('.k-bubble-meta');
+          endHeader = bubbles[1].querySelector('.k-bubble-header');
+          middleMeta = bubbles[2].querySelector('.k-bubble-meta');
+          expect(getComputedStyle(endMeta).flexDirection).to.eql('row-reverse');
+          expect(getComputedStyle(endHeader).textAlign).to.eql('right');
+          expect(middleMeta).to.eql(null);
+        case 18:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee);
+  })));
+  it('should mirror corner shape by placement', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var Demo, _mount2, element, contents;
+    return _regeneratorRuntime.wrap(function _callee2$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component2) {
+            _inheritsLoose(Demo, _Component2);
+            function Demo() {
+              var _context3;
+              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(_context3 = [this]).call(_context3, args)) || this;
+              _this2.Bubble = Bubble;
+              return _this2;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble shape=\"corner\" placement=\"start\" content=\"left\" />\n                    <Bubble shape=\"corner\" placement=\"end\" content=\"right\" />\n                    <Bubble shape=\"corner\" placement=\"middle\" content=\"center\" />\n                </div>\n            ";
+          _mount2 = mount(Demo), element = _mount2[1];
+          contents = element.querySelectorAll('.k-bubble-content');
+          expect(getComputedStyle(contents[0]).borderBottomLeftRadius).to.eql('0px');
+          expect(getComputedStyle(contents[0]).borderBottomRightRadius).not.to.eql('0px');
+          expect(getComputedStyle(contents[1]).borderBottomRightRadius).to.eql('0px');
+          expect(getComputedStyle(contents[1]).borderBottomLeftRadius).not.to.eql('0px');
+          expect(getComputedStyle(contents[2]).borderBottomLeftRadius).not.to.eql('0px');
+          expect(getComputedStyle(contents[2]).borderBottomRightRadius).not.to.eql('0px');
+        case 10:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee2);
+  })));
+  it('should render loading state', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, instance, element;
+    return _regeneratorRuntime.wrap(function _callee3$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component3) {
+            _inheritsLoose(Demo, _Component3);
+            function Demo() {
+              var _context5;
+              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(_context5 = [this]).call(_context5, args)) || this;
+              _this3.Bubble = Bubble;
+              return _this3;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                loading: true
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble loading={this.get('loading')} content=\"\u6B63\u5728\u751F\u6210\u4E2D\" />\n                </div>\n            ";
+          _mount3 = mount(Demo), instance = _mount3[0], element = _mount3[1];
+          _context6.next = 5;
+          return wait(40);
+        case 5:
+          expect(element.querySelector('.k-bubble-loading')).not.to.eql(null);
+          instance.set('loading', false);
+          _context6.next = 9;
+          return wait();
+        case 9:
+          expect(element.querySelector('.k-bubble-loading')).to.eql(null);
+        case 10:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee3);
+  })));
+  it('should only render footer when custom footer slot is provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var Demo, _mount4, instance, element, footers;
+    return _regeneratorRuntime.wrap(function _callee4$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component4) {
+            _inheritsLoose(Demo, _Component4);
+            function Demo() {
+              var _context7;
+              var _this4;
+              for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                args[_key4] = arguments[_key4];
+              }
+              _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context7 = [this]).call(_context7, args)) || this;
+              _this4.Bubble = Bubble;
+              return _this4;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble content=\"no footer\" />\n                    <Bubble content=\"custom footer\">\n                        <b:footer>\n                            <span class=\"custom-footer\">custom</span>\n                        </b:footer>\n                    </Bubble>\n                </div>\n            ";
+          _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
+          footers = element.querySelectorAll('.k-bubble-footer');
+          expect(footers.length).to.eql(1);
+          expect(element.querySelector('.custom-footer').textContent).to.eql('custom');
+        case 6:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee4);
+  })));
+  it('should keep custom footer visible during loading and typing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var Demo, _mount5, instance, element;
+    return _regeneratorRuntime.wrap(function _callee5$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component5) {
+            _inheritsLoose(Demo, _Component5);
+            function Demo() {
+              var _context9;
+              var _this5;
+              for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                args[_key5] = arguments[_key5];
+              }
+              _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
+              _this5.Bubble = Bubble;
+              return _this5;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble loading={true} content=\"custom footer\">\n                        <b:footer>\n                            <span class=\"custom-loading-footer\">stop</span>\n                        </b:footer>\n                    </Bubble>\n                    <Bubble typing={true} content=\"typing footer\">\n                        <b:footer>\n                            <span class=\"custom-typing-footer\">typing</span>\n                        </b:footer>\n                    </Bubble>\n                </div>\n            ";
+          _mount5 = mount(Demo), instance = _mount5[0], element = _mount5[1];
+          expect(element.querySelector('.custom-loading-footer').textContent).to.eql('stop');
+          expect(element.querySelector('.custom-typing-footer').textContent).to.eql('typing');
+        case 5:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee5);
+  })));
+  it('should render footer when footer slot is provided without content', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var Demo, _mount6, element;
+    return _regeneratorRuntime.wrap(function _callee6$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component6) {
+            _inheritsLoose(Demo, _Component6);
+            function Demo() {
+              var _context11;
+              var _this6;
+              for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+                args[_key6] = arguments[_key6];
+              }
+              _this6 = _Component6.call.apply(_Component6, _concatInstanceProperty(_context11 = [this]).call(_context11, args)) || this;
+              _this6.Bubble = Bubble;
+              return _this6;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble>\n                        <b:footer>\n                            <span class=\"custom-footer-only\">footer only</span>\n                        </b:footer>\n                    </Bubble>\n                </div>\n            ";
+          _mount6 = mount(Demo), element = _mount6[1];
+          expect(element.querySelector('.k-bubble')).not.to.eql(null);
+          expect(element.querySelector('.k-bubble-content')).to.eql(null);
+          expect(element.querySelector('.custom-footer-only').textContent).to.eql('footer only');
+        case 6:
+        case "end":
+          return _context12.stop();
+      }
+    }, _callee6);
+  })));
+  it('should not render wrappers for empty conditional slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var Demo, _mount7, instance, element;
+    return _regeneratorRuntime.wrap(function _callee7$(_context14) {
+      while (1) switch (_context14.prev = _context14.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component7) {
+            _inheritsLoose(Demo, _Component7);
+            function Demo() {
+              var _context13;
+              var _this7;
+              for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+                args[_key7] = arguments[_key7];
+              }
+              _this7 = _Component7.call.apply(_Component7, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
+              _this7.Bubble = Bubble;
+              return _this7;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                showSlot: false
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble content=\"main content\">\n                        <b:beforeContent>\n                            <span v-if={this.get('showSlot')} class=\"conditional-before-content\">before</span>\n                        </b:beforeContent>\n                        <b:attachments>\n                            <span v-if={this.get('showSlot')} class=\"conditional-attachments\">attachments</span>\n                        </b:attachments>\n                        <b:bottom>\n                            <span v-if={this.get('showSlot')} class=\"conditional-bottom\">bottom</span>\n                        </b:bottom>\n                        <b:footer>\n                            <span v-if={this.get('showSlot')} class=\"conditional-footer\">footer</span>\n                        </b:footer>\n                        <b:extra>\n                            <span v-if={this.get('showSlot')} class=\"conditional-extra\">extra</span>\n                        </b:extra>\n                    </Bubble>\n                </div>\n            ";
+          _mount7 = mount(Demo), instance = _mount7[0], element = _mount7[1];
+          expect(element.querySelector('.k-bubble-before-content')).to.eql(null);
+          expect(element.querySelector('.k-bubble-attachments')).to.eql(null);
+          expect(element.querySelector('.k-bubble-bottom')).to.eql(null);
+          expect(element.querySelector('.k-bubble-footer')).to.eql(null);
+          expect(element.querySelector('.k-bubble-extra')).to.eql(null);
+          expect(element.querySelector('.k-bubble-text').textContent).to.contain('main content');
+          instance.set('showSlot', true);
+          _context14.next = 12;
+          return wait();
+        case 12:
+          expect(element.querySelector('.conditional-before-content').textContent).to.eql('before');
+          expect(element.querySelector('.conditional-attachments').textContent).to.eql('attachments');
+          expect(element.querySelector('.conditional-bottom').textContent).to.eql('bottom');
+          expect(element.querySelector('.conditional-footer').textContent).to.eql('footer');
+          expect(element.querySelector('.conditional-extra').textContent).to.eql('extra');
+        case 17:
+        case "end":
+          return _context14.stop();
+      }
+    }, _callee7);
+  })));
+  it('should fallback to default loading when custom loading slot is empty', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, instance, element;
+    return _regeneratorRuntime.wrap(function _callee8$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component8) {
+            _inheritsLoose(Demo, _Component8);
+            function Demo() {
+              var _context15;
+              var _this8;
+              for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
+                args[_key8] = arguments[_key8];
+              }
+              _this8 = _Component8.call.apply(_Component8, _concatInstanceProperty(_context15 = [this]).call(_context15, args)) || this;
+              _this8.Bubble = Bubble;
+              return _this8;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                showLoadingSlot: false
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble loading={true}>\n                        <b:loading>\n                            <span v-if={this.get('showLoadingSlot')} class=\"custom-loading-slot\">loading</span>\n                        </b:loading>\n                    </Bubble>\n                </div>\n            ";
+          _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
+          expect(element.querySelector('.custom-loading-slot')).to.eql(null);
+          expect(element.querySelector('.k-bubble-loading')).not.to.eql(null);
+          instance.set('showLoadingSlot', true);
+          _context16.next = 8;
+          return wait();
+        case 8:
+          expect(element.querySelector('.custom-loading-slot').textContent).to.eql('loading');
+          expect(element.querySelector('.k-bubble-loading')).to.eql(null);
+        case 10:
+        case "end":
+          return _context16.stop();
+      }
+    }, _callee8);
+  })));
+  it('should render bottom inside bubble content and keep extra below footer', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount9, element, content, text, bottom, footer, extra;
+    return _regeneratorRuntime.wrap(function _callee9$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component9) {
+            _inheritsLoose(Demo, _Component9);
+            function Demo() {
+              var _context17;
+              var _this9;
+              for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
+                args[_key9] = arguments[_key9];
+              }
+              _this9 = _Component9.call.apply(_Component9, _concatInstanceProperty(_context17 = [this]).call(_context17, args)) || this;
+              _this9.Bubble = Bubble;
+              return _this9;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble content=\"main content\">\n                        <b:bottom>\n                            <div class=\"custom-bubble-bottom\">bottom</div>\n                        </b:bottom>\n                        <b:footer>\n                            <div class=\"custom-bubble-footer-order\">footer</div>\n                        </b:footer>\n                        <b:extra>\n                            <div class=\"custom-bubble-extra-order\">extra</div>\n                        </b:extra>\n                    </Bubble>\n                </div>\n            ";
+          _mount9 = mount(Demo), element = _mount9[1];
+          content = element.querySelector('.k-bubble-content');
+          text = element.querySelector('.k-bubble-text');
+          bottom = element.querySelector('.custom-bubble-bottom');
+          footer = element.querySelector('.custom-bubble-footer-order');
+          extra = element.querySelector('.custom-bubble-extra-order');
+          expect(content.contains(bottom)).to.be.true;
+          expect(text.compareDocumentPosition(bottom) & Node.DOCUMENT_POSITION_FOLLOWING).to.not.eql(0);
+          expect(footer.compareDocumentPosition(extra) & Node.DOCUMENT_POSITION_FOLLOWING).to.not.eql(0);
+        case 11:
+        case "end":
+          return _context18.stop();
+      }
+    }, _callee9);
+  })));
+  it('should not render bubble when content is empty and loading is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount10, instance, element;
+    return _regeneratorRuntime.wrap(function _callee10$(_context20) {
+      while (1) switch (_context20.prev = _context20.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component10) {
+            _inheritsLoose(Demo, _Component10);
+            function Demo() {
+              var _context19;
+              var _this10;
+              for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
+                args[_key10] = arguments[_key10];
+              }
+              _this10 = _Component10.call.apply(_Component10, _concatInstanceProperty(_context19 = [this]).call(_context19, args)) || this;
+              _this10.Bubble = Bubble;
+              return _this10;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble content=\"\" />\n                </div>\n            ";
+          _mount10 = mount(Demo), instance = _mount10[0], element = _mount10[1];
+          expect(element.querySelector('.k-bubble')).to.eql(null);
+        case 4:
+        case "end":
+          return _context20.stop();
+      }
+    }, _callee10);
+  })));
+  it('should render beforeContent slot without showing empty bubble content', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var Demo, _mount11, instance, element;
+    return _regeneratorRuntime.wrap(function _callee11$(_context22) {
+      while (1) switch (_context22.prev = _context22.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component11) {
+            _inheritsLoose(Demo, _Component11);
+            function Demo() {
+              var _context21;
+              var _this11;
+              for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
+                args[_key11] = arguments[_key11];
+              }
+              _this11 = _Component11.call.apply(_Component11, _concatInstanceProperty(_context21 = [this]).call(_context21, args)) || this;
+              _this11.Bubble = Bubble;
+              return _this11;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble avatar={true} roleName=\"AI \u52A9\u624B\" content=\"\">\n                        <b:beforeContent>\n                            <div class=\"bubble-before-content\">thinking</div>\n                        </b:beforeContent>\n                    </Bubble>\n                </div>\n            ";
+          _mount11 = mount(Demo), instance = _mount11[0], element = _mount11[1];
+          expect(element.querySelector('.k-bubble')).not.to.eql(null);
+          expect(element.querySelector('.bubble-before-content').textContent).to.eql('thinking');
+          expect(element.querySelector('.k-bubble-content')).to.eql(null);
+        case 6:
+        case "end":
+          return _context22.stop();
+      }
+    }, _callee11);
+  })));
+  it('should render attachments slot inside bubble content before text', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var Demo, _mount12, instance, element, attachments, text;
+    return _regeneratorRuntime.wrap(function _callee12$(_context24) {
+      while (1) switch (_context24.prev = _context24.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component12) {
+            _inheritsLoose(Demo, _Component12);
+            function Demo() {
+              var _context23;
+              var _this12;
+              for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
+                args[_key12] = arguments[_key12];
+              }
+              _this12 = _Component12.call.apply(_Component12, _concatInstanceProperty(_context23 = [this]).call(_context23, args)) || this;
+              _this12.Bubble = Bubble;
+              return _this12;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble content=\"\u9644\u4EF6\u8BF4\u660E\">\n                        <b:attachments>\n                            <div class=\"bubble-attachments-slot\">attachments</div>\n                        </b:attachments>\n                    </Bubble>\n                </div>\n            ";
+          _mount12 = mount(Demo), instance = _mount12[0], element = _mount12[1];
+          attachments = element.querySelector('.k-bubble-attachments');
+          text = element.querySelector('.k-bubble-text');
+          expect(attachments).not.to.eql(null);
+          expect(attachments.textContent).to.contain('attachments');
+          expect(text).not.to.eql(null);
+          expect(text.textContent).to.contain('附件说明');
+          expect(attachments.compareDocumentPosition(text) & Node.DOCUMENT_POSITION_FOLLOWING).to.not.eql(0);
+        case 10:
+        case "end":
+          return _context24.stop();
+      }
+    }, _callee12);
+  })));
+  it('should keep custom slot content constrained inside bubble content width', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var Demo, _mount13, element, content, customSlot;
+    return _regeneratorRuntime.wrap(function _callee13$(_context26) {
+      while (1) switch (_context26.prev = _context26.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component13) {
+            _inheritsLoose(Demo, _Component13);
+            function Demo() {
+              var _context25;
+              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(_context25 = [this]).call(_context25, args)) || this;
+              _this13.Bubble = Bubble;
+              return _this13;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble maxWidthString=\"320px\">\n                        <b:content>\n                            <div class=\"bubble-custom-slot-width\">custom slot</div>\n                        </b:content>\n                    </Bubble>\n                </div>\n            ";
+          _mount13 = mount(Demo), element = _mount13[1];
+          content = element.querySelector('.k-bubble-content');
+          customSlot = element.querySelector('.bubble-custom-slot-width');
+          expect(getComputedStyle(content).maxWidth).to.eql('100%');
+          expect(getComputedStyle(customSlot).maxWidth).to.eql('100%');
+          expect(getComputedStyle(customSlot).minWidth).to.eql('0px');
+        case 8:
+        case "end":
+          return _context26.stop();
+      }
+    }, _callee13);
+  })));
+  it('should render bubble when only attachments slot is provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var Demo, _mount14, instance, element;
+    return _regeneratorRuntime.wrap(function _callee14$(_context28) {
+      while (1) switch (_context28.prev = _context28.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component14) {
+            _inheritsLoose(Demo, _Component14);
+            function Demo() {
+              var _context27;
+              var _this14;
+              for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
+                args[_key14] = arguments[_key14];
+              }
+              _this14 = _Component14.call.apply(_Component14, _concatInstanceProperty(_context27 = [this]).call(_context27, args)) || this;
+              _this14.Bubble = Bubble;
+              return _this14;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble content=\"\">\n                        <b:attachments>\n                            <div class=\"bubble-attachments-only\">files only</div>\n                        </b:attachments>\n                    </Bubble>\n                </div>\n            ";
+          _mount14 = mount(Demo), instance = _mount14[0], element = _mount14[1];
+          expect(element.querySelector('.k-bubble')).not.to.eql(null);
+          expect(element.querySelector('.bubble-attachments-only').textContent).to.eql('files only');
+          expect(element.querySelector('.k-bubble-text')).to.eql(null);
+        case 6:
+        case "end":
+          return _context28.stop();
+      }
+    }, _callee14);
+  })));
+  it('should restart typing from empty after loading resets a reused bubble', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var Demo, _mount15, instance, element, text;
+    return _regeneratorRuntime.wrap(function _callee15$(_context30) {
+      while (1) switch (_context30.prev = _context30.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component15) {
+            _inheritsLoose(Demo, _Component15);
+            function Demo() {
+              var _context29;
+              var _this15;
+              for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
+                args[_key15] = arguments[_key15];
+              }
+              _this15 = _Component15.call.apply(_Component15, _concatInstanceProperty(_context29 = [this]).call(_context29, args)) || this;
+              _this15.Bubble = Bubble;
+              return _this15;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                loading: false,
+                content: 'old content'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble\n                        loading={this.get('loading')}\n                        typing={{interval: 16, step: 2}}\n                        content={this.get('content')}\n                    />\n                </div>\n            ";
+          _mount15 = mount(Demo), instance = _mount15[0], element = _mount15[1];
+          _context30.next = 5;
+          return wait(120);
+        case 5:
+          instance.set({
+            loading: true,
+            content: 'new round'
+          });
+          _context30.next = 8;
+          return wait();
+        case 8:
+          instance.set('loading', false);
+          _context30.next = 11;
+          return wait(40);
+        case 11:
+          text = element.querySelector('.k-bubble-text').textContent;
+          expect(text.length).to.be.greaterThan(0);
+          expect(text.length).to.be.lessThan('new round'.length);
+          expect(text).not.to.eql('new round');
+        case 15:
+        case "end":
+          return _context30.stop();
+      }
+    }, _callee15);
+  })));
+  it('should keep the loading shell mounted between loading finish and the first streaming chunk', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+    var Demo, _mount16, instance, element, bubble;
+    return _regeneratorRuntime.wrap(function _callee16$(_context32) {
+      while (1) switch (_context32.prev = _context32.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component16) {
+            _inheritsLoose(Demo, _Component16);
+            function Demo() {
+              var _context31;
+              var _this16;
+              for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
+                args[_key16] = arguments[_key16];
+              }
+              _this16 = _Component16.call.apply(_Component16, _concatInstanceProperty(_context31 = [this]).call(_context31, args)) || this;
+              _this16.Bubble = Bubble;
+              return _this16;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                loading: true,
+                streaming: false,
+                content: ''
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble\n                        loading={this.get('loading')}\n                        streaming={this.get('streaming')}\n                        typing={{interval: 16, step: 2}}\n                        content={this.get('content')}\n                    />\n                </div>\n            ";
+          _mount16 = mount(Demo), instance = _mount16[0], element = _mount16[1];
+          bubble = element.querySelector('.k-bubble');
+          expect(bubble).not.to.eql(null);
+          expect(element.querySelector('.k-bubble-loading')).not.to.eql(null);
+          instance.set({
+            loading: false,
+            streaming: true
+          });
+          _context32.next = 9;
+          return wait();
+        case 9:
+          expect(element.querySelector('.k-bubble')).to.eql(bubble);
+          expect(element.querySelector('.k-bubble-loading')).not.to.eql(null);
+          instance.set('content', 'ab');
+          _context32.next = 14;
+          return wait(24);
+        case 14:
+          expect(element.querySelector('.k-bubble-loading')).to.eql(null);
+          expect(element.querySelector('.k-bubble-text').textContent).to.contain('ab');
+        case 16:
+        case "end":
+          return _context32.stop();
+      }
+    }, _callee16);
+  })));
+  it('should trigger typing events during animation and typingComplete once after streaming ends', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+    var Demo, _mount17, instance;
+    return _regeneratorRuntime.wrap(function _callee17$(_context34) {
+      while (1) switch (_context34.prev = _context34.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component17) {
+            _inheritsLoose(Demo, _Component17);
+            function Demo() {
+              var _context33;
+              var _this17;
+              for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
+                args[_key17] = arguments[_key17];
+              }
+              _this17 = _Component17.call.apply(_Component17, _concatInstanceProperty(_context33 = [this]).call(_context33, args)) || this;
+              _this17.Bubble = Bubble;
+              return _this17;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: '',
+                streaming: true,
+                typingCount: 0,
+                completeCount: 0,
+                completedContent: ''
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble\n                        content={this.get('content')}\n                        streaming={this.get('streaming')}\n                        typing={{interval: 16, step: 2}}\n                        ev-typing={() => this.set('typingCount', this.get('typingCount') + 1)}\n                        ev-typingComplete={(content) => this.set({\n                            completeCount: this.get('completeCount') + 1,\n                            completedContent: content,\n                        })}\n                    />\n                </div>\n            ";
+          _mount17 = mount(Demo), instance = _mount17[0];
+          instance.set('content', 'abcd');
+          _context34.next = 6;
+          return wait(80);
+        case 6:
+          expect(instance.get('typingCount')).to.be.greaterThan(0);
+          expect(instance.get('completeCount')).to.eql(0);
+          instance.set('content', 'abcdef');
+          _context34.next = 11;
+          return wait(80);
+        case 11:
+          expect(instance.get('completeCount')).to.eql(0);
+          instance.set('streaming', false);
+          _context34.next = 15;
+          return wait(24);
+        case 15:
+          expect(instance.get('completeCount')).to.eql(1);
+          expect(instance.get('completedContent')).to.eql('abcdef');
+        case 17:
+        case "end":
+          return _context34.stop();
+      }
+    }, _callee17);
+  })));
+  it('should trigger typingComplete when a loading round finishes with empty content', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
+    var Demo, _mount18, instance;
+    return _regeneratorRuntime.wrap(function _callee18$(_context36) {
+      while (1) switch (_context36.prev = _context36.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component18) {
+            _inheritsLoose(Demo, _Component18);
+            function Demo() {
+              var _context35;
+              var _this18;
+              for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
+                args[_key18] = arguments[_key18];
+              }
+              _this18 = _Component18.call.apply(_Component18, _concatInstanceProperty(_context35 = [this]).call(_context35, args)) || this;
+              _this18.Bubble = Bubble;
+              return _this18;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                loading: true,
+                completeCount: 0,
+                completedContent: 'not-empty'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble\n                        loading={this.get('loading')}\n                        content=\"\"\n                        ev-typingComplete={(content) => this.set({\n                            completeCount: this.get('completeCount') + 1,\n                            completedContent: content,\n                        })}\n                    />\n                </div>\n            ";
+          _mount18 = mount(Demo), instance = _mount18[0];
+          instance.set('loading', false);
+          _context36.next = 6;
+          return wait();
+        case 6:
+          expect(instance.get('completeCount')).to.eql(1);
+          expect(instance.get('completedContent')).to.eql('');
+        case 8:
+        case "end":
+          return _context36.stop();
+      }
+    }, _callee18);
+  })));
+  it('should keep the shared prefix when streaming content is revised', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+    var Demo, _mount19, instance, element, firstText, i, nextText, _i;
+    return _regeneratorRuntime.wrap(function _callee19$(_context38) {
+      while (1) switch (_context38.prev = _context38.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component19) {
+            _inheritsLoose(Demo, _Component19);
+            function Demo() {
+              var _context37;
+              var _this19;
+              for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
+                args[_key19] = arguments[_key19];
+              }
+              _this19 = _Component19.call.apply(_Component19, _concatInstanceProperty(_context37 = [this]).call(_context37, args)) || this;
+              _this19.Bubble = Bubble;
+              return _this19;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                content: 'hello world',
+                streaming: true
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Bubble } = this;\n                <div>\n                    <Bubble\n                        content={this.get('content')}\n                        streaming={this.get('streaming')}\n                        typing={{interval: 16, step: 2}}\n                    />\n                </div>\n            ";
+          _mount19 = mount(Demo), instance = _mount19[0], element = _mount19[1];
+          firstText = '';
+          i = 0;
+        case 5:
+          if (!(i < 8)) {
+            _context38.next = 14;
+            break;
+          }
+          _context38.next = 8;
+          return wait(20);
+        case 8:
+          firstText = element.querySelector('.k-bubble-text').textContent || '';
+          if (!_includesInstanceProperty(firstText).call(firstText, 'hello')) {
+            _context38.next = 11;
+            break;
+          }
+          return _context38.abrupt("break", 14);
+        case 11:
+          i++;
+          _context38.next = 5;
+          break;
+        case 14:
+          expect(firstText).to.contain('hello');
+          instance.set('content', 'hello, world');
+          nextText = '';
+          _i = 0;
+        case 18:
+          if (!(_i < 6)) {
+            _context38.next = 27;
+            break;
+          }
+          _context38.next = 21;
+          return wait(20);
+        case 21:
+          nextText = element.querySelector('.k-bubble-text').textContent || '';
+          if (!_startsWithInstanceProperty(nextText).call(nextText, 'hello')) {
+            _context38.next = 24;
+            break;
+          }
+          return _context38.abrupt("break", 27);
+        case 24:
+          _i++;
+          _context38.next = 18;
+          break;
+        case 27:
+          expect(_startsWithInstanceProperty(nextText).call(nextText, 'hello')).to.be.true;
+          expect(nextText).not.to.eql('');
+        case 29:
+        case "end":
+          return _context38.stop();
+      }
+    }, _callee19);
+  })));
+});