diff --git a/js/__tests__/__image_snapshots__/baseline-integration-test-js-pads-empty-space-in-the-marquee-with-the-space-character-1-snap.png b/js/__tests__/__image_snapshots__/baseline-integration-test-js-pads-empty-space-in-the-marquee-with-the-space-character-1-snap.png
new file mode 100644
index 00000000..4cd98d9b
Binary files /dev/null and b/js/__tests__/__image_snapshots__/baseline-integration-test-js-pads-empty-space-in-the-marquee-with-the-space-character-1-snap.png differ
diff --git a/js/__tests__/baseline.integration-test.js b/js/__tests__/baseline.integration-test.js
index f1ab7354..b3d7b6d1 100644
--- a/js/__tests__/baseline.integration-test.js
+++ b/js/__tests__/baseline.integration-test.js
@@ -5,19 +5,19 @@ expect.extend({ toMatchImageSnapshot });
// Hack to ensure changing the hash causes a page reload
beforeEach(async () => page.goto(`http://example.com`));
-it("should render the default skin", async () => {
+test("should render the default skin", async () => {
await page.goto(`http://localhost:8080/#{"disableMarquee":true}`);
expect(await page.screenshot()).toMatchImageSnapshot();
});
-it("can 'pose' for a screenshot", async () => {
+test("can 'pose' for a screenshot", async () => {
await page.goto(
`http://localhost:8080/?screenshot=1#{"disableMarquee":true}`
);
expect(await page.screenshot()).toMatchImageSnapshot();
});
-it("can load a skin via the query params", async () => {
+test("can load a skin via the query params", async () => {
await page.goto(
// If this test starts to fail, check that the cache-bust location of the skin has not changed.
`http://localhost:8080/?skinUrl=skins/MacOSXAqua1-5-88dbd4e043795c98625462a908a2d965.wsz#{"disableMarquee":true}`
@@ -25,14 +25,14 @@ it("can load a skin via the query params", async () => {
expect(await page.screenshot()).toMatchImageSnapshot();
});
-it("should render the Topaz skin", async () => {
+test("should render the Topaz skin", async () => {
await page.goto(`http://localhost:8080/#{"disableMarquee":true}`);
expect(page).toUploadFile("#webamp-file-input", "./skins/TopazAmp1-2.wsz");
await new Promise(resolve => setTimeout(resolve, 200));
expect(await page.screenshot()).toMatchImageSnapshot();
});
-it("should render a skin that defines transparent regions", async () => {
+test("should render a skin that defines transparent regions", async () => {
await page.goto(`http://localhost:8080/#{"disableMarquee":true}`);
expect(page).toUploadFile(
"#webamp-file-input",
@@ -42,9 +42,20 @@ it("should render a skin that defines transparent regions", async () => {
expect(await page.screenshot()).toMatchImageSnapshot();
});
-it("uses the volume spirtes as a fallback when balance spirtes are missing", async () => {
+test("uses the volume spirtes as a fallback when balance spirtes are missing", async () => {
await page.goto(`http://localhost:8080/#{"disableMarquee":true}`);
expect(page).toUploadFile("#webamp-file-input", "./skins/AmigaPPC-dark.wsz");
await new Promise(resolve => setTimeout(resolve, 200));
expect(await page.screenshot()).toMatchImageSnapshot();
});
+
+test("pads empty space in the marquee with the space character", async () => {
+ await page.goto(`http://localhost:8080/#{"disableMarquee":true}`);
+ // This skin has noticeable light blue where it expects the marquee to always cover.
+ expect(page).toUploadFile("#webamp-file-input", "./skins/Sonic_Attitude.wsz");
+ await new Promise(resolve => setTimeout(resolve, 200));
+ await page.evaluate(() =>
+ window.__webamp.store.dispatch({ type: "SET_FOCUS", input: "balance" })
+ );
+ expect(await page.screenshot()).toMatchImageSnapshot();
+});
diff --git a/js/components/MainWindow/Marquee.js b/js/components/MainWindow/Marquee.js
index 8f2d265a..91c6d6c9 100644
--- a/js/components/MainWindow/Marquee.js
+++ b/js/components/MainWindow/Marquee.js
@@ -10,6 +10,7 @@ import CharacterString from "../CharacterString";
import { getMediaText } from "../../selectors";
const CHAR_WIDTH = 5;
+const MARQUEE_MAX_LENGTH = 31;
// Always positive modulus
export const mod = (n, m) => ((n % m) + m) % m;
@@ -47,7 +48,7 @@ export const getEqText = (band, level) => {
return `EQ: ${label} ${ensureSign(db)} DB`;
};
-const isLong = text => text.length > 30;
+const isLong = text => text.length >= MARQUEE_MAX_LENGTH;
// Given text and step, how many pixels should it be shifted?
export const stepOffset = (text, step, pixels) => {
@@ -66,7 +67,8 @@ export const stepOffset = (text, step, pixels) => {
export const pixelUnits = pixels => `${pixels}px`;
// If text is wider than the marquee, it needs to loop
-export const loopText = text => (isLong(text) ? text + text : text);
+export const loopText = text =>
+ isLong(text) ? text + text : text.padEnd(MARQUEE_MAX_LENGTH, " ");
class Marquee extends React.Component {
constructor(props) {
diff --git a/js/components/MainWindow/Marquee.test.js b/js/components/MainWindow/Marquee.test.js
index 61711a14..96b8f47a 100644
--- a/js/components/MainWindow/Marquee.test.js
+++ b/js/components/MainWindow/Marquee.test.js
@@ -117,7 +117,11 @@ describe("loopText", () => {
it("does not loop sort strings", () => {
const actual = loopText(short);
const expected = short;
- expect(actual).toEqual(expected);
+ expect(actual.trim()).toEqual(expected);
+ });
+ it("pads a sort strings", () => {
+ const actual = loopText(short);
+ expect(actual.length).toBe(31);
});
});
describe("getDoubleSizeModeText", () => {
diff --git a/js/components/MainWindow/__snapshots__/index.test.js.snap b/js/components/MainWindow/__snapshots__/index.test.js.snap
index 1e17af5d..d0d69725 100644
--- a/js/components/MainWindow/__snapshots__/index.test.js.snap
+++ b/js/components/MainWindow/__snapshots__/index.test.js.snap
@@ -198,6 +198,106 @@ exports[`MainWindow renders to snapshot 1`] = `
>
1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
});
webamp.renderWhenReady(document.getElementById("app"));
+
+ // Expose webamp instance for debugging and integration tests.
+ window.__webamp = webamp;
});
diff --git a/skins/Sonic_Attitude.wsz b/skins/Sonic_Attitude.wsz
new file mode 100644
index 00000000..a5d5c19a
Binary files /dev/null and b/skins/Sonic_Attitude.wsz differ