fix(chat): Doesn't render a header when title is empty

DevExpress · Aug 29, 2024 · 1b9f995 · 1b9f995
1 parent 3e7656c
commit 1b9f995
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 22 deletions.
diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -13,13 +13,11 @@ import type {
 import MessageBox from './chat_message_box';
 import MessageList from './chat_message_list';
 
-export const shouldHeaderBeRendered = false;
-
 const CHAT_CLASS = 'dx-chat';
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
 class Chat extends Widget<Properties> {
-  _chatHeader!: ChatHeader;
+  _chatHeader?: ChatHeader;
 
   _messageBox!: MessageBox;
 
@@ -48,22 +46,21 @@ class Chat extends Widget<Properties> {
 
     super._initMarkup();
 
-    if (shouldHeaderBeRendered) {
-      this._renderHeader();
-    }
-
+    this._renderHeader();
     this._renderMessageList();
     this._renderMessageBox();
   }
 
   _renderHeader(): void {
     const { title = '' } = this.option();
 
-    const $header = $('<div>').appendTo(this.element());
+    if (title !== '') {
+      const $header = $('<div>').appendTo(this.element());
 
-    this._chatHeader = this._createComponent($header, ChatHeader, {
-      title,
-    });
+      this._chatHeader = this._createComponent($header, ChatHeader, {
+        title,
+      });
+    }
   }
 
   _renderMessageList(): void {
@@ -135,9 +132,14 @@ class Chat extends Widget<Properties> {
       case 'hoverStateEnabled':
         this._messageBox.option({ [name]: value });
         break;
-      case 'title':
-        this._chatHeader.option('title', (value as Properties['title']) ?? '');
+      case 'title': {
+        if (this._chatHeader) {
+          this._chatHeader.option('title', (value as Properties['title']) ?? '');
+        } else {
+          this._renderHeader();
+        }
         break;
+      }
       case 'user':
         this._messageList.option('currentUserId', (value as Properties['user'])?.id);
         break;

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js
@@ -2,8 +2,6 @@ import $ from 'jquery';
 
 import Chat from 'ui/chat';
 
-import { shouldHeaderBeRendered } from '__internal/ui/chat/chat';
-
 const CHAT_CLASS = 'dx-chat';
 const CHAT_HEADER_CLASS = 'dx-chat-header';
 const CHAT_MESSAGE_BOX_CLASS = 'dx-chat-message-box';
@@ -31,14 +29,20 @@ const moduleConfig = {
 
 QUnit.module('Chat', moduleConfig, () => {
     QUnit.module('Render', () => {
-        const method = shouldHeaderBeRendered ? 'test' : 'skip';
+        QUnit.test('Header should be rendered if title is not empty', function(assert) {
+            this.reinit({ title: 'custom' });
 
-        QUnit[method]('Header should be rendered', function(assert) {
             const $header = this.$element.find(`.${CHAT_HEADER_CLASS}`);
 
             assert.strictEqual($header.length, 1);
         });
 
+        QUnit.test('Header should not be rendered if title is empty', function(assert) {
+            const $header = this.$element.find(`.${CHAT_HEADER_CLASS}`);
+
+            assert.strictEqual($header.length, 0);
+        });
+
         QUnit.test('Message list should be rendered', function(assert) {
             const $messageList = this.$element.find(`.${CHAT_MESSAGE_LIST_CLASS}`);
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js
@@ -5,7 +5,6 @@ import MessageList from '__internal/ui/chat/chat_message_list';
 import MessageBox from '__internal/ui/chat/chat_message_box';
 import keyboardMock from '../../../helpers/keyboardMock.js';
 
-import { shouldHeaderBeRendered } from '__internal/ui/chat/chat';
 import { isRenderer } from 'core/utils/type';
 
 import config from 'core/config';
@@ -96,9 +95,7 @@ QUnit.module('Chat', moduleConfig, () => {
     });
 
     QUnit.module('Header integration', () => {
-        const method = shouldHeaderBeRendered ? 'test' : 'skip';
-
-        QUnit[method]('Header text element should have correct text', function(assert) {
+        QUnit.test('Header text element should have correct text', function(assert) {
             this.reinit({
                 title: MOCK_CHAT_HEADER_TEXT
             });
@@ -108,7 +105,7 @@ QUnit.module('Chat', moduleConfig, () => {
             assert.strictEqual($header.text(), MOCK_CHAT_HEADER_TEXT);
         });
 
-        QUnit[method]('Header text element should have correct text after runtime change', function(assert) {
+        QUnit.test('Header text element should have correct text after runtime change', function(assert) {
             this.instance.option({ title: 'new title' });
 
             const $header = this.$element.find(`.${CHAT_HEADER_TEXT_CLASS}`);