From 47630e4d2f141fea2c5ffd45487debf05bd35141 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:56:59 +0400
Subject: [PATCH] fix scenario tests

---
 .../Demos/Chat/Customization/React/App.tsx    | 10 +++----
 .../widgets/chat/Customization.test.js        | 29 +++++++++++--------
 .../utils/visual-tests/matrix-test-helper.js  | 10 +++++--
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/apps/demos/Demos/Chat/Customization/React/App.tsx b/apps/demos/Demos/Chat/Customization/React/App.tsx
index d11e95480a4..8c0fffcc572 100644
--- a/apps/demos/Demos/Chat/Customization/React/App.tsx
+++ b/apps/demos/Demos/Chat/Customization/React/App.tsx
@@ -4,13 +4,13 @@ import { MessageEnteredEvent } from 'devextreme/ui/chat';
 import SelectBox from 'devextreme-react/select-box';
 import CheckBox from 'devextreme-react/check-box';
 
-import { 
+import {
   currentUser,
   messages as initialMessages,
   dayHeaderFormats as headerFormats,
   messageTimestampFormats as messageTimestamps,
   messageTimestampLabel,
-  dayHeaderLabel
+  dayHeaderLabel,
 } from './data.ts';
 
 export default function App() {
@@ -24,7 +24,7 @@ export default function App() {
   const [isDisabled, setDisabled] = useState(false);
 
   const onMessageEntered = useCallback(({ message }: MessageEnteredEvent) => {
-    setMessages(prevMessages => [...prevMessages, message]);
+    setMessages((prevMessages) => [...prevMessages, message]);
   }, []);
 
   return (
@@ -75,7 +75,7 @@ export default function App() {
         </div>
 
         <div className="option">
-        <span>Day Header Format:</span>
+          <span>Day Header Format:</span>
           <SelectBox
             items={headerFormats}
             value={dayHeaderFormat}
@@ -95,7 +95,7 @@ export default function App() {
         </div>
 
         <div className="option">
-        <span>Message Timestamp Format:</span>
+          <span>Message Timestamp Format:</span>
           <SelectBox
             items={messageTimestamps}
             value={messageTimestampFormat}
diff --git a/apps/demos/testing/widgets/chat/Customization.test.js b/apps/demos/testing/widgets/chat/Customization.test.js
index 13476058af1..50f95f0dd9d 100644
--- a/apps/demos/testing/widgets/chat/Customization.test.js
+++ b/apps/demos/testing/widgets/chat/Customization.test.js
@@ -3,6 +3,11 @@ import { Selector } from 'testcafe';
 import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
 import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils';
 
+const SELECTBOX_CLASS = 'dx-selectbox';
+const CHECKBOX_CLASS = 'dx-checkbox';
+const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
+const LIST_ITEM_CLASS = 'dx-list-item';
+
 fixture('Chat.Customization')
   .page('http://localhost:8080/')
   .before(async (ctx) => {
@@ -14,49 +19,49 @@ runManualTest('Chat', 'Customization', ['jQuery', 'React', 'Vue', 'Angular'], (t
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
     await t
-      .click('#day-header-format')
-      .click(Selector('.dx-list-item').nth(2))
+      .click(Selector(`.${SELECTBOX_CLASS}`).nth(0))
+      .click(Selector(`.${LIST_ITEM_CLASS}`).nth(2))
       .wait(500);
 
     await testScreenshot(t, takeScreenshot, 'chat_customization_day_headers_format_is_changed.png');
 
     await t
-      .click(Selector('.dx-checkbox').nth(2));
+      .click(Selector(`.${CHECKBOX_CLASS}`).nth(2));
 
     await testScreenshot(t, takeScreenshot, 'chat_customization_day_headers_is_hidden.png');
 
     await t
-      .click(Selector('.dx-checkbox').nth(0));
+      .click(Selector(`.${CHECKBOX_CLASS}`).nth(0));
 
     await testScreenshot(t, takeScreenshot, 'chat_customization_avatar_is_hidden.png');
 
     await t
-      .click(Selector('.dx-checkbox').nth(0));
+      .click(Selector(`.${CHECKBOX_CLASS}`).nth(0));
 
     await t
-      .click(Selector('.dx-checkbox').nth(1));
+      .click(Selector(`.${CHECKBOX_CLASS}`).nth(1));
 
     await testScreenshot(t, takeScreenshot, 'chat_customization_username_is_hidden.png');
 
     await t
-      .click(Selector('.dx-checkbox').nth(1));
+      .click(Selector(`.${CHECKBOX_CLASS}`).nth(1));
 
     await t
-      .click('#message-timestamp-format')
-      .click(Selector('.dx-list-item').nth(5))
+      .click(Selector(`.${SELECTBOX_CLASS}`).nth(1))
+      .click(Selector(`.${LIST_ITEM_CLASS}`).nth(5))
       .wait(500);
 
     await testScreenshot(t, takeScreenshot, 'chat_customization_message_timestamp_format_is_changed.png');
 
     await t
-      .click(Selector('.dx-checkbox').nth(3));
+      .click(Selector(`.${CHECKBOX_CLASS}`).nth(3));
 
     await testScreenshot(t, takeScreenshot, 'chat_customization_message_timestamps_is_hidden.png');
 
     await t
-      .typeText('.dx-texteditor-input', 'testing')
+      .typeText(`.${TEXTEDITOR_INPUT_CLASS}`, 'testing')
       .pressKey('enter')
-      .click(Selector('.dx-checkbox').nth(4));
+      .click(Selector(`.${CHECKBOX_CLASS}`).nth(4));
 
     await testScreenshot(t, takeScreenshot, 'chat_customization_is_disabled_after_sent.png');
 
diff --git a/apps/demos/utils/visual-tests/matrix-test-helper.js b/apps/demos/utils/visual-tests/matrix-test-helper.js
index 891546ea4e7..7ee9916ea47 100644
--- a/apps/demos/utils/visual-tests/matrix-test-helper.js
+++ b/apps/demos/utils/visual-tests/matrix-test-helper.js
@@ -218,13 +218,19 @@ const SKIPPED_TESTS = {
     List: [
       { demo: 'ItemDragging', themes: [THEME.generic, THEME.material, THEME.fluent] },
     ],
+    TabPanel: [
+      { demo: 'Overview', themes: [THEME.material, THEME.fluent] },
+    ],
+    Splitter: [
+      { demo: 'Overview', themes: [THEME.material, THEME.fluent] },
+    ],
     Gauges: [
       { demo: 'VariableNumberOfBars', themes: [THEME.generic, THEME.material, THEME.fluent] },
     ],
     DataGrid: [
-      { demo: 'Appearance', themes: [THEME.generic, THEME.material] },
+      { demo: 'Appearance', themes: [THEME.generic, THEME.material, THEME.fluent] },
       { demo: 'AdvancedMasterDetailView', themes: [THEME.generic, THEME.material, THEME.fluent] },
-      { demo: 'BatchEditing', themes: [THEME.material, THEME.fluent] },
+      { demo: 'BatchEditing', themes: [THEME.generic, THEME.material, THEME.fluent] },
       { demo: 'AjaxRequest', themes: [THEME.generic, THEME.material, THEME.fluent ] },
       { demo: 'InfiniteScrolling', themes: [THEME.generic, THEME.material, THEME.fluent] },
       { demo: 'MasterDetailView', themes: [THEME.generic, THEME.material, THEME.fluent] },