Chat: Fix avatar positioning

DevExpress · Sep 11, 2024 · fb6f86e · fb6f86e
1 parent bcdcdbb
commit fb6f86e
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 3 deletions.
diff --git a/e2e/testcafe-devextreme/tests/chat/common.ts b/e2e/testcafe-devextreme/tests/chat/common.ts
@@ -1,15 +1,18 @@
+import { Selector } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import url from '../../helpers/getPageUrl';
 import { createWidget } from '../../helpers/createWidget';
 import { testScreenshot } from '../../helpers/themeUtils';
-import { appendElementTo } from '../../helpers/domUtils';
+import { appendElementTo, setStyleAttribute } from '../../helpers/domUtils';
+
+const CHAT_AVATAR_SELECTOR = '.dx-chat-message-avatar';
 
 fixture.disablePageReloads`Chat`
   .page(url(__dirname, '../container.html'));
 
 test('Chat: line breaks', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  await testScreenshot(t, takeScreenshot, 'Chat message bubble line breaks.png', { element: '#container' });
+  await testScreenshot(t, takeScreenshot, 'Chat message bubble line breaks.png', { element: '#chat' });
 
   await t
     .expect(compareResults.isValid())
@@ -27,3 +30,43 @@ test('Chat: line breaks', async (t) => {
     ],
   }, '#chat');
 });
+
+test('Chat: avatar rendering', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'Avatar has correct position.png', { element: '#chat' });
+
+  await setStyleAttribute(Selector(CHAT_AVATAR_SELECTOR), 'width: 64px; height: 64px');
+
+  await testScreenshot(t, takeScreenshot, 'Avatar sizes do not affect indentation between bubbles.png', { element: '#chat' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat');
+
+  const author = {
+    id: 1,
+    name: 'First User Name',
+  };
+  const timestamp = new Date(1721747399083);
+  const text = '0.392722124265449';
+
+  return createWidget('dxChat', {
+    height: 500,
+    width: 400,
+    items: [
+      {
+        timestamp,
+        text,
+        author,
+      },
+      {
+        timestamp,
+        text,
+        author,
+      },
+    ],
+  }, '#chat');
+});
diff --git a/...vextreme/tests/chat/etalons/Avatar has correct position (fluent-blue-light).png b/...vextreme/tests/chat/etalons/Avatar has correct position (fluent-blue-light).png
diff --git a/...e-devextreme/tests/chat/etalons/Avatar has correct position (generic-light).png b/...e-devextreme/tests/chat/etalons/Avatar has correct position (generic-light).png
diff --git a/...xtreme/tests/chat/etalons/Avatar has correct position (material-blue-light).png b/...xtreme/tests/chat/etalons/Avatar has correct position (material-blue-light).png
diff --git a/.../Avatar sizes do not affect indentation between bubbles (fluent-blue-light).png b/.../Avatar sizes do not affect indentation between bubbles (fluent-blue-light).png
diff --git a/...lons/Avatar sizes do not affect indentation between bubbles (generic-light).png b/...lons/Avatar sizes do not affect indentation between bubbles (generic-light).png
diff --git a/...vatar sizes do not affect indentation between bubbles (material-blue-light).png b/...vatar sizes do not affect indentation between bubbles (material-blue-light).png
diff --git a/...reme/tests/chat/etalons/Chat message bubble line breaks (fluent-blue-light).png b/...reme/tests/chat/etalons/Chat message bubble line breaks (fluent-blue-light).png
diff --git a/...vextreme/tests/chat/etalons/Chat message bubble line breaks (generic-light).png b/...vextreme/tests/chat/etalons/Chat message bubble line breaks (generic-light).png
diff --git a/...me/tests/chat/etalons/Chat message bubble line breaks (material-blue-light).png b/...me/tests/chat/etalons/Chat message bubble line breaks (material-blue-light).png
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
@@ -1,5 +1,5 @@
 .dx-chat-message-avatar {
-  grid-row: span 3;
+  grid-row: 2 / auto;
   display: flex;
   align-items: center;
   justify-content: center;

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
@@ -12,6 +12,7 @@
 
 .dx-chat-message-group-alignment-start {
   .dx-chat-message-bubble-container {
+    grid-column: 2;
     align-items: flex-start;
   }