Chat: Add screenshot tests for MessageBubble and MessageBox with attachments (#31594)

Co-authored-by: marker dao ® <[email protected]>

Author: marker-dao

e2e/testcafe-devextreme/tests/editors/chat/data/index.ts

@@ -4,12 +4,18 @@ interface User {
   avatarUrl: string;
 }
 
+interface Attachment {
+  name: string;
+  size: number;
+}
+
 interface Message {
   timestamp: Date;
   author: User;
   type?: 'image' | 'text';
   src?: string;
   text?: string;
+  attachments?: Attachment[];
 }
 
 export const avatarUrl = 'data:image/png;base64,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';
@@ -75,3 +81,29 @@ export const generateImageMessage = (
   type: 'image',
   src,
 });
+
+export const attachments = [
+  {
+    name: '9138cf2e-ced3-426a-bb53-4478536f690b.zip',
+    size: 1024,
+  },
+  {
+    name: '9138cf2e-ced3-426a-bb53-4478536f690b.png',
+    size: 10240,
+  },
+  {
+    name: '9138cf2e-ced3-426a-bb53-4478536f690b.jpeg',
+    size: 102400,
+  },
+  {
+    name: '9138cf2e-ced3-426a-bb53-4478536f690b.zip',
+    size: 1024000,
+  },
+];
+
+export const generateFileMessage = (author: User, longText = false): Message => ({
+  text: longText ? getLongText() : getShortText(),
+  timestamp,
+  author,
+  attachments,
+});

e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with files (fluent.blue.light).png

@@ -1,6 +1,8 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Chat from 'devextreme-testcafe-models/chat';
-import { getShortText, getLongText, createUser } from './data';
+import {
+  getShortText, getLongText, createUser, attachments,
+} from './data';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { testScreenshot } from '../../../helpers/themeUtils';
@@ -81,13 +83,24 @@ test('Chat: messagebox with editing preview', async (t) => {
   }, '#chat');
 });
 
-test('Chat: messagebox with attach button', async (t) => {
+test('Chat: messagebox with attachments and informer', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#chat');
 
+  await t.typeText(chat.getInput(), getLongText(false, 4));
+  await chat.option({
+    fileUploaderOptions: {
+      value: [
+        ...attachments,
+        ...attachments,
+        ...attachments,
+      ],
+    },
+  });
+
   await chat.focus();
-  await testScreenshot(t, takeScreenshot, 'Messagebox with attach button.png', { element: '#chat' });
+  await testScreenshot(t, takeScreenshot, 'Messagebox with attachments and informer.png', { element: '#chat' });
 
   await t
     .expect(compareResults.isValid())
@@ -96,8 +109,7 @@ test('Chat: messagebox with attach button', async (t) => {
   await appendElementTo('#container', 'div', 'chat');
 
   return createWidget('dxChat', {
-    width: 400,
+    width: 812,
     height: 600,
-    fileUploaderOptions: {},
   }, '#chat');
 });

e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with image (fluent.blue.light).png

@@ -1,6 +1,11 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Chat from 'devextreme-testcafe-models/chat';
-import { createUser, generateImageMessage, generateMessages } from './data';
+import {
+  createUser,
+  generateImageMessage,
+  generateMessages,
+  generateFileMessage,
+} from './data';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { testScreenshot } from '../../../helpers/themeUtils';
@@ -39,21 +44,31 @@ test('Chat: messagebubble', async (t) => {
   }, '#chat');
 });
 
-test('Chat: messagebubble - image rendering with size variations', async (t) => {
+test('Chat: messagebubble with images and files', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const chat = new Chat('#chat');
 
   const user = createUser(1, 'ImageUser');
 
-  let imageMessages = generateImageMessage(user, '../../../apps/demos/images/products/1.png');
-
-  await chat.option({ items: [imageMessages] });
-  await testScreenshot(t, takeScreenshot, 'Bubbles with image.png', { element: '#chat' });
-
-  imageMessages = generateImageMessage(user, '../../../apps/demos/images/products/1-small.png');
-
-  await chat.option({ items: [imageMessages] });
-  await testScreenshot(t, takeScreenshot, 'Bubbles with small image.png', { element: '#chat' });
+  const imageMessages = [
+    generateImageMessage(user, '../../../apps/demos/images/products/1.png'),
+    generateImageMessage(user, '../../../apps/demos/images/products/1-small.png'),
+  ];
+
+  await chat.option({ items: imageMessages });
+  await testScreenshot(t, takeScreenshot, 'Bubbles with images.png', { element: '#chat' });
+
+  const fileMessages = [
+    generateFileMessage(user),
+    generateFileMessage(user, true),
+  ];
+
+  await chat.option({
+    width: 700,
+    height: 720,
+    items: fileMessages,
+  });
+  await testScreenshot(t, takeScreenshot, 'Bubbles with files.png', { element: '#chat' });
 
   await t.expect(compareResults.isValid()).ok(compareResults.errorMessages());
 }).before(async () => {

e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with images (fluent.blue.light).png

@@ -73,7 +73,7 @@ const FILEUPLOADER_INVALID_CLASS = 'dx-fileuploader-invalid';
 const FILEUPLOADER_AFTER_LOAD_DELAY = 400;
 const DRAG_EVENT_DELTA = 1;
 const GAP = 10;
-const ETALON_TEXT = '1023 bytes';
+const REFERENCE_TEXT = '1023 bytes';
 
 const DIALOG_TRIGGER_EVENT_NAMESPACE = 'dxFileUploaderDialogTrigger';
 
@@ -793,7 +793,7 @@ class FileUploader extends Editor<FileUploaderProperties> {
     const iconWidth = _showFileIcon ? getOuterWidth($icon) : 0;
 
     const prevFileSize = $fileSize?.text();
-    $fileSize?.text(ETALON_TEXT);
+    $fileSize?.text(REFERENCE_TEXT);
     const fileSizeWidth = getWidth($fileSize);
     $fileSize?.text(prevFileSize ?? '');