Chat: Add screenshot tests

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

@@ -0,0 +1,44 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import Chat from 'devextreme-testcafe-models/chat';
+import { createUser, generateMessages, avatarUrl } from './data';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { testScreenshot } from '../../helpers/themeUtils';
+import { appendElementTo } from '../../helpers/domUtils';
+
+fixture.disablePageReloads`ChatAvatar`
+  .page(url(__dirname, '../container.html'));
+
+test('Chat: avatar', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  await testScreenshot(t, takeScreenshot, 'Avatar with initials.png', { element: '#chat' });
+
+  const chat = new Chat('#chat');
+
+  const userFirst = createUser(1, 'First', avatarUrl);
+  const userSecond = createUser(2, 'Second', avatarUrl);
+
+  const items = generateMessages(2, userFirst, userSecond, false, false, 2);
+
+  await chat.option('items', items);
+
+  await testScreenshot(t, takeScreenshot, 'Avatar with image.png', { element: '#chat' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat');
+
+  const userFirst = createUser(1, 'First');
+  const userSecond = createUser(2, 'Second');
+
+  const items = generateMessages(2, userFirst, userSecond, false, false, 2);
+
+  return createWidget('dxChat', {
+    width: 400,
+    height: 600,
+    user: userSecond,
+    items,
+  }, '#chat');
+});

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

@@ -0,0 +1,67 @@
+interface User {
+  id: number;
+  name: string;
+  avatarUrl: string;
+}
+
+export const avatarUrl = 'data:image/png;base64,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';
+export const lineBreaks = '\n\n';
+
+export const createUser = (id: number, name: string, url = ''): User => ({
+  id,
+  name,
+  avatarUrl: url,
+});
+
+export const timestamp = new Date(1721747399083);
+
+export const getLongText = (useLineBreaks = false, length = 1): string => {
+  const UUID = '9138cf2e-ced3-426a-bb53-4478536f690b';
+  const longItem = '1826403415222858765740359115719081097182452189907242163763639765588452014727158270738379423360950761826403415222858765740359115719081097182452189907';
+  const longItemArray = Array(length).fill(longItem);
+  const longString = longItemArray.join('');
+
+  const result = `${UUID}:${useLineBreaks ? lineBreaks : ''}${longString}`;
+
+  return result;
+};
+
+export const getShortText = (useLineBreaks = false): string => {
+  const value = `Short${useLineBreaks ? lineBreaks : ' '}text`;
+
+  return value;
+};
+
+export const generateMessages = (
+  length: number,
+  userFirst: User,
+  userSecond = userFirst,
+  useLongText = false,
+  useLineBreaks = false,
+  coefficient = 4,
+  n = 1,
+): any => {
+  const messages = Array.from({ length: length * n }, (_, i) => {
+    const text = useLongText
+      ? getLongText(useLineBreaks)
+      : getShortText(useLineBreaks);
+
+    const getAuthor = () => {
+      if (n > 1) {
+        return i >= length ? userSecond : userFirst;
+      }
+
+      return i % coefficient === 0 ? userFirst : userSecond;
+    };
+
+    const item = {
+      timestamp,
+      author: getAuthor(),
+      text,
+    };
+
+    return item;
+  });
+
+  return messages;
+};

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

@@ -0,0 +1,41 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import Chat from 'devextreme-testcafe-models/chat';
+import { getShortText, getLongText } from './data';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { testScreenshot } from '../../helpers/themeUtils';
+import { appendElementTo } from '../../helpers/domUtils';
+
+fixture.disablePageReloads`ChatMessageBox`
+  .page(url(__dirname, '../container.html'));
+
+test('Chat: messagebox', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const chat = new Chat('#chat');
+  const shortText = getShortText();
+  const longText = getLongText(false, 5);
+
+  await chat.focus();
+  await testScreenshot(t, takeScreenshot, 'Messagebox when chat has focus.png', { element: '#chat' });
+
+  await t.typeText(chat.getInput(), shortText);
+  await testScreenshot(t, takeScreenshot, 'Messagebox when input contains short text.png', { element: '#chat' });
+
+  await t.typeText(chat.getInput(), longText);
+  await testScreenshot(t, takeScreenshot, 'Messagebox when input contains long text.png', { element: '#chat' });
+
+  await t.pressKey('tab');
+  await testScreenshot(t, takeScreenshot, 'Messagebox when send button has focus.png', { element: '#chat' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat');
+
+  return createWidget('dxChat', {
+    width: 400,
+    height: 600,
+  }, '#chat');
+});

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

@@ -0,0 +1,40 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import Chat from 'devextreme-testcafe-models/chat';
+import { createUser, generateMessages } from './data';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { testScreenshot } from '../../helpers/themeUtils';
+import { appendElementTo } from '../../helpers/domUtils';
+
+fixture.disablePageReloads`ChatMessageBubble`
+  .page(url(__dirname, '../container.html'));
+
+test('Chat: messagebubble', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const chat = new Chat('#chat');
+
+  const userFirst = createUser(1, 'First');
+  const userSecond = createUser(2, 'Second');
+
+  let items = generateMessages(2, userFirst, userSecond, true, false, 2);
+
+  await chat.option({ items, user: userSecond });
+  await testScreenshot(t, takeScreenshot, 'Bubbles with long text.png', { element: '#chat' });
+
+  items = generateMessages(2, userFirst, userSecond, true, true, 2);
+
+  await chat.option({ items });
+  await testScreenshot(t, takeScreenshot, 'Bubbles with long text with line breaks.png', { element: '#chat' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat');
+
+  return createWidget('dxChat', {
+    width: 400,
+    height: 600,
+  }, '#chat');
+});

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

@@ -0,0 +1,105 @@
+import { Selector } from 'testcafe';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import Chat from 'devextreme-testcafe-models/chat';
+import {
+  createUser,
+  generateMessages,
+  getLongText,
+} from './data';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { testScreenshot } from '../../helpers/themeUtils';
+import { appendElementTo, setStyleAttribute } from '../../helpers/domUtils';
+
+const CHAT_AVATAR_SELECTOR = '.dx-chat-message-avatar';
+
+fixture.disablePageReloads`ChatMessageGroup`
+  .page(url(__dirname, '../container.html'));
+
+test('Chat: messagegroup, 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 userFirst = createUser(1, 'First');
+  const items = generateMessages(3, userFirst);
+
+  return createWidget('dxChat', {
+    width: 400,
+    height: 600,
+    items,
+  }, '#chat');
+});
+
+test('Chat: messagegroup, information', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'Information row with long user name.png', { element: '#chat' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat');
+
+  const userFirst = createUser(1, getLongText());
+  const userSecond = createUser(2, getLongText());
+
+  const items = generateMessages(2, userFirst, userSecond, false, false, 2);
+
+  return createWidget('dxChat', {
+    width: 400,
+    height: 600,
+    user: userSecond,
+    items,
+  }, '#chat');
+});
+
+test('Chat: messagegroup, bubbles', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const chat = new Chat('#chat');
+
+  const userFirst = createUser(1, 'First');
+  const userSecond = createUser(2, 'Second');
+
+  let items = generateMessages(1, userFirst, userSecond, false, false, 4, 2);
+
+  await chat.option({ items, user: userSecond });
+  await testScreenshot(t, takeScreenshot, 'Messagegroup with 1 bubble.png', { element: '#chat' });
+
+  items = generateMessages(2, userFirst, userSecond, false, false, 4, 2);
+
+  await chat.option({ items });
+  await testScreenshot(t, takeScreenshot, 'Messagegroup with 2 bubbles.png', { element: '#chat' });
+
+  items = generateMessages(3, userFirst, userSecond, false, false, 4, 2);
+
+  await chat.option({ items });
+  await testScreenshot(t, takeScreenshot, 'Messagegroup with 3 bubbles.png', { element: '#chat' });
+
+  items = generateMessages(4, userFirst, userSecond, false, false, 4, 2);
+
+  await chat.option({ items });
+  await testScreenshot(t, takeScreenshot, 'Messagegroup with 4 bubbles.png', { element: '#chat' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'chat');
+
+  return createWidget('dxChat', {
+    width: 400,
+    height: 600,
+  }, '#chat');
+});