Chat: Finalize initials rendering

e2e/testcafe-devextreme/tests/chat/avatar.ts

@@ -11,7 +11,7 @@ fixture.disablePageReloads`ChatAvatar`
 
 test('Chat: avatar', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  await testScreenshot(t, takeScreenshot, 'Avatar with initials.png', { element: '#chat' });
+  await testScreenshot(t, takeScreenshot, 'Avatar with two word initials.png', { element: '#chat' });
 
   const chat = new Chat('#chat');
 
@@ -30,8 +30,8 @@ test('Chat: avatar', async (t) => {
 }).before(async () => {
   await appendElementTo('#container', 'div', 'chat');
 
-  const userFirst = createUser(1, 'First');
-  const userSecond = createUser(2, 'Second');
+  const userFirst = createUser(1, 'First User');
+  const userSecond = createUser(2, 'Second User');
 
   const items = generateMessages(2, userFirst, userSecond, false, false, 2);
 

packages/devextreme/js/__internal/ui/chat/avatar.ts

@@ -20,7 +20,7 @@ class Avatar extends Widget<Properties> {
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
-      name: '',
+      name: 'Unknown User',
       url: '',
     };
   }
@@ -52,12 +52,8 @@ class Avatar extends Widget<Properties> {
   }
 
   _renderInitials(): void {
-    const { name } = this.option();
-
-    if (name) {
-      this._renderInitialsElement();
-      this._updateInitials();
-    }
+    this._renderInitialsElement();
+    this._updateInitials();
   }
 
   _renderImageElement(): void {
@@ -101,12 +97,23 @@ class Avatar extends Widget<Properties> {
 
   _getInitials(name: string | undefined): string {
     if (isDefined(name)) {
-      return String(name).charAt(0).toUpperCase();
+      const splitValue = String(name).trim().split(/\s+/);
+
+      const firstInitial = this._getFirstChar(splitValue[0]);
+      const secondInitial = this._getFirstChar(splitValue[1]);
+
+      const result = `${firstInitial}${secondInitial}`;
+
+      return result;
     }
 
     return '';
   }
 
+  _getFirstChar(value: string | undefined): string {
+    return value?.charAt(0).toUpperCase() ?? '';
+  }
+
   _optionChanged(args: OptionChanged<Properties>): void {
     const { name } = args;
 

packages/devextreme/js/__internal/ui/chat/messagegroup.ts

@@ -116,7 +116,7 @@ class MessageGroup extends Widget<Properties> {
     const $information = $('<div>')
       .addClass(CHAT_MESSAGEGROUP_INFORMATION_CLASS);
 
-    const authorName = author?.name ?? '';
+    const authorName = author?.name ?? 'Unknown User';
     const authorNameText = alignment === 'start' ? authorName : '';
 
     $('<div>')

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

@@ -42,4 +42,15 @@ QUnit.module('Avatar classes', moduleConfig, () => {
 
         assert.strictEqual(this.$element.children().first().hasClass(AVATAR_INITIALS_CLASS), true);
     });
+
+    QUnit.test('text element should be rendered if name is null, undefined or empty', function(assert) {
+        this.reinit({ name: null });
+        assert.strictEqual(this.$element.children().first().length, 1);
+
+        this.reinit({ name: undefined });
+        assert.strictEqual(this.$element.children().first().length, 1);
+
+        this.reinit({ name: '' });
+        assert.strictEqual(this.$element.children().first().length, 1);
+    });
 });

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

@@ -31,34 +31,37 @@ QUnit.module('ChatAvatar', moduleConfig, () => {
             assert.ok(this.instance instanceof ChatAvatar);
         });
 
-        QUnit.test('should be rendered with empty value by default', function(assert) {
-            assert.strictEqual(this.$element.text(), '');
+        QUnit.test('should be rendered with UU value by default', function(assert) {
+            assert.strictEqual(this.$element.text(), 'UU');
         });
     });
 
     QUnit.module('Name option', () => {
         QUnit.test('should be rendered with correct initials according passed name option value', function(assert) {
             this.reinit({ name: 'User name' });
 
-            assert.strictEqual(this.$element.text(), 'U');
+            assert.strictEqual(this.$element.text(), 'UN');
         });
 
         QUnit.test('name option should be updatable at runtime', function(assert) {
             this.instance.option('name', 'New Value');
 
-            assert.strictEqual(this.$element.text(), 'N');
+            assert.strictEqual(this.$element.text(), 'NV');
         });
 
         [
+            { name: 'onewordname', expectedInitials: 'O' },
+            { name: 'Three word name', expectedInitials: 'TW' },
+            { name: ' New Value', expectedInitials: 'NV' },
+            { name: '   New      Value.   ', expectedInitials: 'NV' },
+            { name: '', expectedInitials: '' },
             { name: 888, expectedInitials: '8' },
             { name: undefined, expectedInitials: '' },
             { name: null, expectedInitials: '' },
-            // TODO: consider scenarios
-            // { name: ' New Name', expectedInitials: 'N' },
-            // { name: NaN, expectedInitials: '' },
-            // { name: Infinity, expectedInitials: '' },
-            // { name: -Infinity, expectedInitials: '' },
-            // { name: { firstName: 'name' }, expectedInitials: '' }
+            { name: NaN, expectedInitials: 'N' },
+            { name: Infinity, expectedInitials: 'I' },
+            { name: -Infinity, expectedInitials: '-' },
+            { name: { firstName: 'name' }, expectedInitials: '[O' }
         ].forEach(({ name, expectedInitials }) => {
             QUnit.test(`name option is ${name}`, function(assert) {
                 this.reinit({ name });

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

@@ -148,15 +148,15 @@ QUnit.module('MessageGroup', moduleConfig, () => {
             assert.strictEqual($information.length, 1);
         });
 
-        QUnit.test('name element should not be rendered if autor.name property is not passed', function(assert) {
+        QUnit.test('name element should be rendered with correct text if autor.name property is not passed', function(assert) {
             this.reinit({
                 items: [{ author: {} }],
             });
 
             const $name = this.$element.find(`.${CHAT_MESSAGEGROUP_AUTHOR_NAME_CLASS}`);
 
             assert.strictEqual($name.length, 1);
-            assert.strictEqual($name.text(), '', 'name text is empty');
+            assert.strictEqual($name.text(), 'Unknown User', 'name text is Unknown User');
         });
 
         QUnit.test('time element should be rendered with empty text if timestamp property is not passed', function(assert) {

packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js

@@ -1354,7 +1354,7 @@ testComponentDefaults(Chat,
 testComponentDefaults(Avatar,
     {},
     {
-        name: '',
+        name: 'Unknown User',
         url: '',
     }
 );