@robotical/martyblocksjr 4.2.10 → 4.2.11

package/scripts/prepare-microbit-hex.mjs

@@ -0,0 +1,47 @@
+import fs from 'node:fs/promises';
+import {createHash} from 'node:crypto';
+import path from 'node:path';
+import {createRequire} from 'node:module';
+import {fileURLToPath} from 'node:url';
+
+const require = createRequire(import.meta.url);
+const JSZip = require('jszip');
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, '..');
+const sourceUrl = 'https://downloads.scratch.mit.edu/microbit/scratch-microbit.hex.zip';
+const outputPath = path.join(projectRoot, 'src', 'assets', 'microbit', 'scratch-microbit.hex');
+const expectedHexSha256 = '6a0cc7c2927ef53c8a8e8e26b8df06778f0a9896af49a98b285f51fff58c53e2';
+
+async function prepareMicroBitHex () {
+    console.info(`Downloading ${sourceUrl}`);
+    const response = await fetch(sourceUrl);
+    if (!response.ok) {
+        throw new Error(`Could not download the micro:bit HEX archive: HTTP ${response.status}`);
+    }
+
+    const archive = new JSZip(Buffer.from(await response.arrayBuffer()));
+    const hexEntryName = Object.keys(archive.files).find(fileName =>
+        !archive.files[fileName].dir && /\.hex$/i.test(fileName)
+    );
+    if (!hexEntryName) {
+        throw new Error('The micro:bit HEX archive did not contain a HEX file.');
+    }
+
+    const hexData = archive.file(hexEntryName).asNodeBuffer();
+    const actualHexSha256 = createHash('sha256').update(hexData).digest('hex');
+    if (actualHexSha256 !== expectedHexSha256) {
+        throw new Error(
+            `The downloaded micro:bit HEX failed its integrity check. ` +
+            `Expected ${expectedHexSha256}, received ${actualHexSha256}.`
+        );
+    }
+    await fs.mkdir(path.dirname(outputPath), {recursive: true});
+    await fs.writeFile(outputPath, hexData);
+    console.info(`Wrote ${path.relative(projectRoot, outputPath)}`);
+}
+
+prepareMicroBitHex().catch(error => {
+    console.error(error);
+    process.exitCode = 1;
+});

package/tests/BlockGuideRegistry.test.js

@@ -31,7 +31,7 @@ describe('Blocks Guide registry', () => {
         const documentedIds = new Set(getDocumentedBlockIds());
 
         expect([...documentedIds].sort()).toEqual([...expectedIds].sort());
-        expect(documentedIds.size).toBe(89);
+        expect(documentedIds.size).toBe(88);
         expect(Object.keys(BLOCK_GUIDE_METADATA).sort()).toEqual([...expectedIds].sort());
     });
 
@@ -47,7 +47,7 @@ describe('Blocks Guide registry', () => {
         expect(BLOCK_GUIDE_MODES[2].categories.map((category) => category.id)).toEqual(
             ['start', 'looks', 'sound']
         );
-        expect(BLOCK_GUIDE_EXTENSION.blockCount).toBe(8);
+        expect(BLOCK_GUIDE_EXTENSION.blockCount).toBe(7);
     });
 
     it('provides visible copy and artwork for every documented block', () => {
@@ -56,5 +56,7 @@ describe('Blocks Guide registry', () => {
             expect(item.description, `${blockId} description`).toBeTruthy();
             expect(Boolean(item.icon || item.symbol), `${blockId} artwork`).toBe(true);
         });
+        expect(BLOCK_GUIDE_METADATA.microbittilted.icon)
+            .toBe('../assets/blockicons/microbittiltright.svg');
     });
 });

