Ensure we always wait for icons to load in tests

Author: captbaritone

packages/webamp/demo/js/DemoDesktop.tsx

@@ -86,6 +86,7 @@ const DemoDesktop = ({ webamp, soundCloudPlaylist }: Props) => {
           const column = i % columns;
           return (
             <div
+              className="loaded-icon"
               key={i}
               style={{
                 left: column * ICON_WIDTH,

packages/webamp/js/__tests__/baseline.integration-test.js

@@ -18,6 +18,9 @@ beforeEach(async () => page.goto(`http://example.com`));
 
 test("should render the default skin", async () => {
   await page.goto(`${DOMAIN}/#{"disableMarquee":true}`);
+  await page.evaluate(
+    () => document.getElementsByClassName("loaded-icon").length > 0
+  );
   expect(await page.screenshot()).toMatchImageSnapshot(snapshotOptions);
 });
 
@@ -31,12 +34,18 @@ test("can load a skin via the query params", async () => {
     // If this test starts to fail, check that the cache-bust location of the skin has not changed.
     `${DOMAIN}/?skinUrl=/skins/MacOSXAqua1-5-88dbd4e043795c98625462a908a2d965.wsz#{"disableMarquee":true}`
   );
+  await page.evaluate(
+    () => document.getElementsByClassName("loaded-icon").length > 0
+  );
   await page.evaluate(() => window.__webamp.skinIsLoaded());
   expect(await page.screenshot()).toMatchImageSnapshot(snapshotOptions);
 });
 
 test("can set a background color via the query params", async () => {
   await page.goto(`${DOMAIN}/?bg=%23ff0000#{"disableMarquee":true}`);
+  await page.evaluate(
+    () => document.getElementsByClassName("loaded-icon").length > 0
+  );
   await page.evaluate(() => window.__webamp.skinIsLoaded());
   expect(await page.screenshot()).toMatchImageSnapshot(snapshotOptions);
 });
@@ -45,6 +54,9 @@ test("can set a background color via the query params", async () => {
 test.skip("can set soundcloud playlist via the query params", async () => {
   // If this test starts to fail, it might be flakyiness coming from the SoundCloud API, or that Poolside FM has changed their playlist.
   await page.goto(`${DOMAIN}/?scPlaylist=1040356177#{"disableMarquee":true}`);
+  await page.evaluate(
+    () => document.getElementsByClassName("loaded-icon").length > 0
+  );
   await page.evaluate(() => window.__webamp.skinIsLoaded());
   expect(await page.screenshot()).toMatchImageSnapshot(snapshotOptions);
 });
@@ -55,6 +67,9 @@ test("should render the Topaz skin", async () => {
     "#webamp-file-input",
     path.join(__dirname, "../../demo/skins/TopazAmp1-2.wsz")
   );
+  await page.evaluate(
+    () => document.getElementsByClassName("loaded-icon").length > 0
+  );
   await page.evaluate(() => window.__webamp.skinIsLoaded());
   expect(await page.screenshot()).toMatchImageSnapshot(snapshotOptions);
 });
@@ -65,6 +80,9 @@ test("should render a skin that defines transparent regions", async () => {
     "#webamp-file-input",
     path.join(__dirname, "../../demo/skins/Green-Dimension-V2.wsz")
   );
+  await page.evaluate(
+    () => document.getElementsByClassName("loaded-icon").length > 0
+  );
   await page.evaluate(() => window.__webamp.skinIsLoaded());
   expect(await page.screenshot()).toMatchImageSnapshot(snapshotOptions);
 });
@@ -75,6 +93,9 @@ test("should render a skin that has files that only differ by case: main.bmp and
     "#webamp-file-input",
     path.join(__dirname, "../../demo/skins/My_Funny_Valentine.wsz")
   );
+  await page.evaluate(
+    () => document.getElementsByClassName("loaded-icon").length > 0
+  );
   await page.evaluate(() => window.__webamp.skinIsLoaded());
   expect(await page.screenshot()).toMatchImageSnapshot(snapshotOptions);
 });
@@ -85,6 +106,9 @@ test("uses the volume spirtes as a fallback when balance spirtes are missing", a
     "#webamp-file-input",
     path.join(__dirname, "../../demo/skins/AmigaPPC-dark.wsz")
   );
+  await page.evaluate(
+    () => document.getElementsByClassName("loaded-icon").length > 0
+  );
   await page.evaluate(() => window.__webamp.skinIsLoaded());
   expect(await page.screenshot()).toMatchImageSnapshot(snapshotOptions);
 });
@@ -96,6 +120,9 @@ test("pads empty space in the marquee with the space character", async () => {
     "#webamp-file-input",
     path.join(__dirname, "../../demo/skins/Sonic_Attitude.wsz")
   );
+  await page.evaluate(
+    () => document.getElementsByClassName("loaded-icon").length > 0
+  );
   await page.evaluate(() => window.__webamp.skinIsLoaded());
   await page.evaluate(() =>
     window.__webamp.store.dispatch({ type: "SET_FOCUS", input: "balance" })
@@ -109,13 +136,19 @@ test("can render skins that have forward slash in filename", async () => {
     "#webamp-file-input",
     path.join(__dirname, "../../demo/skins/rei_1.wsz")
   );
+  await page.evaluate(
+    () => document.getElementsByClassName("loaded-icon").length > 0
+  );
   await page.evaluate(() => window.__webamp.skinIsLoaded());
   expect(await page.screenshot()).toMatchImageSnapshot(snapshotOptions);
 });
 
 test("closing winamp shows the icon", async () => {
   await page.goto(`${DOMAIN}/#{"disableMarquee":true}`);
   await page.evaluate(() => window.__webamp.skinIsLoaded());
+  await page.evaluate(
+    () => document.getElementsByClassName("loaded-icon").length > 0
+  );
   await page.evaluate(() =>
     window.__webamp.store.dispatch({ type: "CLOSE_WINAMP" })
   );