Chat: add testcafe test for customization demo (DevExpress#28458)

Co-authored-by: EugeniyKiyashko <[email protected]>

apps/demos/testing/widgets/chat/Customization.test.js

@@ -0,0 +1,67 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { Selector } from 'testcafe';
+import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
+import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils';
+
+fixture('Chat.Customization')
+  .page('http://localhost:8080/')
+  .before(async (ctx) => {
+    ctx.initialWindowSize = [900, 800];
+  });
+
+runManualTest('Chat', 'Customization', ['jQuery'], (test) => {
+  test('Customization', async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await t
+        .click('#day-headers-format')
+        .click(Selector('.dx-list-item').nth(2))
+        .wait(500);
+
+    await testScreenshot(t, takeScreenshot, `chat_customization_day_headers_format_is_changed.png`);
+
+    await t
+        .click('#show-day-headers');
+
+    await testScreenshot(t, takeScreenshot, 'chat_customization_day_headers_is_hidden.png');
+
+    await t
+        .click('#show-avatar');
+
+    await testScreenshot(t, takeScreenshot, 'chat_customization_avatar_is_hidden.png');
+
+    await t
+        .click('#show-avatar');
+
+    await t
+        .click('#show-user-name');
+
+    await testScreenshot(t, takeScreenshot, 'chat_customization_username_is_hidden.png');
+
+    await t
+        .click('#show-user-name');
+
+    await t
+        .click('#message-timestamp-format')
+        .click(Selector('.dx-list-item').nth(5))
+        .wait(500);
+
+    await testScreenshot(t, takeScreenshot, `chat_customization_message_timestamp_format_is_changed.png`);
+
+    await t
+        .click('#show-message-timestamp');
+
+    await testScreenshot(t, takeScreenshot, 'chat_customization_message_timestamps_is_hidden.png');
+
+    await t
+        .typeText('.dx-texteditor-input','testing')
+        .pressKey('enter')
+        .click('#chat-disabled');
+
+    await testScreenshot(t, takeScreenshot, 'chat_customization_is_disabled_after_sent.png');
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  });
+});

apps/demos/utils/tests/testcafe-helpers/matrix-test-helper.test.js

@@ -20,6 +20,7 @@ const testStub = {
     page() { return this; },
   },
   page() { return this; },
+  clientScripts() { return this; }
 };
 
 function updateChanges(value, options) {

apps/demos/utils/visual-tests/matrix-test-helper.js

@@ -328,7 +328,14 @@ export function runManualTestCore(testObject, product, demo, framework, callback
     return;
   }
 
-  const test = testObject.page(`http://localhost:8080/apps/demos/Demos/${product}/${demo}/${framework}/`);
+  const clientScriptSource = globalReadFrom(__dirname, `../../Demos/${product}/${demo}/client-script.js`, (x) => [{ content: x }]) || [];
+
+  const test = testObject
+    .clientScripts([
+      { module: 'mockdate' },
+      ...clientScriptSource
+    ])
+    .page(`http://localhost:8080/apps/demos/Demos/${product}/${demo}/${framework}/`);
 
   test.before?.(async (t) => {
     const [width, height] = t.fixtureCtx.initialWindowSize;