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" })
);