make test simpler and more stable (add id, stop animation, make singl…

…e screenshot)
DevExpress · Dec 10, 2024 · 8d389a9 · 8d389a9
1 parent 345da00
commit 8d389a9
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 5 deletions.
diff --git a/apps/demos/Demos/Chat/Overview/Angular/app/app.component.html b/apps/demos/Demos/Chat/Overview/Angular/app/app.component.html
@@ -1,5 +1,6 @@
 <div class="demo-container">
   <dx-chat
+    [elementAttr]="{ id: 'user-chat' }"
     [user]="currentUser"
     [items]="messages$ | async"
     [typingUsers]="userChatTypingUsers$ | async"
@@ -10,6 +11,7 @@
   </dx-chat>
 
   <dx-chat
+    [elementAttr]="{ id: 'support-chat' }"
     [user]="supportAgent"
     [items]="messages$ | async"
     [typingUsers]="supportChatTypingUsers$ | async"

diff --git a/apps/demos/Demos/Chat/Overview/React/App.tsx b/apps/demos/Demos/Chat/Overview/React/App.tsx
@@ -33,6 +33,7 @@ export default function App() {
   return (
     <React.Fragment>
       <Chat
+        elementAttr={{ id: 'user-chat' }}
         user={currentUser}
         items={messages}
         onMessageEntered={onMessageEntered}
@@ -41,6 +42,7 @@ export default function App() {
         typingUsers={userChatTypingUsers}
       />
       <Chat
+        elementAttr={{ id: 'support-chat' }}
         user={supportAgent}
         items={messages}
         onMessageEntered={onMessageEntered}

diff --git a/apps/demos/Demos/Chat/Overview/ReactJs/App.js b/apps/demos/Demos/Chat/Overview/ReactJs/App.js
@@ -26,6 +26,7 @@ export default function App() {
   return (
     <React.Fragment>
       <Chat
+        elementAttr={{ id: 'user-chat' }}
         user={currentUser}
         items={messages}
         onMessageEntered={onMessageEntered}
@@ -34,6 +35,7 @@ export default function App() {
         typingUsers={userChatTypingUsers}
       />
       <Chat
+        elementAttr={{ id: 'support-chat' }}
         user={supportAgent}
         items={messages}
         onMessageEntered={onMessageEntered}

diff --git a/apps/demos/Demos/Chat/Overview/Vue/App.vue b/apps/demos/Demos/Chat/Overview/Vue/App.vue
@@ -1,5 +1,6 @@
 <template>
   <DxChat
+    :element-attr="{ id: 'user-chat' }"
     v-model:items="messages"
     v-model:user="currentUser"
     v-model:typing-users="userChatTypingUsers"
@@ -8,6 +9,7 @@
     @typing-end="userChatTypingEnd()"
   />
   <DxChat
+    :element-attr="{ id: 'support-chat' }"
     v-model:items="messages"
     v-model:user="supportAgent"
     v-model:typing-users="supportChatTypingUsers"

diff --git a/apps/demos/testing/widgets/chat/Overview.test.js b/apps/demos/testing/widgets/chat/Overview.test.js
@@ -3,7 +3,7 @@ import { ClientFunction } from 'testcafe';
 import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
 import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils';
 
-const CHAT_INPUT_SELECTOR = '.dx-chat .dx-texteditor-input';
+const USER_CHAT_INPUT_SELECTOR = '#user-chat .dx-texteditor-input';
 
 fixture('Chat.Overview')
   .page('http://localhost:8080/')
@@ -15,13 +15,14 @@ runManualTest('Chat', 'Overview', ['jQuery', 'React', 'Vue', 'Angular'], (test)
   test('Overview', async (t) => {
     await ClientFunction(() => {
       const styleElement = document.createElement('style');
-      styleElement.innerHTML = `.dx-chat-typingindicator-circle { animation: none !important; }`;  
+      styleElement.innerHTML = '.dx-chat-typingindicator-circle { animation: none !important; }';
       document.head.appendChild(styleElement);
-    });
+    })();
 
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-    await t.typeText(CHAT_INPUT_SELECTOR, 'left');
+
+    await t.typeText(USER_CHAT_INPUT_SELECTOR, 'testing');
+
     await testScreenshot(t, takeScreenshot, 'chat_typing_indicator.png');
 
     await t