@robotical/martyblocksjr 4.1.2 → 4.2.1

package/tests/e2e/microbit-extension-project-reload.e2e.test.js

@@ -0,0 +1,309 @@
+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 MICROBIT_BLOCK_TYPE = "microbitdisplayclear";
+
+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"),
+  ]);
+  expect(page.url()).toContain("/editor.html");
+  expect(page.url()).toContain("mode=edit");
+  await waitForEditorReady(page);
+  return page.evaluate(() => window.ScratchJr.currentProject);
+}
+
+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("addExtensionButton")
+          && document.getElementById("martyMode")
+          && backdrop
+          && window.getComputedStyle(backdrop).display === "none"
+          && !window.ScratchJr.onHold
+          && window.ScratchJr.getActiveScript()
+      );
+    },
+    { timeout: 30_000 }
+  );
+}
+
+async function waitForProjectStateLoaded(page) {
+  await page.waitForFunction(
+    () => Boolean(
+      window.ScratchJr
+        && window.ScratchJr.stage
+        && window.ScratchJr.stage.currentPage
+        && window.ScratchJr.getActiveScript()
+        && document.querySelector("#selectorsright .category-selector-button")
+    ),
+    { timeout: 30_000 }
+  );
+}
+
+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("microbit-reload-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 getLoadedProjectState(page) {
+  return page.evaluate((blockType) => {
+    const activeBlocks = window.ScratchJr.getBlocks().map((block) => block.blocktype);
+    const currentSpriteName = window.ScratchJr.stage.currentPage.currentSpriteName || "";
+    return {
+      currentProject: window.ScratchJr.currentProject,
+      isMartyModeEnabled: window.ScratchJr.isMartyModeEnabled,
+      isMicroBitExtensionEnabled: window.ScratchJr.isMicroBitExtensionEnabled,
+      activeSpriteIsMartyBirdsEye: currentSpriteName.indexOf(window.ScratchJr.BIRDS_EYE_SPRITE_NAME) > -1,
+      activeBlocks,
+      hasMicroBitBlockInActiveScript: activeBlocks.indexOf(blockType) > -1,
+      rightCategoryIds: Array.from(document.querySelectorAll("#selectorsright .category-selector-button")).map(
+        (button) => button.id
+      ),
+      microBitButtonVisible:
+        window.getComputedStyle(document.getElementById("microBitConnectionButton")).display !== "none",
+      extensionEnabledClass: document.getElementById("connectionButtonsArea").classList.contains("extensionEnabled"),
+    };
+  }, MICROBIT_BLOCK_TYPE);
+}
+
+function expectLoadedMicroBitMartyProjectStates(states, projectId) {
+  const expectedState = {
+    currentProject: projectId,
+    isMartyModeEnabled: true,
+    activeSpriteIsMartyBirdsEye: true,
+    isMicroBitExtensionEnabled: true,
+    microBitButtonVisible: true,
+    extensionEnabledClass: true,
+    hasMicroBitBlockInActiveScript: true,
+    rightCategoryIds: ["cog-start", "cog-looks", "cog-sound", "microbit-start", "microbit-looks"],
+  };
+  expect(states).toMatchObject({
+    beforeReload: expectedState,
+    afterPlainReload: expectedState,
+    afterHardReload: expectedState,
+  });
+}
+
+describe("micro:bit extension project reload", () => {
+  it(
+    "keeps the saved micro:bit extension, active Marty mode, and block after plain and hard refreshes",
+    async () => {
+      const { browser, page, errors } = 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);
+
+        const beforeReload = await getLoadedProjectState(page);
+        await page.reload({ waitUntil: "networkidle2", timeout: 30_000 });
+        await waitForEditorReady(page);
+        const afterPlainReload = await getLoadedProjectState(page);
+
+        await hardReload(page);
+        await waitForProjectStateLoaded(page);
+        const afterHardReload = await getLoadedProjectState(page);
+
+        expectLoadedMicroBitMartyProjectStates({
+          beforeReload,
+          afterPlainReload,
+          afterHardReload,
+        }, projectId);
+
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    120_000
+  );
+});

package/tests/e2e/microbit-web-bluetooth.test.js

