@robotical/martyblocksjr 4.2.0 → 4.2.2

package/tests/e2e/blocks-jr-hidden-blocks.e2e.test.js

@@ -0,0 +1,262 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import puppeteer from "puppeteer";
+import { spawn } from "child_process";
+import http from "http";
+
+const PORT = 3017;
+const HOST = `http://localhost:${PORT}`;
+
+let server;
+
+const waitForServer = () =>
+    new Promise((resolve, reject) => {
+        const started = Date.now();
+
+        const check = () => {
+            http.get(HOST, res => {
+                res.resume();
+                resolve();
+            }).on("error", err => {
+                if (Date.now() - started > 10000) {
+                    reject(err);
+                } else {
+                    setTimeout(check, 100);
+                }
+            });
+        };
+
+        check();
+    });
+
+const openEditor = async () => {
+    const browser = await puppeteer.launch({
+        headless: true,
+        args: ["--no-sandbox"]
+    });
+    const page = await browser.newPage();
+    const errors = [];
+
+    page.on("pageerror", error => errors.push(error.message));
+    page.on("console", msg => {
+        if (msg.type() === "error") {
+            errors.push(msg.text());
+        }
+    });
+
+    await page.goto(`${HOST}/editor.html?mode=edit`, { waitUntil: "domcontentloaded" });
+    await page.waitForFunction(() =>
+        window.ScratchJr &&
+        ScratchJr.stage &&
+        ScratchJr.stage.currentPage &&
+        !ScratchJr.onHold &&
+        ScratchJr.getActiveScript &&
+        ScratchJr.getActiveScript()
+    );
+
+    return { browser, page, errors };
+};
+
+const addPinkOctopus = async page => {
+    await page.evaluate(() => {
+        ScratchJr.stage.currentPage.addSprite(0.5, "Sprites_Octopus-Pink.svg", "Octopus-Pink");
+    });
+
+    await page.waitForFunction(() => {
+        const sprites = JSON.parse(ScratchJr.stage.currentPage.sprites);
+        const spriteId = sprites.find(id => id.indexOf("Octopus-Pink") === 0);
+        if (!spriteId) {
+            return false;
+        }
+
+        const sprite = document.getElementById(spriteId);
+        const script = document.getElementById(`${spriteId}_scripts`);
+        const thumb = Array.from(document.querySelectorAll("#spritecc .spritethumb"))
+            .find(node => node.owner === spriteId);
+
+        return sprite && script && thumb;
+    });
+
+    return page.evaluate(() => {
+        const sprites = JSON.parse(ScratchJr.stage.currentPage.sprites);
+        return sprites.find(id => id.indexOf("Octopus-Pink") === 0);
+    });
+};
+
+const setCurrentSprite = async (page, spriteId) => {
+    await page.evaluate(id => {
+        const sprite = document.getElementById(id).owner;
+        ScratchJr.stage.currentPage.setCurrentSprite(sprite);
+    }, spriteId);
+
+    await page.waitForFunction(id =>
+        ScratchJr.stage.currentPage.currentSpriteName === id,
+    {}, spriteId);
+};
+
+const selectMotionCategory = async page => {
+    await page.click("#sprite-motion");
+    await page.waitForSelector("#forward_block", { visible: true });
+};
+
+const selectMartyMotionCategory = async page => {
+    await page.click("#marty-motion");
+    await page.waitForSelector("#martyStepForward_block", { visible: true });
+};
+
+const dragBlockToCanvas = async (page, selector) => {
+    const source = await page.$eval(selector, node => {
+        const rect = node.getBoundingClientRect();
+        return {
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2
+        };
+    });
+    const target = await page.$eval("#scripts", node => {
+        const rect = node.getBoundingClientRect();
+        return {
+            x: rect.left + Math.min(220, rect.width / 2),
+            y: rect.top + Math.min(170, rect.height / 2)
+        };
+    });
+
+    await page.mouse.move(source.x, source.y);
+    await page.mouse.down();
+    await page.mouse.move(target.x, target.y, { steps: 12 });
+    await page.mouse.up();
+};
+
+const enableMartyMode = async page => {
+    const enabled = await page.evaluate(() => ScratchJr.isMartyModeEnabled);
+    if (!enabled) {
+        await page.click("#martyMode");
+    }
+
+    await page.waitForFunction(() =>
+        ScratchJr.isMartyModeEnabled &&
+        ScratchJr.stage.currentPage.currentSpriteName &&
+        ScratchJr.stage.currentPage.currentSpriteName.indexOf(ScratchJr.BIRDS_EYE_SPRITE_NAME) > -1 &&
+        ScratchJr.getActiveScript()
+    );
+};
+
+const clickSpriteThumb = async (page, spriteId) => {
+    await page.click(`#spritecc .spritethumb[data-owner="${spriteId}"]`);
+    await page.waitForFunction(id =>
+        ScratchJr.stage.currentPage.currentSpriteName === id &&
+        window.getComputedStyle(document.getElementById(`${id}_scripts`)).visibility === "visible",
+    {}, spriteId);
+};
+
+const getSpriteScriptState = async (page, spriteId) =>
+    page.evaluate(id => {
+        const script = document.getElementById(`${id}_scripts`);
+        const blockTypes = script.owner.getBlocks().map(block => block.blocktype);
+        const visibleBlockTypes = script.owner.getBlocks()
+            .filter(block => window.getComputedStyle(block.div).visibility !== "hidden")
+            .map(block => block.blocktype);
+
+        return {
+            currentSpriteName: ScratchJr.stage.currentPage.currentSpriteName,
+            activeScriptId: ScratchJr.getActiveScript().id,
+            scriptVisibility: window.getComputedStyle(script).visibility,
+            blockTypes,
+            visibleBlockTypes
+        };
+    }, spriteId);
+
+describe("Blocks Jr hidden block drop regression", () => {
+    beforeAll(async () => {
+        server = spawn("python3", ["-m", "http.server", String(PORT), "--directory", "editions/free/src"], {
+            stdio: "ignore"
+        });
+        await waitForServer();
+    }, 15000);
+
+    afterAll(() => {
+        if (server) {
+            server.kill();
+        }
+    });
+
+    it("shows a dropped block when the current sprite changes outside the thumbnail path", async () => {
+        const { browser, page, errors } = await openEditor();
+
+        try {
+            const octopusId = await addPinkOctopus(page);
+            const martyId = await page.evaluate(() =>
+                Array.from(document.querySelectorAll("#spritecc .spritethumb"))
+                    .filter(node => node.owner && node.owner.indexOf("Marty ") === 0)
+                    .find(node => window.getComputedStyle(node).display !== "none").owner
+            );
+
+            await clickSpriteThumb(page, martyId);
+            await setCurrentSprite(page, octopusId);
+            await selectMotionCategory(page);
+            await dragBlockToCanvas(page, "#forward_block");
+
+            await page.waitForFunction(id => {
+                const script = document.getElementById(`${id}_scripts`);
+                return script.owner.getBlocks().some(block => block.blocktype === "forward");
+            }, {}, octopusId);
+
+            const state = await getSpriteScriptState(page, octopusId);
+            expect(state.currentSpriteName).toBe(octopusId);
+            expect(state.activeScriptId).toBe(`${octopusId}_scripts`);
+            expect(state.blockTypes).toContain("forward");
+            expect(state.scriptVisibility).toBe("visible");
+            expect(state.visibleBlockTypes).toContain("forward");
+            expect(errors).toEqual([]);
+        } finally {
+            await browser.close();
+        }
+    }, 60000);
+
+    it("keeps Marty blocks visible after adding a page and returning to page 1", async () => {
+        const { browser, page, errors } = await openEditor();
+
+        try {
+            await enableMartyMode(page);
+            const pageOne = await page.evaluate(() => ({
+                pageId: ScratchJr.stage.currentPage.id,
+                spriteId: ScratchJr.stage.currentPage.currentSpriteName,
+                pageCount: ScratchJr.stage.pages.length
+            }));
+
+            await page.click("#emptypage");
+            await page.waitForFunction((pageId, pageCount) =>
+                ScratchJr.stage.pages.length === pageCount + 1 &&
+                ScratchJr.stage.currentPage.id !== pageId &&
+                ScratchJr.isMartyModeEnabled &&
+                ScratchJr.stage.currentPage.currentSpriteName &&
+                ScratchJr.stage.currentPage.currentSpriteName.indexOf(ScratchJr.BIRDS_EYE_SPRITE_NAME) > -1 &&
+                !ScratchJr.onHold &&
+                ScratchJr.getActiveScript(),
+            {}, pageOne.pageId, pageOne.pageCount);
+
+            await page.click(`.pagethumb[data-owner="${pageOne.pageId}"]`);
+            await page.waitForFunction((pageId, spriteId) =>
+                ScratchJr.stage.currentPage.id === pageId &&
+                ScratchJr.stage.currentPage.currentSpriteName === spriteId &&
+                ScratchJr.isMartyModeEnabled &&
+                ScratchJr.getActiveScript().id === `${spriteId}_scripts`,
+            {}, pageOne.pageId, pageOne.spriteId);
+
+            await selectMartyMotionCategory(page);
+            await dragBlockToCanvas(page, "#martyStepForward_block");
+            await page.waitForFunction(spriteId => {
+                const script = document.getElementById(`${spriteId}_scripts`);
+                return script.owner.getBlocks().some(block => block.blocktype === "martyStepForward");
+            }, {}, pageOne.spriteId);
+
+            const state = await getSpriteScriptState(page, pageOne.spriteId);
+            expect(state.currentSpriteName).toBe(pageOne.spriteId);
+            expect(state.activeScriptId).toBe(`${pageOne.spriteId}_scripts`);
+            expect(state.blockTypes).toContain("martyStepForward");
+            expect(state.scriptVisibility).toBe("visible");
+            expect(state.visibleBlockTypes).toContain("martyStepForward");
+            expect(errors).toEqual([]);
+        } finally {
+            await browser.close();
+        }
+    }, 60000);
+});

