fix(tests): Move repaint from before to test

e2e/testcafe-devextreme/tests/chat/alertList.ts

@@ -14,7 +14,9 @@ test.clientScripts([
   { content: 'window.MockDate = MockDate;' },
 ])('Alertlist appearance', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
   const chat = new Chat('#container');
+  await chat.repaint();
 
   await testScreenshot(t, takeScreenshot, 'Alertlist with one error.png', { element: '#container' });
 

e2e/testcafe-devextreme/tests/chat/avatar.ts

@@ -11,9 +11,11 @@ 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 chat.repaint();
+
+  await testScreenshot(t, takeScreenshot, 'Avatar with two word initials.png', { element: '#chat' });
 
   const userFirst = createUser(1, 'First', avatarUrl);
   const userSecond = createUser(2, 'Second', avatarUrl);
@@ -45,6 +47,10 @@ test('Chat: avatar', async (t) => {
 
 test('Chat: showAvatar set to false', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const chat = new Chat('#chat');
+  await chat.repaint();
+
   await testScreenshot(t, takeScreenshot, 'Avatar with showAvatar set to false.png', { element: '#chat' });
 
   await t

e2e/testcafe-devextreme/tests/chat/messageBox.ts

@@ -13,6 +13,8 @@ test('Chat: messagebox', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#chat');
+  await chat.repaint();
+
   const shortText = getShortText();
   const longText = getLongText(false, 5);
 

e2e/testcafe-devextreme/tests/chat/messageBubble.ts

@@ -13,6 +13,7 @@ test('Chat: messagebubble', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#chat');
+  await chat.repaint();
 
   const userFirst = createUser(1, 'First');
   const userSecond = createUser(2, 'Second');

e2e/testcafe-devextreme/tests/chat/messageGroup.ts

@@ -20,6 +20,9 @@ fixture.disablePageReloads`ChatMessageGroup`
 test('Chat: messagegroup, avatar rendering', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
+  const chat = new Chat('#chat');
+  await chat.repaint();
+
   await testScreenshot(t, takeScreenshot, 'Avatar has correct position.png', { element: '#chat' });
 
   await setStyleAttribute(Selector(AVATAR_SELECTOR), 'width: 64px; height: 64px');
@@ -44,6 +47,9 @@ test('Chat: messagegroup, avatar rendering', async (t) => {
 test('Chat: messagegroup, information', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
+  const chat = new Chat('#chat');
+  await chat.repaint();
+
   await testScreenshot(t, takeScreenshot, 'Information row with long user name.png', { element: '#chat' });
 
   await t
@@ -69,6 +75,7 @@ test('Chat: messagegroup, bubbles', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#chat');
+  await chat.repaint();
 
   const userFirst = createUser(1, 'First');
   const userSecond = createUser(2, 'Second');
@@ -126,6 +133,9 @@ test('Messagegroup scenarios in disabled state', async (t) => {
       width: 250,
       height: 400,
     }, chatId);
+
+    const chat = new Chat(chatId);
+    await chat.repaint(); // NOTE: WA to make it stable in Material theme.
   });
 
   await testScreenshot(t, takeScreenshot, 'Messagegroup appearance in disabled state.png', { element: '#container' });

e2e/testcafe-devextreme/tests/chat/messageList.ts

@@ -16,6 +16,7 @@ test('Messagelist empty view scenarios', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#container');
+  await chat.repaint();
 
   await testScreenshot(t, takeScreenshot, 'Messagelist empty state.png', { element: '#container' });
 
@@ -50,6 +51,7 @@ test('Messagelist appearance with scrollbar', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#container');
+  await chat.repaint();
 
   await t
     .hover(chat.messageList)
@@ -118,6 +120,9 @@ test('Messagelist should scrolled to the latest messages after being rendered in
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const tabPanel = new TabPanel('#container');
+  const chat = new Chat('#chat');
+
+  await chat.repaint();
 
   await t
     .click(tabPanel.tabs.getItem(1).element);
@@ -145,7 +150,7 @@ 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 } }),
@@ -185,9 +190,11 @@ test('Messagelist with loadindicator appearance on initial loading', async (t) =
 });
 
 test('Messagelist with messageTemplate', async (t) => {
-  const chat = new Chat('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
+  const chat = new Chat('#container');
+  await chat.repaint();
+
   await testScreenshot(t, takeScreenshot, 'Messagelist with message template.png', { element: '#container' });
 
   await t
@@ -231,6 +238,9 @@ test('Messagelist with messageTemplate', async (t) => {
 
 test('Messagelist options showDayHeaders, showUserName and showMessageTimestamp set to false work', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const chat = new Chat('#container');
+
+  await chat.repaint();
 
   await testScreenshot(
     t,
@@ -275,7 +285,9 @@ test.clientScripts([
   { content: 'window.MockDate = MockDate;' },
 ])('Messagelist with date headers', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const chat = new Chat('#container');
 
+  await chat.repaint();
   await testScreenshot(t, takeScreenshot, 'Messagelist with date headers.png', { element: '#container' });
 
   await t

e2e/testcafe-devextreme/tests/chat/typingIndicator.ts

@@ -54,6 +54,9 @@ test('Chat: typing indicator with emptyview', async (t) => {
 test('Chat: typing indicator with a lot of items', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
+  const chat = new Chat('#chat');
+  await chat.repaint();
+
   await testScreenshot(t, takeScreenshot, 'Typing indicator with a lot of items.png', { element: '#chat' });
 
   await t
@@ -82,9 +85,10 @@ test('Chat: typing indicator with a lot of items', async (t) => {
 test('Chat: typing indicator', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-  await testScreenshot(t, takeScreenshot, 'Typing indicator with 1 user.png', { element: '#chat' });
-
   const chat = new Chat('#chat');
+  await chat.repaint();
+
+  await testScreenshot(t, takeScreenshot, 'Typing indicator with 1 user.png', { element: '#chat' });
 
   const userFirst = createUser(1, 'Camille');
   const userSecond = createUser(2, 'Sophie');