From 068cbf4e3c8e7a61b0adc5ed7bbc60afb17f07ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Fri, 30 Aug 2024 12:19:50 +0200
Subject: [PATCH] fix(chat): Add find && Add tests

---
 .../__internal/ui/chat/chat_message_list.ts   |  3 +-
 .../chatParts/chat.tests.js                   | 43 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 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
index 38571b62ba12..a85e7ff962b4 100644
--- 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
index a33258e6e858..752e53cfd1f1 100644
--- 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', },