@robotical/martyblocksjr 4.2.2 → 4.2.4

package/tests/e2e/accessibility.e2e.test.js

@@ -138,9 +138,11 @@ async function getFocusStyles(page, selector) {
 }
 
 function expectVisibleFocusIndicator(focusStyles) {
-    expect(focusStyles.outlineStyle).not.toBe('none');
-    expect(focusStyles.outlineWidth).toBeGreaterThan(0);
-    expect(focusStyles.outlineColor).not.toBe('rgba(0, 0, 0, 0)');
+    const hasVisibleOutline = focusStyles.outlineStyle !== 'none' &&
+        focusStyles.outlineWidth > 0 &&
+        focusStyles.outlineColor !== 'rgba(0, 0, 0, 0)';
+    const hasVisibleBoxShadow = focusStyles.boxShadow && focusStyles.boxShadow !== 'none';
+    expect(hasVisibleOutline || hasVisibleBoxShadow).toBe(true);
 }
 
 async function expectNamedControls(page, selectors) {
@@ -231,7 +233,7 @@ describe('Accessibility shell audit', () => {
             await new Promise((resolve) => setTimeout(resolve, 1200));
             await page.click('#booktab');
             await page.waitForSelector('iframe#htmlcontents', { timeout: 30_000 });
-            expect(await page.$eval('iframe#htmlcontents', (element) => element.getAttribute('title'))).toBe('About ScratchJr');
+            expect(await page.$eval('iframe#htmlcontents', (element) => element.getAttribute('title'))).toBe('About Blocks Jr');
 
             expectNoAxeViolations(await runAxe(page));
             expect(errors).toEqual([]);
@@ -250,11 +252,25 @@ describe('Accessibility shell audit', () => {
             });
 
             const guideCases = [
+                {
+                    path: 'inapp/about.html',
+                    title: 'About Blocks Jr',
+                    focusSelector: '#skip-link',
+                    buttonSelectors: [],
+                    decorativeImageSelector: '.about-hero-art img'
+                },
                 {
                     path: 'inapp/interface.html',
                     title: 'Interface Guide',
                     focusSelector: '#interface-button-save',
-                    buttonSelectors: ['#interface-button-save', '#interface-button-stage', '#interface-button-green-flag'],
+                    buttonSelectors: [
+                        '#interface-button-save',
+                        '#interface-button-extensions',
+                        '#interface-button-stage',
+                        '#interface-button-green-flag',
+                        '#interface-button-duplicate-page',
+                        '#interface-button-zoom'
+                    ],
                     decorativeImageSelector: '.ipad-project-view'
                 },
                 {
@@ -267,9 +283,13 @@ describe('Accessibility shell audit', () => {
                 {
                     path: 'inapp/blocks.html',
                     title: 'Blocks Guide',
-                    focusSelector: '#skip-link',
-                    buttonSelectors: [],
-                    decorativeImageSelector: '.block-image'
+                    focusSelector: '#blocks-guide-tab-marty',
+                    buttonSelectors: [
+                        '#blocks-guide-tab-marty',
+                        '#blocks-guide-tab-sprite',
+                        '#blocks-guide-tab-cog'
+                    ],
+                    decorativeImageSelector: '.block-guide-icon'
                 }
             ];
 
@@ -279,12 +299,14 @@ describe('Accessibility shell audit', () => {
                 await page.goto(`${HOST}/${guideCase.path}`, { waitUntil: 'domcontentloaded', timeout: 30_000 });
                 await waitForTitle(page, guideCase.title);
                 await page.waitForSelector('#skip-link');
-                await page.waitForSelector('#content[role="main"]');
+                await page.waitForSelector('#content');
 
                 expect((await page.title()).includes(guideCase.title)).toBe(true);
                 expect(await page.$eval('html', (element) => element.lang)).toBe('en');
                 expect(await page.$eval('#skip-link', (element) => element.getAttribute('href'))).toBe('#content');
-                expect(await page.$eval('#content', (element) => element.getAttribute('role'))).toBe('main');
+                expect(await page.$eval('#content', (element) => {
+                    return element.tagName.toLowerCase() === 'main' || element.getAttribute('role') === 'main';
+                })).toBe(true);
 
                 if (guideCase.buttonSelectors.length > 0) {
                     await expectNamedControls(page, guideCase.buttonSelectors);
@@ -298,6 +320,127 @@ describe('Accessibility shell audit', () => {
                 await tabToSelector(page, guideCase.focusSelector);
                 expectVisibleFocusIndicator(await getFocusStyles(page, guideCase.focusSelector));
 
+                if (guideCase.path === 'inapp/interface.html') {
+                    const buttonIds = await page.$$eval('.interface-button', (buttons) => {
+                        return buttons.map((button) => button.id);
+                    });
+                    expect(buttonIds).toHaveLength(24);
+                    expect(await page.$$eval('.interface-connector', (connectors) => connectors.length)).toBe(24);
+                    expect(await page.$eval('#interface-key-header', (element) => element.textContent)).toBe('1 | Save');
+
+                    for (let index = 0; index < buttonIds.length; index += 1) {
+                        const selector = `#${buttonIds[index]}`;
+                        await page.click(selector);
+                        const selectedFeature = await page.evaluate((buttonSelector) => {
+                            const button = document.querySelector(buttonSelector);
+                            const connector = document.querySelector(
+                                `.interface-connector[data-guide-key="${button.getAttribute('data-guide-key')}"]`
+                            );
+                            const number = button.querySelector('span');
+                            return {
+                                ariaCurrent: button.getAttribute('aria-current'),
+                                ariaLabel: button.getAttribute('aria-label'),
+                                buttonBackground: window.getComputedStyle(button).backgroundColor,
+                                connectorIsSelected: connector.classList.contains('interface-connector-selected'),
+                                connectorLineLength: connector.querySelector('line').getTotalLength(),
+                                description: document.querySelector('#interface-key-description').textContent,
+                                header: document.querySelector('#interface-key-header').textContent,
+                                numberColor: window.getComputedStyle(number).color,
+                                numberText: number.textContent,
+                                selectedConnectorCount: document.querySelectorAll(
+                                    '.interface-connector-selected'
+                                ).length,
+                                selectedCount: document.querySelectorAll('.interface-button[aria-current="page"]').length
+                            };
+                        }, selector);
+
+                        expect(selectedFeature.header).toBe(selectedFeature.ariaLabel);
+                        expect(selectedFeature.header.startsWith(`${index + 1} | `)).toBe(true);
+                        expect(selectedFeature.header).not.toContain('String missing:');
+                        expect(selectedFeature.description.trim().length).toBeGreaterThan(0);
+                        expect(selectedFeature.description).not.toContain('String missing:');
+                        expect(selectedFeature.ariaCurrent).toBe('page');
+                        expect(selectedFeature.numberText).toBe(String(index + 1));
+                        expect(selectedFeature.numberColor).not.toBe(selectedFeature.buttonBackground);
+                        expect(selectedFeature.connectorIsSelected).toBe(true);
+                        expect(selectedFeature.connectorLineLength).toBeGreaterThan(0);
+                        expect(selectedFeature.selectedConnectorCount).toBe(1);
+                        expect(selectedFeature.selectedCount).toBe(1);
+                    }
+
+                    await page.click('#interface-button-extensions');
+                    expect(await page.$eval('#interface-key-header', (element) => element.textContent)).toBe('3 | Extensions');
+                    expect(await page.$eval('#interface-key-description', (element) => element.textContent)).toContain('micro:bit');
+                }
+
+                if (guideCase.path === 'inapp/blocks.html') {
+                    const inventory = await page.evaluate(() => {
+                        const modeCounts = {};
+                        document.querySelectorAll('[data-guide-mode-panel]').forEach((panel) => {
+                            modeCounts[panel.getAttribute('data-guide-mode-panel')] =
+                                panel.querySelectorAll('.block-guide-card').length;
+                        });
+                        return {
+                            activeMode: document.querySelector('[role="tab"][aria-selected="true"]')
+                                .getAttribute('data-guide-mode'),
+                            extensionCount: document.querySelectorAll(
+                                '#blocks-guide-extension .block-guide-card'
+                            ).length,
+                            modeCounts,
+                            missingCopy: document.body.textContent.includes('String missing:'),
+                            tabCount: document.querySelectorAll('[role="tab"]').length
+                        };
+                    });
+                    expect(inventory).toEqual({
+                        activeMode: 'marty',
+                        extensionCount: 8,
+                        modeCounts: {
+                            marty: 44,
+                            sprite: 31,
+                            cog: 19
+                        },
+                        missingCopy: false,
+                        tabCount: 3
+                    });
+
+                    await page.click('#blocks-guide-tab-sprite');
+                    expect(await page.$eval('#blocks-guide-panel-sprite', (panel) => panel.hidden)).toBe(false);
+                    expect(await page.$eval('#blocks-guide-panel-marty', (panel) => panel.hidden)).toBe(true);
+
+                    await page.focus('#blocks-guide-tab-sprite');
+                    await page.keyboard.press('ArrowRight');
+                    expect(await page.$eval('#blocks-guide-tab-cog', (tab) => tab.getAttribute('aria-selected'))).toBe('true');
+                    expect(await page.$eval('#blocks-guide-panel-cog', (panel) => panel.hidden)).toBe(false);
+
+                    for (const modeId of ['marty', 'sprite', 'cog']) {
+                        await page.evaluate(() => {
+                            window.scrollTo(0, document.documentElement.scrollHeight);
+                        });
+                        await page.click(`#blocks-guide-tab-${modeId}`);
+                        const selectedMode = await page.evaluate((expectedMode) => {
+                            const tab = document.querySelector(`[data-guide-mode="${expectedMode}"]`);
+                            const panel = document.querySelector(`[data-guide-mode-panel="${expectedMode}"]`);
+                            const firstCard = panel.querySelector('.block-guide-card');
+                            const tabsShell = document.querySelector('.blocks-guide-tabs-shell');
+                            const cardRect = firstCard.getBoundingClientRect();
+                            const tabsRect = tabsShell.getBoundingClientRect();
+                            return {
+                                activeMode: document.querySelector('[role="tab"][aria-selected="true"]')
+                                    .getAttribute('data-guide-mode'),
+                                firstCardVisible: cardRect.top < window.innerHeight && cardRect.bottom > tabsRect.bottom,
+                                panelHidden: panel.hidden,
+                                tabSelected: tab.getAttribute('aria-selected')
+                            };
+                        }, modeId);
+                        expect(selectedMode).toEqual({
+                            activeMode: modeId,
+                            firstCardVisible: true,
+                            panelHidden: false,
+                            tabSelected: 'true'
+                        });
+                    }
+                }
+
                 await activateSkipLink(page, 'content');
 
                 expectNoAxeViolations(await runAxe(page));

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

@@ -164,6 +164,14 @@ const getSpriteScriptState = async (page, spriteId) =>
         };
     }, spriteId);
 
+const getMartySensorPaletteState = page =>
+    page.evaluate(() => ({
+        colour: Boolean(document.getElementById("martycoloursensed_block")),
+        obstacle: Boolean(document.getElementById("martyobstaclesensed_block")),
+        light: Boolean(document.getElementById("martylightsensed_block")),
+        noise: Boolean(document.getElementById("martynoisesensed_block"))
+    }));
+
 describe("Blocks Jr hidden block drop regression", () => {
     beforeAll(async () => {
         server = spawn("python3", ["-m", "http.server", String(PORT), "--directory", "editions/free/src"], {
@@ -259,4 +267,80 @@ describe("Blocks Jr hidden block drop regression", () => {
             await browser.close();
         }
     }, 60000);
+
+    it("always shows standard Marty sensors and gates optional sensor blocks", async () => {
+        const { browser, page, errors } = await openEditor();
+
+        try {
+            await enableMartyMode(page);
+            await page.click("#marty-start");
+            await page.waitForSelector("#martycoloursensed_block", { visible: true });
+            await page.waitForSelector("#martyobstaclesensed_block", { visible: true });
+
+            const unpairedState = await getMartySensorPaletteState(page);
+            expect(unpairedState).toEqual({
+                colour: true,
+                obstacle: true,
+                light: false,
+                noise: false
+            });
+
+            await page.evaluate(() => {
+                window.sensorPolicyTestManager = window.martyManager;
+                window.martyManager = undefined;
+                window.Palette.selectCategory(window.Palette.numcat);
+            });
+            const managerUnavailableState = await getMartySensorPaletteState(page);
+            expect(managerUnavailableState).toEqual({
+                colour: true,
+                obstacle: true,
+                light: false,
+                noise: false
+            });
+
+            await page.evaluate(() => {
+                window.martyManager = window.sensorPolicyTestManager;
+                delete window.sensorPolicyTestManager;
+            });
+
+            await page.evaluate(() => {
+                window.martyManager.addMarty({ id: "sensor-policy-test" });
+                window.martyManager.setMartySensorAvailability("sensor-policy-test", {
+                    colour: false,
+                    obstacle: false,
+                    light: true,
+                    noise: false
+                });
+            });
+            await page.waitForSelector("#martylightsensed_block", { visible: true });
+
+            const lightSensorState = await getMartySensorPaletteState(page);
+            expect(lightSensorState).toEqual({
+                colour: true,
+                obstacle: true,
+                light: true,
+                noise: false
+            });
+
+            await page.evaluate(() => {
+                window.martyManager.setMartySensorAvailability("sensor-policy-test", {
+                    light: false,
+                    noise: true
+                });
+            });
+            await page.waitForSelector("#martynoisesensed_block", { visible: true });
+            await page.waitForFunction(() => !document.getElementById("martylightsensed_block"));
+
+            const noiseSensorState = await getMartySensorPaletteState(page);
+            expect(noiseSensorState).toEqual({
+                colour: true,
+                obstacle: true,
+                light: false,
+                noise: true
+            });
+            expect(errors).toEqual([]);
+        } finally {
+            await browser.close();
+        }
+    }, 60000);
 });

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

@@ -108,13 +108,8 @@ 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();
-  });
+async function openExtensionsLibrary(page) {
+  await page.click("#addExtensionButton");
 }
 
 describe("Chromium 79 smoke test", () => {
@@ -132,7 +127,7 @@ describe("Chromium 79 smoke test", () => {
   );
 
   it(
-    "keeps the extension entry hidden and reveals micro:bit controls only while loaded",
+    "keeps the extension entry visible and reveals micro:bit controls only while loaded",
     async () => {
       const { browser, page, errors } = await openPage("/editor.html?mode=edit");
 
@@ -157,9 +152,9 @@ describe("Chromium 79 smoke test", () => {
         });
 
         expect(initialState).toEqual({
-          addButtonDisplay: "none",
-          addButtonAriaHidden: "true",
-          addButtonDisabled: true,
+          addButtonDisplay: "flex",
+          addButtonAriaHidden: "false",
+          addButtonDisabled: false,
           microBitButtonDisplay: "none",
           microBitButtonAriaHidden: "true",
           microBitButtonDisabled: true,
@@ -167,7 +162,7 @@ describe("Chromium 79 smoke test", () => {
           extensionEnabled: false,
         });
 
-        await openHiddenExtensionsLibrary(page);
+        await openExtensionsLibrary(page);
         await page.waitForSelector("#extensionsLibrary.fade.in", { timeout: 30_000 });
         const libraryState = await page.evaluate(() => ({
           title: document.getElementById("extensionsLibraryTitle").textContent.trim(),
@@ -221,9 +216,9 @@ describe("Chromium 79 smoke test", () => {
         });
 
         expect(enabledState).toEqual({
-          addButtonDisplay: "none",
-          addButtonAriaHidden: "true",
-          addButtonDisabled: true,
+          addButtonDisplay: "flex",
+          addButtonAriaHidden: "false",
+          addButtonDisabled: false,
           microBitButtonDisplay: "flex",
           microBitButtonAriaHidden: "false",
           microBitButtonDisabled: false,
@@ -290,7 +285,7 @@ describe("Chromium 79 smoke test", () => {
         });
         expect(blocksAfterInsert).toContain("microbitdisplayclear");
 
-        await openHiddenExtensionsLibrary(page);
+        await openExtensionsLibrary(page);
         await page.waitForSelector("#extensionsLibrary.fade.in", { timeout: 30_000 });
         const loadedLibraryState = await page.evaluate(() => ({
           microBitCardAction: document.getElementById("microBitExtensionCardAction").textContent.trim(),
@@ -339,7 +334,7 @@ describe("Chromium 79 smoke test", () => {
           extensionEnabled: document.getElementById("connectionButtonsArea").classList.contains("extensionEnabled"),
         }));
         expect(unloadedState).toEqual({
-          addButtonDisplay: "none",
+          addButtonDisplay: "flex",
           microBitButtonDisplay: "none",
           extensionsLibraryOpen: false,
           microBitCardAction: "+",

package/tests/e2e/marty-connection-ui.e2e.test.js

@@ -1,5 +1,9 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+const { newHTMLMock } = vi.hoisted(() => ({
+    newHTMLMock: vi.fn()
+}));
+
 vi.mock('@/editor/ScratchJr', () => ({
     default: {
         isMartyModeEnabled: false,
@@ -42,7 +46,7 @@ vi.mock('@/utils/lib', () => ({
     gn: vi.fn(),
     CSSTransition: vi.fn(),
     localx: vi.fn(),
-    newHTML: vi.fn(),
+    newHTML: newHTMLMock,
     newButton: vi.fn(),
     scaleMultiplier: 1,
     fullscreenScaleMultiplier: 1,
@@ -75,18 +79,36 @@ vi.mock('@/html-svgs/sprite_toggle_on', () => ({ spriteToggleOn: '<svg></svg>' }
 vi.mock('@/html-svgs/battery-svg', () => ({ batterySvg: () => '<svg id="battery"></svg>' }));
 vi.mock('@/html-svgs/signal-svg', () => ({ signalSvg: () => '<svg id="signal"></svg>' }));
 vi.mock('@/utils/raft-subscription-helpers', () => ({
-    createRaftConnectionIssueDetectedHelper: () => ({
-        subscribe: vi.fn(),
-        unsubscribe: vi.fn()
-    }),
-    createRaftConnectionIssueResolvedHelper: () => ({
-        subscribe: vi.fn(),
-        unsubscribe: vi.fn()
+    createRaftConnectionIssueDetectedHelper: raft => ({
+        subscribe: vi.fn(callback => {
+            raft.__connectionIssueDetectedCallback = callback;
+        }),
+        unsubscribe: vi.fn(() => {
+            raft.__connectionIssueDetectedUnsubscribed = true;
+        })
     }),
-    raftVerifiedSubscriptionHelper: () => ({
-        subscribe: vi.fn(),
-        unsubscribe: vi.fn()
+    createRaftConnectionIssueResolvedHelper: raft => ({
+        subscribe: vi.fn(callback => {
+            raft.__connectionIssueResolvedCallback = callback;
+        }),
+        unsubscribe: vi.fn(() => {
+            raft.__connectionIssueResolvedUnsubscribed = true;
+        })
     }),
+    raftVerifiedSubscriptionHelper: raft => {
+        let callback;
+        return {
+            subscribe: vi.fn(nextCallback => {
+                callback = nextCallback;
+                raft.__verifiedCallbacks = raft.__verifiedCallbacks || [];
+                raft.__verifiedCallbacks.push(callback);
+            }),
+            unsubscribe: vi.fn(() => {
+                raft.__verifiedUnsubscribeCount = (raft.__verifiedUnsubscribeCount || 0) + 1;
+                raft.__verifiedCallbacks = (raft.__verifiedCallbacks || []).filter(item => item !== callback);
+            })
+        };
+    },
     raftDisconnectedSubscriptionHelper: raft => {
         const helper = {
             subscribe: vi.fn(callback => {
@@ -128,6 +150,11 @@ describe('Marty connection UI', () => {
                 removeMarty: vi.fn(),
                 setMartySensorAvailability: vi.fn()
             },
+            cogManager: {
+                addCog: vi.fn(),
+                wireCogWithBlocks: vi.fn(),
+                removeCog: vi.fn()
+            },
             microBitManager: {
                 addMicroBit: vi.fn(),
                 wireMicroBitWithBlocks: vi.fn(),
@@ -139,6 +166,13 @@ describe('Marty connection UI', () => {
             import('@/editor/ui/UI.js'),
             import('@/editor/ScratchJr')
         ]);
+        newHTMLMock.mockImplementation((type, className, parent) => {
+            const element = new FakeElement(className ? [className] : []);
+            if (parent) {
+                parent.appendChild(element);
+            }
+            return element;
+        });
         UI = uiModule.default;
         ScratchJr = scratchJrModule.default;
         ScratchJr.isMartyModeEnabled = false;
@@ -249,6 +283,102 @@ describe('Marty connection UI', () => {
         expect(button.querySelector('.iconButtonContainer').classList.contains('connectedButtonContainer')).toBe(true);
     });
 
+    it('uses one verified subscription instance and cleans it up after setup', () => {
+        const button = createConnectionButton();
+        const raft = createCogRaft();
+        const setupConnectionButton = vi.fn();
+
+        UI.setupConnectionButtonWhenVerified(button, raft, setupConnectionButton);
+
+        expect(raft.__verifiedCallbacks).toHaveLength(1);
+        const verifiedCallback = raft.__verifiedCallbacks[0];
+        raft.isVerified = true;
+        verifiedCallback();
+        verifiedCallback();
+
+        expect(setupConnectionButton).toHaveBeenCalledTimes(1);
+        expect(setupConnectionButton).toHaveBeenCalledWith(button, raft);
+        expect(raft.__verifiedUnsubscribeCount).toBe(1);
+        expect(raft.__verifiedCallbacks).toHaveLength(0);
+    });
+
+    it('sets up an already verified Cog even when its verified event was missed', () => {
+        const button = createConnectionButton();
+        const raft = createCogRaft();
+        const setupConnectionButton = vi.fn();
+        raft.isVerified = true;
+
+        UI.setupConnectionButtonWhenVerified(button, raft, setupConnectionButton);
+
+        expect(setupConnectionButton).toHaveBeenCalledWith(button, raft);
+        expect(raft.__verifiedUnsubscribeCount).toBe(1);
+        expect(raft.__verifiedCallbacks).toHaveLength(0);
+    });
+
+    it('reconciles an existing verified Cog after the host application manager is injected', () => {
+        const cogButton = createConnectionButton();
+        const martyButton = createConnectionButton();
+        const raft = createCogRaft();
+        raft.isVerified = true;
+        const setupCogSpy = vi.spyOn(UI, 'setupCogConnectionButton').mockImplementation(() => {});
+        window.applicationManager = undefined;
+
+        expect(UI.reconcileConnectionButtonsWhenApplicationManagerReady(cogButton, martyButton)).toBe(false);
+        window.applicationManager = {
+            getTheCurrentlySelectedDeviceOrFirstOfItsKind: vi.fn(type => type === 'Cog' ? raft : undefined)
+        };
+        vi.advanceTimersByTime(100);
+
+        expect(setupCogSpy).toHaveBeenCalledWith(cogButton, raft);
+        expect(raft.__verifiedUnsubscribeCount).toBe(1);
+        setupCogSpy.mockRestore();
+    });
+
+    it('disconnects and clears a stale Cog when the connection issue countdown expires', () => {
+        const button = createConnectionButton();
+        const raft = createCogRaft();
+        window.applicationManager.disconnectGeneric = vi.fn((disconnectedRaft, onDisconnected) => {
+            onDisconnected();
+        });
+
+        UI.setupCogConnectionButton(button, raft);
+        raft.__connectionIssueDetectedCallback();
+
+        expect(button.querySelector('.connIssueOverlay').textContent).toBe('A11Y_CONNECTION_LOST 60');
+        expect(button.style.pointerEvents).toBe('none');
+
+        vi.advanceTimersByTime(59000);
+        expect(window.applicationManager.disconnectGeneric).not.toHaveBeenCalled();
+        expect(button.querySelector('.connIssueOverlay').textContent).toBe('A11Y_CONNECTION_LOST 1');
+
+        vi.advanceTimersByTime(1000);
+
+        expect(window.applicationManager.disconnectGeneric).toHaveBeenCalledWith(raft, expect.any(Function), true);
+        expect(window.cogManager.removeCog).toHaveBeenCalledWith(raft);
+        expect(button.querySelector('.connIssueOverlay')).toBeNull();
+        expect(button.style.pointerEvents).toBe('auto');
+        expect(button.classList.contains('connectButtonConnected')).toBe(false);
+        expect(raft.__connectionIssueDetectedUnsubscribed).toBe(true);
+        expect(raft.__connectionIssueResolvedUnsubscribed).toBe(true);
+    });
+
+    it('cancels the Cog countdown when the connection issue resolves', () => {
+        const button = createConnectionButton();
+        const raft = createCogRaft();
+
+        UI.setupCogConnectionButton(button, raft);
+        raft.__connectionIssueDetectedCallback();
+        vi.advanceTimersByTime(30000);
+        raft.__connectionIssueResolvedCallback();
+        vi.advanceTimersByTime(31000);
+
+        expect(window.applicationManager.disconnectGeneric).not.toHaveBeenCalled();
+        expect(button.querySelector('.connIssueOverlay')).toBeNull();
+        expect(button.style.pointerEvents).toBe('auto');
+
+        raft.__disconnectCallback();
+    });
+
     it('uses a friendly message when the micro:bit chooser is cancelled', () => {
         const message = UI.getMicroBitConnectionErrorMessage(
             new DOMException('User cancelled the requestDevice() chooser.', 'NotFoundError')
@@ -293,6 +423,19 @@ function createMartyRaft() {
     };
 }
 
+function createCogRaft() {
+    return {
+        id: 'cog-1',
+        isVerified: false,
+        hasVerifiedConnection() {
+            return this.isVerified;
+        },
+        getFriendlyName: () => 'Cog One',
+        getBatteryStrength: () => 70,
+        getRSSI: () => -45
+    };
+}
+
 function createConnectionButton() {
     const button = new FakeElement();
     button.children['.iconButtonContainer'] = new FakeElement(['iconButtonContainer', 'notConnectedButtonContainer']);
@@ -325,6 +468,7 @@ class FakeElement {
     constructor(classes = []) {
         this.classList = new FakeClassList(classes);
         this.children = {};
+        this.childNodes = [];
         this.style = {};
         this.attributes = {};
         this.textContent = '';
@@ -333,7 +477,28 @@ class FakeElement {
     }
 
     querySelector(selector) {
-        return this.children[selector] || null;
+        if (this.children[selector]) {
+            return this.children[selector];
+        }
+        if (selector.startsWith('.')) {
+            const className = selector.slice(1);
+            return this.childNodes.find(child => child.classList.contains(className)) || null;
+        }
+        return null;
+    }
+
+    appendChild(child) {
+        if (!this.childNodes.includes(child)) {
+            this.childNodes.push(child);
+        }
+        child.parentNode = this;
+        return child;
+    }
+
+    removeChild(child) {
+        this.childNodes = this.childNodes.filter(item => item !== child);
+        child.parentNode = null;
+        return child;
     }
 
     setAttribute(name, value) {

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

@@ -119,12 +119,7 @@ async function enableMartyMode(page) {
 }
 
 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.click("#addExtensionButton");
   await page.waitForSelector("#extensionsLibrary.fade.in", { timeout: 30_000 });
   await page.click("#microBitExtensionCard");
   await page.waitForFunction(

package/tests/e2e/project-load-progress-loop.e2e.test.js

@@ -110,12 +110,7 @@ async function enableMartyMode(page) {
 }
 
 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.click("#addExtensionButton");
   await page.waitForSelector("#extensionsLibrary.fade.in", { timeout: 30_000 });
   await page.click("#microBitExtensionCard");
   await page.waitForFunction(