@robotical/martyblocksjr 4.1.2 → 4.2.1

package/tests/e2e/project-save-stall.e2e.test.js

@@ -0,0 +1,230 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import puppeteer from "puppeteer";
+import { spawn } from "child_process";
+import http from "http";
+
+const PORT = 3015;
+const HOST = `http://localhost:${PORT}`;
+const BLOCK_TYPE = "back";
+
+let server;
+
+async function waitForServer(maxAttempts = 20) {
+  for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
+    const ok = await new Promise((resolve) => {
+      const req = http.get(`${HOST}/`, (res) => {
+        res.destroy();
+        resolve(true);
+      });
+      req.on("error", () => resolve(false));
+    });
+    if (ok) {
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+  throw new Error("Local server did not start in time");
+}
+
+beforeAll(async () => {
+  server = spawn("python3", ["-m", "http.server", `${PORT}`, "--directory", "editions/free/src"], {
+    stdio: "ignore",
+  });
+  await waitForServer();
+}, 30_000);
+
+afterAll(() => {
+  if (server) {
+    server.kill();
+  }
+});
+
+async function openPage(pathname) {
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ["--no-sandbox"],
+  });
+  const page = await browser.newPage();
+  const errors = [];
+
+  page.on("pageerror", (err) => errors.push(err.message || String(err)));
+  page.on("console", (msg) => {
+    if (msg.type() === "error") {
+      errors.push(msg.text());
+    }
+  });
+
+  await page.goto(`${HOST}${pathname}`, { waitUntil: "networkidle2", timeout: 30_000 });
+
+  return { browser, page, errors };
+}
+
+async function createProjectFromHome(page) {
+  await page.waitForSelector("#newproject .card-action-open", { timeout: 30_000 });
+  await Promise.all([
+    page.waitForNavigation({ waitUntil: "networkidle2", timeout: 30_000 }),
+    page.click("#newproject .card-action-open"),
+  ]);
+  await waitForEditorReady(page);
+  return page.evaluate(() => window.ScratchJr.currentProject);
+}
+
+async function waitForEditorReady(page, timeout = 30_000) {
+  await page.waitForFunction(
+    () => {
+      const backdrop = document.getElementById("backdrop");
+      return Boolean(
+        window.ScratchJr
+          && window.ScratchJr.stage
+          && window.ScratchJr.stage.currentPage
+          && document.getElementById("sprite-motion")
+          && backdrop
+          && window.getComputedStyle(backdrop).display === "none"
+          && !window.ScratchJr.onHold
+          && window.ScratchJr.getActiveScript()
+      );
+    },
+    { timeout }
+  );
+}
+
+async function insertMotionBlock(page, blockType = BLOCK_TYPE) {
+  await page.click("#sprite-motion");
+  await page.waitForFunction(
+    (type) => Boolean(document.querySelector(`#palette [data-blocktype="${type}"]`)),
+    { timeout: 30_000 },
+    blockType
+  );
+
+  await page.evaluate((type) => {
+    const blockElement = document.querySelector(`#palette [data-blocktype="${type}"]`);
+    window.Palette.insertBlockFromKeyboard(blockElement, new Event("project-save-stall-test"));
+  }, blockType);
+
+  await page.waitForFunction(
+    (type) => window.ScratchJr.getBlocks().some((block) => block.blocktype === type),
+    { timeout: 30_000 },
+    blockType
+  );
+}
+
+async function interruptNextThumbnailSave(page) {
+  await page.evaluate(() => {
+    const originalSetMediaName = window.OS.setmedianame;
+    window.__projectSaveStallTest = {
+      droppedThumbnailSave: false,
+      restore() {
+        window.OS.setmedianame = originalSetMediaName;
+      },
+    };
+    window.OS.setmedianame = function (str, name, ext, callback) {
+      if (!window.__projectSaveStallTest.droppedThumbnailSave && ext === "png") {
+        window.__projectSaveStallTest.droppedThumbnailSave = true;
+        return undefined;
+      }
+      return originalSetMediaName.call(this, str, name, ext, callback);
+    };
+  });
+}
+
+async function restoreThumbnailSave(page) {
+  await page.evaluate(() => {
+    if (window.__projectSaveStallTest) {
+      window.__projectSaveStallTest.restore();
+    }
+  });
+}
+
+async function saveProjectWithTimeout(page, timeoutMs = 4_000) {
+  return page.evaluate((timeout) => new Promise((resolve) => {
+    let settled = false;
+    window.ScratchJr.changed = true;
+    window.ScratchJr.saveProject(null, () => {
+      if (!settled) {
+        settled = true;
+        resolve(true);
+      }
+    });
+    window.setTimeout(() => {
+      if (!settled) {
+        settled = true;
+        resolve(false);
+      }
+    }, timeout);
+  }), timeoutMs);
+}
+
+async function waitForPersistedProject(page, projectId, predicate) {
+  const startedAt = Date.now();
+  let lastProject = null;
+
+  while (Date.now() - startedAt < 15_000) {
+    lastProject = await readPersistedProject(page, projectId);
+    if (lastProject && predicate(lastProject)) {
+      return lastProject;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  }
+
+  throw new Error(`Timed out waiting for saved project state. Last project: ${JSON.stringify(lastProject)}`);
+}
+
+async function readPersistedProject(page, projectId) {
+  return page.evaluate((id) => new Promise((resolve) => {
+    window.OS.query(
+      { stmt: "select * from projects where id = ?", values: [Number(id)] },
+      (result) => {
+        const rows = JSON.parse(result);
+        if (!rows.length) {
+          resolve(null);
+          return;
+        }
+        const row = Object.fromEntries(Object.entries(rows[0]).map(([key, value]) => [key.toLowerCase(), value]));
+        resolve(typeof row.json === "string" ? JSON.parse(row.json) : row.json);
+      }
+    );
+  }), projectId);
+}
+
+function projectHasBlock(project, blockType) {
+  if (!project || !Array.isArray(project.pages)) {
+    return false;
+  }
+  return project.pages.some((pageId) => {
+    const page = project[pageId];
+    return page && Array.isArray(page.sprites) && page.sprites.some((spriteId) => {
+      const sprite = page[spriteId];
+      return sprite && Array.isArray(sprite.scripts) && sprite.scripts.some((strip) => {
+        return Array.isArray(strip) && strip.some((block) => Array.isArray(block) && block[0] === blockType);
+      });
+    });
+  });
+}
+
+describe("project save stall reproduction", () => {
+  it.fails(
+    "recovers local save/autosave after one interrupted thumbnail save",
+    async () => {
+      const { browser, page, errors } = await openPage("/home.html?place=home");
+
+      try {
+        const projectId = await createProjectFromHome(page);
+        await insertMotionBlock(page);
+
+        await interruptNextThumbnailSave(page);
+        const interruptedSaveCompleted = await saveProjectWithTimeout(page, 1_500);
+        expect(interruptedSaveCompleted).toBe(false);
+
+        await restoreThumbnailSave(page);
+        const recoveredSaveCompleted = await saveProjectWithTimeout(page, 4_000);
+
+        expect(recoveredSaveCompleted).toBe(true);
+        await waitForPersistedProject(page, projectId, (project) => projectHasBlock(project, BLOCK_TYPE));
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    120_000
+  );
+});

package/tests/e2e/sprite-watermark-grayscale.e2e.test.js

@@ -0,0 +1,269 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import puppeteer from "puppeteer";
+import { spawn } from "child_process";
+import http from "http";
+
+const PORT = 3015;
+const HOST = `http://localhost:${PORT}`;
+const AFFECTED_SPRITES = [
+  { name: "Pink Octopus", md5: "Sprites_Octopus-Pink.svg" },
+  { name: "Raccoon", md5: "Sprites_Raccoon.svg" },
+  { name: "Unicorn", md5: "Sprites_Unicorn.svg" },
+];
+const LEGACY_SPRITES = [
+  { name: "Dog", md5: "Dog.svg", expectsGrayscale: false },
+  { name: "Marty", md5: "Sprites_Marty.svg", expectsGrayscale: false },
+  { name: "Bee", md5: "BeeSprite1.svg", expectsGrayscale: true },
+];
+
+let server;
+
+async function waitForServer(maxAttempts = 20) {
+  for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
+    const ok = await new Promise((resolve) => {
+      const req = http.get(`${HOST}/`, (res) => {
+        res.destroy();
+        resolve(true);
+      });
+      req.on("error", () => resolve(false));
+    });
+    if (ok) {
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+  throw new Error("Local server did not start in time");
+}
+
+beforeAll(async () => {
+  server = spawn("python3", ["-m", "http.server", `${PORT}`, "--directory", "editions/free/src"], {
+    stdio: "ignore",
+  });
+  await waitForServer();
+}, 30_000);
+
+afterAll(() => {
+  if (server) {
+    server.kill();
+  }
+});
+
+async function openEditor() {
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ["--no-sandbox"],
+  });
+  const page = await browser.newPage();
+  const errors = [];
+
+  page.on("pageerror", (err) => errors.push(err.message || String(err)));
+  page.on("console", (msg) => {
+    if (msg.type() === "error") {
+      errors.push(msg.text());
+    }
+  });
+
+  await page.goto(`${HOST}/editor.html?mode=edit`, { waitUntil: "networkidle2", timeout: 30_000 });
+  await waitForEditorReady(page);
+
+  return { browser, page, errors };
+}
+
+async function waitForEditorReady(page) {
+  await page.waitForFunction(
+    () => {
+      const backdrop = document.getElementById("backdrop");
+      return Boolean(
+        window.ScratchJr
+          && window.ScratchJr.stage
+          && window.ScratchJr.stage.currentPage
+          && document.querySelector(".watermark")
+          && backdrop
+          && window.getComputedStyle(backdrop).display === "none"
+          && !window.ScratchJr.onHold
+          && window.ScratchJr.getActiveScript()
+      );
+    },
+    { timeout: 30_000 }
+  );
+}
+
+async function addSpriteAndWait(page, sprite) {
+  await page.evaluate((spriteMd5, spriteName) => {
+    window.ScratchJr.stage.currentPage.addSprite(0.5, spriteMd5, spriteName);
+  }, sprite.md5, sprite.name);
+
+  await page.waitForFunction(
+    (spriteMd5) => {
+      const activeSprite = window.ScratchJr && window.ScratchJr.getSprite();
+      const watermark = document.querySelector(".watermark img");
+      return Boolean(
+        activeSprite
+          && activeSprite.md5 === spriteMd5
+          && watermark
+          && watermark.complete
+          && (watermark.naturalWidth > 0 || watermark.width > 0)
+      );
+    },
+    { timeout: 30_000 },
+    sprite.md5
+  );
+}
+
+async function measureGrayscaleMatch(page, sprite) {
+  return page.evaluate(async (spriteName, spriteMd5) => {
+    const watermark = document.querySelector(".watermark img");
+    if (watermark.decode) {
+      try {
+        await watermark.decode();
+      } catch (err) {
+        // Some SVG data URLs report as already usable even when decode rejects.
+      }
+    }
+
+    const original = new Image();
+    original.src = `/svglibrary/${spriteMd5}`;
+    await original.decode();
+
+    const width = original.naturalWidth;
+    const height = original.naturalHeight;
+    const filter = window.getComputedStyle(watermark).filter;
+
+    const renderPixels = (image, imageFilter) => {
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext("2d");
+      ctx.filter = imageFilter;
+      ctx.drawImage(image, 0, 0, width, height);
+      return ctx.getImageData(0, 0, width, height).data;
+    };
+
+    const actualPixels = renderPixels(watermark, filter);
+    const expectedPixels = renderPixels(original, "grayscale(1)");
+    let comparedPixels = 0;
+    let differentPixels = 0;
+    let totalChannelDifference = 0;
+    let maxChannelDifference = 0;
+    let opaquePixels = 0;
+    let coloredPixels = 0;
+
+    for (let i = 0; i < actualPixels.length; i += 4) {
+      if (actualPixels[i + 3] <= 20 && expectedPixels[i + 3] <= 20) {
+        continue;
+      }
+
+      comparedPixels += 1;
+      let pixelDifference = 0;
+      for (let channel = 0; channel < 4; channel += 1) {
+        const difference = Math.abs(actualPixels[i + channel] - expectedPixels[i + channel]);
+        totalChannelDifference += difference;
+        pixelDifference = Math.max(pixelDifference, difference);
+        maxChannelDifference = Math.max(maxChannelDifference, difference);
+      }
+      if (pixelDifference > 2) {
+        differentPixels += 1;
+      }
+
+      if (actualPixels[i + 3] > 20) {
+        opaquePixels += 1;
+        const highestChannel = Math.max(actualPixels[i], actualPixels[i + 1], actualPixels[i + 2]);
+        const lowestChannel = Math.min(actualPixels[i], actualPixels[i + 1], actualPixels[i + 2]);
+        if (highestChannel - lowestChannel > 2) {
+          coloredPixels += 1;
+        }
+      }
+    }
+
+    return {
+      name: spriteName,
+      md5: spriteMd5,
+      width,
+      height,
+      filter,
+      opaquePixels,
+      meanChannelDifference: comparedPixels === 0 ? 0 : totalChannelDifference / (comparedPixels * 4),
+      differentPixelRatio: comparedPixels === 0 ? 0 : differentPixels / comparedPixels,
+      maxChannelDifference,
+      coloredPixelRatio: opaquePixels === 0 ? 0 : coloredPixels / opaquePixels,
+    };
+  }, sprite.name, sprite.md5);
+}
+
+async function getLegacyWatermarkState(page, sprite) {
+  return page.evaluate((spriteName, spriteMd5) => {
+    const activeSprite = window.ScratchJr.getSprite();
+    const watermark = document.querySelector(".watermark img");
+    const legacyWatermark = activeSprite.getSVGimage(activeSprite.watermark);
+    const sourceWatermark = activeSprite.getSVGimage(activeSprite.svg);
+
+    return {
+      name: spriteName,
+      md5: spriteMd5,
+      filter: window.getComputedStyle(watermark).filter,
+      usesLegacySource: watermark.src === legacyWatermark.src,
+      usesOriginalSource: watermark.src === sourceWatermark.src,
+    };
+  }, sprite.name, sprite.md5);
+}
+
+describe("sprite scripts watermark grayscale rendering", () => {
+  it(
+    "renders affected sprite watermarks from their source SVG in grayscale",
+    async () => {
+      const { browser, page, errors } = await openEditor();
+
+      try {
+        const metrics = [];
+        for (const sprite of AFFECTED_SPRITES) {
+          await addSpriteAndWait(page, sprite);
+          metrics.push(await measureGrayscaleMatch(page, sprite));
+        }
+
+        for (const metric of metrics) {
+          expect(metric.filter).toContain("grayscale");
+          expect(metric.opaquePixels).toBeGreaterThan(0);
+          expect(metric.meanChannelDifference).toBeLessThan(0.5);
+          expect(metric.differentPixelRatio).toBeLessThan(0.01);
+          expect(metric.coloredPixelRatio).toBeLessThan(0.01);
+        }
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    60_000
+  );
+
+  it(
+    "preserves the legacy watermark path for existing sprites",
+    async () => {
+      const { browser, page, errors } = await openEditor();
+
+      try {
+        const states = [];
+        for (const sprite of LEGACY_SPRITES) {
+          await addSpriteAndWait(page, sprite);
+          states.push({
+            ...await getLegacyWatermarkState(page, sprite),
+            expectsGrayscale: sprite.expectsGrayscale,
+          });
+        }
+
+        for (const state of states) {
+          if (state.expectsGrayscale) {
+            expect(state.filter).toContain("grayscale");
+          } else {
+            expect(state.filter).toBe("none");
+          }
+          expect(state.usesLegacySource).toBe(true);
+          expect(state.usesOriginalSource).toBe(false);
+        }
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    60_000
+  );
+});

package/tests/e2e/top-toolbar-tooltips.e2e.test.js

@@ -0,0 +1,152 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import puppeteer from "puppeteer";
+import { spawn } from "child_process";
+import http from "http";
+
+const PORT = 3013;
+const HOST = `http://localhost:${PORT}`;
+
+const TOP_TOOLBAR_BUTTON_IDS = [
+  "full",
+  "grid",
+  "traceBtn",
+  "traceClear",
+  "setbkg",
+  "addtext",
+  "resetall",
+  "go",
+];
+
+let server;
+
+async function waitForServer(maxAttempts = 20) {
+  for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
+    const ok = await new Promise((resolve) => {
+      const req = http.get(`${HOST}/`, (res) => {
+        res.destroy();
+        resolve(true);
+      });
+      req.on("error", () => resolve(false));
+    });
+    if (ok) {
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+  throw new Error("Local server did not start in time");
+}
+
+beforeAll(async () => {
+  server = spawn("python3", ["-m", "http.server", `${PORT}`, "--directory", "editions/free/src"], {
+    stdio: "ignore",
+  });
+  await waitForServer();
+}, 30_000);
+
+afterAll(() => {
+  if (server) {
+    server.kill();
+  }
+});
+
+async function openEditor() {
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ["--no-sandbox"],
+  });
+  const page = await browser.newPage();
+  const errors = [];
+
+  page.on("pageerror", (err) => errors.push(err.message || String(err)));
+  page.on("console", (msg) => {
+    if (msg.type() === "error") {
+      errors.push(msg.text());
+    }
+  });
+
+  await page.goto(`${HOST}/editor.html?mode=edit`, { waitUntil: "networkidle2", timeout: 30_000 });
+
+  return { browser, page, errors };
+}
+
+describe("top toolbar tooltips", () => {
+  it(
+    "renders bounded app-owned tooltips for hover and keyboard focus",
+    async () => {
+      const { browser, page, errors } = await openEditor();
+
+      try {
+        await page.waitForSelector("#stageframe", { timeout: 30_000 });
+        await page.waitForFunction(
+          (buttonIds) =>
+            buttonIds.every((id) => {
+              const button = document.getElementById(id);
+              return button && button.tagName === "BUTTON" && button.getAttribute("aria-label");
+            }),
+          { timeout: 30_000 },
+          TOP_TOOLBAR_BUTTON_IDS
+        );
+
+        const invalidTooltips = await page.evaluate((buttonIds) => {
+          return buttonIds
+            .map((id) => {
+              const button = document.getElementById(id);
+              const label = button.getAttribute("aria-label") || "";
+              return {
+                id,
+                ariaLabel: label,
+                nativeTitle: button.getAttribute("title"),
+                tooltip: button.getAttribute("data-tooltip") || "",
+              };
+            })
+            .filter(
+              (button) =>
+                button.nativeTitle !== null ||
+                button.tooltip !== button.ariaLabel
+            );
+        }, TOP_TOOLBAR_BUTTON_IDS);
+
+        expect(invalidTooltips).toEqual([]);
+
+        await page.hover("#grid");
+        await new Promise((resolve) => setTimeout(resolve, 200));
+
+        const hoverTooltip = await page.$eval("#grid", (button) => {
+          const style = window.getComputedStyle(button, "::after");
+          return {
+            content: style.content,
+            opacity: style.opacity,
+            visibility: style.visibility,
+            maxWidth: style.maxWidth,
+          };
+        });
+
+        expect(hoverTooltip.content).toContain("Grid");
+        expect(hoverTooltip.opacity).toBe("1");
+        expect(hoverTooltip.visibility).toBe("visible");
+        expect(hoverTooltip.maxWidth).toBe("240px");
+
+        await page.mouse.move(0, 0);
+        await page.focus("#traceBtn");
+        await new Promise((resolve) => setTimeout(resolve, 200));
+
+        const focusedTooltip = await page.$eval("#traceBtn", (button) => {
+          const style = window.getComputedStyle(button, "::after");
+          return {
+            focused: document.activeElement === button,
+            opacity: style.opacity,
+            visibility: style.visibility,
+          };
+        });
+
+        expect(focusedTooltip.focused).toBe(true);
+        expect(focusedTooltip.opacity).toBe("1");
+        expect(focusedTooltip.visibility).toBe("visible");
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    60_000
+  );
+});

package/vitest.config.js

@@ -1,7 +1,6 @@
 const path = require('path');
-const { defineConfig } = require('vitest/config');
 
-module.exports = defineConfig({
+module.exports = {
     resolve: {
         alias: {
             '@': path.resolve(__dirname, './src')
@@ -12,4 +11,4 @@ module.exports = defineConfig({
         include: ['tests/**/*.test.js'],
         fileParallelism: false
     }
-});
+};