@@ -0,0 +1,131 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import MicroBitWebBluetooth from '@/microbit/MicroBitWebBluetooth.js';
+
+describe('MicroBitWebBluetooth', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.stubGlobal('window', {
+            setTimeout,
+            clearTimeout
+        });
+    });
+
+    afterEach(() => {
+        vi.runOnlyPendingTimers();
+        vi.useRealTimers();
+        vi.unstubAllGlobals();
+    });
+
+    it('parses incoming sensor packets using the Scratch micro:bit protocol layout', () => {
+        const microBit = new MicroBitWebBluetooth();
+        const listener = vi.fn();
+        microBit.addSensorListener(listener);
+
+        microBit.handleSensorData(new DataView(Uint8Array.from([
+            0xff, 0x38, // tiltX: -200
+            0x00, 0xc8, // tiltY: 200
+            1, 0, // button A/B
+            1, 0, 1, // touch pins 0/1/2
+            5 // moved + shaken gesture bits
+        ]).buffer));
+
+        expect(microBit.sensors).toEqual({
+            tiltX: -200,
+            tiltY: 200,
+            buttonA: 1,
+            buttonB: 0,
+            touchPins: [1, 0, 1],
+            gestureState: 5
+        });
+        expect(listener).toHaveBeenCalledWith(
+            microBit.sensors,
+            {
+                tiltX: 0,
+                tiltY: 0,
+                buttonA: 0,
+                buttonB: 0,
+                touchPins: [0, 0, 0],
+                gestureState: 0
+            }
+        );
+        expect(microBit.receiveTimeoutId).not.toBe(null);
+    });
+
+    it('sends display commands with the expected command byte prefix', async () => {
+        const microBit = new MicroBitWebBluetooth();
+        const writeValueWithResponse = vi.fn(() => Promise.resolve());
+        microBit.server = {connected: true};
+        microBit.txCharacteristic = {writeValueWithResponse};
+
+        const result = microBit.displayMatrix(new Uint8Array([10, 31, 31, 14, 4]));
+
+        expect(microBit.busy).toBe(true);
+        await expect(result).resolves.toBe(true);
+        expect(writeValueWithResponse).toHaveBeenCalledWith(new Uint8Array([0x82, 10, 31, 31, 14, 4]));
+        expect(microBit.busy).toBe(false);
+        expect(microBit.busyTimeoutId).toBe(null);
+    });
+
+    it('cleans up direct disconnects without leaking rejected stopNotifications calls', async () => {
+        const microBit = new MicroBitWebBluetooth();
+        const disconnectListener = vi.fn();
+        const removeEventListener = vi.fn();
+        const stopNotifications = vi.fn(() => Promise.reject(new Error('already disconnected')));
+        microBit.addDisconnectListener(disconnectListener);
+        microBit.device = {removeEventListener};
+        microBit.server = {
+            connected: true,
+            disconnect: vi.fn()
+        };
+        microBit.rxCharacteristic = {
+            removeEventListener,
+            stopNotifications
+        };
+        microBit.txCharacteristic = {};
+        microBit.resetReceiveTimeout();
+
+        microBit.disconnect();
+        await Promise.resolve();
+
+        expect(stopNotifications).toHaveBeenCalled();
+        expect(microBit.server).toBe(null);
+        expect(microBit.rxCharacteristic).toBe(null);
+        expect(microBit.txCharacteristic).toBe(null);
+        expect(microBit.receiveTimeoutId).toBe(null);
+        expect(disconnectListener).toHaveBeenCalledTimes(1);
+    });
+
+    it('cleans timers and listeners immediately when the browser reports a GATT disconnect', () => {
+        const microBit = new MicroBitWebBluetooth();
+        const disconnectListener = vi.fn();
+        const removeRxListener = vi.fn();
+        const removeDeviceListener = vi.fn();
+        microBit.addDisconnectListener(disconnectListener);
+        microBit.device = {removeEventListener: removeDeviceListener};
+        microBit.server = {connected: false};
+        microBit.rxCharacteristic = {removeEventListener: removeRxListener};
+        microBit.txCharacteristic = {};
+        microBit.resetReceiveTimeout();
+        microBit.busy = true;
+        microBit.busyTimeoutId = window.setTimeout(() => {}, 5000);
+
+        microBit.handleGattServerDisconnected();
+        vi.advanceTimersByTime(5000);
+
+        expect(removeRxListener).toHaveBeenCalledWith(
+            'characteristicvaluechanged',
+            microBit.handleCharacteristicValueChanged
+        );
+        expect(removeDeviceListener).toHaveBeenCalledWith(
+            'gattserverdisconnected',
+            microBit.handleGattServerDisconnected
+        );
+        expect(microBit.server).toBe(null);
+        expect(microBit.rxCharacteristic).toBe(null);
+        expect(microBit.txCharacteristic).toBe(null);
+        expect(microBit.receiveTimeoutId).toBe(null);
+        expect(microBit.busyTimeoutId).toBe(null);
+        expect(microBit.busy).toBe(false);
+        expect(disconnectListener).toHaveBeenCalledTimes(1);
+    });
+});

package/tests/e2e/page-background-loading.test.js

