diff --git a/packages/webamp/demo/js/DemoDesktop.tsx b/packages/webamp/demo/js/DemoDesktop.tsx index 47f7c565..386f72b1 100644 --- a/packages/webamp/demo/js/DemoDesktop.tsx +++ b/packages/webamp/demo/js/DemoDesktop.tsx @@ -86,6 +86,7 @@ const DemoDesktop = ({ webamp, soundCloudPlaylist }: Props) => { const column = i % columns; return (
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,6 +136,9 @@ 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); }); @@ -116,6 +146,9 @@ test("can render skins that have forward slash in filename", async () => { 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" }) );