@robotical/martyblocksjr 4.1.1 → 4.2.0

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

@@ -122,6 +122,232 @@ describe("Chromium 79 smoke test", () => {
     60_000
   );
 
+  it(
+    "hides micro:bit controls until the extension is added",
+    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: "flex",
+          addButtonAriaHidden: "false",
+          addButtonDisabled: false,
+          microBitButtonDisplay: "none",
+          microBitButtonAriaHidden: "true",
+          microBitButtonDisabled: true,
+          rightCategoryIds: ["cog-start", "cog-looks", "cog-sound"],
+          extensionEnabled: false,
+        });
+
+        await page.click("#addExtensionButton");
+        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: "flex",
+          addButtonAriaHidden: "false",
+          addButtonDisabled: false,
+          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 page.click("#addExtensionButton");
+        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: "flex",
+          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/marty-connection-ui.e2e.test.js

@@ -65,6 +65,7 @@ vi.mock('@/utils/accessibility', () => ({
     setSelectedState: vi.fn()
 }));
 vi.mock('@/html-svgs/cog', () => ({ cogSvg: '<svg></svg>' }));
+vi.mock('@/html-svgs/microbit', () => ({ microBitSvg: '<svg></svg>' }));
 vi.mock('@/html-svgs/sprite', () => ({ spriteSvg: '<svg></svg>' }));
 vi.mock('@/html-svgs/marty', () => ({ martySvg: '<svg></svg>' }));
 vi.mock('@/html-svgs/sprite-deselected', () => ({ spriteDeselectedSvg: '<svg></svg>' }));
@@ -126,6 +127,11 @@ describe('Marty connection UI', () => {
                 }),
                 removeMarty: vi.fn(),
                 setMartySensorAvailability: vi.fn()
+            },
+            microBitManager: {
+                addMicroBit: vi.fn(),
+                wireMicroBitWithBlocks: vi.fn(),
+                removeMicroBit: vi.fn()
             }
         };
         warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
@@ -242,6 +248,37 @@ describe('Marty connection UI', () => {
         expect(button.classList.contains('connectButtonConnected')).toBe(true);
         expect(button.querySelector('.iconButtonContainer').classList.contains('connectedButtonContainer')).toBe(true);
     });
