@robotical/martyblocksjr 4.1.2 → 4.2.1

package/tests/e2e/paint-editor-cancel.e2e.test.js

@@ -0,0 +1,274 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import puppeteer from "puppeteer";
+import { spawn } from "child_process";
+import http from "http";
+
+const PORT = 3016;
+const HOST = `http://localhost:${PORT}`;
+
+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.getElementById("setbkg")
+          && document.querySelector("#spritecc .spritethumb.on .brush")
+          && backdrop
+          && window.getComputedStyle(backdrop).display === "none"
+          && !window.ScratchJr.onHold
+          && window.ScratchJr.getActiveScript()
+      );
+    },
+    { timeout: 30_000 }
+  );
+}
+
+async function openSpritePaintEditor(page) {
+  await page.click("#addsprite");
+  await page.waitForSelector("#libframe.appear #Star\\.svg", { timeout: 30_000 });
+  await page.click("#Star\\.svg");
+  await page.waitForFunction(
+    () => {
+      const star = document.getElementById("Star.svg");
+      const paintButton = document.getElementById("library_paintme");
+      return Boolean(
+        star
+          && star.className.includes("on")
+          && paintButton.getAttribute("aria-disabled") === "false"
+      );
+    },
+    { timeout: 30_000 }
+  );
+
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  await page.click("#Star\\.svg");
+  await page.waitForFunction(
+    () => {
+      const sprite = window.ScratchJr && window.ScratchJr.getSprite();
+      return Boolean(sprite && sprite.md5 === "Star.svg");
+    },
+    { timeout: 30_000 }
+  );
+
+  const starThumbId = await page.evaluate(() => window.ScratchJr.getSprite().thumbnail.id);
+  await page.click(`[id="${starThumbId}"]`);
+  await page.waitForFunction(
+    () => {
+      const sprite = window.ScratchJr && window.ScratchJr.getSprite();
+      const brush = sprite && sprite.thumbnail && sprite.thumbnail.querySelector(".brush");
+      return Boolean(
+        sprite
+          && sprite.md5 === "Star.svg"
+          && sprite.thumbnail.className.includes("on")
+          && brush
+          && window.getComputedStyle(brush).display !== "none"
+      );
+    },
+    { timeout: 30_000 }
+  );
+
+  await page.evaluate(() => {
+    const sprite = window.ScratchJr.getSprite();
+    const brush = sprite && sprite.thumbnail && sprite.thumbnail.querySelector(".brush");
+    if (!brush || window.getComputedStyle(brush).display === "none") {
+      throw new Error("Selected editable sprite paintbrush control was not found");
+    }
+    brush.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, cancelable: true, pointerType: "mouse" }));
+  });
+  await waitForPaintEditor(page);
+}
+
+async function openBackgroundPaintEditor(page) {
+  await page.click("#setbkg");
+  await page.waitForSelector("#libframe.appear #library_paintme", { timeout: 30_000 });
+  await page.click("#library_paintme");
+  await waitForPaintEditor(page);
+}
+
+async function waitForPaintEditor(page) {
+  await page.waitForFunction(
+    () => {
+      const paintFrame = document.getElementById("paintframe");
+      const doneCheck = document.getElementById("donecheck");
+      const layer = document.getElementById("layer1");
+      return Boolean(
+        paintFrame
+          && doneCheck
+          && layer
+          && layer.childElementCount > 0
+          && window.getComputedStyle(paintFrame).display !== "none"
+          && window.getComputedStyle(doneCheck).display !== "none"
+      );
+    },
+    { timeout: 30_000 }
+  );
+}
+
+async function getPaintToolbarControls(page) {
+  return page.evaluate(() => {
+    const paintFrame = document.getElementById("paintframe");
+    const toolbar = paintFrame && paintFrame.querySelector(".paintop");
+    const controls = toolbar ? Array.from(toolbar.querySelectorAll("*")) : [];
+    const visibleControls = controls
+      .filter((element) => {
+        const styles = window.getComputedStyle(element);
+        return styles.display !== "none" && styles.visibility !== "hidden" && element.offsetWidth > 0 && element.offsetHeight > 0;
+      })
+      .map((element) => {
+        const styles = window.getComputedStyle(element);
+        return {
+          id: element.id,
+          className: element.className,
+          ariaLabel: element.getAttribute("aria-label") || "",
+          title: element.getAttribute("title") || "",
+          backgroundImage: styles.backgroundImage,
+        };
+      });
+
+    const isAcceptControl = (control) => (
+      control.id === "donecheck"
+        || /\bpaintdone\b/.test(control.className)
+        || /ok\.svg|check|accept|done/i.test(`${control.backgroundImage} ${control.ariaLabel} ${control.title}`)
+    );
+
+    const isCancelControl = (control) => (
+      /\b(cancelicon|paintcancel|closeModal|closex)\b/.test(control.className)
+        || /\b(cancel|close|dismiss)\b/i.test(`${control.id} ${control.ariaLabel} ${control.title}`)
+        || /cancel\.svg|close/i.test(control.backgroundImage)
+    );
+
+    return {
+      hasToolbar: Boolean(toolbar),
+      visibleControls,
+      acceptControls: visibleControls.filter(isAcceptControl),
+      cancelControls: visibleControls.filter(isCancelControl),
+    };
+  });
+}
+
+async function cancelPaintEditor(page, errors) {
+  const hitTarget = await page.$eval("#cancelcheck", (button) => {
+    const rect = button.getBoundingClientRect();
+    const target = document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    return target ? { id: target.id, className: target.className, tagName: target.tagName } : null;
+  });
+  await page.click("#cancelcheck");
+  try {
+    await page.waitForFunction(() => {
+      const paintFrame = document.getElementById("paintframe");
+      const editorFrame = document.getElementById("frame");
+      return paintFrame
+        && editorFrame
+        && window.getComputedStyle(paintFrame).display === "none"
+        && window.getComputedStyle(editorFrame).display !== "none";
+    }, { timeout: 5_000 });
+  } catch (error) {
+    const state = await page.evaluate(() => ({
+      paintFrameClass: document.getElementById("paintframe").className,
+      paintFrameDisplay: window.getComputedStyle(document.getElementById("paintframe")).display,
+      editorFrameDisplay: window.getComputedStyle(document.getElementById("frame")).display,
+      cancelHasClickHandler: typeof document.getElementById("cancelcheck").onclick === "function",
+    }));
+    throw new Error(`Cancel control did not close the paint editor: ${JSON.stringify({ hitTarget, state, errors })}`);
+  }
+}
+
+describe("Paint editor cancel controls", () => {
+  it(
+    "offers a cancel control in the sprite paint editor",
+    async () => {
+      const { browser, page, errors } = await openEditor();
+
+      try {
+        await openSpritePaintEditor(page);
+        const spriteToolbar = await getPaintToolbarControls(page);
+
+        expect(spriteToolbar.hasToolbar).toBe(true);
+        expect(spriteToolbar.acceptControls.length).toBeGreaterThan(0);
+        expect(spriteToolbar.cancelControls.length).toBeGreaterThan(0);
+        await cancelPaintEditor(page, errors);
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    60_000
+  );
+
+  it(
+    "offers a cancel control in the background paint editor",
+    async () => {
+      const { browser, page, errors } = await openEditor();
+
+      try {
+        await openBackgroundPaintEditor(page);
+        const backgroundToolbar = await getPaintToolbarControls(page);
+
+        expect(backgroundToolbar.hasToolbar).toBe(true);
+        expect(backgroundToolbar.acceptControls.length).toBeGreaterThan(0);
+        expect(backgroundToolbar.cancelControls.length).toBeGreaterThan(0);
+        await cancelPaintEditor(page, errors);
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    60_000
+  );
+});

package/tests/e2e/project-load-progress-loop.e2e.test.js

@@ -0,0 +1,310 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import puppeteer from "puppeteer";
+import { spawn } from "child_process";
+import http from "http";
+
+const PORT = 3014;
+const HOST = `http://localhost:${PORT}`;
+const MICROBIT_BLOCK_TYPE = "microbitdisplayclear";
+const STUCK_PROGRESS_LOG = "setProgress 55 30 1 2";
+
+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 = [];
+  const progressLogs = [];
+
+  page.on("pageerror", (err) => errors.push(err.message || String(err)));
+  page.on("console", (msg) => {
+    const text = msg.text();
+    if (text.indexOf("setProgress") > -1) {
+      progressLogs.push(text);
+    }
+    if (msg.type() === "error") {
+      errors.push(text);
+    }
+  });
+
+  await page.goto(`${HOST}${pathname}`, { waitUntil: "networkidle2", timeout: 30_000 });
+
+  return { browser, page, errors, progressLogs };
+}
+
+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("addExtensionButton")
+          && document.getElementById("martyMode")
+          && backdrop
+          && window.getComputedStyle(backdrop).display === "none"
+          && !window.ScratchJr.onHold
+          && window.ScratchJr.getActiveScript()
+      );
+    },
+    { timeout }
+  );
+}
+
+async function enableMartyMode(page) {
+  const alreadyEnabled = await page.evaluate(() => window.ScratchJr.isMartyModeEnabled);
+  if (!alreadyEnabled) {
+    await page.click("#martyMode");
+  }
+  await page.waitForFunction(
+    () => window.ScratchJr.isMartyModeEnabled
+      && window.ScratchJr.stage.currentPage.currentSpriteName
+      && window.ScratchJr.stage.currentPage.currentSpriteName.indexOf(window.ScratchJr.BIRDS_EYE_SPRITE_NAME) > -1
+      && window.ScratchJr.getActiveScript(),
+    { timeout: 30_000 }
+  );
+}
+
+async function enableMicroBitExtension(page) {
+  await page.$eval("#addExtensionButton", (button) => {
+    if (!button.disabled || window.getComputedStyle(button).display !== "none") {
+      throw new Error("Expected the extensions entry point to remain hidden and disabled");
+    }
+    button.onclick();
+  });
+  await page.waitForSelector("#extensionsLibrary.fade.in", { timeout: 30_000 });
+  await page.click("#microBitExtensionCard");
+  await page.waitForFunction(
+    () => {
+      const microBitButton = document.getElementById("microBitConnectionButton");
+      const library = document.getElementById("extensionsLibrary");
+      return window.ScratchJr.isMicroBitExtensionEnabled
+        && microBitButton
+        && window.getComputedStyle(microBitButton).display !== "none"
+        && document.querySelector("#selectorsright #microbit-start")
+        && document.querySelector("#selectorsright #microbit-looks")
+        && library
+        && !library.classList.contains("in");
+    },
+    { timeout: 30_000 }
+  );
+}
+
+async function insertMicroBitBlock(page) {
+  await page.click("#microbit-looks");
+  await page.waitForFunction(
+    (blockType) => Boolean(document.querySelector(`#palette [data-blocktype="${blockType}"]`)),
+    { timeout: 30_000 },
+    MICROBIT_BLOCK_TYPE
+  );
+
+  await page.evaluate((blockType) => {
+    const blockElement = document.querySelector(`#palette [data-blocktype="${blockType}"]`);
+    window.Palette.insertBlockFromKeyboard(blockElement, new Event("progress-loop-test"));
+  }, MICROBIT_BLOCK_TYPE);
+
+  await page.waitForFunction(
+    (blockType) => window.ScratchJr.getBlocks().some((block) => block.blocktype === blockType),
+    { timeout: 30_000 },
+    MICROBIT_BLOCK_TYPE
+  );
+}
+
+async function saveProjectAndWaitForBlock(page, projectId) {
+  await page.evaluate(() => new Promise((resolve) => {
+    window.ScratchJr.changed = true;
+    window.ScratchJr.saveProject(null, resolve);
+  }));
+
+  await waitForPersistedProject(page, projectId, (project) => projectHasBlock(project, MICROBIT_BLOCK_TYPE));
+}
+
+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);
+      });
+    });
+  });
+}
+
+async function hardReload(page) {
+  const client = await page.target().createCDPSession();
+  await client.send("Network.enable");
+  await client.send("Network.setCacheDisabled", { cacheDisabled: true });
+  try {
+    await page.reload({ waitUntil: "networkidle2", timeout: 30_000 });
+  } finally {
+    await client.send("Network.setCacheDisabled", { cacheDisabled: false });
+    await client.detach();
+  }
+}
+
+async function waitForLoadCurtainState(page, progressLogs, timeout = 12_000) {
+  const startedAt = Date.now();
+  let state = null;
+
+  while (Date.now() - startedAt < timeout) {
+    state = await getLoadCurtainState(page, progressLogs);
+    if (state.backdropDisplay === "none") {
+      return state;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  }
+
+  return getLoadCurtainState(page, progressLogs);
+}
+
+async function getLoadCurtainState(page, progressLogs) {
+  const state = await page.evaluate(() => {
+    const backdrop = document.getElementById("backdrop");
+    const currentSpriteName = window.ScratchJr?.stage?.currentPage?.currentSpriteName || "";
+    let activeBlocks = [];
+    try {
+      if (window.ScratchJr?.stage?.currentPage?.currentSpriteName && window.ScratchJr.getActiveScript()) {
+        activeBlocks = window.ScratchJr.getBlocks().map((block) => block.blocktype);
+      }
+    } catch (e) {
+      activeBlocks = [];
+    }
+
+    return {
+      backdropDisplay: backdrop ? window.getComputedStyle(backdrop).display : null,
+      backdropClassName: backdrop ? backdrop.className : null,
+      currentProject: window.ScratchJr?.currentProject || null,
+      isMartyModeEnabled: window.ScratchJr?.isMartyModeEnabled || false,
+      isMicroBitExtensionEnabled: window.ScratchJr?.isMicroBitExtensionEnabled || false,
+      activeSpriteIsMartyBirdsEye:
+        Boolean(window.ScratchJr) && currentSpriteName.indexOf(window.ScratchJr.BIRDS_EYE_SPRITE_NAME) > -1,
+      hasMicroBitBlockInActiveScript: activeBlocks.indexOf("microbitdisplayclear") > -1,
+    };
+  });
+
+  return {
+    ...state,
+    stuckProgressLoopCount: progressLogs.filter((log) => log.indexOf(STUCK_PROGRESS_LOG) > -1).length,
+    progressTail: progressLogs.slice(-12),
+  };
+}
+
+describe("project load progress loop", () => {
+  it(
+    "lifts the loading curtain after a hard refresh of a saved Marty micro:bit project",
+    async () => {
+      const { browser, page, errors, progressLogs } = await openPage("/home.html?place=home");
+
+      try {
+        const projectId = await createProjectFromHome(page);
+
+        await enableMartyMode(page);
+        await enableMicroBitExtension(page);
+        await insertMicroBitBlock(page);
+        await saveProjectAndWaitForBlock(page, projectId);
+
+        await page.reload({ waitUntil: "networkidle2", timeout: 30_000 });
+        await waitForEditorReady(page);
+
+        await hardReload(page);
+        const state = await waitForLoadCurtainState(page, progressLogs);
+
+        expect(
+          state.backdropDisplay,
+          `Load curtain state after hard refresh: ${JSON.stringify(state, null, 2)}`
+        ).toBe("none");
+        expect(state).toMatchObject({
+          currentProject: projectId,
+          isMartyModeEnabled: true,
+          isMicroBitExtensionEnabled: true,
+          activeSpriteIsMartyBirdsEye: true,
+          hasMicroBitBlockInActiveScript: true,
+        });
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    120_000
+  );
+});