fix(chat): Add find && Add tests

DevExpress · Aug 30, 2024 · 068cbf4 · 068cbf4
1 parent d8e814c
commit 068cbf4
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 2 deletions.
diff --git a/packages/devextreme/js/__internal/ui/chat/chat_message_list.ts b/packages/devextreme/js/__internal/ui/chat/chat_message_list.ts
@@ -11,6 +11,7 @@ import type { MessageGroupAlignment } from './chat_message_group';
 import MessageGroup from './chat_message_group';
 
 const CHAT_MESSAGE_LIST_CLASS = 'dx-chat-message-list';
+const SCROLLABLE_CONTENT_CLASS = 'dx-scrollable-content';
 
 export interface MessageListOptions extends WidgetOptions<MessageList> {
   items: Message[];
@@ -60,7 +61,7 @@ class MessageList extends Widget<MessageListOptions> {
   }
 
   _createMessageGroupComponent(items: Message[], userId: string | number | undefined): void {
-    const scrollableContent = this._scrollable?.content();
+    const scrollableContent = $(this.$element()).find(`.${SCROLLABLE_CONTENT_CLASS}`).get(0);
     const messageGroupContainer = scrollableContent || this._$content;
 
     const $messageGroup = $('<div>').appendTo(messageGroupContainer);

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
@@ -16,6 +16,7 @@ const CHAT_MESSAGE_BOX_BUTTON_CLASS = 'dx-chat-message-box-button';
 const CHAT_MESSAGE_BOX_TEXTAREA_CLASS = 'dx-chat-message-box-text-area';
 
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
+const SCROLLABLE_CONTENT_CLASS = 'dx-scrollable-content';
 
 const MOCK_CHAT_HEADER_TEXT = 'Chat title';
 
@@ -297,7 +298,7 @@ QUnit.module('Chat', moduleConfig, () => {
             assert.strictEqual(lastItem, newMessage);
         });
 
-        QUnit.test('Message Group should be created if items are empty', function(assert) {
+        QUnit.test('Message Group should be created if items was empty', function(assert) {
             this.instance.option({ items: [] });
 
             const author = {
@@ -319,6 +320,46 @@ QUnit.module('Chat', moduleConfig, () => {
             assert.strictEqual(getMessageGroups().length, 1);
         });
 
+        QUnit.test('Message Group should rendered in the scrollable content', function(assert) {
+            const newMessage = {
+                author: { id: MOCK_CURRENT_USER_ID },
+                timestamp: NOW,
+                text: 'NEW MESSAGE',
+            };
+
+            this.reinit({ items: [newMessage] });
+
+            const $scrollableContent = this.$element.find(`.${SCROLLABLE_CONTENT_CLASS}`);
+            const $messageGroups = $scrollableContent.find(`.${CHAT_MESSAGE_GROUP_CLASS}`);
+
+
+            assert.strictEqual($messageGroups.length, 1);
+        });
+
+        QUnit.test('Message Group should rendered in the scrollable content after adding 1 new message', function(assert) {
+            const newMessage = {
+                author: { id: MOCK_CURRENT_USER_ID },
+                timestamp: NOW,
+                text: 'NEW MESSAGE',
+            };
+
+            this.instance.option({ items: [newMessage] });
+
+            const $scrollableContent = this.$element.find(`.${SCROLLABLE_CONTENT_CLASS}`);
+            const $messageGroups = $scrollableContent.find(`.${CHAT_MESSAGE_GROUP_CLASS}`);
+
+            assert.strictEqual($messageGroups.length, 1);
+        });
+
+        QUnit.test('Message Group should rendered in the scrollable content after updating items in runtime', function(assert) {
+            this.instance.option({ items: generateMessages(52) });
+
+            const $scrollableContent = this.$element.find(`.${SCROLLABLE_CONTENT_CLASS}`);
+            const $messageGroups = $scrollableContent.find(`.${CHAT_MESSAGE_GROUP_CLASS}`);
+
+            assert.strictEqual($messageGroups.length, 26);
+        });
+
         [
             { text: undefined, },
             { text: 'new message text', },