+
+    it('uses a friendly message when the micro:bit chooser is cancelled', () => {
+        const message = UI.getMicroBitConnectionErrorMessage(
+            new DOMException('User cancelled the requestDevice() chooser.', 'NotFoundError')
+        );
+
+        expect(message).toBe('No micro:bit was selected. Click Connect again when you are ready.');
+    });
+
+    it('registers micro:bit blocks and restores the button after direct disconnect', () => {
+        const button = createConnectionButton();
+        const oldOnClick = vi.fn();
+        button.onclick = oldOnClick;
+        const microBit = createMicroBit();
+
+        UI.setupMicroBitConnectionButton(button, microBit);
+
+        expect(window.microBitManager.addMicroBit).toHaveBeenCalledWith(microBit);
+        expect(window.microBitManager.wireMicroBitWithBlocks).toHaveBeenCalledWith('microbit-1');
+        expect(button.classList.contains('connectButtonConnected')).toBe(true);
+
+        button.onclick();
+        vi.advanceTimersByTime(1000);
+
+        expect(microBit.disconnect).toHaveBeenCalled();
+        expect(window.microBitManager.removeMicroBit).toHaveBeenCalledWith(microBit);
+        expect(button.onclick).toBe(oldOnClick);
+        expect(button.classList.contains('connectButtonConnected')).toBe(false);
+        expect(button.querySelector('.iconButtonContainer').classList.contains('notConnectedButtonContainer')).toBe(true);
+        expect(microBit.__disconnectUnsubscribed).toBe(true);
+    });
 });
 
 function createMartyRaft() {
@@ -265,6 +302,25 @@ function createConnectionButton() {
     return button;
 }
 
+function createMicroBit() {
+    const microBit = {
+        id: 'microbit-1',
+        getFriendlyName: () => 'micro:bit One',
+        disconnect: vi.fn(() => {
+            if (microBit.__disconnectCallback) {
+                microBit.__disconnectCallback(microBit);
+            }
+        }),
+        addDisconnectListener: vi.fn(callback => {
+            microBit.__disconnectCallback = callback;
+            return () => {
+                microBit.__disconnectUnsubscribed = true;
+            };
+        })
+    };
+    return microBit;
+}
+
 class FakeElement {
     constructor(classes = []) {
         this.classList = new FakeClassList(classes);

package/tests/e2e/microbit-blocks.test.js

@@ -0,0 +1,162 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { mockPrims } = vi.hoisted(() => ({
+    mockPrims: {
+        OnMicroBitEvent: vi.fn()
+    }
+}));
+
+vi.mock('@/editor/engine/Prims', () => ({
+    default: mockPrims
+}));
+
+vi.mock('../../src/editor/engine/Prims', () => ({
+    default: mockPrims
+}));
+
+describe('MicroBitBlocks', () => {
+    let MicroBitBlocks;
+    let Prims;
+    let sensorListener;
+    let blocks;
+
+    beforeEach(async () => {
+        vi.clearAllMocks();
+        sensorListener = null;
+        blocks = null;
+        const [blocksModule, primsModule] = await Promise.all([
+            import('@/microbit/MicroBitBlocks.js'),
+            import('@/editor/engine/Prims')
+        ]);
+        MicroBitBlocks = blocksModule.default;
+        Prims = primsModule.default;
+    });
+
+    afterEach(() => {
+        if (blocks) {
+            blocks.destroy();
+        }
+        vi.useRealTimers();
+    });
+
+    it('emits individual button events after the combo window', () => {
+        vi.useFakeTimers();
+        blocks = new MicroBitBlocks(createMicroBit());
+
+        sensorListener(
+            createSensors({buttonA: 1}),
+            createSensors({buttonA: 0})
+        );
+
+        expect(Prims.OnMicroBitEvent).not.toHaveBeenCalled();
+
+        vi.advanceTimersByTime(120);
+
+        expect(Prims.OnMicroBitEvent).toHaveBeenCalledWith('microbitbuttona');
+        expect(Prims.OnMicroBitEvent).not.toHaveBeenCalledWith('microbitbuttonab');
+    });
+
+    it('emits A+B button events when both buttons are pressed together', () => {
+        blocks = new MicroBitBlocks(createMicroBit());
+
+        sensorListener(
+            createSensors({buttonA: 1, buttonB: 1}),
+            createSensors({buttonA: 0, buttonB: 0})
+        );
+
+        expect(Prims.OnMicroBitEvent).toHaveBeenCalledWith('microbitbuttonab');
+        expect(Prims.OnMicroBitEvent).not.toHaveBeenCalledWith('microbitbuttona');
+        expect(Prims.OnMicroBitEvent).not.toHaveBeenCalledWith('microbitbuttonb');
+    });
+
+    it('promotes a near-simultaneous second button press to A+B', () => {
+        vi.useFakeTimers();
+        blocks = new MicroBitBlocks(createMicroBit());
+
+        sensorListener(
+            createSensors({buttonA: 1}),
+            createSensors({buttonA: 0})
+        );
+        vi.advanceTimersByTime(60);
+        sensorListener(
+            createSensors({buttonA: 1, buttonB: 1}),
+            createSensors({buttonA: 1, buttonB: 0})
+        );
+        vi.advanceTimersByTime(120);
+
+        expect(Prims.OnMicroBitEvent).toHaveBeenCalledTimes(1);
+        expect(Prims.OnMicroBitEvent).toHaveBeenCalledWith('microbitbuttonab');
+    });
+
+    it('emits gesture events on gesture bit transitions', () => {
+        blocks = new MicroBitBlocks(createMicroBit());
+
+        sensorListener(
+            createSensors({gestureState: 1}),
+            createSensors({gestureState: 0})
+        );
+
+        expect(Prims.OnMicroBitEvent).toHaveBeenCalledWith('microbitgestureshaken');
+    });
+
+    it('emits tilt events on every tilted sensor update', () => {
+        blocks = new MicroBitBlocks(createMicroBit());
+
+        sensorListener(
+            createSensors({tiltX: -180}),
+            createSensors({tiltX: 0})
+        );
+        sensorListener(
+            createSensors({tiltX: -180}),
+            createSensors({tiltX: -180})
+        );
+
+        expect(Prims.OnMicroBitEvent).toHaveBeenCalledWith('microbittiltany');
+        expect(Prims.OnMicroBitEvent).toHaveBeenCalledWith('microbittiltleft');
+        expect(Prims.OnMicroBitEvent).toHaveBeenCalledTimes(4);
+    });
+
+    it('sends matrix rows for display symbols', () => {
+        const microBit = createMicroBit();
+        blocks = new MicroBitBlocks(microBit);
+
+        blocks.displaySymbol('microbitdisplayheart');
+
+        expect(microBit.displayMatrix).toHaveBeenCalledWith(new Uint8Array([10, 31, 31, 14, 4]));
+    });
+
+    it('sends matrix rows for custom display patterns', () => {
+        const microBit = createMicroBit();
+        blocks = new MicroBitBlocks(microBit);
+
+        blocks.displayPattern('10000/01000/00100/00010/00001');
+
+        expect(microBit.displayMatrix).toHaveBeenCalledWith(new Uint8Array([1, 2, 4, 8, 16]));
+    });
+
+    function createMicroBit(sensors = createSensors()) {
+        return {
+            sensors,
+            addSensorListener: vi.fn(callback => {
+                sensorListener = callback;
+                return vi.fn();
+            }),
+            isConnected: () => true,
+            displayMatrix: vi.fn(),
+            displayText: vi.fn(),
+            clearDisplay: vi.fn()
+        };
+    }
+
+    function createSensors(overrides = {}) {
+        return {
+            tiltX: 0,
+            tiltY: 0,
+            buttonA: 0,
+            buttonB: 0,
+            touchPins: [0, 0, 0],
+            gestureState: 0,
+            ...overrides
+        };
+    }
+});