package/tests/MicroBitBlockDescriptions.test.js

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import englishMessages from '../editions/free/src/localizations/en.json';
+
+describe('micro:bit block descriptions', () => {
+    it('uses concise palette and accessibility labels', () => {
+        expect({
+            cogButton: englishMessages.BLOCK_DESC_ON_TOUCH_Cog,
+            button: englishMessages.BLOCK_DESC_MICROBIT_ON_BUTTON,
+            gesture: englishMessages.BLOCK_DESC_MICROBIT_ON_GESTURE,
+            tilt: englishMessages.BLOCK_DESC_MICROBIT_ON_TILT,
+            heart: englishMessages.BLOCK_DESC_MICROBIT_DISPLAY_HEART,
+            happy: englishMessages.BLOCK_DESC_MICROBIT_DISPLAY_HAPPY,
+            text: englishMessages.BLOCK_DESC_MICROBIT_DISPLAY_TEXT,
+            custom: englishMessages.BLOCK_DESC_MICROBIT_DISPLAY_CUSTOM,
+            clear: englishMessages.BLOCK_DESC_MICROBIT_CLEAR_DISPLAY
+        }).toEqual({
+            cogButton: 'START ON BUTTON PRESS',
+            button: 'START ON BUTTON PRESS',
+            gesture: 'START ON GESTURE',
+            tilt: 'START ON TILT',
+            heart: 'DISPLAY HEART',
+            happy: 'DISPLAY HAPPY FACE',
+            text: 'DISPLAY TEXT',
+            custom: 'DISPLAY CUSTOM PATTERN',
+            clear: 'CLEAR DISPLAY'
+        });
+    });
+});

package/tests/MicroBitBlockOptions.test.js

@@ -0,0 +1,34 @@
+import {describe, expect, it} from 'vitest';
+import {
+    MICROBIT_DEFAULT_TILT_OPTION,
+    MICROBIT_LEGACY_TILT_ANY_OPTION,
+    MICROBIT_TILT_OPTIONS,
+    resolveMicroBitTiltIcon
+} from '../src/microbit/MicroBitBlockOptions';
+
+describe('micro:bit block options', () => {
+    it('offers only directional tilt choices for new blocks', () => {
+        expect(MICROBIT_TILT_OPTIONS).toEqual([
+            'microbittiltright',
+            'microbittiltleft',
+            'microbittiltbackward',
+            'microbittiltforward'
+        ]);
+        expect(MICROBIT_DEFAULT_TILT_OPTION).toBe('microbittiltright');
+        expect(MICROBIT_TILT_OPTIONS).not.toContain(MICROBIT_LEGACY_TILT_ANY_OPTION);
+    });
+
+    it('keeps the tilt-any artwork for legacy saved arguments', () => {
+        expect(resolveMicroBitTiltIcon('microbittiltany', MICROBIT_TILT_OPTIONS))
+            .toBe('microbittiltany');
+        expect(resolveMicroBitTiltIcon('tilt_any', MICROBIT_TILT_OPTIONS))
+            .toBe('microbittiltany');
+        expect(resolveMicroBitTiltIcon('tiltright', MICROBIT_TILT_OPTIONS))
+            .toBe('microbittiltright');
+    });
+
+    it('falls back safely when an unknown tilt argument is loaded', () => {
+        expect(resolveMicroBitTiltIcon('unknown', MICROBIT_TILT_OPTIONS))
+            .toBe(MICROBIT_DEFAULT_TILT_OPTION);
+    });
+});

package/tests/MicroBitButtonIcons.test.js

@@ -0,0 +1,24 @@
+import {readFileSync} from 'node:fs';
+import {join} from 'node:path';
+import {describe, expect, it} from 'vitest';
+
+const ICON_DIRECTORY = join('editions', 'free', 'src', 'assets', 'blockicons');
+const BUTTON_ICONS = [
+    {file: 'microbitbuttona.svg', handCount: 1},
+    {file: 'microbitbuttonb.svg', handCount: 1},
+    {file: 'microbitbuttonab.svg', handCount: 2}
+];
+
+describe('micro:bit button icons', () => {
+    BUTTON_ICONS.forEach(({file, handCount}) => {
+        it(`${file} uses hands instead of letter labels`, () => {
+            const svg = readFileSync(join(ICON_DIRECTORY, file), 'utf8');
+            const hands = svg.match(/<use href="#button-press-hand"/g) || [];
+
+            expect(svg).not.toMatch(/<text\b/);
+            expect(svg).toContain('fill="#34332b"');
+            expect(svg).toContain('fill="#fff"');
+            expect(hands).toHaveLength(handCount);
+        });
+    });
+});

package/tests/MicroBitDisplayIcons.test.js

