feat(chat tests): Raise the tests

Author: marker dao ®

packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts

@@ -1,10 +1,11 @@
+import { normalizeKeyName } from '@js/common/core/events/utils/index';
 import messageLocalization from '@js/common/core/localization/message';
 import devices from '@js/core/devices';
 import type { DefaultOptionsRule } from '@js/core/options/utils';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { getOuterHeight } from '@js/core/utils/size';
-import type { NativeEventInfo } from '@js/events';
+import type { DxEvent, NativeEventInfo } from '@js/events';
 import type {
   ClickEvent,
   InitializedEvent,
@@ -72,19 +73,30 @@ class ChatTextArea extends TextArea<Properties> {
   _supportedKeys(): SupportedKeys {
     return {
       ...super._supportedKeys(),
-      enter: (e): void => {
-        if (!e?.shiftKey && this._isValuableTextEntered() && !isMobile()) {
+      enter: (e: DxEvent<KeyboardEvent>): void => {
+        if (this._shouldSendMessageOnEnter(e)) {
           e.preventDefault();
-          this._processSendButtonActivation({
-            component: this,
-            element: this.element(),
-            event: e,
-          });
         }
       },
     };
   }
 
+  _enterKeyHandlerUp(e: DxEvent<KeyboardEvent>): void {
+    super._enterKeyHandlerUp(e);
+
+    if (normalizeKeyName(e) !== 'enter') {
+      return;
+    }
+
+    if (this._shouldSendMessageOnEnter(e)) {
+      this._processSendButtonActivation({
+        component: this,
+        element: this.element(),
+        event: e,
+      });
+    }
+  }
+
   _init(): void {
     super._init();
 
@@ -217,6 +229,10 @@ class ChatTextArea extends TextArea<Properties> {
     this._toggleButtonDisableState(true);
   }
 
+  _shouldSendMessageOnEnter(e: DxEvent<KeyboardEvent>): boolean {
+    return !e?.shiftKey && this._isValuableTextEntered() && !isMobile();
+  }
+
   _optionChanged(args: OptionChanged<Properties>): void {
     const { name, value } = args;
 

packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js

@@ -38,6 +38,7 @@ import { POPUP_CLASS } from '__internal/ui/popup/m_popup';
 import { BUTTON_CLASS } from '__internal/ui/button/button';
 import { shouldSkipOnMobile } from '../../../helpers/device.js';
 import MessageBubble from '__internal/ui/chat/messagebubble';
+import ChatTextArea from '__internal/ui/chat/message_box/chat_text_area';
 
 const CHAT_MESSAGEGROUP_CLASS = 'dx-chat-messagegroup';
 const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist';
@@ -96,9 +97,10 @@ const moduleConfig = {
             this.instance = new Chat($('#component'), options);
             this.$element = $(this.instance.$element());
             this.$textArea = this.$element.find(`.${CHAT_MESSAGEBOX_TEXTAREA_CLASS}`);
-            this.textArea = this.$textArea.dxTextArea('instance');
+            this.textArea = ChatTextArea.getInstance(this.$textArea);
             this.$input = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
-            this.$sendButton = this.$element.find(`.${BUTTON_CLASS}`).at(-1);
+            const $buttons = this.$element.find(`.${BUTTON_CLASS}`);
+            this.$sendButton = $($buttons[$buttons.length - 1]);
         };
 
         this.reinit = (options) => {

packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.markup.tests.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 
 import MessageBox, {
     CHAT_MESSAGEBOX_CLASS,
-    CHAT_MESSAGEBOX_INPUT_CONTAINER_CLASS,
+    CHAT_MESSAGEBOX_TEXTAREA_CONTAINER_CLASS,
     CHAT_MESSAGEBOX_TEXTAREA_CLASS,
 } from '__internal/ui/chat/message_box/message_box';
 
@@ -36,7 +36,7 @@ QUnit.module('MessageBox', moduleConfig, () => {
             const $messageBoxContent = this.$element.children();
 
             assert.strictEqual($messageBoxContent.length, 1, 'message box content has one elements');
-            assert.strictEqual($messageBoxContent.eq(0).hasClass(CHAT_MESSAGEBOX_INPUT_CONTAINER_CLASS), true, 'message box contains input container');
+            assert.strictEqual($messageBoxContent.eq(0).hasClass(CHAT_MESSAGEBOX_TEXTAREA_CONTAINER_CLASS), true, 'message box contains input container');
         });
 
         QUnit.test(`textarea field should have ${CHAT_MESSAGEBOX_TEXTAREA_CLASS} class`, function(assert) {

packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js

@@ -7,7 +7,7 @@ import MessageBox, {
     TYPING_END_DELAY,
     CHAT_MESSAGEBOX_TEXTAREA_CLASS,
 } from '__internal/ui/chat/message_box/message_box';
-import TextArea from '__internal/ui/m_text_area';
+import ChatTextArea from '__internal/ui/chat/message_box/chat_text_area';
 import Button from 'ui/button';
 import EditingPreview, {
     CHAT_EDITING_PREVIEW_CLASS,
@@ -28,11 +28,13 @@ const moduleConfig = {
             this.$element = $(this.instance.$element());
 
             this.$textArea = this.$element.find(`.${CHAT_MESSAGEBOX_TEXTAREA_CLASS}`);
-            this.textArea = TextArea.getInstance(this.$textArea);
+            this.textArea = ChatTextArea.getInstance(this.$textArea);
 
             this.$input = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
 
-            this.$sendButton = this.$element.find(`.${BUTTON_CLASS}`).at(-1);
+            const $buttons = this.$element.find(`.${BUTTON_CLASS}`);
+            this.$sendButton = $($buttons[$buttons.length - 1]);
+
             this.sendButton = Button.getInstance(this.$sendButton);
 
             this.getEditingPreview = () => this.$element.find(`.${CHAT_EDITING_PREVIEW_CLASS}`);
@@ -60,18 +62,19 @@ QUnit.module('MessageBox', moduleConfig, () => {
 
         QUnit.test('send button should be initialized with the corresponding configuration', function(assert) {
             const expectedOptions = {
-                icon: 'sendfilled',
+                icon: 'arrowright',
                 type: 'default',
-                stylingMode: 'text',
+                stylingMode: 'contained',
                 disabled: true,
+                type: 'default',
             };
 
             Object.entries(expectedOptions).forEach(([key, value]) => {
-                assert.deepEqual(value, this.sendButton.option(key), `${key} value is correct`);
+                assert.deepEqual(this.sendButton.option(key), value, `${key} value is correct`);
             });
         });
 
-        QUnit.test('TextArea should be initialized with the corresponding configuration', function(assert) {
+        QUnit.test('ChatTextArea should be initialized with the corresponding configuration', function(assert) {
             const expectedOptions = {
                 stylingMode: 'outlined',
                 placeholder: 'Type a message',
@@ -80,7 +83,7 @@ QUnit.module('MessageBox', moduleConfig, () => {
                 valueChangeEvent: 'input'
             };
 
-            const textArea = TextArea.getInstance(this.$textArea);
+            const textArea = ChatTextArea.getInstance(this.$textArea);
 
             Object.entries(expectedOptions).forEach(([key, value]) => {
                 assert.deepEqual(value, textArea.option(key), `textarea ${key} value is correct`);