Ensure we always wait for icons to load in tests

This commit is contained in:
Jordan Eldredge 2021-11-20 21:44:35 -08:00
parent b616989eda
commit d4ccbf547f
2 changed files with 34 additions and 0 deletions

View file

@ -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,

View file

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