Chat: Make screenshot test stable

DevExpress · Dec 10, 2024 · f61f89a · f61f89a
1 parent 733a755
commit f61f89a
Show file tree

Hide file tree

Showing 7 changed files with 253 additions and 43 deletions.
diff --git a/e2e/testcafe-devextreme/tests/chat/alertList.ts b/e2e/testcafe-devextreme/tests/chat/alertList.ts
@@ -16,7 +16,12 @@ test.clientScripts([
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const chat = new Chat('#container');
 
-  await testScreenshot(t, takeScreenshot, 'Alertlist with one error.png', { element: '#container' });
+  await testScreenshot(t, takeScreenshot, 'Alertlist with one error.png', {
+    element: '#container',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await chat.option('alerts', [
     { id: 1, message: 'Error Message 1. Error Description...' },
@@ -30,6 +35,9 @@ test.clientScripts([
     compactCallBack: async () => {
       await chat.repaint();
     },
+    themeChanged: async () => {
+      await chat.repaint();
+    },
   });
 
   const darkTheme = getFullThemeName().replace('light', 'dark');
@@ -43,7 +51,12 @@ test.clientScripts([
 
   await chat.option('rtlEnabled', true);
 
-  await testScreenshot(t, takeScreenshot, 'Alertlist appearance in RTL mode.png', { element: '#container' });
+  await testScreenshot(t, takeScreenshot, 'Alertlist appearance in RTL mode.png', {
+    element: '#container',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await t
     .expect(compareResults.isValid())

diff --git a/e2e/testcafe-devextreme/tests/chat/avatar.ts b/e2e/testcafe-devextreme/tests/chat/avatar.ts
@@ -11,18 +11,28 @@ fixture.disablePageReloads`ChatAvatar`
 
 test('Chat: avatar', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  await testScreenshot(t, takeScreenshot, 'Avatar with two word initials.png', { element: '#chat' });
-
   const chat = new Chat('#chat');
 
+  await testScreenshot(t, takeScreenshot, 'Avatar with two word initials.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
+
   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 testScreenshot(t, takeScreenshot, 'Avatar with image.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await t
     .expect(compareResults.isValid())
@@ -45,7 +55,14 @@ test('Chat: avatar', async (t) => {
 
 test('Chat: showAvatar set to false', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  await testScreenshot(t, takeScreenshot, 'Avatar with showAvatar set to false.png', { element: '#chat' });
+  const chat = new Chat('#chat');
+
+  await testScreenshot(t, takeScreenshot, 'Avatar with showAvatar set to false.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await t
     .expect(compareResults.isValid())

diff --git a/e2e/testcafe-devextreme/tests/chat/messageBox.ts b/e2e/testcafe-devextreme/tests/chat/messageBox.ts
@@ -17,16 +17,36 @@ test('Chat: messagebox', async (t) => {
   const longText = getLongText(false, 5);
 
   await chat.focus();
-  await testScreenshot(t, takeScreenshot, 'Messagebox when chat has focus.png', { element: '#chat' });
+  await testScreenshot(t, takeScreenshot, 'Messagebox when chat has focus.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await t.typeText(chat.getInput(), shortText);
-  await testScreenshot(t, takeScreenshot, 'Messagebox when input contains short text.png', { element: '#chat' });
+  await testScreenshot(t, takeScreenshot, 'Messagebox when input contains short text.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await t.typeText(chat.getInput(), longText);
-  await testScreenshot(t, takeScreenshot, 'Messagebox when input contains long text.png', { element: '#chat' });
+  await testScreenshot(t, takeScreenshot, 'Messagebox when input contains long text.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await t.pressKey('tab');
-  await testScreenshot(t, takeScreenshot, 'Messagebox when send button has focus.png', { element: '#chat' });
+  await testScreenshot(t, takeScreenshot, 'Messagebox when send button has focus.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await t
     .expect(compareResults.isValid())

diff --git a/e2e/testcafe-devextreme/tests/chat/messageBubble.ts b/e2e/testcafe-devextreme/tests/chat/messageBubble.ts
@@ -20,12 +20,22 @@ test('Chat: messagebubble', async (t) => {
   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' });
+  await testScreenshot(t, takeScreenshot, 'Bubbles with long text.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   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 testScreenshot(t, takeScreenshot, 'Bubbles with long text with line breaks.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await t
     .expect(compareResults.isValid())

diff --git a/e2e/testcafe-devextreme/tests/chat/messageGroup.ts b/e2e/testcafe-devextreme/tests/chat/messageGroup.ts
@@ -19,11 +19,22 @@ fixture.disablePageReloads`ChatMessageGroup`
 
 test('Chat: messagegroup, avatar rendering', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const chat = new Chat('#chat');
 
-  await testScreenshot(t, takeScreenshot, 'Avatar has correct position.png', { element: '#chat' });
+  await testScreenshot(t, takeScreenshot, 'Avatar has correct position.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await setStyleAttribute(Selector(AVATAR_SELECTOR), 'width: 64px; height: 64px');
-  await testScreenshot(t, takeScreenshot, 'Avatar sizes do not affect indentation between bubbles.png', { element: '#chat' });
+  await testScreenshot(t, takeScreenshot, 'Avatar sizes do not affect indentation between bubbles.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await t
     .expect(compareResults.isValid())
@@ -43,8 +54,14 @@ test('Chat: messagegroup, avatar rendering', async (t) => {
 
 test('Chat: messagegroup, information', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const chat = new Chat('#chat');
 
-  await testScreenshot(t, takeScreenshot, 'Information row with long user name.png', { element: '#chat' });
+  await testScreenshot(t, takeScreenshot, 'Information row with long user name.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await t
     .expect(compareResults.isValid())
@@ -76,22 +93,42 @@ test('Chat: messagegroup, bubbles', async (t) => {
   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' });
+  await testScreenshot(t, takeScreenshot, 'Messagegroup with 1 bubble.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   items = generateMessages(2, userFirst, userSecond, false, false, 4, 2);
 
   await chat.option({ items });
-  await testScreenshot(t, takeScreenshot, 'Messagegroup with 2 bubbles.png', { element: '#chat' });
+  await testScreenshot(t, takeScreenshot, 'Messagegroup with 2 bubbles.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   items = generateMessages(3, userFirst, userSecond, false, false, 4, 2);
 
   await chat.option({ items });
-  await testScreenshot(t, takeScreenshot, 'Messagegroup with 3 bubbles.png', { element: '#chat' });
+  await testScreenshot(t, takeScreenshot, 'Messagegroup with 3 bubbles.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   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 testScreenshot(t, takeScreenshot, 'Messagegroup with 4 bubbles.png', {
+    element: '#chat',
+    themeChanged: async () => {
+      await chat.repaint();
+    },
+  });
 
   await t
     .expect(compareResults.isValid())
@@ -126,6 +163,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' });