feat(etalons && repaint): Update etalon && Add repaint to the before …

…hook
DevExpress · Dec 11, 2024 · 51d4f74 · 51d4f74
1 parent a8a6aae
commit 51d4f74
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 22 deletions.
diff --git a/e2e/testcafe-devextreme/tests/chat/alertList.ts b/e2e/testcafe-devextreme/tests/chat/alertList.ts
@@ -81,13 +81,16 @@ test.clientScripts([
     text: 'Message text 5',
   }];
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     items,
     user: userFirst,
     width: 400,
     height: 600,
     alerts: [{ id: 1, message: 'Error Message 1. Error Description...' }],
   });
+
+  const chat = new Chat('#container');
+  await chat.repaint();
 }).after(async () => {
   await ClientFunction(() => {
     (window as any).MockDate.reset();

diff --git a/e2e/testcafe-devextreme/tests/chat/avatar.ts b/e2e/testcafe-devextreme/tests/chat/avatar.ts
@@ -35,12 +35,15 @@ test('Chat: avatar', async (t) => {
 
   const items = generateMessages(2, userFirst, userSecond, false, false, 2);
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     width: 400,
     height: 600,
     user: userSecond,
     items,
   }, '#chat');
+
+  const chat = new Chat('#chat');
+  await chat.repaint();
 });
 
 test('Chat: showAvatar set to false', async (t) => {
@@ -58,11 +61,14 @@ test('Chat: showAvatar set to false', async (t) => {
 
   const items = generateMessages(2, userFirst, userSecond, false, false, 2);
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     width: 400,
     height: 600,
     user: userSecond,
     items,
     showAvatar: false,
   }, '#chat');
+
+  const chat = new Chat('#chat');
+  await chat.repaint();
 });
diff --git a/...me/tests/chat/etalons/Typing indicator with emptyview (material-blue-light).png b/...me/tests/chat/etalons/Typing indicator with emptyview (material-blue-light).png
diff --git a/e2e/testcafe-devextreme/tests/chat/messageBox.ts b/e2e/testcafe-devextreme/tests/chat/messageBox.ts
@@ -34,8 +34,11 @@ test('Chat: messagebox', async (t) => {
 }).before(async () => {
   await appendElementTo('#container', 'div', 'chat');
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     width: 400,
     height: 600,
   }, '#chat');
+
+  const chat = new Chat('#chat');
+  await chat.repaint();
 });
diff --git a/e2e/testcafe-devextreme/tests/chat/messageBubble.ts b/e2e/testcafe-devextreme/tests/chat/messageBubble.ts
@@ -33,8 +33,11 @@ test('Chat: messagebubble', async (t) => {
 }).before(async () => {
   await appendElementTo('#container', 'div', 'chat');
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     width: 400,
     height: 650,
   }, '#chat');
+
+  const chat = new Chat('#chat');
+  await chat.repaint();
 });
diff --git a/e2e/testcafe-devextreme/tests/chat/messageGroup.ts b/e2e/testcafe-devextreme/tests/chat/messageGroup.ts
@@ -34,11 +34,14 @@ test('Chat: messagegroup, avatar rendering', async (t) => {
   const userFirst = createUser(1, 'First');
   const items = generateMessages(3, userFirst);
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     width: 400,
     height: 600,
     items,
   }, '#chat');
+
+  const chat = new Chat('#chat');
+  await chat.repaint();
 });
 
 test('Chat: messagegroup, information', async (t) => {
@@ -57,12 +60,15 @@ test('Chat: messagegroup, information', async (t) => {
 
   const items = generateMessages(2, userFirst, userSecond, false, false, 2);
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     width: 400,
     height: 600,
     user: userSecond,
     items,
   }, '#chat');
+
+  const chat = new Chat('#chat');
+  await chat.repaint();
 });
 
 test('Chat: messagegroup, bubbles', async (t) => {
@@ -99,10 +105,13 @@ test('Chat: messagegroup, bubbles', async (t) => {
 }).before(async () => {
   await appendElementTo('#container', 'div', 'chat');
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     width: 400,
     height: 600,
   }, '#chat');
+
+  const chat = new Chat('#chat');
+  await chat.repaint();
 });
 
 test('Messagegroup scenarios in disabled state', async (t) => {
@@ -126,6 +135,9 @@ test('Messagegroup scenarios in disabled state', async (t) => {
       width: 250,
       height: 400,
     }, chatId);
+
+    const chat = new Chat(chatId);
+    await chat.repaint();
   });
 
   await testScreenshot(t, takeScreenshot, 'Messagegroup appearance in disabled state.png', { element: '#container' });

