diff --git a/e2e/testcafe-devextreme/tests/chat/messageGroup.ts b/e2e/testcafe-devextreme/tests/chat/messageGroup.ts index c0f434c73d1b..a5d7a2a02750 100644 --- a/e2e/testcafe-devextreme/tests/chat/messageGroup.ts +++ b/e2e/testcafe-devextreme/tests/chat/messageGroup.ts @@ -11,7 +11,7 @@ import { createWidget } from '../../helpers/createWidget'; import { testScreenshot } from '../../helpers/themeUtils'; import { appendElementTo, setStyleAttribute } from '../../helpers/domUtils'; -const CHAT_AVATAR_SELECTOR = '.dx-chat-message-avatar'; +const AVATAR_SELECTOR = '.dx-avatar'; fixture.disablePageReloads`ChatMessageGroup` .page(url(__dirname, '../container.html')); @@ -21,7 +21,7 @@ test('Chat: messagegroup, avatar rendering', async (t) => { await testScreenshot(t, takeScreenshot, 'Avatar has correct position.png', { element: '#chat' }); - await setStyleAttribute(Selector(CHAT_AVATAR_SELECTOR), 'width: 64px; height: 64px'); + await setStyleAttribute(Selector(AVATAR_SELECTOR), 'width: 64px; height: 64px'); await testScreenshot(t, takeScreenshot, 'Avatar sizes do not affect indentation between bubbles.png', { element: '#chat' }); await t diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_index.scss index 08ba46c93413..f312ae042660 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_index.scss @@ -1,4 +1,4 @@ -.dx-chat-message-avatar { +.dx-avatar { grid-row: 2 / auto; display: flex; align-items: center; @@ -7,7 +7,7 @@ overflow: clip; } -.dx-chat-message-avatar-image { +.dx-avatar-image { height: 100%; width: 100%; object-fit: cover; diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_mixins.scss index 69fbe6dfbfe1..ee7b26cbfeac 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_mixins.scss @@ -1,5 +1,5 @@ @mixin chat-avatar($size, $background-color) { - .dx-chat-message-avatar { + .dx-avatar { width: $size; height: $size; background-color: $background-color; diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss index 5a426f911a23..5ecac6131502 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss @@ -1,10 +1,10 @@ -.dx-chat-message-box { +.dx-chat-messagebox { display: flex; align-items: flex-end; border-top-width: 1px; border-top-style: solid; } -.dx-chat-message-box-text-area { +.dx-chat-messagebox-textarea { flex-grow: 1; } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss index 34a737b37a78..00d96c26cfee 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss @@ -5,19 +5,19 @@ $textarea-border-radius, $button-gap ) { - .dx-chat-message-box { + .dx-chat-messagebox { padding: $padding; border-top-color: $border-color; gap: $gap; } - .dx-chat-message-box-text-area { + .dx-chat-messagebox-textarea { &.dx-textarea.dx-texteditor { border-radius: $textarea-border-radius; } } - .dx-chat-message-box-button { + .dx-chat-messagebox-button { margin-bottom: $button-gap; } } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss index ae9e27a35873..476a7457c450 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss @@ -1,33 +1,33 @@ -.dx-chat-message-bubble-container { +.dx-chat-messagegroup-content { display: flex; flex-direction: column; max-width: 70%; } -.dx-chat-message-bubble { +.dx-chat-messagebubble { width: auto; word-break: break-word; white-space: break-spaces; } -.dx-chat-message-group-alignment-start { - .dx-chat-message-bubble-container { +.dx-chat-messagegroup-alignment-start { + .dx-chat-messagegroup-content { grid-column: 2; align-items: flex-start; } - .dx-chat-message-bubble { + .dx-chat-messagebubble { border-bottom-left-radius: 0; border-top-left-radius: 0; } } -.dx-chat-message-group-alignment-end { - .dx-chat-message-bubble-container { +.dx-chat-messagegroup-alignment-end { + .dx-chat-messagegroup-content { align-items: flex-end; } - .dx-chat-message-bubble { + .dx-chat-messagebubble { border-bottom-right-radius: 0; border-top-right-radius: 0; } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss index 1895940b8811..444da1a0b717 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss @@ -5,17 +5,17 @@ $background-color-primary, $bubble-container-gap ) { - .dx-chat-message-bubble-container { + .dx-chat-messagegroup-content { row-gap: $bubble-container-gap; } - .dx-chat-message-bubble { + .dx-chat-messagebubble { padding: $padding; border-radius: $border-radius; } - .dx-chat-message-group-alignment-start { - .dx-chat-message-bubble { + .dx-chat-messagegroup-alignment-start { + .dx-chat-messagebubble { background-color: $background-color-secondary; &:first-child { @@ -28,8 +28,8 @@ } } - .dx-chat-message-group-alignment-end { - .dx-chat-message-bubble { + .dx-chat-messagegroup-alignment-end { + .dx-chat-messagebubble { background-color: $background-color-primary; &:first-child { diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss index ec184943b554..b668f652c821 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss @@ -1,33 +1,33 @@ @use "../../../mixins" as *; -.dx-chat-message-group { +.dx-chat-messagegroup { display: grid; align-items: start; } -.dx-chat-message-group-information { +.dx-chat-messagegroup-information { display: flex; grid-row: 1; max-width: 100%; min-width: 0; } -.dx-chat-message-author-name { +.dx-chat-messagegroup-author-name { @include dx-overflow(); } -.dx-chat-message-time { +.dx-chat-messagegroup-time { white-space: nowrap; } -.dx-chat-message-group-alignment-start { +.dx-chat-messagegroup-alignment-start { justify-items: start; - .dx-chat-message-group-information { + .dx-chat-messagegroup-information { grid-column: 2; } } -.dx-chat-message-group-alignment-end { +.dx-chat-messagegroup-alignment-end { justify-items: end; } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss index a0a29c7fd3b9..0c14be3ea256 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss @@ -7,7 +7,7 @@ $information-color, $information-gap ) { - .dx-chat-message-group { + .dx-chat-messagegroup { row-gap: $messagegroup-gap; padding-bottom: $messagegroup-padding; @@ -16,17 +16,17 @@ } } - .dx-chat-message-group-information { + .dx-chat-messagegroup-information { column-gap: $information-gap; } - .dx-chat-message-group-alignment-start { + .dx-chat-messagegroup-alignment-start { grid-template-columns: $messagegroup-start-template; column-gap: $messagegroup-start-gap; } - .dx-chat-message-time, - .dx-chat-message-author-name { + .dx-chat-messagegroup-time, + .dx-chat-messagegroup-author-name { font-size: $information-font-size; color: $information-color; } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss index c62c1e0d2236..951c0aac3af6 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss @@ -1,6 +1,6 @@ @use "../../../icons" as *; -.dx-chat-message-list { +.dx-chat-messagelist { flex-grow: 1; overflow: hidden; @@ -10,8 +10,8 @@ } } -.dx-chat-message-list-empty { - .dx-chat-empty-view { +.dx-chat-messagelist-empty { + .dx-chat-messagelist-empty-view { display: flex; flex-direction: column; align-items: center; @@ -19,7 +19,7 @@ flex-grow: 1; } - .dx-chat-empty-image { + .dx-chat-messagelist-empty-image { @include dx-icon(chat); border-radius: 999em; diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss index f933ac2bf7d9..c310e335368d 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss @@ -1,7 +1,7 @@ @use "sass:math"; @mixin chat-messagelist($padding) { - .dx-chat-message-list { + .dx-chat-messagelist { .dx-scrollable-content { padding: $padding; } @@ -20,12 +20,12 @@ $messagelist-empty-prompt-font-size, $messagelist-empty-prompt-color, ) { - .dx-chat-message-list-empty { - .dx-chat-empty-view { + .dx-chat-messagelist-empty { + .dx-chat-messagelist-empty-view { row-gap: $messagelist-empty-row-gap; } - .dx-chat-empty-image { + .dx-chat-messagelist-empty-image { color: $messagelist-empty-icon-color; background-color: $messagelist-empty-icon-background-color; padding: math.div($messagelist-empty-icon-box-size - $messagelist-empty-icon-size, 2); @@ -36,12 +36,12 @@ } } - .dx-chat-empty-message { + .dx-chat-messagelist-empty-message { font-size: $messagelist-empty-message-font-size; color: $messagelist-empty-message-color; } - .dx-chat-empty-prompt { + .dx-chat-messagelist-empty-prompt { font-size: $messagelist-empty-prompt-font-size; color: $messagelist-empty-prompt-color; } diff --git a/packages/devextreme/js/__internal/ui/chat/chat_avatar.ts b/packages/devextreme/js/__internal/ui/chat/avatar.ts similarity index 86% rename from packages/devextreme/js/__internal/ui/chat/chat_avatar.ts rename to packages/devextreme/js/__internal/ui/chat/avatar.ts index 46130c946952..288e85b5d148 100644 --- a/packages/devextreme/js/__internal/ui/chat/chat_avatar.ts +++ b/packages/devextreme/js/__internal/ui/chat/avatar.ts @@ -5,9 +5,9 @@ import type { WidgetOptions } from '@js/ui/widget/ui.widget'; import type { OptionChanged } from '@ts/core/widget/types'; import Widget from '@ts/core/widget/widget'; -const CHAT_MESSAGE_AVATAR_CLASS = 'dx-chat-message-avatar'; -const CHAT_MESSAGE_AVATAR_INITIALS_CLASS = 'dx-chat-message-avatar-initials'; -const CHAT_MESSAGE_AVATAR_IMAGE_CLASS = 'dx-chat-message-avatar-image'; +const AVATAR_CLASS = 'dx-avatar'; +const AVATAR_INITIALS_CLASS = 'dx-avatar-initials'; +const AVATAR_IMAGE_CLASS = 'dx-avatar-image'; export interface Properties extends WidgetOptions { name?: string; @@ -26,7 +26,7 @@ class Avatar extends Widget { } _initMarkup(): void { - $(this.element()).addClass(CHAT_MESSAGE_AVATAR_CLASS); + $(this.element()).addClass(AVATAR_CLASS); super._initMarkup(); @@ -62,13 +62,13 @@ class Avatar extends Widget { _renderImageElement(): void { this._$content = $('') - .addClass(CHAT_MESSAGE_AVATAR_IMAGE_CLASS) + .addClass(AVATAR_IMAGE_CLASS) .appendTo(this.element()); } _renderInitialsElement(): void { this._$content = $('
') - .addClass(CHAT_MESSAGE_AVATAR_INITIALS_CLASS) + .addClass(AVATAR_INITIALS_CLASS) .appendTo(this.element()); } diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts index c06d4b32516a..40c669a923a9 100644 --- a/packages/devextreme/js/__internal/ui/chat/chat.ts +++ b/packages/devextreme/js/__internal/ui/chat/chat.ts @@ -6,13 +6,13 @@ import type { Message, MessageSendEvent, Properties as ChatProperties } from '@j import type { OptionChanged } from '@ts/core/widget/types'; import Widget from '@ts/core/widget/widget'; -import ChatHeader from './chat_header'; +import ChatHeader from './header'; import type { MessageSendEvent as MessageBoxMessageSendEvent, Properties as MessageBoxProperties, -} from './chat_message_box'; -import MessageBox from './chat_message_box'; -import MessageList from './chat_message_list'; +} from './messagebox'; +import MessageBox from './messagebox'; +import MessageList from './messagelist'; const CHAT_CLASS = 'dx-chat'; const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input'; diff --git a/packages/devextreme/js/__internal/ui/chat/chat_header.ts b/packages/devextreme/js/__internal/ui/chat/header.ts similarity index 100% rename from packages/devextreme/js/__internal/ui/chat/chat_header.ts rename to packages/devextreme/js/__internal/ui/chat/header.ts diff --git a/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts b/packages/devextreme/js/__internal/ui/chat/messagebox.ts similarity index 92% rename from packages/devextreme/js/__internal/ui/chat/chat_message_box.ts rename to packages/devextreme/js/__internal/ui/chat/messagebox.ts index 48d36fb7e49c..5158b34fc3c2 100644 --- a/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts +++ b/packages/devextreme/js/__internal/ui/chat/messagebox.ts @@ -10,9 +10,9 @@ import type { EnterKeyEvent } from '../../../ui/text_area'; import type dxTextArea from '../../../ui/text_area'; import TextArea from '../m_text_area'; -const CHAT_MESSAGE_BOX_CLASS = 'dx-chat-message-box'; -const CHAT_MESSAGE_BOX_TEXTAREA_CLASS = 'dx-chat-message-box-text-area'; -const CHAT_MESSAGE_BOX_BUTTON_CLASS = 'dx-chat-message-box-button'; +const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox'; +const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea'; +const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button'; export type MessageSendEvent = NativeEventInfo & @@ -52,7 +52,7 @@ class MessageBox extends DOMComponent { } _initMarkup(): void { - $(this.element()).addClass(CHAT_MESSAGE_BOX_CLASS); + $(this.element()).addClass(CHAT_MESSAGEBOX_CLASS); super._initMarkup(); @@ -74,7 +74,7 @@ class MessageBox extends DOMComponent { } = this.option(); const $textArea = $('
') - .addClass(CHAT_MESSAGE_BOX_TEXTAREA_CLASS) + .addClass(CHAT_MESSAGEBOX_TEXTAREA_CLASS) .appendTo(this.element()); this._textArea = this._createComponent($textArea, TextArea, { @@ -113,7 +113,7 @@ class MessageBox extends DOMComponent { } = this.option(); const $button = $('
') - .addClass(CHAT_MESSAGE_BOX_BUTTON_CLASS) + .addClass(CHAT_MESSAGEBOX_BUTTON_CLASS) .appendTo(this.element()); this._button = this._createComponent($button, Button, { diff --git a/packages/devextreme/js/__internal/ui/chat/chat_message_bubble.ts b/packages/devextreme/js/__internal/ui/chat/messagebubble.ts similarity index 89% rename from packages/devextreme/js/__internal/ui/chat/chat_message_bubble.ts rename to packages/devextreme/js/__internal/ui/chat/messagebubble.ts index c2c3369daf67..d1036ff1caed 100644 --- a/packages/devextreme/js/__internal/ui/chat/chat_message_bubble.ts +++ b/packages/devextreme/js/__internal/ui/chat/messagebubble.ts @@ -3,7 +3,7 @@ import type { WidgetOptions } from '@js/ui/widget/ui.widget'; import type { OptionChanged } from '@ts/core/widget/types'; import Widget from '@ts/core/widget/widget'; -const CHAT_MESSAGE_BUBBLE_CLASS = 'dx-chat-message-bubble'; +const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble'; export interface Properties extends WidgetOptions { text?: string; @@ -19,7 +19,7 @@ class MessageBubble extends Widget { _initMarkup(): void { $(this.element()) - .addClass(CHAT_MESSAGE_BUBBLE_CLASS); + .addClass(CHAT_MESSAGEBUBBLE_CLASS); super._initMarkup(); diff --git a/packages/devextreme/js/__internal/ui/chat/chat_message_group.ts b/packages/devextreme/js/__internal/ui/chat/messagegroup.ts similarity index 78% rename from packages/devextreme/js/__internal/ui/chat/chat_message_group.ts rename to packages/devextreme/js/__internal/ui/chat/messagegroup.ts index a9ea0846c532..0de404ac329f 100644 --- a/packages/devextreme/js/__internal/ui/chat/chat_message_group.ts +++ b/packages/devextreme/js/__internal/ui/chat/messagegroup.ts @@ -7,16 +7,16 @@ import type { WidgetOptions } from '@js/ui/widget/ui.widget'; import type { OptionChanged } from '@ts/core/widget/types'; import Widget from '@ts/core/widget/widget'; -import Avatar from './chat_avatar'; -import MessageBubble from './chat_message_bubble'; +import Avatar from './avatar'; +import MessageBubble from './messagebubble'; -const CHAT_MESSAGE_GROUP_CLASS = 'dx-chat-message-group'; -const CHAT_MESSAGE_GROUP_ALIGNMENT_START_CLASS = 'dx-chat-message-group-alignment-start'; -const CHAT_MESSAGE_GROUP_ALIGNMENT_END_CLASS = 'dx-chat-message-group-alignment-end'; -const CHAT_MESSAGE_GROUP_INFORMATION_CLASS = 'dx-chat-message-group-information'; -const CHAT_MESSAGE_TIME_CLASS = 'dx-chat-message-time'; -const CHAT_MESSAGE_AUTHOR_NAME_CLASS = 'dx-chat-message-author-name'; -const CHAT_MESSAGE_BUBBLE_CONTAINER_CLASS = 'dx-chat-message-bubble-container'; +const CHAT_MESSAGEGROUP_CLASS = 'dx-chat-messagegroup'; +const CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS = 'dx-chat-messagegroup-alignment-start'; +const CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS = 'dx-chat-messagegroup-alignment-end'; +const CHAT_MESSAGEGROUP_INFORMATION_CLASS = 'dx-chat-messagegroup-information'; +const CHAT_MESSAGEGROUP_TIME_CLASS = 'dx-chat-messagegroup-time'; +const CHAT_MESSAGEGROUP_AUTHOR_NAME_CLASS = 'dx-chat-messagegroup-author-name'; +const CHAT_MESSAGEGROUP_CONTENT_CLASS = 'dx-chat-messagegroup-content'; export type MessageGroupAlignment = 'start' | 'end'; @@ -42,12 +42,12 @@ class MessageGroup extends Widget { const { alignment } = this.option(); $(this.element()) - .removeClass(CHAT_MESSAGE_GROUP_ALIGNMENT_START_CLASS) - .removeClass(CHAT_MESSAGE_GROUP_ALIGNMENT_END_CLASS); + .removeClass(CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS) + .removeClass(CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS); const alignmentClass = alignment === 'start' - ? CHAT_MESSAGE_GROUP_ALIGNMENT_START_CLASS - : CHAT_MESSAGE_GROUP_ALIGNMENT_END_CLASS; + ? CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS + : CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS; $(this.element()) .addClass(alignmentClass); @@ -57,7 +57,7 @@ class MessageGroup extends Widget { const { alignment, items } = this.option(); $(this.element()) - .addClass(CHAT_MESSAGE_GROUP_CLASS); + .addClass(CHAT_MESSAGEGROUP_CLASS); this._updateAlignmentClass(); @@ -100,7 +100,7 @@ class MessageGroup extends Widget { } _renderMessageBubbles(items: Message[]): void { - this._$messageBubbleContainer = $('
').addClass(CHAT_MESSAGE_BUBBLE_CONTAINER_CLASS); + this._$messageBubbleContainer = $('
').addClass(CHAT_MESSAGEGROUP_CONTENT_CLASS); items.forEach((message) => { this._renderMessageBubble(message); @@ -114,18 +114,18 @@ class MessageGroup extends Widget { const { timestamp, author } = message; const $information = $('
') - .addClass(CHAT_MESSAGE_GROUP_INFORMATION_CLASS); + .addClass(CHAT_MESSAGEGROUP_INFORMATION_CLASS); const authorName = author?.name ?? ''; const authorNameText = alignment === 'start' ? authorName : ''; $('
') - .addClass(CHAT_MESSAGE_AUTHOR_NAME_CLASS) + .addClass(CHAT_MESSAGEGROUP_AUTHOR_NAME_CLASS) .text(authorNameText) .appendTo($information); const $time = $('
') - .addClass(CHAT_MESSAGE_TIME_CLASS) + .addClass(CHAT_MESSAGEGROUP_TIME_CLASS) .appendTo($information); if (isDefined(timestamp)) { diff --git a/packages/devextreme/js/__internal/ui/chat/chat_message_list.ts b/packages/devextreme/js/__internal/ui/chat/messagelist.ts similarity index 87% rename from packages/devextreme/js/__internal/ui/chat/chat_message_list.ts rename to packages/devextreme/js/__internal/ui/chat/messagelist.ts index 5e98701dd445..7a9b777b0d5a 100644 --- a/packages/devextreme/js/__internal/ui/chat/chat_message_list.ts +++ b/packages/devextreme/js/__internal/ui/chat/messagelist.ts @@ -7,16 +7,16 @@ import type { WidgetOptions } from '@js/ui/widget/ui.widget'; import type { OptionChanged } from '@ts/core/widget/types'; import Widget from '@ts/core/widget/widget'; -import type { MessageGroupAlignment } from './chat_message_group'; -import MessageGroup from './chat_message_group'; +import type { MessageGroupAlignment } from './messagegroup'; +import MessageGroup from './messagegroup'; -const CHAT_MESSAGE_LIST_CLASS = 'dx-chat-message-list'; +const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist'; -const CHAT_MESSAGE_LIST_EMPTY_CLASS = 'dx-chat-message-list-empty'; -const CHAT_MESSAGE_LIST_EMPTY_VIEW_CLASS = 'dx-chat-empty-view'; -const CHAT_MESSAGE_LIST_EMPTY_IMAGE_CLASS = 'dx-chat-empty-image'; -const CHAT_MESSAGE_LIST_EMPTY_MESSAGE_CLASS = 'dx-chat-empty-message'; -const CHAT_MESSAGE_LIST_EMPTY_PROMPT_CLASS = 'dx-chat-empty-prompt'; +const CHAT_MESSAGELIST_EMPTY_CLASS = 'dx-chat-messagelist-empty'; +const CHAT_MESSAGELIST_EMPTY_VIEW_CLASS = 'dx-chat-messagelist-empty-view'; +const CHAT_MESSAGELIST_EMPTY_IMAGE_CLASS = 'dx-chat-messagelist-empty-image'; +const CHAT_MESSAGELIST_EMPTY_MESSAGE_CLASS = 'dx-chat-messagelist-empty-message'; +const CHAT_MESSAGELIST_EMPTY_PROMPT_CLASS = 'dx-chat-messagelist-empty-prompt'; export interface Properties extends WidgetOptions { items: Message[]; @@ -43,7 +43,7 @@ class MessageList extends Widget { } _initMarkup(): void { - $(this.element()).addClass(CHAT_MESSAGE_LIST_CLASS); + $(this.element()).addClass(CHAT_MESSAGELIST_CLASS); super._initMarkup(); @@ -59,22 +59,24 @@ class MessageList extends Widget { _renderEmptyViewContent(): void { const $emptyView = $('
') - .addClass(CHAT_MESSAGE_LIST_EMPTY_VIEW_CLASS); + .addClass(CHAT_MESSAGELIST_EMPTY_VIEW_CLASS); $('
') .appendTo($emptyView) - .addClass(CHAT_MESSAGE_LIST_EMPTY_IMAGE_CLASS); + .addClass(CHAT_MESSAGELIST_EMPTY_IMAGE_CLASS); const messageText = messageLocalization.format('dxChat-emptyListMessage'); + $('
') .appendTo($emptyView) - .addClass(CHAT_MESSAGE_LIST_EMPTY_MESSAGE_CLASS) + .addClass(CHAT_MESSAGELIST_EMPTY_MESSAGE_CLASS) .text(messageText); const promptText = messageLocalization.format('dxChat-emptyListPrompt'); + $('
') .appendTo($emptyView) - .addClass(CHAT_MESSAGE_LIST_EMPTY_PROMPT_CLASS) + .addClass(CHAT_MESSAGELIST_EMPTY_PROMPT_CLASS) .text(promptText); $emptyView.appendTo(this._scrollable.content()); @@ -85,7 +87,7 @@ class MessageList extends Widget { } _toggleEmptyStateClass(state: boolean): void { - this.$element().toggleClass(CHAT_MESSAGE_LIST_EMPTY_CLASS, state); + this.$element().toggleClass(CHAT_MESSAGELIST_EMPTY_CLASS, state); } _isEmpty(): boolean { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/avatar.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/avatar.markup.tests.js index ba99ce04c222..2dbbff223e8e 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/avatar.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/avatar.markup.tests.js @@ -1,10 +1,10 @@ import $ from 'jquery'; -import ChatAvatar from '__internal/ui/chat/chat_avatar'; +import Avatar from '__internal/ui/chat/avatar'; -const CHAT_MESSAGE_AVATAR_CLASS = 'dx-chat-message-avatar'; -const CHAT_MESSAGE_AVATAR_IMAGE_CLASS = 'dx-chat-message-avatar-image'; -const CHAT_MESSAGE_AVATAR_INITIALS_CLASS = 'dx-chat-message-avatar-initials'; +const AVATAR_CLASS = 'dx-avatar'; +const AVATAR_IMAGE_CLASS = 'dx-avatar-image'; +const AVATAR_INITIALS_CLASS = 'dx-avatar-initials'; const moduleConfig = { beforeEach: function() { @@ -12,7 +12,7 @@ const moduleConfig = { $('#qunit-fixture').html(markup); const init = (options = {}) => { - this.instance = new ChatAvatar($('#avatar'), options); + this.instance = new Avatar($('#avatar'), options); this.$element = $(this.instance.$element()); }; @@ -28,18 +28,18 @@ const moduleConfig = { QUnit.module('Avatar classes', moduleConfig, () => { QUnit.test('root element should have correct class', function(assert) { - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_AVATAR_CLASS), true); + assert.strictEqual(this.$element.hasClass(AVATAR_CLASS), true); }); QUnit.test('image element should have correct class', function(assert) { this.reinit({ url: 'url' }); - assert.strictEqual(this.$element.children().first().hasClass(CHAT_MESSAGE_AVATAR_IMAGE_CLASS), true); + assert.strictEqual(this.$element.children().first().hasClass(AVATAR_IMAGE_CLASS), true); }); QUnit.test('text element should have correct class', function(assert) { this.reinit({ name: 'name' }); - assert.strictEqual(this.$element.children().first().hasClass(CHAT_MESSAGE_AVATAR_INITIALS_CLASS), true); + assert.strictEqual(this.$element.children().first().hasClass(AVATAR_INITIALS_CLASS), true); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/avatar.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/avatar.tests.js index ce3b928c9b6f..7eb8bf17683d 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/avatar.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/avatar.tests.js @@ -1,9 +1,9 @@ import $ from 'jquery'; -import ChatAvatar from '__internal/ui/chat/chat_avatar'; +import ChatAvatar from '__internal/ui/chat/avatar'; -const CHAT_MESSAGE_AVATAR_IMAGE_CLASS = 'dx-chat-message-avatar-image'; -const CHAT_MESSAGE_AVATAR_INITIALS_CLASS = 'dx-chat-message-avatar-initials'; +const AVATAR_IMAGE_CLASS = 'dx-avatar-image'; +const AVATAR_INITIALS_CLASS = 'dx-avatar-initials'; const moduleConfig = { beforeEach: function() { @@ -73,7 +73,7 @@ QUnit.module('ChatAvatar', moduleConfig, () => { url: 'url', }); - const $initials = this.$element.find(`.${CHAT_MESSAGE_AVATAR_INITIALS_CLASS}`); + const $initials = this.$element.find(`.${AVATAR_INITIALS_CLASS}`); assert.strictEqual($initials.length, 0); }); @@ -86,7 +86,7 @@ QUnit.module('ChatAvatar', moduleConfig, () => { this.instance.option({ url: '' }); - const $initials = this.$element.find(`.${CHAT_MESSAGE_AVATAR_INITIALS_CLASS}`); + const $initials = this.$element.find(`.${AVATAR_INITIALS_CLASS}`); assert.strictEqual($initials.length, 1); }); @@ -98,7 +98,7 @@ QUnit.module('ChatAvatar', moduleConfig, () => { this.instance.option({ url: 'url' }); - const $initials = this.$element.find(`.${CHAT_MESSAGE_AVATAR_INITIALS_CLASS}`); + const $initials = this.$element.find(`.${AVATAR_INITIALS_CLASS}`); assert.strictEqual($initials.length, 0); }); @@ -106,7 +106,7 @@ QUnit.module('ChatAvatar', moduleConfig, () => { QUnit.module('Image rendering', () => { QUnit.test('img element should not be rendered if url is empty', function(assert) { - const $img = this.$element.find(`.${CHAT_MESSAGE_AVATAR_IMAGE_CLASS}`); + const $img = this.$element.find(`.${AVATAR_IMAGE_CLASS}`); assert.strictEqual($img.length, 0); }); @@ -119,7 +119,7 @@ QUnit.module('ChatAvatar', moduleConfig, () => { this.instance.option({ url: '' }); - const $img = this.$element.find(`.${CHAT_MESSAGE_AVATAR_IMAGE_CLASS}`); + const $img = this.$element.find(`.${AVATAR_IMAGE_CLASS}`); assert.strictEqual($img.length, 0); }); @@ -130,7 +130,7 @@ QUnit.module('ChatAvatar', moduleConfig, () => { url: 'url', }); - const $img = this.$element.find(`.${CHAT_MESSAGE_AVATAR_IMAGE_CLASS}`); + const $img = this.$element.find(`.${AVATAR_IMAGE_CLASS}`); assert.strictEqual($img.attr('alt'), 'User name'); }); @@ -142,7 +142,7 @@ QUnit.module('ChatAvatar', moduleConfig, () => { }); this.instance.option({ name: 'New name' }); - const $img = this.$element.find(`.${CHAT_MESSAGE_AVATAR_IMAGE_CLASS}`); + const $img = this.$element.find(`.${AVATAR_IMAGE_CLASS}`); assert.strictEqual($img.attr('alt'), 'New name'); }); @@ -153,7 +153,7 @@ QUnit.module('ChatAvatar', moduleConfig, () => { url: 'url', }); - const $img = this.$element.find(`.${CHAT_MESSAGE_AVATAR_IMAGE_CLASS}`); + const $img = this.$element.find(`.${AVATAR_IMAGE_CLASS}`); assert.strictEqual($img.attr('alt'), 'Avatar'); }); @@ -161,7 +161,7 @@ QUnit.module('ChatAvatar', moduleConfig, () => { QUnit.test('img element should have correct src attribute', function(assert) { this.reinit({ url: 'url' }); - const $img = this.$element.find(`.${CHAT_MESSAGE_AVATAR_IMAGE_CLASS}`); + const $img = this.$element.find(`.${AVATAR_IMAGE_CLASS}`); assert.strictEqual($img.attr('src'), 'url'); }); @@ -170,7 +170,7 @@ QUnit.module('ChatAvatar', moduleConfig, () => { this.reinit({ url: 'url' }); this.instance.option({ url: 'New url' }); - const $img = this.$element.find(`.${CHAT_MESSAGE_AVATAR_IMAGE_CLASS}`); + const $img = this.$element.find(`.${AVATAR_IMAGE_CLASS}`); assert.strictEqual($img.attr('src'), 'New url'); }); 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 index 3d3e2cd888b0..716e65630e6b 100644 --- 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 @@ -4,8 +4,8 @@ import Chat from 'ui/chat'; const CHAT_CLASS = 'dx-chat'; const CHAT_HEADER_CLASS = 'dx-chat-header'; -const CHAT_MESSAGE_BOX_CLASS = 'dx-chat-message-box'; -const CHAT_MESSAGE_LIST_CLASS = 'dx-chat-message-list'; +const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox'; +const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist'; const moduleConfig = { beforeEach: function() { @@ -70,13 +70,13 @@ QUnit.module('Chat', moduleConfig, () => { }); QUnit.test('Message list should be rendered', function(assert) { - const $messageList = this.$element.find(`.${CHAT_MESSAGE_LIST_CLASS}`); + const $messageList = this.$element.find(`.${CHAT_MESSAGELIST_CLASS}`); assert.strictEqual($messageList.length, 1); }); QUnit.test('Message box should be rendered', function(assert) { - const $messageBox = this.$element.find(`.${CHAT_MESSAGE_BOX_CLASS}`); + const $messageBox = this.$element.find(`.${CHAT_MESSAGEBOX_CLASS}`); assert.strictEqual($messageBox.length, 1); }); 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 4ecb30a44b56..085107bd8f4c 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 @@ -1,8 +1,8 @@ import $ from 'jquery'; import Chat from 'ui/chat'; -import MessageList from '__internal/ui/chat/chat_message_list'; -import MessageBox from '__internal/ui/chat/chat_message_box'; +import MessageList from '__internal/ui/chat/messagelist'; +import MessageBox from '__internal/ui/chat/messagebox'; import keyboardMock from '../../../helpers/keyboardMock.js'; import { isRenderer } from 'core/utils/type'; @@ -10,12 +10,12 @@ import { isRenderer } from 'core/utils/type'; import config from 'core/config'; const CHAT_HEADER_TEXT_CLASS = 'dx-chat-header-text'; -const CHAT_MESSAGE_GROUP_CLASS = 'dx-chat-message-group'; -const CHAT_MESSAGE_LIST_CLASS = 'dx-chat-message-list'; -const CHAT_MESSAGE_BUBBLE_CLASS = 'dx-chat-message-bubble'; -const CHAT_MESSAGE_BOX_CLASS = 'dx-chat-message-box'; -const CHAT_MESSAGE_BOX_BUTTON_CLASS = 'dx-chat-message-box-button'; -const CHAT_MESSAGE_BOX_TEXTAREA_CLASS = 'dx-chat-message-box-text-area'; +const CHAT_MESSAGEGROUP_CLASS = 'dx-chat-messagegroup'; +const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist'; +const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble'; +const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox'; +const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button'; +const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea'; const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input'; @@ -58,10 +58,10 @@ const moduleConfig = { this.instance = new Chat($('#chat'), options); this.$element = $(this.instance.$element()); - this.$textArea = this.$element.find(`.${CHAT_MESSAGE_BOX_TEXTAREA_CLASS}`); + this.$textArea = this.$element.find(`.${CHAT_MESSAGEBOX_TEXTAREA_CLASS}`); this.$input = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`); - this.$sendButton = this.$element.find(`.${CHAT_MESSAGE_BOX_BUTTON_CLASS}`); + this.$sendButton = this.$element.find(`.${CHAT_MESSAGEBOX_BUTTON_CLASS}`); }; this.reinit = (options) => { @@ -116,7 +116,7 @@ QUnit.module('Chat', moduleConfig, () => { QUnit.module('MessageList integration', () => { QUnit.test('passed currentUserId should be equal generated chat.user.id', function(assert) { - const messageList = MessageList.getInstance(this.$element.find(`.${CHAT_MESSAGE_LIST_CLASS}`)); + const messageList = MessageList.getInstance(this.$element.find(`.${CHAT_MESSAGELIST_CLASS}`)); const expectedOptions = { items: [], @@ -138,7 +138,7 @@ QUnit.module('Chat', moduleConfig, () => { items: messages }); - const messageList = MessageList.getInstance(this.$element.find(`.${CHAT_MESSAGE_LIST_CLASS}`)); + const messageList = MessageList.getInstance(this.$element.find(`.${CHAT_MESSAGELIST_CLASS}`)); const expectedOptions = { items: messages, @@ -155,7 +155,7 @@ QUnit.module('Chat', moduleConfig, () => { this.instance.option({ user: { id: newUserID } }); - const messageList = MessageList.getInstance(this.$element.find(`.${CHAT_MESSAGE_LIST_CLASS}`)); + const messageList = MessageList.getInstance(this.$element.find(`.${CHAT_MESSAGELIST_CLASS}`)); assert.deepEqual(messageList.option('currentUserId'), newUserID, 'currentUserId value is updated'); }); @@ -165,7 +165,7 @@ QUnit.module('Chat', moduleConfig, () => { this.instance.option('items', newItems); - const messageList = MessageList.getInstance(this.$element.find(`.${CHAT_MESSAGE_LIST_CLASS}`)); + const messageList = MessageList.getInstance(this.$element.find(`.${CHAT_MESSAGELIST_CLASS}`)); assert.deepEqual(messageList.option('items'), newItems, 'items value is updated'); }); @@ -233,7 +233,7 @@ QUnit.module('Chat', moduleConfig, () => { this.$sendButton.trigger('dxclick'); - const $bubbles = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`); + const $bubbles = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`); const bubble = $bubbles[$bubbles.length - 1]; assert.strictEqual($(bubble).text(), text); @@ -312,7 +312,7 @@ QUnit.module('Chat', moduleConfig, () => { text: 'NEW MESSAGE', }; - const getMessageGroups = () => this.$element.find(`.${CHAT_MESSAGE_GROUP_CLASS}`); + const getMessageGroups = () => this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`); assert.strictEqual(getMessageGroups().length, 0); @@ -342,7 +342,7 @@ QUnit.module('Chat', moduleConfig, () => { this.instance.renderMessage(newMessage); - const $bubbles = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`); + const $bubbles = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`); assert.strictEqual($bubbles.length, 4, 'false'); assert.strictEqual($bubbles.last().text(), text ? text : '', 'text value is correct'); @@ -361,7 +361,7 @@ QUnit.module('Chat', moduleConfig, () => { this.reinit(options); - const messageBox = MessageBox.getInstance(this.$element.find(`.${CHAT_MESSAGE_BOX_CLASS}`)); + const messageBox = MessageBox.getInstance(this.$element.find(`.${CHAT_MESSAGEBOX_CLASS}`)); Object.entries(options).forEach(([key, value]) => { assert.deepEqual(value, messageBox.option(key), `${key} value is correct`); @@ -377,7 +377,7 @@ QUnit.module('Chat', moduleConfig, () => { this.instance.option(options); - const messageBox = MessageBox.getInstance(this.$element.find(`.${CHAT_MESSAGE_BOX_CLASS}`)); + const messageBox = MessageBox.getInstance(this.$element.find(`.${CHAT_MESSAGEBOX_CLASS}`)); Object.entries(options).forEach(([key, value]) => { assert.deepEqual(value, messageBox.option(key), `${key} value is correct`); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/header.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/header.markup.tests.js index 0cdb5ee2f066..eb9a15a29a28 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/header.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/header.markup.tests.js @@ -1,6 +1,6 @@ import $ from 'jquery'; -import ChatHeader from '__internal/ui/chat/chat_header'; +import ChatHeader from '__internal/ui/chat/header'; const CHAT_HEADER_CLASS = 'dx-chat-header'; const CHAT_HEADER_TEXT_CLASS = 'dx-chat-header-text'; diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/header.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/header.tests.js index efd2fc8153cc..fa760d8d5e68 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/header.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/header.tests.js @@ -1,6 +1,6 @@ import $ from 'jquery'; -import ChatHeader from '__internal/ui/chat/chat_header'; +import ChatHeader from '__internal/ui/chat/header'; const moduleConfig = { beforeEach: function() { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.markup.tests.js index a7736d6ad758..2e9f8ccb0db0 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.markup.tests.js @@ -1,10 +1,10 @@ import $ from 'jquery'; -import MessageBox from '__internal/ui/chat/chat_message_box'; +import MessageBox from '__internal/ui/chat/messagebox'; -const CHAT_MESSAGE_BOX_CLASS = 'dx-chat-message-box'; -const CHAT_MESSAGE_BOX_TEXTAREA_CLASS = 'dx-chat-message-box-text-area'; -const CHAT_MESSAGE_BOX_BUTTON_CLASS = 'dx-chat-message-box-button'; +const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox'; +const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea'; +const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button'; const TEXTAREA_CLASS = 'dx-textarea'; const BUTTON_CLASS = 'dx-button'; @@ -32,19 +32,19 @@ const moduleConfig = { QUnit.module('MessageBox', moduleConfig, () => { QUnit.module('Classes', () => { QUnit.test('root element should have correct class', function(assert) { - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_BOX_CLASS), true); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEBOX_CLASS), true); }); - QUnit.test(`textarea field should have ${CHAT_MESSAGE_BOX_TEXTAREA_CLASS} class`, function(assert) { + QUnit.test(`textarea field should have ${CHAT_MESSAGEBOX_TEXTAREA_CLASS} class`, function(assert) { const $textArea = this.$element.find(`.${TEXTAREA_CLASS}`); - assert.strictEqual($textArea.hasClass(CHAT_MESSAGE_BOX_TEXTAREA_CLASS), true); + assert.strictEqual($textArea.hasClass(CHAT_MESSAGEBOX_TEXTAREA_CLASS), true); }); - QUnit.test(`send button should have ${CHAT_MESSAGE_BOX_BUTTON_CLASS} class`, function(assert) { + QUnit.test(`send button should have ${CHAT_MESSAGEBOX_BUTTON_CLASS} class`, function(assert) { const $button = this.$element.find(`.${BUTTON_CLASS}`); - assert.strictEqual($button.hasClass(CHAT_MESSAGE_BOX_BUTTON_CLASS), true); + assert.strictEqual($button.hasClass(CHAT_MESSAGEBOX_BUTTON_CLASS), true); }); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js index 267b816709f4..9b0867381670 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js @@ -3,12 +3,12 @@ import keyboardMock from '../../../helpers/keyboardMock.js'; import { isRenderer } from 'core/utils/type'; import config from 'core/config'; -import MessageBox from '__internal/ui/chat/chat_message_box'; +import MessageBox from '__internal/ui/chat/messagebox'; import TextArea from '__internal/ui/m_text_area'; import Button from 'ui/button'; -const CHAT_MESSAGE_BOX_TEXTAREA_CLASS = 'dx-chat-message-box-text-area'; -const CHAT_MESSAGE_BOX_BUTTON_CLASS = 'dx-chat-message-box-button'; +const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea'; +const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button'; const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input'; @@ -21,12 +21,12 @@ const moduleConfig = { this.instance = new MessageBox($('#messageBox'), options); this.$element = $(this.instance.$element()); - this.$textArea = this.$element.find(`.${CHAT_MESSAGE_BOX_TEXTAREA_CLASS}`); + this.$textArea = this.$element.find(`.${CHAT_MESSAGEBOX_TEXTAREA_CLASS}`); this.textArea = TextArea.getInstance(this.$textArea); this.$input = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`); - this.$sendButton = this.$element.find(`.${CHAT_MESSAGE_BOX_BUTTON_CLASS}`); + this.$sendButton = this.$element.find(`.${CHAT_MESSAGEBOX_BUTTON_CLASS}`); this.sendButton = Button.getInstance(this.$sendButton); }; diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js index 3ada4701a86a..ad17b3698b0f 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js @@ -1,8 +1,8 @@ import $ from 'jquery'; -import MessageBubble from '__internal/ui/chat/chat_message_bubble'; +import MessageBubble from '__internal/ui/chat/messagebubble'; -const CHAT_MESSAGE_BUBBLE_CLASS = 'dx-chat-message-bubble'; +const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble'; const moduleConfig = { beforeEach: function() { @@ -27,7 +27,7 @@ const moduleConfig = { QUnit.module('MessageBubble', moduleConfig, () => { QUnit.module('Classes', moduleConfig, () => { QUnit.test('root element should have correct class', function(assert) { - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_BUBBLE_CLASS), true); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEBUBBLE_CLASS), true); }); }); }); 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 4a86bebb085f..9b5a7c7b9657 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 @@ -1,6 +1,6 @@ import $ from 'jquery'; -import MessageBubble from '__internal/ui/chat/chat_message_bubble'; +import MessageBubble from '__internal/ui/chat/messagebubble'; const moduleConfig = { beforeEach: function() { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.markup.tests.js index df81dc61ad01..17d1e0e2079d 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.markup.tests.js @@ -1,16 +1,16 @@ import $ from 'jquery'; -import MessageGroup from '__internal/ui/chat/chat_message_group'; +import MessageGroup from '__internal/ui/chat/messagegroup'; -const CHAT_MESSAGE_GROUP_CLASS = 'dx-chat-message-group'; -const CHAT_MESSAGE_GROUP_ALIGNMENT_START_CLASS = 'dx-chat-message-group-alignment-start'; -const CHAT_MESSAGE_GROUP_ALIGNMENT_END_CLASS = 'dx-chat-message-group-alignment-end'; +const CHAT_MESSAGEGROUP_CLASS = 'dx-chat-messagegroup'; +const CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS = 'dx-chat-messagegroup-alignment-start'; +const CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS = 'dx-chat-messagegroup-alignment-end'; -const CHAT_MESSAGE_AVATAR_CLASS = 'dx-chat-message-avatar'; -const CHAT_MESSAGE_GROUP_INFORMATION_CLASS = 'dx-chat-message-group-information'; -const CHAT_MESSAGE_TIME_CLASS = 'dx-chat-message-time'; -const CHAT_MESSAGE_AUTHOR_NAME_CLASS = 'dx-chat-message-author-name'; -const CHAT_MESSAGE_BUBBLE_CLASS = 'dx-chat-message-bubble'; +const AVATAR_CLASS = 'dx-avatar'; +const CHAT_MESSAGEGROUP_INFORMATION_CLASS = 'dx-chat-messagegroup-information'; +const CHAT_MESSAGEGROUP_TIME_CLASS = 'dx-chat-messagegroup-time'; +const CHAT_MESSAGEGROUP_AUTHOR_NAME_CLASS = 'dx-chat-messagegroup-author-name'; +const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble'; const moduleConfig = { beforeEach: function() { @@ -35,12 +35,12 @@ const moduleConfig = { QUnit.module('MessageGroup', moduleConfig, () => { QUnit.module('Classes', moduleConfig, () => { QUnit.test('root element should have correct class', function(assert) { - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_GROUP_CLASS), true); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEGROUP_CLASS), true); }); - QUnit.test(`root element should have ${CHAT_MESSAGE_GROUP_ALIGNMENT_START_CLASS} class by default`, function(assert) { - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_GROUP_ALIGNMENT_START_CLASS), true); - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_GROUP_ALIGNMENT_END_CLASS), false); + QUnit.test(`root element should have ${CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS} class by default`, function(assert) { + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS), true); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS), false); }); ['start', 'end'].forEach((alignment) => { @@ -49,8 +49,8 @@ QUnit.module('MessageGroup', moduleConfig, () => { alignment }); - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_GROUP_ALIGNMENT_START_CLASS), alignment === 'start', `${CHAT_MESSAGE_GROUP_ALIGNMENT_START_CLASS} class`); - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_GROUP_ALIGNMENT_END_CLASS), alignment === 'end', `${CHAT_MESSAGE_GROUP_ALIGNMENT_END_CLASS} class`); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS), alignment === 'start', `${CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS} class`); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS), alignment === 'end', `${CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS} class`); }); QUnit.test(`root element should have correct alignment class if alignment option value is changed to ${alignment === 'start' ? 'end' : 'start'} at runtime`, function(assert) { @@ -59,8 +59,8 @@ QUnit.module('MessageGroup', moduleConfig, () => { const oppositeAlignment = alignment === 'start' ? 'end' : 'start'; this.instance.option('alignment', oppositeAlignment); - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_GROUP_ALIGNMENT_START_CLASS), oppositeAlignment === 'start', `${CHAT_MESSAGE_GROUP_ALIGNMENT_START_CLASS} class`); - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_GROUP_ALIGNMENT_END_CLASS), oppositeAlignment === 'end', `${CHAT_MESSAGE_GROUP_ALIGNMENT_END_CLASS} class`); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS), oppositeAlignment === 'start', `${CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS} class`); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS), oppositeAlignment === 'end', `${CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS} class`); }); QUnit.test(`avatar should be have correct alignment class if alignment option value is ${alignment}`, function(assert) { @@ -68,15 +68,15 @@ QUnit.module('MessageGroup', moduleConfig, () => { alignment }); - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_GROUP_ALIGNMENT_START_CLASS), alignment === 'start', `${CHAT_MESSAGE_GROUP_ALIGNMENT_START_CLASS} class`); - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_GROUP_ALIGNMENT_END_CLASS), alignment === 'end', `${CHAT_MESSAGE_GROUP_ALIGNMENT_END_CLASS} class`); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS), alignment === 'start', `${CHAT_MESSAGEGROUP_ALIGNMENT_START_CLASS} class`); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS), alignment === 'end', `${CHAT_MESSAGEGROUP_ALIGNMENT_END_CLASS} class`); }); }); }); QUnit.module('Avatar element', moduleConfig, () => { QUnit.test('should not be rendered by default', function(assert) { - assert.strictEqual(this.$element.find(`.${CHAT_MESSAGE_AVATAR_CLASS}`).length, 0); + assert.strictEqual(this.$element.find(`.${AVATAR_CLASS}`).length, 0); }); QUnit.test('should be rendered by default if items is not empty array', function(assert) { @@ -84,7 +84,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items: [{}] }); - assert.strictEqual(this.$element.children().first().hasClass(CHAT_MESSAGE_AVATAR_CLASS), true); + assert.strictEqual(this.$element.children().first().hasClass(AVATAR_CLASS), true); }); QUnit.test('should not be rendered if alignment is end', function(assert) { @@ -93,17 +93,17 @@ QUnit.module('MessageGroup', moduleConfig, () => { alignment: 'end', }); - assert.strictEqual(this.$element.find(`.${CHAT_MESSAGE_AVATAR_CLASS}`).length, 0); + assert.strictEqual(this.$element.find(`.${AVATAR_CLASS}`).length, 0); }); QUnit.test('should be rendered or removed after change items option at runtime', function(assert) { this.instance.option('items', [{}]); - assert.strictEqual(this.$element.find(`.${CHAT_MESSAGE_AVATAR_CLASS}`).length, 1); + assert.strictEqual(this.$element.find(`.${AVATAR_CLASS}`).length, 1); this.instance.option('items', []); - assert.strictEqual(this.$element.find(`.${CHAT_MESSAGE_AVATAR_CLASS}`).length, 0); + assert.strictEqual(this.$element.find(`.${AVATAR_CLASS}`).length, 0); }); QUnit.test('should be rendered or removed after change alignment option at runtime', function(assert) { @@ -113,17 +113,17 @@ QUnit.module('MessageGroup', moduleConfig, () => { this.instance.option('alignment', 'end'); - assert.strictEqual(this.$element.find(`.${CHAT_MESSAGE_AVATAR_CLASS}`).length, 0); + assert.strictEqual(this.$element.find(`.${AVATAR_CLASS}`).length, 0); this.instance.option('alignment', 'start'); - assert.strictEqual(this.$element.find(`.${CHAT_MESSAGE_AVATAR_CLASS}`).length, 1); + assert.strictEqual(this.$element.find(`.${AVATAR_CLASS}`).length, 1); }); }); QUnit.module('Information element', moduleConfig, () => { QUnit.test('should not be rendered by default', function(assert) { - const $information = this.$element.find(`.${CHAT_MESSAGE_GROUP_INFORMATION_CLASS}`); + const $information = this.$element.find(`.${CHAT_MESSAGEGROUP_INFORMATION_CLASS}`); assert.strictEqual($information.length, 0); }); @@ -133,7 +133,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items: [{}], }); - const $information = this.$element.find(`.${CHAT_MESSAGE_GROUP_INFORMATION_CLASS}`); + const $information = this.$element.find(`.${CHAT_MESSAGEGROUP_INFORMATION_CLASS}`); assert.strictEqual($information.length, 1); }); @@ -143,7 +143,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items: [{}, {}, {}], }); - const $information = this.$element.find(`.${CHAT_MESSAGE_GROUP_INFORMATION_CLASS}`); + const $information = this.$element.find(`.${CHAT_MESSAGEGROUP_INFORMATION_CLASS}`); assert.strictEqual($information.length, 1); }); @@ -153,7 +153,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items: [{ author: {} }], }); - const $name = this.$element.find(`.${CHAT_MESSAGE_AUTHOR_NAME_CLASS}`); + const $name = this.$element.find(`.${CHAT_MESSAGEGROUP_AUTHOR_NAME_CLASS}`); assert.strictEqual($name.length, 1); assert.strictEqual($name.text(), '', 'name text is empty'); @@ -164,7 +164,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items: [{ }], }); - const $time = this.$element.find(`.${CHAT_MESSAGE_TIME_CLASS}`); + const $time = this.$element.find(`.${CHAT_MESSAGEGROUP_TIME_CLASS}`); assert.strictEqual($time.length, 1); assert.strictEqual($time.text(), '', 'time text is empty'); @@ -175,7 +175,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items: [{ author: { name: '' } }], }); - const $name = this.$element.find(`.${CHAT_MESSAGE_AUTHOR_NAME_CLASS}`); + const $name = this.$element.find(`.${CHAT_MESSAGEGROUP_AUTHOR_NAME_CLASS}`); assert.strictEqual($name.length, 1); }); @@ -185,7 +185,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items: [{ timestamp: new Date() }], }); - const $time = this.$element.find(`.${CHAT_MESSAGE_TIME_CLASS}`); + const $time = this.$element.find(`.${CHAT_MESSAGEGROUP_TIME_CLASS}`); assert.strictEqual($time.length, 1); }); @@ -193,7 +193,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { QUnit.module('MessageBubble elements', moduleConfig, () => { QUnit.test('should not be rendered by default', function(assert) { - const $messageBubble = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`); + const $messageBubble = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`); assert.strictEqual($messageBubble.length, 0); }); @@ -203,7 +203,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items: [{}], }); - const $messageBubble = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`); + const $messageBubble = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`); assert.strictEqual($messageBubble.length, 1); }); @@ -213,7 +213,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items: [{}, {}, {}, {}], }); - const $messageBubble = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`); + const $messageBubble = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`); assert.strictEqual($messageBubble.length, 4); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.tests.js index 1af6aaeef198..98e293fdefaa 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.tests.js @@ -1,12 +1,12 @@ import $ from 'jquery'; -import MessageGroup from '__internal/ui/chat/chat_message_group'; -import ChatAvatar from '__internal/ui/chat/chat_avatar'; +import MessageGroup from '__internal/ui/chat/messagegroup'; +import ChatAvatar from '__internal/ui/chat/avatar'; -const CHAT_MESSAGE_AVATAR_CLASS = 'dx-chat-message-avatar'; -const CHAT_MESSAGE_TIME_CLASS = 'dx-chat-message-time'; -const CHAT_MESSAGE_BUBBLE_CLASS = 'dx-chat-message-bubble'; -const CHAT_MESSAGE_AUTHOR_NAME_CLASS = 'dx-chat-message-author-name'; +const AVATAR_CLASS = 'dx-avatar'; +const CHAT_MESSAGEGROUP_TIME_CLASS = 'dx-chat-messagegroup-time'; +const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble'; +const CHAT_MESSAGEGROUP_AUTHOR_NAME_CLASS = 'dx-chat-messagegroup-author-name'; const moduleConfig = { beforeEach: function() { @@ -46,7 +46,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items: [{ timestamp }], }); - const $time = this.$element.find(`.${CHAT_MESSAGE_TIME_CLASS}`); + const $time = this.$element.find(`.${CHAT_MESSAGEGROUP_TIME_CLASS}`); assert.strictEqual($time.length, 1); assert.strictEqual($time.text(), '21:34', 'time text is correct'); @@ -64,7 +64,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { ], }); - const $time = this.$element.find(`.${CHAT_MESSAGE_TIME_CLASS}`); + const $time = this.$element.find(`.${CHAT_MESSAGEGROUP_TIME_CLASS}`); assert.strictEqual($time.text(), '21:34'); }); @@ -82,7 +82,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { ], }); - const $name = this.$element.find(`.${CHAT_MESSAGE_AUTHOR_NAME_CLASS}`); + const $name = this.$element.find(`.${CHAT_MESSAGEGROUP_AUTHOR_NAME_CLASS}`); assert.strictEqual($name.text(), name); }); @@ -97,7 +97,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { ], }); - const $name = this.$element.find(`.${CHAT_MESSAGE_AUTHOR_NAME_CLASS}`); + const $name = this.$element.find(`.${CHAT_MESSAGEGROUP_AUTHOR_NAME_CLASS}`); assert.strictEqual($name.text(), ''); }); @@ -109,7 +109,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items: [{}, {}, {}], }); - let $messageBubble = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`); + let $messageBubble = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`); assert.strictEqual($messageBubble.length, 3); @@ -121,7 +121,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { this.instance.renderMessage(newMessage); - $messageBubble = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`); + $messageBubble = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`); assert.strictEqual($messageBubble.length, 4); }); @@ -143,7 +143,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items, }); - const avatar = ChatAvatar.getInstance(this.$element.find(`.${CHAT_MESSAGE_AVATAR_CLASS}`)); + const avatar = ChatAvatar.getInstance(this.$element.find(`.${AVATAR_CLASS}`)); assert.deepEqual(avatar.option('name'), passedNameValue); }); @@ -165,7 +165,7 @@ QUnit.module('MessageGroup', moduleConfig, () => { items, }); - const avatar = ChatAvatar.getInstance(this.$element.find(`.${CHAT_MESSAGE_AVATAR_CLASS}`)); + const avatar = ChatAvatar.getInstance(this.$element.find(`.${AVATAR_CLASS}`)); assert.deepEqual(avatar.option('url'), passedUrlValue); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.markup.tests.js index 93fa635d87e8..30bce4bf2a15 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.markup.tests.js @@ -1,16 +1,16 @@ import $ from 'jquery'; -import MessageList from '__internal/ui/chat/chat_message_list'; +import MessageList from '__internal/ui/chat/messagelist'; -const CHAT_MESSAGE_LIST_CLASS = 'dx-chat-message-list'; +const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist'; const SCROLLABLE_CLASS = 'dx-scrollable'; const SCROLLABLE_CONTENT_CLASS = 'dx-scrollable-content'; -const CHAT_MESSAGE_LIST_EMPTY_CLASS = 'dx-chat-message-list-empty'; -const CHAT_MESSAGE_LIST_EMPTY_VIEW_CLASS = 'dx-chat-empty-view'; -const CHAT_MESSAGE_LIST_EMPTY_IMAGE_CLASS = 'dx-chat-empty-image'; -const CHAT_MESSAGE_LIST_EMPTY_MESSAGE_CLASS = 'dx-chat-empty-message'; -const CHAT_MESSAGE_LIST_EMPTY_PROMPT_CLASS = 'dx-chat-empty-prompt'; +const CHAT_MESSAGELIST_EMPTY_CLASS = 'dx-chat-messagelist-empty'; +const CHAT_MESSAGELIST_EMPTY_VIEW_CLASS = 'dx-chat-messagelist-empty-view'; +const CHAT_MESSAGELIST_EMPTY_IMAGE_CLASS = 'dx-chat-messagelist-empty-image'; +const CHAT_MESSAGELIST_EMPTY_MESSAGE_CLASS = 'dx-chat-messagelist-empty-message'; +const CHAT_MESSAGELIST_EMPTY_PROMPT_CLASS = 'dx-chat-messagelist-empty-prompt'; const moduleConfig = { @@ -36,7 +36,7 @@ const moduleConfig = { QUnit.module('MessageList', moduleConfig, () => { QUnit.module('Root element', () => { QUnit.test('should have correct class', function(assert) { - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_LIST_CLASS), true); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGELIST_CLASS), true); }); QUnit.test('should contain scrollable element', function(assert) { @@ -44,7 +44,7 @@ QUnit.module('MessageList', moduleConfig, () => { }); QUnit.test('should have empty class if there are no messages', function(assert) { - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_LIST_EMPTY_CLASS), true); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGELIST_EMPTY_CLASS), true); }); QUnit.test('should not have empty class if there are messages', function(assert) { @@ -52,7 +52,7 @@ QUnit.module('MessageList', moduleConfig, () => { items: [{}] }); - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_LIST_EMPTY_CLASS), false); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGELIST_EMPTY_CLASS), false); }); QUnit.test('empty class should be updated after items are added or removed at runtime', function(assert) { @@ -60,25 +60,25 @@ QUnit.module('MessageList', moduleConfig, () => { items: [] }); - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_LIST_EMPTY_CLASS), true, 'element has empty class'); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGELIST_EMPTY_CLASS), true, 'element has empty class'); this.instance.option('items', [{}]); - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_LIST_EMPTY_CLASS), false, 'element does not have empty class'); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGELIST_EMPTY_CLASS), false, 'element does not have empty class'); this.instance.option('items', []); - assert.strictEqual(this.$element.hasClass(CHAT_MESSAGE_LIST_EMPTY_CLASS), true, 'element has empty class'); + assert.strictEqual(this.$element.hasClass(CHAT_MESSAGELIST_EMPTY_CLASS), true, 'element has empty class'); }); }); QUnit.module('Empty view', () => { QUnit.test('element should be placed inside of a scrollable content', function(assert) { - assert.strictEqual(this.$element.find(`.${SCROLLABLE_CONTENT_CLASS}`).children().first().hasClass(CHAT_MESSAGE_LIST_EMPTY_VIEW_CLASS), true); + assert.strictEqual(this.$element.find(`.${SCROLLABLE_CONTENT_CLASS}`).children().first().hasClass(CHAT_MESSAGELIST_EMPTY_VIEW_CLASS), true); }); QUnit.test('container should be rendered if there are no messages', function(assert) { - assert.strictEqual(this.$element.find(`.${CHAT_MESSAGE_LIST_EMPTY_VIEW_CLASS}`).length, 1); + assert.strictEqual(this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`).length, 1); }); QUnit.test('container should not be rendered if there are messages', function(assert) { @@ -86,35 +86,35 @@ QUnit.module('MessageList', moduleConfig, () => { items: [{}] }); - assert.strictEqual(this.$element.find(`.${CHAT_MESSAGE_LIST_EMPTY_VIEW_CLASS}`).length, 0); + assert.strictEqual(this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`).length, 0); }); QUnit.test('container should be removed or rendered after items are updated at runtime', function(assert) { this.instance.option('items', [{}]); - assert.strictEqual(this.$element.find(`.${CHAT_MESSAGE_LIST_EMPTY_VIEW_CLASS}`).length, 0); + assert.strictEqual(this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`).length, 0); this.instance.option('items', []); - assert.strictEqual(this.$element.find(`.${CHAT_MESSAGE_LIST_EMPTY_VIEW_CLASS}`).length, 1); + assert.strictEqual(this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`).length, 1); }); QUnit.test('image should be rendered inside empty view', function(assert) { - const $emptyView = this.$element.find(`.${CHAT_MESSAGE_LIST_EMPTY_VIEW_CLASS}`); + const $emptyView = this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`); - assert.strictEqual($emptyView.find(`.${CHAT_MESSAGE_LIST_EMPTY_IMAGE_CLASS}`).length, 1); + assert.strictEqual($emptyView.find(`.${CHAT_MESSAGELIST_EMPTY_IMAGE_CLASS}`).length, 1); }); QUnit.test('message should be rendered inside empty view', function(assert) { - const $emptyView = this.$element.find(`.${CHAT_MESSAGE_LIST_EMPTY_VIEW_CLASS}`); + const $emptyView = this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`); - assert.strictEqual($emptyView.find(`.${CHAT_MESSAGE_LIST_EMPTY_MESSAGE_CLASS}`).length, 1); + assert.strictEqual($emptyView.find(`.${CHAT_MESSAGELIST_EMPTY_MESSAGE_CLASS}`).length, 1); }); QUnit.test('prompt should be rendered inside empty view', function(assert) { - const $emptyView = this.$element.find(`.${CHAT_MESSAGE_LIST_EMPTY_VIEW_CLASS}`); + const $emptyView = this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`); - assert.strictEqual($emptyView.find(`.${CHAT_MESSAGE_LIST_EMPTY_PROMPT_CLASS}`).length, 1); + assert.strictEqual($emptyView.find(`.${CHAT_MESSAGELIST_EMPTY_PROMPT_CLASS}`).length, 1); }); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js index 22c7af466b23..18528cf83563 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js @@ -1,6 +1,6 @@ import $ from 'jquery'; -import MessageList from '__internal/ui/chat/chat_message_list'; +import MessageList from '__internal/ui/chat/messagelist'; import Scrollable from 'ui/scroll_view/ui.scrollable'; import { generateMessages, @@ -9,14 +9,14 @@ import { MOCK_COMPANION_USER_ID, MOCK_CURRENT_USER_ID, } from './chat.tests.js'; -import MessageGroup from '__internal/ui/chat/chat_message_group'; +import MessageGroup from '__internal/ui/chat/messagegroup'; import localization from 'localization'; -const CHAT_MESSAGE_GROUP_CLASS = 'dx-chat-message-group'; -const CHAT_MESSAGE_BUBBLE_CLASS = 'dx-chat-message-bubble'; +const CHAT_MESSAGEGROUP_CLASS = 'dx-chat-messagegroup'; +const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble'; -const CHAT_MESSAGE_LIST_EMPTY_MESSAGE_CLASS = 'dx-chat-empty-message'; -const CHAT_MESSAGE_LIST_EMPTY_PROMPT_CLASS = 'dx-chat-empty-prompt'; +const CHAT_MESSAGELIST_EMPTY_MESSAGE_CLASS = 'dx-chat-messagelist-empty-message'; +const CHAT_MESSAGELIST_EMPTY_PROMPT_CLASS = 'dx-chat-messagelist-empty-prompt'; const SCROLLABLE_CLASS = 'dx-scrollable'; @@ -61,7 +61,7 @@ QUnit.module('MessageList', moduleConfig, () => { } catch(e) { assert.ok(false, `error: ${e.message}`); } finally { - const $bubbles = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`); + const $bubbles = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`); assert.strictEqual($bubbles.length, 3); } @@ -80,7 +80,7 @@ QUnit.module('MessageList', moduleConfig, () => { this.reinit({ items: [newMessage] }); - const $messageGroups = $(this.scrollable.content()).find(`.${CHAT_MESSAGE_GROUP_CLASS}`); + const $messageGroups = $(this.scrollable.content()).find(`.${CHAT_MESSAGEGROUP_CLASS}`); assert.strictEqual($messageGroups.length, 1); }); @@ -94,7 +94,7 @@ QUnit.module('MessageList', moduleConfig, () => { this.instance.option({ items: [newMessage] }); - const $messageGroups = $(this.scrollable.content()).find(`.${CHAT_MESSAGE_GROUP_CLASS}`); + const $messageGroups = $(this.scrollable.content()).find(`.${CHAT_MESSAGEGROUP_CLASS}`); assert.strictEqual($messageGroups.length, 1); }); @@ -112,7 +112,7 @@ QUnit.module('MessageList', moduleConfig, () => { this.instance.option({ items: [...items, newMessage] }); - const $messageGroups = $(this.scrollable.content()).find(`.${CHAT_MESSAGE_GROUP_CLASS}`); + const $messageGroups = $(this.scrollable.content()).find(`.${CHAT_MESSAGEGROUP_CLASS}`); assert.strictEqual($messageGroups.length, 27); }); @@ -121,7 +121,7 @@ QUnit.module('MessageList', moduleConfig, () => { this.instance.option({ items: generateMessages(52) }); const scrollableContent = this.getScrollable().content(); - const $messageGroups = $(scrollableContent).find(`.${CHAT_MESSAGE_GROUP_CLASS}`); + const $messageGroups = $(scrollableContent).find(`.${CHAT_MESSAGEGROUP_CLASS}`); assert.strictEqual($messageGroups.length, 26); }); @@ -129,7 +129,7 @@ QUnit.module('MessageList', moduleConfig, () => { QUnit.module('MessageGroup integration', () => { QUnit.test('message group component should not be rendered if items is empty', function(assert) { - const $messageGroups = this.$element.find(`.${CHAT_MESSAGE_GROUP_CLASS}`); + const $messageGroups = this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`); assert.strictEqual($messageGroups.length, 0); }); @@ -143,7 +143,7 @@ QUnit.module('MessageList', moduleConfig, () => { ] }); - const $messageGroups = this.$element.find(`.${CHAT_MESSAGE_GROUP_CLASS}`); + const $messageGroups = this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`); assert.strictEqual($messageGroups.length, 3); }); @@ -157,7 +157,7 @@ QUnit.module('MessageList', moduleConfig, () => { ] }); - const $messageGroups = this.$element.find(`.${CHAT_MESSAGE_GROUP_CLASS}`); + const $messageGroups = this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`); assert.strictEqual($messageGroups.length, 1); }); @@ -180,7 +180,7 @@ QUnit.module('MessageList', moduleConfig, () => { this.instance.option({ items: [...items, newMessage] }); - const $messageGroups = this.$element.find(`.${CHAT_MESSAGE_GROUP_CLASS}`); + const $messageGroups = this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`); assert.strictEqual($messageGroups.length, 4); }); @@ -203,7 +203,7 @@ QUnit.module('MessageList', moduleConfig, () => { this.instance.option({ items: [...items, newMessage] }); - const $messageGroups = this.$element.find(`.${CHAT_MESSAGE_GROUP_CLASS}`); + const $messageGroups = this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`); assert.strictEqual($messageGroups.length, 3); }); @@ -219,7 +219,7 @@ QUnit.module('MessageList', moduleConfig, () => { this.instance.option({ items: [ newMessage ] }); - const $bubbles = this.$element.find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`); + const $bubbles = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`); assert.strictEqual($bubbles.length, 1); }); @@ -230,7 +230,7 @@ QUnit.module('MessageList', moduleConfig, () => { currentUserId: 'MikeID', }); - const messageGroup = MessageGroup.getInstance(this.$element.find(`.${CHAT_MESSAGE_GROUP_CLASS}`)); + const messageGroup = MessageGroup.getInstance(this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`)); assert.strictEqual(messageGroup.option('alignment'), 'start'); }); @@ -241,7 +241,7 @@ QUnit.module('MessageList', moduleConfig, () => { currentUserId: 'MikeID', }); - const messageGroup = MessageGroup.getInstance(this.$element.find(`.${CHAT_MESSAGE_GROUP_CLASS}`)); + const messageGroup = MessageGroup.getInstance(this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`)); assert.strictEqual(messageGroup.option('alignment'), 'end'); }); @@ -422,7 +422,7 @@ QUnit.module('MessageList', moduleConfig, () => { }; this.scrollable.scrollToElement = ($item) => { - const messageGroups = this.$element.find(`.${CHAT_MESSAGE_GROUP_CLASS}`); + const messageGroups = this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`); const lastMessageGroup = messageGroups[messageGroups.length - 1]; assert.strictEqual($item, lastMessageGroup); @@ -451,8 +451,8 @@ QUnit.module('MessageList', moduleConfig, () => { this.reinit(); - assert.strictEqual(this.$element.find(`.${CHAT_MESSAGE_LIST_EMPTY_MESSAGE_CLASS}`).text(), localizedEmptyListMessageText, 'emptyListMessage'); - assert.strictEqual(this.$element.find(`.${CHAT_MESSAGE_LIST_EMPTY_PROMPT_CLASS}`).text(), localizedEmptyListPromptText, 'emptyListPrompt'); + assert.strictEqual(this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_MESSAGE_CLASS}`).text(), localizedEmptyListMessageText, 'emptyListMessage'); + assert.strictEqual(this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_PROMPT_CLASS}`).text(), localizedEmptyListPromptText, 'emptyListPrompt'); } finally { localization.locale(defaultLocale); } diff --git a/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js b/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js index e8d4622d8383..84f1c3f2e311 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js @@ -11,15 +11,15 @@ import { getNestedOptionValue } from 'core/options/utils'; import ActionSheet from 'ui/action_sheet'; import Accordion from 'ui/accordion'; +import Avatar from '__internal/ui/chat/avatar'; import Button from 'ui/button'; import ColorBox from 'ui/color_box'; import Chat from 'ui/chat'; -import ChatHeader from '__internal/ui/chat/chat_header'; -import ChatAvatar from '__internal/ui/chat/chat_avatar'; -import ChatMessageBox from '__internal/ui/chat/chat_message_box'; -import ChatMessageBubble from '__internal/ui/chat/chat_message_bubble'; -import ChatMessageGroup from '__internal/ui/chat/chat_message_group'; -import ChatMessageList from '__internal/ui/chat/chat_message_list'; +import ChatHeader from '__internal/ui/chat/header'; +import ChatMessageBox from '__internal/ui/chat/messagebox'; +import ChatMessageBubble from '__internal/ui/chat/messagebubble'; +import ChatMessageGroup from '__internal/ui/chat/messagegroup'; +import ChatMessageList from '__internal/ui/chat/messagelist'; import DataGrid from 'ui/data_grid'; import DateBox from 'ui/date_box'; import DateRangeBox from 'ui/date_range_box'; @@ -1351,7 +1351,7 @@ testComponentDefaults(Chat, } ); -testComponentDefaults(ChatAvatar, +testComponentDefaults(Avatar, {}, { name: '',