@robotical/martyblocksjr 4.1.2 → 4.2.1

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",
@@ -122,6 +131,232 @@ describe("Chromium 79 smoke test", () => {
     60_000
   );
 
+  it(
+    "keeps the extension entry hidden and reveals micro:bit controls only while loaded",
+    async () => {
+      const { browser, page, errors } = await openPage("/editor.html?mode=edit");
+
+      try {
+        await page.waitForSelector("#addExtensionButton", { timeout: 30_000 });
+
+        const initialState = await page.evaluate(() => {
+          const addButton = document.getElementById("addExtensionButton");
+          const microBitButton = document.getElementById("microBitConnectionButton");
+          return {
+            addButtonDisplay: window.getComputedStyle(addButton).display,
+            addButtonAriaHidden: addButton.getAttribute("aria-hidden"),
+            addButtonDisabled: addButton.disabled,
+            microBitButtonDisplay: window.getComputedStyle(microBitButton).display,
+            microBitButtonAriaHidden: microBitButton.getAttribute("aria-hidden"),
+            microBitButtonDisabled: microBitButton.disabled,
+            rightCategoryIds: Array.from(document.querySelectorAll("#selectorsright .category-selector-button")).map(
+              (button) => button.id
+            ),
+            extensionEnabled: document.getElementById("connectionButtonsArea").classList.contains("extensionEnabled"),
+          };
+        });
+
+        expect(initialState).toEqual({
+          addButtonDisplay: "none",
+          addButtonAriaHidden: "true",
+          addButtonDisabled: true,
+          microBitButtonDisplay: "none",
+          microBitButtonAriaHidden: "true",
+          microBitButtonDisabled: true,
+          rightCategoryIds: ["cog-start", "cog-looks", "cog-sound"],
+          extensionEnabled: false,
+        });
+
+        await openHiddenExtensionsLibrary(page);
+        await page.waitForSelector("#extensionsLibrary.fade.in", { timeout: 30_000 });
+        const libraryState = await page.evaluate(() => ({
+          title: document.getElementById("extensionsLibraryTitle").textContent.trim(),
+          hasMicroBitCard: Boolean(document.getElementById("microBitExtensionCard")),
+          microBitCardAction: document.getElementById("microBitExtensionCardAction").textContent.trim(),
+          microBitStillHidden:
+            window.getComputedStyle(document.getElementById("microBitConnectionButton")).display === "none",
+        }));
+
+        expect(libraryState).toEqual({
+          title: "Extensions",
+          hasMicroBitCard: true,
+          microBitCardAction: "+",
+          microBitStillHidden: true,
+        });
+
+        await page.click("#microBitExtensionCard");
+        await page.waitForFunction(
+          () => {
+            const microBitButton = document.getElementById("microBitConnectionButton");
+            const library = document.getElementById("extensionsLibrary");
+            return microBitButton
+              && window.getComputedStyle(microBitButton).display !== "none"
+              && library
+              && !library.classList.contains("in");
+          },
+          { timeout: 30_000 }
+        );
+
+        const enabledState = await page.evaluate(() => {
+          const addButton = document.getElementById("addExtensionButton");
+          const microBitButton = document.getElementById("microBitConnectionButton");
+          return {
+            addButtonDisplay: window.getComputedStyle(addButton).display,
+            addButtonAriaHidden: addButton.getAttribute("aria-hidden"),
+            addButtonDisabled: addButton.disabled,
+            microBitButtonDisplay: window.getComputedStyle(microBitButton).display,
+            microBitButtonAriaHidden: microBitButton.getAttribute("aria-hidden"),
+            microBitButtonDisabled: microBitButton.disabled,
+            rightCategoryIds: Array.from(document.querySelectorAll("#selectorsright .category-selector-button")).map(
+              (button) => button.id
+            ),
+            selectedRightCategoryIds: Array.from(
+              document.querySelectorAll('#selectorsright .category-selector-button[aria-pressed="true"]')
+            ).map((button) => button.id),
+            paletteBlockTypes: Array.from(document.querySelectorAll("#palette > div")).map(
+              (block) => block.owner && block.owner.blocktype
+            ),
+            extensionEnabled: document.getElementById("connectionButtonsArea").classList.contains("extensionEnabled"),
+          };
+        });
+
+        expect(enabledState).toEqual({
+          addButtonDisplay: "none",
+          addButtonAriaHidden: "true",
+          addButtonDisabled: true,
+          microBitButtonDisplay: "flex",
+          microBitButtonAriaHidden: "false",
+          microBitButtonDisabled: false,
+          rightCategoryIds: ["cog-start", "cog-looks", "cog-sound", "microbit-start", "microbit-looks"],
+          selectedRightCategoryIds: ["microbit-start"],
+          paletteBlockTypes: [
+            "microbitbuttonpressed",
+            "microbitgesture",
+            "microbittilted",
+          ],
+          extensionEnabled: true,
+        });
+
+        await page.click("#microbit-looks");
+        await page.waitForFunction(
+          () => Array.from(document.querySelectorAll("#palette > div")).some(
+            (block) => block.owner && block.owner.blocktype === "microbitdisplaycustom"
+          ),
+          { timeout: 30_000 }
+        );
+        const looksPaletteBlockTypes = await page.evaluate(() =>
+          Array.from(document.querySelectorAll("#palette > div")).map((block) => block.owner && block.owner.blocktype)
+        );
+        expect(looksPaletteBlockTypes).toEqual([
+          "microbitdisplayheart",
+          "microbitdisplayhappy",
+          "microbitdisplaycustom",
+          "microbitdisplaytext",
+          "microbitdisplayclear",
+        ]);
+
+        const customMatrixState = await page.evaluate(() => {
+          const scripts = window.ScratchJr.getActiveScript().owner;
+          const block = scripts.insertKeyboardBlock(null, [[
+            "microbitdisplaycustom",
+            "00000/00000/00000/00000/00000",
+            50,
+            50,
+          ]]);
+          block.arg.pressMicroBitMatrixEditor({
+            preventDefault() {},
+            stopPropagation() {},
+          });
+          const cells = Array.from(document.querySelectorAll(".microbitMatrixCell"));
+          cells[12].dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, cancelable: true }));
+          return {
+            argValue: block.getArgValue(),
+            cellCount: cells.length,
+            menuOpen: Boolean(document.querySelector(".microbitMatrixMenu")),
+            activeCells: Array.from(document.querySelectorAll(".microbitMatrixCell.on")).length,
+          };
+        });
+        expect(customMatrixState).toEqual({
+          argValue: "00000/00000/00100/00000/00000",
+          cellCount: 25,
+          menuOpen: true,
+          activeCells: 1,
+        });
+
+        const blocksAfterInsert = await page.evaluate(() => {
+          const scripts = window.ScratchJr.getActiveScript().owner;
+          scripts.insertKeyboardBlock(null, [["microbitdisplayclear", "null", 20, 20]]);
+          return window.ScratchJr.getBlocks().map((block) => block.blocktype);
+        });
+        expect(blocksAfterInsert).toContain("microbitdisplayclear");
+
+        await openHiddenExtensionsLibrary(page);
+        await page.waitForSelector("#extensionsLibrary.fade.in", { timeout: 30_000 });
+        const loadedLibraryState = await page.evaluate(() => ({
+          microBitCardAction: document.getElementById("microBitExtensionCardAction").textContent.trim(),
+          microBitCardLoaded: document.getElementById("microBitExtensionCard").classList.contains("loaded"),
+        }));
+        expect(loadedLibraryState).toEqual({
+          microBitCardAction: "-",
+          microBitCardLoaded: true,
+        });
+
+        await page.click("#microBitExtensionCard");
+        await page.waitForSelector("#microBitExtensionRemoveWarning.show", { timeout: 30_000 });
+        await page.click("#microBitExtensionRemoveCancel");
+        await page.waitForFunction(
+          () => !document.getElementById("microBitExtensionRemoveWarning").classList.contains("show"),
+          { timeout: 30_000 }
+        );
+        const cancelUnloadState = await page.evaluate(() => ({
+          microBitButtonDisplay: window.getComputedStyle(document.getElementById("microBitConnectionButton")).display,
+          hasMicroBitBlock: window.ScratchJr.getBlocks().some((block) => block.blocktype === "microbitdisplayclear"),
+        }));
+        expect(cancelUnloadState).toEqual({
+          microBitButtonDisplay: "flex",
+          hasMicroBitBlock: true,
+        });
+
+        await page.click("#microBitExtensionCard");
+        await page.waitForSelector("#microBitExtensionRemoveWarning.show", { timeout: 30_000 });
+        await page.click("#microBitExtensionRemoveConfirm");
+        await page.waitForFunction(
+          () => window.getComputedStyle(document.getElementById("microBitConnectionButton")).display === "none"
+            && !document.querySelector("#selectorsright #microbit-start")
+            && !document.getElementById("extensionsLibrary").classList.contains("in"),
+          { timeout: 30_000 }
+        );
+        const unloadedState = await page.evaluate(() => ({
+          addButtonDisplay: window.getComputedStyle(document.getElementById("addExtensionButton")).display,
+          microBitButtonDisplay: window.getComputedStyle(document.getElementById("microBitConnectionButton")).display,
+          extensionsLibraryOpen: document.getElementById("extensionsLibrary").classList.contains("in"),
+          microBitCardAction: document.getElementById("microBitExtensionCardAction").textContent.trim(),
+          microBitCardLoaded: document.getElementById("microBitExtensionCard").classList.contains("loaded"),
+          rightCategoryIds: Array.from(document.querySelectorAll("#selectorsright .category-selector-button")).map(
+            (button) => button.id
+          ),
+          hasMicroBitBlock: window.ScratchJr.getBlocks().some((block) => block.blocktype.indexOf("microbit") === 0),
+          extensionEnabled: document.getElementById("connectionButtonsArea").classList.contains("extensionEnabled"),
+        }));
+        expect(unloadedState).toEqual({
+          addButtonDisplay: "none",
+          microBitButtonDisplay: "none",
+          extensionsLibraryOpen: false,
+          microBitCardAction: "+",
+          microBitCardLoaded: false,
+          rightCategoryIds: ["cog-start", "cog-looks", "cog-sound"],
+          hasMicroBitBlock: false,
+          extensionEnabled: false,
+        });
+
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    60_000
+  );
+
   it(
     "opens tutorials from the book tab and returns there from tutorial mode",
     async () => {

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