From e68bdabbf51543776817d28f7945e0c74ecb2609 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marker=20dao=20=C2=AE?= Date: Fri, 26 Jul 2024 19:46:31 +0400 Subject: [PATCH] Chat: Add user option --- .../devextreme/js/__internal/ui/chat/chat.ts | 18 ++++-- .../__internal/ui/chat/chat_message_list.ts | 5 +- .../chat.markup.tests.js | 1 + .../tests/DevExpress.ui.widgets/chat.tests.js | 62 +++++++++++++++++++ 4 files changed, 79 insertions(+), 7 deletions(-) diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts index 0eeff3a722cd..59896eca9ecf 100644 --- a/packages/devextreme/js/__internal/ui/chat/chat.ts +++ b/packages/devextreme/js/__internal/ui/chat/chat.ts @@ -1,4 +1,5 @@ import registerComponent from '@js/core/component_registrator'; +import Guid from '@js/core/guid'; import $ from '@js/core/renderer'; import type { Properties } from '@js/ui/chat'; @@ -9,8 +10,6 @@ import MessageList from './chat_message_list'; const CHAT_CLASS = 'dx-chat'; -const MOCK_CURRENT_USER_ID = 'CURRENT_USER_ID'; - class Chat extends Widget { _chatHeader?: ChatHeader; @@ -23,6 +22,8 @@ class Chat extends Widget { ...super._getDefaultOptions(), title: '', items: [], + // @ts-expect-error + user: { id: new Guid().toString() }, onMessageSend: undefined, }; } @@ -47,13 +48,15 @@ class Chat extends Widget { } _renderMessageList(): void { - const { items } = this.option(); + // @ts-expect-error + const { items, user } = this.option(); + const currentUserId = user?.id; const $messageList = $('
').appendTo(this.element()); this._messageList = this._createComponent($messageList, MessageList, { items, - currentUserId: MOCK_CURRENT_USER_ID, + currentUserId, }); } @@ -71,8 +74,13 @@ class Chat extends Widget { // @ts-expect-error this._chatHeader?.option(name, value); break; + case 'user': + // @ts-expect-error + this._messageList?.option('currentUserId', value.id); + break; case 'items': - this._invalidate(); + // @ts-expect-error + this._messageList?.option(name, value); break; case 'onMessageSend': break; 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 c3d7716ee33a..974d2edc0a5c 100644 --- a/packages/devextreme/js/__internal/ui/chat/chat_message_list.ts +++ b/packages/devextreme/js/__internal/ui/chat/chat_message_list.ts @@ -11,7 +11,7 @@ const CHAT_MESSAGE_LIST_CONTENT_CLASS = 'dx-chat-message-list-content'; export interface MessageListOptions extends WidgetOptions { items?: Message[]; - currentUserId?: string; + currentUserId?: number | string; } class MessageList extends Widget { @@ -19,7 +19,7 @@ class MessageList extends Widget { return { ...super._getDefaultOptions(), items: [], - currentUserId: '', + currentUserId: undefined, }; } @@ -89,6 +89,7 @@ class MessageList extends Widget { switch (name) { case 'items': case 'currentUserId': + this._invalidate(); break; default: super._optionChanged(args); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.markup.tests.js index 926119642c44..b4f343c146d4 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.markup.tests.js @@ -92,6 +92,7 @@ const moduleConfig = { ]; const options = { + user: userSecond, items: messages, }; diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js index ae73be3fb6e5..cd0a49c39e9f 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js @@ -83,6 +83,51 @@ QUnit.module('Chat initialization', moduleConfig, () => { QUnit.test('Chat should be initialized with correct type', function(assert) { assert.ok(this.instance instanceof Chat); }); + + QUnit.test('currentUserId in message list should be equal chat user id', function(assert) { + const messageList = this.instance._messageList; + + const chatUserId = this.instance.option('user.id'); + const messageListUserId = messageList.option('currentUserId'); + + assert.strictEqual(chatUserId, messageListUserId); + }); + + QUnit.test('currentUserId in message list should be changed when user has been changed in runtime', function(assert) { + const newId = 'new id'; + + this.instance.option({ user: { id: newId } }); + + const { currentUserId } = this.instance._messageList.option(); + + assert.strictEqual(currentUserId, newId); + }); + + QUnit.test('items in message list should be changed when items has been changed in runtime', function(assert) { + const newItems = []; + + this.instance.option({ items: newItems }); + + const { items } = this.instance._messageList.option(); + + assert.strictEqual(items, newItems); + }); + + QUnit.test('Message list should run invalidate after changing user in runtime', function(assert) { + const invalidateStub = sinon.stub(this.instance._messageList, '_invalidate'); + + this.instance.option({ user: {} }); + + assert.strictEqual(invalidateStub.callCount, 1); + }); + + QUnit.test('Message list should run invalidate after changing items in runtime', function(assert) { + const invalidateStub = sinon.stub(this.instance._messageList, '_invalidate'); + + this.instance.option({ items: [] }); + + assert.strictEqual(invalidateStub.callCount, 1); + }); }); QUnit.module('Header', moduleConfig, () => { @@ -141,3 +186,20 @@ QUnit.module('Message group', moduleConfig, () => { assert.strictEqual($bubble.text(), 'userFirst'); }); }); + +QUnit.module('Default options', () => { + QUnit.test('There is an user id by default if user has not been set', function(assert) { + const instance = $('#chat').dxChat().dxChat('instance'); + + const { user } = instance.option(); + + // eslint-disable-next-line no-prototype-builtins + assert.strictEqual(user.hasOwnProperty('id'), true); + }); + + QUnit.test('User id should be generate as a string if user has not been set', function(assert) { + const instance = $('#chat').dxChat().dxChat('instance'); + + assert.strictEqual(typeof instance.option('user.id') === 'string', true); + }); +});