package/tests/e2e/chromium-79-smoke.test.js

@@ -108,6 +108,15 @@ async function assertTutorialOpened(page, tutorialId) {
   expect(tutorialState.tutorialTitle.length).toBeGreaterThan(0);
 }
 
+async function openHiddenExtensionsLibrary(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();
+  });
+}
+
 describe("Chromium 79 smoke test", () => {
   it(
     "loads home page without console errors",
@@ -123,7 +132,7 @@ describe("Chromium 79 smoke test", () => {
   );
 
   it(
-    "hides micro:bit controls until the extension is added",
+    "keeps the extension entry hidden and reveals micro:bit controls only while loaded",
     async () => {
       const { browser, page, errors } = await openPage("/editor.html?mode=edit");
 
@@ -148,9 +157,9 @@ describe("Chromium 79 smoke test", () => {
         });
 
         expect(initialState).toEqual({
-          addButtonDisplay: "flex",
-          addButtonAriaHidden: "false",
-          addButtonDisabled: false,
+          addButtonDisplay: "none",
+          addButtonAriaHidden: "true",
+          addButtonDisabled: true,
           microBitButtonDisplay: "none",
           microBitButtonAriaHidden: "true",
           microBitButtonDisabled: true,
@@ -158,7 +167,7 @@ describe("Chromium 79 smoke test", () => {
           extensionEnabled: false,
         });
 
-        await page.click("#addExtensionButton");
+        await openHiddenExtensionsLibrary(page);
         await page.waitForSelector("#extensionsLibrary.fade.in", { timeout: 30_000 });
         const libraryState = await page.evaluate(() => ({
           title: document.getElementById("extensionsLibraryTitle").textContent.trim(),
@@ -212,9 +221,9 @@ describe("Chromium 79 smoke test", () => {
         });
 
         expect(enabledState).toEqual({
-          addButtonDisplay: "flex",
-          addButtonAriaHidden: "false",
-          addButtonDisabled: false,
+          addButtonDisplay: "none",
+          addButtonAriaHidden: "true",
+          addButtonDisabled: true,
           microBitButtonDisplay: "flex",
           microBitButtonAriaHidden: "false",
           microBitButtonDisabled: false,
@@ -281,7 +290,7 @@ describe("Chromium 79 smoke test", () => {
         });
         expect(blocksAfterInsert).toContain("microbitdisplayclear");
 
-        await page.click("#addExtensionButton");
+        await openHiddenExtensionsLibrary(page);
         await page.waitForSelector("#extensionsLibrary.fade.in", { timeout: 30_000 });
         const loadedLibraryState = await page.evaluate(() => ({
           microBitCardAction: document.getElementById("microBitExtensionCardAction").textContent.trim(),
@@ -330,7 +339,7 @@ describe("Chromium 79 smoke test", () => {
           extensionEnabled: document.getElementById("connectionButtonsArea").classList.contains("extensionEnabled"),
         }));
         expect(unloadedState).toEqual({
-          addButtonDisplay: "flex",
+          addButtonDisplay: "none",
           microBitButtonDisplay: "none",
           extensionsLibraryOpen: false,
           microBitCardAction: "+",

package/tests/e2e/delete-last-sprite-mode.e2e.test.js

@@ -0,0 +1,162 @@
+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}`;
+
+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();
+}, 30000);
+
+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: 30000 });
+
+  return { browser, page, errors };
+}
+
+async function waitForEditorReady(page) {
+  await page.waitForFunction(
+    () => {
+      const backdrop = document.getElementById("backdrop");
+      const selectedSpriteThumb = document.querySelector("#spritecc .spritethumb[aria-pressed=\"true\"]");
+      return Boolean(
+        window.ScratchJr
+          && window.ScratchJr.stage
+          && window.ScratchJr.stage.currentPage
+          && document.getElementById("addsprite")
+          && document.getElementById("martyMode")
+          && selectedSpriteThumb
+          && backdrop
+          && window.getComputedStyle(backdrop).display === "none"
+          && !window.ScratchJr.onHold
+          && window.ScratchJr.getActiveScript()
+      );
+    },
+    { timeout: 30000 }
+  );
+}
+
+async function getEditorState(page) {
+  return page.evaluate(() => {
+    const currentPage = window.ScratchJr.stage.currentPage;
+    const spriteIds = currentPage.getSprites();
+    const normalSpriteIds = spriteIds.filter(
+      (spriteId) => spriteId.indexOf(window.ScratchJr.BIRDS_EYE_SPRITE_NAME) === -1
+    );
+    const currentSpriteName = currentPage.currentSpriteName || "";
+    const addSpriteButton = document.getElementById("addsprite");
+
+    return {
+      currentSpriteName,
+      spriteIds,
+      normalSpriteIds,
+      isMartyModeEnabled: window.ScratchJr.isMartyModeEnabled,
+      activeSpriteIsMartyBirdsEye:
+        currentSpriteName.indexOf(window.ScratchJr.BIRDS_EYE_SPRITE_NAME) > -1,
+      hasMartyModeSidebarCard: Boolean(document.getElementById("martyModeSidebarCard")),
+      addSpriteButtonVisible:
+        Boolean(addSpriteButton) && window.getComputedStyle(addSpriteButton).display !== "none",
+      addSpriteButtonDisabled: Boolean(addSpriteButton && addSpriteButton.disabled),
+    };
+  });
+}
+
+async function deleteSelectedSpriteWithKeyboard(page) {
+  await page.focus("#spritecc .spritethumb[aria-pressed=\"true\"]");
+  await page.keyboard.press("Delete");
+  await page.waitForFunction(
+    () => {
+      const currentPage = window.ScratchJr.stage.currentPage;
+      return currentPage.getSprites().filter(
+        (spriteId) => spriteId.indexOf(window.ScratchJr.BIRDS_EYE_SPRITE_NAME) === -1
+      ).length === 0;
+    },
+    { timeout: 30000 }
+  );
+}
+
+describe("deleting the final sprite", () => {
+  it(
+    "keeps the editor in Sprite mode when no normal sprites remain",
+    async () => {
+      const { browser, page, errors } = await openPage("/editor.html?mode=edit");
+
+      try {
+        await waitForEditorReady(page);
+
+        const beforeDelete = await getEditorState(page);
+        expect(beforeDelete).toMatchObject({
+          normalSpriteIds: [beforeDelete.currentSpriteName],
+          isMartyModeEnabled: false,
+          activeSpriteIsMartyBirdsEye: false,
+          hasMartyModeSidebarCard: false,
+          addSpriteButtonVisible: true,
+          addSpriteButtonDisabled: false,
+        });
+
+        await deleteSelectedSpriteWithKeyboard(page);
+
+        const afterDelete = await getEditorState(page);
+        expect(
+          afterDelete,
+          `Editor state after deleting the last normal sprite: ${JSON.stringify(afterDelete, null, 2)}`
+        ).toMatchObject({
+          normalSpriteIds: [],
+          isMartyModeEnabled: false,
+          activeSpriteIsMartyBirdsEye: false,
+          hasMartyModeSidebarCard: false,
+          addSpriteButtonVisible: true,
+          addSpriteButtonDisabled: false,
+        });
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    90000
+  );
+});