Chat: Move init of errors into component level (T1325479) (#33072)

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

Author: marker-dao

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

@@ -33,9 +33,8 @@ export const CHAT_TEXT_AREA_TOOLBAR = 'dx-chat-textarea-toolbar';
 const MAX_ATTACHMENTS_COUNT = 10;
 const INFORMER_DELAY = 10000;
 
-const ERRORS = {
-  // @ts-expect-error format params should be extended
-  fileLimit: messageLocalization.format('dxChat-fileLimitReachedWarning', MAX_ATTACHMENTS_COUNT),
+const ERROR_MESSAGE_NAME = {
+  fileLimit: 'dxChat-fileLimitReachedWarning',
 };
 
 const isMobile = (): boolean => devices.current().deviceType !== 'desktop';
@@ -391,7 +390,11 @@ class ChatTextArea extends TextArea<Properties> {
   };
 
   _fileUploaderFileLimitReached(): void {
-    this._showInformer(ERRORS.fileLimit);
+    this._showInformer(messageLocalization.format(
+      ERROR_MESSAGE_NAME.fileLimit,
+      // @ts-expect-error format params should be extended
+      MAX_ATTACHMENTS_COUNT,
+    ));
     this._updateInputHeight();
   }
 

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

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import keyboardMock from '../../../helpers/keyboardMock.js';
 import { isRenderer } from 'core/utils/type';
 import config from 'core/config';
+import messageLocalization from 'common/core/localization/message';
 
 import ChatTextArea, { CHAT_TEXT_AREA_ATTACH_BUTTON, DEFAULT_ALLOWED_FILE_EXTENSIONS } from '__internal/ui/chat/message_box/chat_text_area';
 import Button from 'ui/button';
@@ -814,6 +815,50 @@ QUnit.module('ChatTextArea', moduleConfig, () => {
 
                 assert.strictEqual(this.sendButton.option('disabled'), true, 'send button is disabled after file removal');
             });
+
+            QUnit.module('Localization', {
+                beforeEach: function() {
+                    this.defaultMessage = messageLocalization.format('dxChat-fileLimitReachedWarning');
+                    this.customMessage = 'Custom file limit message';
+                },
+                afterEach: function() {
+                    messageLocalization.load({ en: { 'dxChat-fileLimitReachedWarning': this.defaultMessage } });
+                }
+            }, () => {
+                QUnit.test('informer should show custom localization message loaded before component initialization', function(assert) {
+                    messageLocalization.load({ en: { 'dxChat-fileLimitReachedWarning': this.customMessage } });
+
+                    this.reinit({
+                        fileUploaderOptions: {
+                            uploadFile: () => {},
+                        }
+                    });
+
+                    const fileUploader = this.getFileUploader();
+                    fileUploader.option('onFileLimitReached')();
+
+                    const $informerText = this.$element.find(`.${INFORMER_TEXT_CLASS}`);
+
+                    assert.strictEqual($informerText.text(), this.customMessage, 'custom localization message is shown');
+                });
+
+                QUnit.test('informer should show custom localization message loaded after component initialization', function(assert) {
+                    this.reinit({
+                        fileUploaderOptions: {
+                            uploadFile: () => {},
+                        }
+                    });
+
+                    messageLocalization.load({ en: { 'dxChat-fileLimitReachedWarning': this.customMessage } });
+
+                    const fileUploader = this.getFileUploader();
+                    fileUploader.option('onFileLimitReached')();
+
+                    const $informerText = this.$element.find(`.${INFORMER_TEXT_CLASS}`);
+
+                    assert.strictEqual($informerText.text(), this.customMessage, 'custom localization message is shown after runtime load');
+                });
+            });
         });
 
         QUnit.module('Integration with text option', () => {