Fix flaky avatar middleware tests

__tests__/html2/middleware/avatar/backwardCompatibility.html

@@ -24,7 +24,7 @@
       import { createElement } from 'react';
 
       const {
-        testHelpers: { createDirectLineEmulator }
+        testHelpers: { createDirectLineEmulator, preloadImages }
       } = window;
 
       testHelpers.hideKnownError();
@@ -33,6 +33,9 @@
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(async function () {
+        // Decode avatar images before they are rendered, so screenshots are stable.
+        await preloadImages('/assets/bot-avatar.jpg', '/assets/user-avatar.jpg');
+
         const { directLine, store } = createDirectLineEmulator();
 
         const MiddlewareAvatar = ({ activity, children, fromUser }) =>

__tests__/html2/middleware/avatar/legacyAvatarMiddleware/addOrReplace.html

@@ -24,7 +24,7 @@
       import { createElement } from 'react';
 
       const {
-        testHelpers: { createDirectLineEmulator }
+        testHelpers: { createDirectLineEmulator, preloadImages }
       } = window;
 
       testHelpers.hideKnownError();
@@ -33,6 +33,9 @@
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(async function () {
+        // Decode avatar images before they are rendered, so screenshots are stable.
+        await preloadImages('/assets/bot-avatar.jpg', '/assets/user-avatar.jpg');
+
         const { directLine, store } = createDirectLineEmulator();
 
         const MiddlewareAvatar = ({ activity, children, fromUser }) =>

__tests__/html2/middleware/avatar/legacyAvatarMiddleware/changing.html

@@ -24,7 +24,7 @@
       import { createElement } from 'react';
 
       const {
-        testHelpers: { createDirectLineEmulator }
+        testHelpers: { createDirectLineEmulator, preloadImages }
       } = window;
 
       testHelpers.hideKnownError();
@@ -33,6 +33,9 @@
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(async function () {
+        // Decode avatar images before they are rendered, so screenshots are stable.
+        await preloadImages('/assets/bot-avatar.jpg', '/assets/user-avatar.jpg');
+
         const { directLine, store } = createDirectLineEmulator();
 
         const MiddlewareAvatar = ({ activity, children, fromUser }) =>

__tests__/html2/middleware/avatar/legacyAvatarMiddleware/decorate.html

@@ -24,7 +24,7 @@
       import { createElement } from 'react';
 
       const {
-        testHelpers: { createDirectLineEmulator }
+        testHelpers: { createDirectLineEmulator, preloadImages }
       } = window;
 
       testHelpers.hideKnownError();
@@ -33,6 +33,9 @@
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(async function () {
+        // Decode avatar images before they are rendered, so screenshots are stable.
+        await preloadImages('/assets/bot-avatar.jpg', '/assets/user-avatar.jpg');
+
         const { directLine, store } = createDirectLineEmulator();
 
         const MiddlewareAvatar = ({ activity, children, fromUser }) =>

__tests__/html2/middleware/avatar/legacyAvatarMiddleware/styleOptions.html

@@ -24,7 +24,7 @@
       import { createElement } from 'react';
 
       const {
-        testHelpers: { createDirectLineEmulator }
+        testHelpers: { createDirectLineEmulator, preloadImages }
       } = window;
 
       testHelpers.hideKnownError();
@@ -33,6 +33,9 @@
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(async function () {
+        // Decode avatar images before they are rendered, so screenshots are stable.
+        await preloadImages('/assets/bot-avatar.jpg', '/assets/user-avatar.jpg');
+
         const { directLine, store } = createDirectLineEmulator();
 
         const MiddlewareAvatar = ({ activity, children, fromUser, styleOptions }) =>

__tests__/html2/middleware/avatar/polymiddleware/addOrReplace.html

@@ -24,7 +24,7 @@
       import { createElement } from 'react';
 
       const {
-        testHelpers: { createDirectLineEmulator }
+        testHelpers: { createDirectLineEmulator, preloadImages }
       } = window;
 
       testHelpers.hideKnownError();
@@ -33,6 +33,9 @@
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(async function () {
+        // Decode avatar images before they are rendered, so screenshots are stable.
+        await preloadImages('/assets/bot-avatar.jpg', '/assets/user-avatar.jpg');
+
         const { directLine, store } = createDirectLineEmulator();
 
         const PolymiddlewareAvatar = ({ activity, children }) =>

__tests__/html2/middleware/avatar/polymiddleware/changing.html

@@ -24,7 +24,7 @@
       import { createElement } from 'react';
 
       const {
-        testHelpers: { createDirectLineEmulator }
+        testHelpers: { createDirectLineEmulator, preloadImages }
       } = window;
 
       testHelpers.hideKnownError();
@@ -33,6 +33,9 @@
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(async function () {
+        // Decode avatar images before they are rendered, so screenshots are stable.
+        await preloadImages('/assets/bot-avatar.jpg', '/assets/user-avatar.jpg');
+
         const { directLine, store } = createDirectLineEmulator();
 
         const PolymiddlewareAvatar = ({ activity, children }) =>

__tests__/html2/middleware/avatar/polymiddleware/decorate.html

@@ -24,7 +24,7 @@
       import { createElement } from 'react';
 
       const {
-        testHelpers: { createDirectLineEmulator }
+        testHelpers: { createDirectLineEmulator, preloadImages }
       } = window;
 
       testHelpers.hideKnownError();
@@ -33,6 +33,9 @@
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(async function () {
+        // Decode avatar images before they are rendered, so screenshots are stable.
+        await preloadImages('/assets/bot-avatar.jpg', '/assets/user-avatar.jpg');
+
         const { directLine, store } = createDirectLineEmulator();
 
         const PolymiddlewareAvatar = ({ activity, children }) =>

__tests__/html2/middleware/avatar/renderProxy.html

@@ -31,7 +31,7 @@
       import { createRoot } from 'react-dom/client';
 
       const {
-        testHelpers: { createDirectLineEmulator }
+        testHelpers: { createDirectLineEmulator, preloadImages }
       } = window;
 
       testHelpers.hideKnownError();
@@ -40,6 +40,9 @@
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(async function () {
+        // Decode avatar images before they are rendered, so screenshots are stable.
+        await preloadImages('/assets/bot-avatar.jpg', '/assets/user-avatar.jpg');
+
         const { directLine, store } = createDirectLineEmulator();
 
         const MiddlewareAvatar = ({ activity, children, fromUser }) =>

__tests__/html2/middleware/avatar/useBuildRenderAvatarCallback.html

@@ -31,7 +31,7 @@
       import { createRoot } from 'react-dom/client';
 
       const {
-        testHelpers: { createDirectLineEmulator }
+        testHelpers: { createDirectLineEmulator, preloadImages }
       } = window;
 
       testHelpers.hideKnownError();
@@ -40,6 +40,9 @@
       window.WebChat = { createStoreWithOptions, testIds };
 
       run(async function () {
+        // Decode avatar images before they are rendered, so screenshots are stable.
+        await preloadImages('/assets/bot-avatar.jpg', '/assets/user-avatar.jpg');
+
         const { directLine, store } = createDirectLineEmulator();
 
         const MiddlewareAvatar = ({ activity, children, fromUser }) =>

packages/test/page-object/src/globals/testHelpers/index.js

@@ -15,6 +15,7 @@ import getAccessibilityNode from './getAccessibilityNode';
 import getAccessibleName from './getAccessibleName';
 import getAllTextContents from './getAllTextContents';
 import iterateAsyncIterable from './iterateAsyncIterable';
+import preloadImages from './preloadImages';
 import shareObservable from './shareObservable';
 import sleep from './sleep';
 import stringToArrayBuffer from './stringToArrayBuffer';
@@ -37,6 +38,7 @@ export {
   getAccessibleName,
   getAllTextContents,
   iterateAsyncIterable,
+  preloadImages,
   shareObservable,
   sleep,
   speech,

packages/test/page-object/src/globals/testHelpers/preloadImages.js

@@ -0,0 +1,25 @@
+// Keep the images referenced, so the browser keeps them in its list of available images until they are rendered.
+const preloadedImages = new Set();
+
+/**
+ * Loads and decodes images before they are rendered.
+ *
+ * If an image is not available when its element is first painted, the browser repaints the area of the image later.
+ * Anti-aliased edges in that area (e.g. rounded corners and outlines) may come out slightly different from a full paint,
+ * and the screenshot may differ by a few pixels.
+ *
+ * @param {...string} urls - URLs of the images.
+ * @returns {Promise<void>}
+ */
+export default async function preloadImages(...urls) {
+  await Promise.all(
+    urls.map(url => {
+      const image = new Image();
+
+      image.src = url;
+      preloadedImages.add(image);
+
+      return image.decode();
+    })
+  );
+}