@@ -0,0 +1,64 @@
+import {readFileSync} from 'node:fs';
+import {join} from 'node:path';
+import {describe, expect, it} from 'vitest';
+
+const ASSET_DIRECTORY = join('editions', 'free', 'src', 'assets');
+const DISPLAY_BLOCK_ASSETS = [
+    join('blockicons', 'microbitdisplayheart.svg'),
+    join('blockicons', 'microbitdisplayhappy.svg'),
+    join('blockicons', 'microbitdisplaytext.svg'),
+    join('blockicons', 'microbitdisplayclear.svg')
+];
+
+describe('micro:bit display artwork', () => {
+    DISPLAY_BLOCK_ASSETS.forEach((file) => {
+        it(`${file} uses a display-only treatment`, () => {
+            const svg = readFileSync(join(ASSET_DIRECTORY, file), 'utf8');
+
+            expect(svg).toContain('data-microbit-display="true"');
+            expect(svg).toContain('transform="translate(-5 0)"');
+            expect(svg).toContain('fill="#414757"');
+            expect(svg).not.toMatch(/#35c1df/i);
+            expect(svg).not.toMatch(/#4c97ff/i);
+            expect(svg).not.toMatch(/#ffbf00/i);
+        });
+    });
+
+    DISPLAY_BLOCK_ASSETS.filter((file) => !file.endsWith('microbitdisplayclear.svg')).forEach((file) => {
+        it(`${file} uses white for lit LEDs`, () => {
+            const svg = readFileSync(join(ASSET_DIRECTORY, file), 'utf8');
+
+            expect(svg).toContain('#FFFFFF');
+        });
+    });
+
+    it('shows clear display as a fully unlit 5x5 matrix without an X', () => {
+        const svg = readFileSync(join(ASSET_DIRECTORY, 'blockicons', 'microbitdisplayclear.svg'), 'utf8');
+
+        expect(svg.match(/rx="0\.8"/g)).toHaveLength(25);
+        expect(svg).not.toContain('data-led-state="on"');
+        expect(svg).not.toContain('#FFFFFF');
+        expect(svg).not.toContain('<path');
+    });
+
+    ['MicroBitLooksOn.svg', 'MicroBitLooksOff.svg'].forEach((file) => {
+        it(`${file} keeps the full micro:bit category artwork`, () => {
+            const svg = readFileSync(join(ASSET_DIRECTORY, 'categories', file), 'utf8');
+
+            expect(svg).not.toContain('data-microbit-display="true"');
+            expect(svg).toMatch(/#4c97ff/i);
+            expect(svg).toMatch(/#ffbf00/i);
+        });
+    });
+
+    it('uses the same white LED colour for the custom preview and editor', () => {
+        const blockArg = readFileSync(join('src', 'editor', 'blocks', 'BlockArg.js'), 'utf8');
+        const editorCss = readFileSync(join('editions', 'free', 'src', 'css', 'editor.css'), 'utf8');
+
+        expect(blockArg).toContain('drawMicroBitDisplay');
+        expect(blockArg).toMatch(/drawMicroBitDisplay\(ctx,.*?, 13, 8, 49, 49\);/);
+        expect(blockArg).toContain("enabled ? '#FFFFFF' : '#7C87A5'");
+        expect(blockArg).not.toContain('drawMicroBitBoard');
+        expect(editorCss).toMatch(/\.microbitMatrixCell\.on\s*\{[^}]*background:\s*#FFFFFF;/s);
+    });
+});

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

@@ -112,6 +112,14 @@ async function openExtensionsLibrary(page) {
   await page.click("#addExtensionButton");
 }
 
+async function getPaletteUndoGap(page) {
+  return page.evaluate(() => {
+    const palette = document.getElementById("palette").getBoundingClientRect();
+    const undoControls = document.getElementById("undocontrols").getBoundingClientRect();
+    return undoControls.left - palette.right;
+  });
+}
+
 describe("Chromium 79 smoke test", () => {
   it(
     "loads home page without console errors",
@@ -127,7 +135,7 @@ describe("Chromium 79 smoke test", () => {
   );
 
   it(
-    "keeps the extension entry visible and reveals micro:bit controls only while loaded",
+    "uses the third connection slot for either the extension entry or micro:bit controls",
     async () => {
       const { browser, page, errors } = await openPage("/editor.html?mode=edit");
 
@@ -137,6 +145,7 @@ describe("Chromium 79 smoke test", () => {
         const initialState = await page.evaluate(() => {
           const addButton = document.getElementById("addExtensionButton");
           const microBitButton = document.getElementById("microBitConnectionButton");
+          const removeButton = document.getElementById("microBitRemoveButton");
           return {
             addButtonDisplay: window.getComputedStyle(addButton).display,
             addButtonAriaHidden: addButton.getAttribute("aria-hidden"),
@@ -144,6 +153,9 @@ describe("Chromium 79 smoke test", () => {
             microBitButtonDisplay: window.getComputedStyle(microBitButton).display,
             microBitButtonAriaHidden: microBitButton.getAttribute("aria-hidden"),
             microBitButtonDisabled: microBitButton.disabled,
+            removeButtonDisplay: window.getComputedStyle(removeButton).display,
+            removeButtonAriaHidden: removeButton.getAttribute("aria-hidden"),
+            removeButtonDisabled: removeButton.disabled,
             rightCategoryIds: Array.from(document.querySelectorAll("#selectorsright .category-selector-button")).map(
               (button) => button.id
             ),
@@ -158,6 +170,9 @@ describe("Chromium 79 smoke test", () => {
           microBitButtonDisplay: "none",
           microBitButtonAriaHidden: "true",
           microBitButtonDisabled: true,
+          removeButtonDisplay: "none",
+          removeButtonAriaHidden: "true",
+          removeButtonDisabled: true,
           rightCategoryIds: ["cog-start", "cog-looks", "cog-sound"],
           extensionEnabled: false,
         });
@@ -195,6 +210,8 @@ describe("Chromium 79 smoke test", () => {
         const enabledState = await page.evaluate(() => {
           const addButton = document.getElementById("addExtensionButton");
           const microBitButton = document.getElementById("microBitConnectionButton");
+          const removeButton = document.getElementById("microBitRemoveButton");
+          const microBitAction = microBitButton.querySelector(".iconButtonContainer");
           return {
             addButtonDisplay: window.getComputedStyle(addButton).display,
             addButtonAriaHidden: addButton.getAttribute("aria-hidden"),
@@ -202,6 +219,13 @@ describe("Chromium 79 smoke test", () => {
             microBitButtonDisplay: window.getComputedStyle(microBitButton).display,
             microBitButtonAriaHidden: microBitButton.getAttribute("aria-hidden"),
             microBitButtonDisabled: microBitButton.disabled,
+            removeButtonDisplay: window.getComputedStyle(removeButton).display,
+            removeButtonAriaHidden: removeButton.getAttribute("aria-hidden"),
+            removeButtonDisabled: removeButton.disabled,
+            microBitUsesConnectControl: window.getComputedStyle(microBitAction).backgroundImage.includes(
+              "connect_btn-default.svg"
+            ),
+            microBitActionPosition: window.getComputedStyle(microBitAction).position,
             rightCategoryIds: Array.from(document.querySelectorAll("#selectorsright .category-selector-button")).map(
               (button) => button.id
             ),
@@ -216,22 +240,109 @@ 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,
+          removeButtonDisplay: "flex",
+          removeButtonAriaHidden: "false",
+          removeButtonDisabled: false,
+          microBitUsesConnectControl: true,
+          microBitActionPosition: "static",
           rightCategoryIds: ["cog-start", "cog-looks", "cog-sound", "microbit-start", "microbit-looks"],
           selectedRightCategoryIds: ["microbit-start"],
           paletteBlockTypes: [
             "microbitbuttonpressed",
-            "microbitgesture",
             "microbittilted",
           ],
           extensionEnabled: true,
         });
 
+        const microBitTiltState = await page.evaluate(() => {
+          const paletteBlock = Array.from(document.querySelectorAll("#palette > div"))
+            .find((block) => block.owner && block.owner.blocktype === "microbittilted").owner;
+          return {
+            defaultValue: paletteBlock.getArgValue(),
+            options: JSON.parse(paletteBlock.arg.list),
+          };
+        });
+
+        expect(microBitTiltState).toEqual({
+          defaultValue: "microbittiltright",
+          options: [
+            "microbittiltright",
+            "microbittiltleft",
+            "microbittiltbackward",
+            "microbittiltforward",
+          ],
+        });
+
+        const legacyMicroBitTiltState = await page.evaluate(() => {
+          const scripts = window.ScratchJr.getActiveScript().owner;
+          const block = scripts.insertKeyboardBlock(null, [[
+            "microbittilted",
+            "microbittiltany",
+            50,
+            50,
+          ]]);
+          return {
+            value: block.getArgValue(),
+            icon: block.arg.icon,
+            options: JSON.parse(block.arg.list),
+          };
+        });
+
+        expect(legacyMicroBitTiltState).toEqual({
+          value: "microbittiltany",
+          icon: "microbittiltany",
+          options: [
+            "microbittiltright",
+            "microbittiltleft",
+            "microbittiltbackward",
+            "microbittiltforward",
+          ],
+        });
+
+        const standardPaletteUndoGap = await getPaletteUndoGap(page);
+        const maximumPaletteUndoGap = await page.evaluate(() => window.innerHeight * 0.02);
+        await page.setViewport({ width: 1200, height: 600 });
+        const widePaletteUndoGap = await getPaletteUndoGap(page);
+        await page.setViewport({ width: 800, height: 600 });
+
+        expect(standardPaletteUndoGap).toBeGreaterThanOrEqual(0);
+        expect(standardPaletteUndoGap).toBeLessThanOrEqual(maximumPaletteUndoGap);
+        expect(widePaletteUndoGap).toBeCloseTo(standardPaletteUndoGap, 1);
+
+        const connectedActionState = await page.evaluate(() => {
+          const microBitButton = document.getElementById("microBitConnectionButton");
+          const microBitAction = microBitButton.querySelector(".iconButtonContainer");
+          microBitButton.classList.add("connectButtonConnected");
+          microBitAction.classList.remove("notConnectedButtonContainer");
+          microBitAction.classList.add("connectedButtonContainer");
+          microBitAction.textContent = "DISCONNECT";
+
+          const actionStyle = window.getComputedStyle(microBitAction);
+          const result = {
+            text: microBitAction.textContent,
+            backgroundImage: actionStyle.backgroundImage,
+            position: actionStyle.position,
+          };
+
+          microBitButton.classList.remove("connectButtonConnected");
+          microBitAction.classList.remove("connectedButtonContainer");
+          microBitAction.classList.add("notConnectedButtonContainer");
+          microBitAction.textContent = "";
+          return result;
+        });
+
+        expect(connectedActionState).toEqual({
+          text: "DISCONNECT",
+          backgroundImage: "none",
+          position: "static",
+        });
+
         await page.click("#microbit-looks");
         await page.waitForFunction(
           () => Array.from(document.querySelectorAll("#palette > div")).some(
@@ -285,8 +396,8 @@ describe("Chromium 79 smoke test", () => {
         });
         expect(blocksAfterInsert).toContain("microbitdisplayclear");
 
-        await openExtensionsLibrary(page);
-        await page.waitForSelector("#extensionsLibrary.fade.in", { timeout: 30_000 });
+        await page.click("#microBitRemoveButton");
+        await page.waitForSelector("#microBitExtensionRemoveWarning.show", { timeout: 30_000 });
         const loadedLibraryState = await page.evaluate(() => ({
           microBitCardAction: document.getElementById("microBitExtensionCardAction").textContent.trim(),
           microBitCardLoaded: document.getElementById("microBitExtensionCard").classList.contains("loaded"),
@@ -296,8 +407,6 @@ describe("Chromium 79 smoke test", () => {
           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"),
@@ -312,7 +421,12 @@ describe("Chromium 79 smoke test", () => {
           hasMicroBitBlock: true,
         });
 
-        await page.click("#microBitExtensionCard");
+        await page.click(".extensionsLibraryClose");
+        await page.waitForFunction(
+          () => !document.getElementById("extensionsLibrary").classList.contains("in"),
+          { timeout: 30_000 }
+        );
+        await page.click("#microBitRemoveButton");
         await page.waitForSelector("#microBitExtensionRemoveWarning.show", { timeout: 30_000 });
         await page.click("#microBitExtensionRemoveConfirm");
         await page.waitForFunction(
@@ -324,6 +438,7 @@ describe("Chromium 79 smoke test", () => {
         const unloadedState = await page.evaluate(() => ({
           addButtonDisplay: window.getComputedStyle(document.getElementById("addExtensionButton")).display,
           microBitButtonDisplay: window.getComputedStyle(document.getElementById("microBitConnectionButton")).display,
+          removeButtonDisplay: window.getComputedStyle(document.getElementById("microBitRemoveButton")).display,
           extensionsLibraryOpen: document.getElementById("extensionsLibrary").classList.contains("in"),
           microBitCardAction: document.getElementById("microBitExtensionCardAction").textContent.trim(),
           microBitCardLoaded: document.getElementById("microBitExtensionCard").classList.contains("loaded"),
@@ -336,6 +451,7 @@ describe("Chromium 79 smoke test", () => {
         expect(unloadedState).toEqual({
           addButtonDisplay: "flex",
           microBitButtonDisplay: "none",
+          removeButtonDisplay: "none",
           extensionsLibraryOpen: false,
           microBitCardAction: "+",
           microBitCardLoaded: false,