Pad marquee with spaces

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();
+});

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) {

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", () => {

js/components/MainWindow/__snapshots__/index.test.js.snap

@@ -198,6 +198,106 @@ exports[`MainWindow renders to snapshot 1`] = `
         >
           1
         </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
+        <span
+          className=" character character-32"
+        >
+           
+        </span>
       </div>
     </div>
     <div

js/index.js

@@ -176,4 +176,7 @@ Raven.context(() => {
   });
 
   webamp.renderWhenReady(document.getElementById("app"));
+
+  // Expose webamp instance for debugging and integration tests.
+  window.__webamp = webamp;
 });