@@ -0,0 +1,152 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { mockProject, mockGn, mockSetProps } = vi.hoisted(() => ({
+    mockProject: {
+        setProgress: vi.fn(),
+        getMediaLoadRatio: vi.fn(() => 72)
+    },
+    mockGn: vi.fn(id => {
+        if (id === 'backdrop') {
+            return { className: 'modal-backdrop fade in' };
+        }
+        return null;
+    }),
+    mockSetProps: vi.fn((target, props) => Object.assign(target, props))
+}));
+
+vi.mock('@/editor/ScratchJr', () => ({
+    default: {
+        BIRDS_EYE_SPRITE_NAME: "Marty Bird's Eye",
+        getSprite: vi.fn(),
+        inFullscreen: false,
+        isMartyModeEnabled: false,
+        onHold: false,
+        stage: {
+            currentPage: {},
+            pages: [],
+            pagesdiv: {},
+            stagecolor: '#fff'
+        },
+        stagecolor: '#fff',
+        storyStart: vi.fn()
+    }
+}));
+vi.mock('@/editor/ui/Project', () => ({ default: mockProject }));
+vi.mock('@/editor/ui/Thumbs', () => ({ default: {} }));
+vi.mock('@/editor/ui/UI', () => ({ default: {} }));
+vi.mock('@/editor/engine/Sprite', () => ({ default: vi.fn() }));
+vi.mock('@/editor/ui/Palette', () => ({ default: {} }));
+vi.mock('@/editor/blocks/BlockSpecs', () => ({ default: {} }));
+vi.mock('@/tablet/OS', () => ({ default: {} }));
+vi.mock('@/tablet/IO', () => ({ default: {} }));
+vi.mock('@/tablet/MediaLib', () => ({ default: { keys: {}, path: '' } }));
+vi.mock('@/editor/ui/Undo', () => ({ default: {} }));
+vi.mock('@/geom/Matrix', () => ({ default: vi.fn() }));
+vi.mock('@/geom/Vector', () => ({ default: vi.fn() }));
+vi.mock('@/utils/lib', () => ({
+    DEGTOR: Math.PI / 180,
+    getIdFor: vi.fn(name => name),
+    gn: mockGn,
+    isTablet: false,
+    newDiv: vi.fn(),
+    newHTML: vi.fn(),
+    setCanvasSizeScaledToWindowDocumentHeight: vi.fn(),
+    setProps: mockSetProps
+}));
+
+describe('Page background loading', () => {
+    let Page;
+    let nextImage;
+    let createdImage;
+
+    beforeEach(async () => {
+        vi.useFakeTimers();
+        vi.clearAllMocks();
+        nextImage = null;
+        createdImage = null;
+        global.document = {
+            createElement: vi.fn(tag => {
+                expect(tag).toBe('img');
+                createdImage = nextImage || createImage();
+                return createdImage;
+            })
+        };
+        ({ default: Page } = await import('@/editor/engine/Page.js'));
+    });
+
+    afterEach(() => {
+        vi.runOnlyPendingTimers();
+        vi.useRealTimers();
+        delete global.document;
+    });
+
+    it('finishes once when a background image emits an error', () => {
+        const page = createPage();
+        const done = vi.fn();
+
+        Page.prototype.setBackgroundImage.call(page, 'missing-background.svg', done);
+        createdImage.onerror();
+        createdImage.onload();
+        vi.runAllTimers();
+
+        expect(page.clearBackground).toHaveBeenCalledTimes(1);
+        expect(done).toHaveBeenCalledTimes(1);
+        expect(mockProject.setProgress).not.toHaveBeenCalled();
+    });
+
+    it('finishes when a cached broken image is already complete', () => {
+        nextImage = createImage({ complete: true, naturalWidth: 0, naturalHeight: 0 });
+        const page = createPage();
+        const done = vi.fn();
+
+        Page.prototype.setBackgroundImage.call(page, 'cached-broken-background.svg', done);
+
+        expect(page.clearBackground).toHaveBeenCalledTimes(1);
+        expect(done).toHaveBeenCalledTimes(1);
+        expect(mockProject.setProgress).not.toHaveBeenCalled();
+    });
+
+    it('updates progress and finishes once when a background image loads', () => {
+        const page = createPage();
+        const done = vi.fn();
+
+        Page.prototype.setBackgroundImage.call(page, 'background.svg', done);
+        createdImage.onload();
+        createdImage.onerror();
+        vi.runAllTimers();
+
+        expect(page.clearBackground).not.toHaveBeenCalled();
+        expect(mockProject.getMediaLoadRatio).toHaveBeenCalledWith(70);
+        expect(mockProject.setProgress).toHaveBeenCalledWith(72);
+        expect(done).toHaveBeenCalledTimes(1);
+    });
+
+    function createPage() {
+        return {
+            bkg: {
+                appendChild: vi.fn(),
+                img: null,
+                originalImg: null
+            },
+            clearBackground: vi.fn()
+        };
+    }
+
+    function createImage({ complete = false, naturalWidth = 32, naturalHeight = 32 } = {}) {
+        return {
+            complete,
+            naturalHeight,
+            naturalWidth,
+            onerror: null,
+            onload: null,
+            style: {},
+            cloneNode: vi.fn(() => ({ cloned: true })),
+            get src() {
+                return this._src;
+            },
+            set src(value) {
+                this._src = value;
+            }
+        };
+    }
+});