Chat: Fix line breaks

DevExpress · Sep 10, 2024 · 1a05059 · 1a05059
1 parent 5c86f71
commit 1a05059
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 0 deletions.
diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml
@@ -103,6 +103,9 @@ jobs:
           { componentFolder: "common", name: "common" },
           { componentFolder: "common", name: "common - material", theme: 'material.blue.light' },
           { componentFolder: "common", name: "common - fluent", theme: 'fluent.blue.light' },
+          { componentFolder: "chat", name: "chat" },
+          { componentFolder: "chat", name: "chat - material", theme: 'material.blue.light' },
+          { componentFolder: "chat", name: "chat - fluent", theme: 'fluent.blue.light' },
           { componentFolder: "treeList", name: "treeList", concurrency: 1 },
           { componentFolder: "dataGrid", name: "dataGrid (1/5)", indices: "1/5" },
           { componentFolder: "dataGrid", name: "dataGrid (2/5)", indices: "2/5" },

diff --git a/e2e/testcafe-devextreme/tests/chat/common.ts b/e2e/testcafe-devextreme/tests/chat/common.ts
@@ -0,0 +1,29 @@
+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';
+
+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 t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat');
+
+  return createWidget('dxChat', {
+    height: 500,
+    width: 300,
+    items: [
+      {
+        text: 'line\nbreak',
+      },
+    ],
+  }, '#chat');
+});
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-messagebubble/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss
@@ -7,6 +7,7 @@
 .dx-chat-message-bubble {
   width: auto;
   word-break: break-word;
+  white-space: break-spaces;
 }
 
 .dx-chat-message-group-alignment-start {

diff --git a/packages/testcafe-models/types.ts b/packages/testcafe-models/types.ts
@@ -10,6 +10,7 @@ export type WidgetName =
   | 'dxCalendar'
   | 'dxCalendarView'
   | 'dxChart'
+  | 'dxChat'
   | 'dxCheckBox'
   | 'dxColorBox'
   | 'dxContextMenu'