From e89c8eaa4469f8776a2020b1fd4f11ef1f5a98c6 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Sun, 10 Nov 2024 12:49:54 +0400 Subject: [PATCH] fix added test scenarios --- .../devextreme/js/__internal/ui/chat/chat.ts | 17 ++++++++++++----- .../js/__internal/ui/chat/messagegroup.ts | 3 ++- .../js/__internal/ui/chat/messagelist.ts | 4 +++- .../chatParts/chat.tests.js | 3 ++- .../chatParts/messageBubble.tests.js | 2 +- 5 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts index 1c848378d02f..e3db3e2a4ca0 100644 --- a/packages/devextreme/js/__internal/ui/chat/chat.ts +++ b/packages/devextreme/js/__internal/ui/chat/chat.ts @@ -23,7 +23,7 @@ import type { TypingStartEvent as MessageBoxTypingStartEvent, } from './messagebox'; import MessageBox from './messagebox'; -import type { Change, Properties as MessageListProperties } from './messagelist'; +import type { Change, MessageTemplate, Properties as MessageListProperties } from './messagelist'; import MessageList from './messagelist'; const CHAT_CLASS = 'dx-chat'; @@ -138,7 +138,6 @@ class Chat extends Widget { showAvatar = false, showUserName = false, showMessageTimestamp = false, - messageTemplate, dayHeaderFormat, messageTimestampFormat, typingUsers = [], @@ -151,6 +150,7 @@ class Chat extends Widget { const options: MessageListProperties = { items, currentUserId, + messageTemplate: this._getMessageTemplate(), showDayHeaders, showAvatar, showUserName, @@ -161,8 +161,13 @@ class Chat extends Widget { isLoading, }; + return options; + } + + _getMessageTemplate(): MessageTemplate { + const { messageTemplate } = this.option(); if (messageTemplate) { - options.messageTemplate = (message, $container): void => { + return (message, $container): void => { const template = this._getTemplateByOption('messageTemplate'); template.render({ @@ -175,7 +180,7 @@ class Chat extends Widget { }; } - return options; + return null; } _renderAlertList(): void { @@ -341,12 +346,14 @@ class Chat extends Widget { case 'showMessageTimestamp': this._messageList.option(name, !!value); break; - case 'messageTemplate': case 'dayHeaderFormat': case 'messageTimestampFormat': case 'typingUsers': this._messageList.option(name, value); break; + case 'messageTemplate': + this._messageList.option(name, this._getMessageTemplate()); + break; case 'reloadOnChange': break; default: diff --git a/packages/devextreme/js/__internal/ui/chat/messagegroup.ts b/packages/devextreme/js/__internal/ui/chat/messagegroup.ts index 9968e906925a..d80ba2d5232d 100644 --- a/packages/devextreme/js/__internal/ui/chat/messagegroup.ts +++ b/packages/devextreme/js/__internal/ui/chat/messagegroup.ts @@ -13,6 +13,7 @@ import Widget from '@ts/core/widget/widget'; import Avatar from './avatar'; import type { Properties as MessageBubbleProperties } from './messagebubble'; import MessageBubble from './messagebubble'; +import type { MessageTemplate } from './messagelist'; export const MESSAGE_DATA_KEY = 'dxMessageData'; @@ -32,7 +33,7 @@ export interface Properties extends WidgetOptions { showAvatar: boolean; showUserName: boolean; showMessageTimestamp: boolean; - messageTemplate?: ((data: Message, messageBubbleContainer: Element) => void) | null; + messageTemplate?: MessageTemplate; messageTimestampFormat?: Format; } diff --git a/packages/devextreme/js/__internal/ui/chat/messagelist.ts b/packages/devextreme/js/__internal/ui/chat/messagelist.ts index 23ef8c4f764d..94c61b0bc2e4 100644 --- a/packages/devextreme/js/__internal/ui/chat/messagelist.ts +++ b/packages/devextreme/js/__internal/ui/chat/messagelist.ts @@ -49,6 +49,8 @@ const CHAT_LAST_MESSAGEGROUP_ALIGNMENT_END_CLASS = 'dx-chat-last-messagegroup-al const SCROLLABLE_CONTAINER_CLASS = 'dx-scrollable-container'; export const MESSAGEGROUP_TIMEOUT = 5 * 1000 * 60; +export type MessageTemplate = ((data: Message, messageBubbleContainer: Element) => void) | null; + export interface Change { type: 'insert' | 'update' | 'remove'; data?: DeepPartial; @@ -59,7 +61,7 @@ export interface Properties extends WidgetOptions { items: Message[]; currentUserId: number | string | undefined; showDayHeaders: boolean; - messageTemplate?: ((data: Message, messageBubbleContainer: Element) => void) | null; + messageTemplate?: MessageTemplate; dayHeaderFormat?: Format; messageTimestampFormat?: Format; typingUsers: User[]; 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 eb3f7f3fa2c0..8628182df0ca 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 @@ -7,6 +7,7 @@ import MessageBox, { TYPING_END_DELAY } from '__internal/ui/chat/messagebox'; import keyboardMock from '../../../helpers/keyboardMock.js'; import { DataSource } from 'data/data_source/data_source'; import CustomStore from 'data/custom_store'; +import dataUtils from 'core/element_data'; import { isRenderer } from 'core/utils/type'; @@ -1157,7 +1158,7 @@ QUnit.module('Chat', () => { assert.strictEqual(this.getBubbles().length, 3, 'message bubble count'); assert.strictEqual(this.getBubbles().eq(1).text(), newBubbleText, 'message bubble text was updated'); - const messageData = data(this.getBubbles().eq(1).get(0), 'dxMessageData'); + const messageData = dataUtils.data(this.getBubbles().eq(1).get(0), 'dxMessageData'); assert.deepEqual(messageData, { id: 2, text: newBubbleText }, 'message bubble data was updated'); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js index d7cdac4ed317..612b6291c603 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js @@ -50,7 +50,7 @@ QUnit.module('MessageBubble', moduleConfig, () => { assert.strictEqual(templateSpy.callCount, 1, 'template was rendered once'); assert.strictEqual(templateSpy.args[0][0], messageText, 'text argument is correct'); - assert.strictEqual(templateSpy.args[0][1], this.$element.get(0), 'container element is correct'); + assert.strictEqual($(templateSpy.args[0][1]).get(0), this.$element.get(0), 'container element is correct'); }); QUnit.test('default markup should be restored after resetting the template option at runtime', function(assert) {