diff --git a/e2e/testcafe-devextreme/tests/chat/messageList.ts b/e2e/testcafe-devextreme/tests/chat/messageList.ts
@@ -41,10 +41,15 @@ test('Messagelist empty view scenarios', async (t) => {
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxChat', {
-  width: 400,
-  height: 600,
-}));
+}).before(async () => {
+  await createWidget('dxChat', {
+    width: 400,
+    height: 600,
+  });
+
+  const chat = new Chat('#container');
+  await chat.repaint();
+});
 
 test('Messagelist appearance with scrollbar', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
@@ -100,7 +105,7 @@ test('Messagelist appearance with scrollbar', async (t) => {
 
   const items = generateMessages(17, userFirst, userSecond, true, false, 2);
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     items,
     user: userSecond,
     width: 400,
@@ -112,6 +117,9 @@ test('Messagelist appearance with scrollbar', async (t) => {
       component.renderMessage(message);
     },
   });
+
+  const chat = new Chat('#container');
+  await chat.repaint();
 });
 
 test('Messagelist should scrolled to the latest messages after being rendered inside an invisible element', async (t) => {
@@ -133,7 +141,7 @@ test('Messagelist should scrolled to the latest messages after being rendered in
 
   const items = generateMessages(17, userFirst, userSecond, true, false, 2);
 
-  return createWidget('dxTabPanel', {
+  await createWidget('dxTabPanel', {
     width: 400,
     height: 500,
     deferRendering: true,
@@ -145,12 +153,15 @@ test('Messagelist should scrolled to the latest messages after being rendered in
     }, {
       title: 'Tab_2',
       collapsible: true,
-      template: ClientFunction(() => ($('<div>') as any).dxChat({
+      template: ClientFunction(() => ($('<div id="chat">') as any).dxChat({
         items,
         user: userSecond,
       }), { dependencies: { items, userSecond } }),
     }],
   });
+
+  const chat = new Chat('#chat');
+  await chat.repaint();
 });
 
 test('Messagelist with loadindicator appearance on initial loading', async (t) => {
@@ -182,6 +193,9 @@ test('Messagelist with loadindicator appearance on initial loading', async (t) =
       height: 600,
     };
   });
+
+  const chat = new Chat('#container');
+  await chat.repaint();
 });
 
 test('Messagelist with messageTemplate', async (t) => {
@@ -213,7 +227,7 @@ test('Messagelist with messageTemplate', async (t) => {
     text: 'CCC',
   }];
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     items,
     user: userFirst,
     width: 400,
@@ -227,6 +241,9 @@ test('Messagelist with messageTemplate', async (t) => {
       $('<div>').text(`${message.author.name} says: ${message.text}`).appendTo(container);
     },
   });
+
+  const chat = new Chat('#container');
+  await chat.repaint();
 });
 
 test('Messagelist options showDayHeaders, showUserName and showMessageTimestamp set to false work', async (t) => {
@@ -256,7 +273,7 @@ test('Messagelist options showDayHeaders, showUserName and showMessageTimestamp
     text: 'CCC',
   }];
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     items,
     user: userFirst,
     width: 400,
@@ -265,6 +282,9 @@ test('Messagelist options showDayHeaders, showUserName and showMessageTimestamp
     showUserName: false,
     showMessageTimestamp: false,
   });
+
+  const chat = new Chat('#container');
+  await chat.repaint();
 });
 
 fixture`ChatMessageList: dayHeaders`
@@ -314,12 +334,15 @@ test.clientScripts([
     text: 'EEE',
   }];
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     items,
     user: userSecond,
     width: 400,
     height: 600,
   });
+
+  const chat = new Chat('#container');
+  await chat.repaint();
 }).after(async () => {
   await ClientFunction(() => {
     (window as any).MockDate.reset();

diff --git a/e2e/testcafe-devextreme/tests/chat/typingIndicator.ts b/e2e/testcafe-devextreme/tests/chat/typingIndicator.ts
@@ -15,7 +15,6 @@ test('Chat: typing indicator with emptyview', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#container');
-  await chat.repaint();
 
   await testScreenshot(t, takeScreenshot, 'Typing indicator with emptyview.png', {
     element: '#container',
@@ -44,11 +43,14 @@ test('Chat: typing indicator with emptyview', async (t) => {
     { name: 'Elodie Montclair' },
   ];
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     width: 400,
     height: 600,
     typingUsers,
   });
+
+  const chat = new Chat('#container');
+  await chat.repaint();
 });
 
 test('Chat: typing indicator with a lot of items', async (t) => {
@@ -70,13 +72,16 @@ test('Chat: typing indicator with a lot of items', async (t) => {
 
   const typingUsers = [userFirst];
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     user: userSecond,
     width: 400,
     height: 600,
     items,
     typingUsers,
   }, '#chat');
+
+  const chat = new Chat('#chat');
+  await chat.repaint();
 });
 
 test('Chat: typing indicator', async (t) => {
@@ -120,11 +125,14 @@ test('Chat: typing indicator', async (t) => {
 
   const typingUsers = [userFirst];
 
-  return createWidget('dxChat', {
+  await createWidget('dxChat', {
     user: userSecond,
     width: 400,
     height: 600,
     items,
     typingUsers,
   }, '#chat');
+
+  const chat = new Chat('#chat');
+  await chat.repaint();
 });