Chat: Add image rendering (DevExpress#29698)

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

Author: 4 people

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

@@ -4,6 +4,14 @@ interface User {
   avatarUrl: string;
 }
 
+interface Message {
+  timestamp: Date;
+  author: User;
+  type?: 'image' | 'text';
+  src?: string;
+  text?: string;
+}
+
 export const avatarUrl = 'data:image/png;base64,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';
 export const lineBreaks = '\n\n';
 
@@ -41,7 +49,7 @@ export const generateMessages = (
   coefficient = 4,
   n = 1,
   isEdited = false,
-): any => {
+): Message[] => {
   const messages = Array.from({ length: length * n }, (_, i) => {
     const text = useLongText
       ? getLongText(useLineBreaks)
@@ -67,3 +75,13 @@ export const generateMessages = (
 
   return messages;
 };
+
+export const generateImageMessage = (
+  user: User,
+  src: string,
+): Message => ({
+  timestamp,
+  author: user,
+  type: 'image',
+  src,
+});

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

@@ -1,6 +1,6 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Chat from 'devextreme-testcafe-models/chat';
-import { createUser, generateMessages } from './data';
+import { createUser, generateImageMessage, generateMessages } from './data';
 import url from '../../helpers/getPageUrl';
 import { createWidget } from '../../helpers/createWidget';
 import { testScreenshot } from '../../helpers/themeUtils';
@@ -38,3 +38,29 @@ test('Chat: messagebubble', async (t) => {
     height: 650,
   }, '#chat');
 });
+
+test('Chat: messagebubble - image rendering with size variations', 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' });
+
+  await t.expect(compareResults.isValid()).ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat');
+
+  return createWidget('dxChat', {
+    width: 600,
+    height: 650,
+  }, '#chat');
+});

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

@@ -30,6 +30,14 @@ import { CollectionNestedOption } from 'devextreme-angular/core';
     providers: [NestedOptionHost]
 })
 export class DxiChatItemComponent extends CollectionNestedOption {
+    @Input()
+    get alt(): string {
+        return this._getOption('alt');
+    }
+    set alt(value: string) {
+        this._setOption('alt', value);
+    }
+
     @Input()
     get author(): User {
         return this._getOption('author');
@@ -62,6 +70,14 @@ export class DxiChatItemComponent extends CollectionNestedOption {
         this._setOption('isEdited', value);
     }
 
+    @Input()
+    get src(): string {
+        return this._getOption('src');
+    }
+    set src(value: string) {
+        this._setOption('src', value);
+    }
+
     @Input()
     get text(): string {
         return this._getOption('text');
@@ -78,6 +94,14 @@ export class DxiChatItemComponent extends CollectionNestedOption {
         this._setOption('timestamp', value);
     }
 
+    @Input()
+    get type(): string | undefined {
+        return this._getOption('type');
+    }
+    set type(value: string | undefined) {
+        this._setOption('type', value);
+    }
+
 
     protected get _optionPath() {
         return 'items';

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

@@ -98,10 +98,10 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('stylingMode', value);
     }
 
-    get type(): ButtonType | string {
+    get type(): ButtonType | string | undefined {
         return this._getOption('type');
     }
-    set type(value: ButtonType | string) {
+    set type(value: ButtonType | string | undefined) {
         this._setOption('type', value);
     }
 
@@ -147,6 +147,13 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('hint', value);
     }
 
+    get alt(): string {
+        return this._getOption('alt');
+    }
+    set alt(value: string) {
+        this._setOption('alt', value);
+    }
+
     get author(): User {
         return this._getOption('author');
     }
@@ -175,6 +182,13 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('isEdited', value);
     }
 
+    get src(): string {
+        return this._getOption('src');
+    }
+    set src(value: string) {
+        this._setOption('src', value);
+    }
+
     get timestamp(): Date | number | string {
         return this._getOption('timestamp');
     }