// Port: none (pure static analysis — runs in CI, no browser/server). // // Read My Mind phase 3 part 1 guards: the modal's alternates row and the phone // keyboard-accessory 🧠 key. The mobile Playwright suite is excluded from CI, // so like test/mobile-header-buttons-policy.test.ts this parses the frontend // assets directly to pin the wiring that only a phone would exercise: // // 1. the 🧠 key ships in BOTH accessory-bar templates (setMode() swaps the // bar's innerHTML between them, so a key present in only one layout would // silently vanish when the user toggles `extendedKeyboardBar`) and routes // to the shared modal; // 2. the key is hidden unless the bar carries the `rmm-enabled` marker class // — gating must live on the BAR element because setMode() rebuilds the // buttons — synced at init and re-synced by settings-ui.js on every // settings apply (a live toggle needs no reload); // 3. the header 🧠 button STAYS off phones (the key is the phone surface); // 4. the modal renders on phones as a small dialog, not the full-screen // default that phone `.modal-content` rules would impose; // 5. readmymind-ui.js keeps the no-innerHTML discipline (predictor output is // injectable content) and renders alternates into the i18n-skipped // container declared in index.html. import { describe, it, expect } from 'vitest'; import { readFileSync } from 'node:fs'; import { fileURLToPath } from 'node:url'; import { join } from 'node:path'; const HERE = fileURLToPath(new URL('.', import.meta.url)); const PUBLIC = join(HERE, '../src/web/public'); const read = (name: string) => readFileSync(join(PUBLIC, name), 'utf-8'); describe('read my mind phone key + alternates (static guards)', () => { const accessory = read('keyboard-accessory.js'); const styles = read('styles.css'); const mobile = read('mobile.css'); const html = read('index.html'); const ui = read('readmymind-ui.js'); const settingsUi = read('settings-ui.js'); // Everything phone-specific lives in the max-width 430px block of mobile.css. const phoneBlock = mobile.slice(mobile.indexOf('@media (max-width: 430px)')); it('ships the 🧠 key in BOTH accessory bar templates and routes it to the modal', () => { const simple = accessory.match(/_simpleButtons\s*:\s*`([\s\S]*?)`/)?.[1] ?? ''; const extended = accessory.match(/_extendedButtons\s*:\s*`([\s\S]*?)`/)?.[1] ?? ''; expect(simple).toMatch(/accessory-btn-rmm[^>]*data-action="readmymind"/); expect(extended).toMatch(/accessory-btn-rmm[^>]*data-action="readmymind"/); expect(accessory).toMatch(/case 'readmymind':/); expect(accessory).toMatch(/openReadMyMind/); }); it('hides the key until the bar carries rmm-enabled, synced at init and on settings apply', () => { expect(styles).toMatch(/\.keyboard-accessory-bar \.accessory-btn-rmm \{\s*display: none;/); expect(styles).toMatch(/\.keyboard-accessory-bar\.rmm-enabled \.accessory-btn-rmm \{\s*display: inline-flex;/); // init() applies the gate as soon as the bar exists… expect(accessory).toMatch(/this\.syncReadMyMind\(\);/); // …and settings-ui re-syncs it on every settings apply (live toggle). expect(settingsUi).toMatch(/KeyboardAccessoryBar\.syncReadMyMind/); }); it('keeps the header 🧠 button off phones (the accessory key is the phone surface)', () => { expect(phoneBlock).toMatch(/\.btn-icon-header\.btn-readmymind\s*\{\s*display: none !important;/); }); it('renders the modal as a small dialog on phones, not the full-screen default', () => { expect(phoneBlock).toMatch(/\.modal-content\.readmymind-modal\s*\{[^}]*height: auto;/); }); it('declares the i18n-skipped alternates container and keeps the no-innerHTML discipline', () => { expect(html).toMatch(/id="readMyMindAlternates"[^>]*data-i18n-skip/); // Predictor output is injectable content: value/textContent only, ever. // (`.innerHTML`: property ACCESS — the fileoverview's "never innerHTML" // prose is allowed to say the word.) expect(ui).not.toMatch(/\.innerHTML/); expect(ui).toContain('readMyMindAlternates'); expect(ui).toMatch(/\.textContent = suggestion\.prompt/); }); });