Files
feedBack/tests/js/speed_reset.test.js
T
d9fa6d3f55 refactor(highway): make the highway global explicit before the module flip (R3c) (#912)
73 bare `highway.x` references -> `window.highway.x`, across app.js and 10 other files.
Provably a NO-OP today. It is the precondition for flipping highway.js to a module.

━━━ WHY THIS HAS TO LAND FIRST ━━━

highway.js is a CLASSIC script. Its top-level `const highway = createHighway()` therefore
creates a GLOBAL LEXICAL BINDING — visible as a bare name to every other classic script AND
to every ES module. 73 call sites quietly rely on that.

The moment highway.js becomes a module, that binding is gone. `const` in a module is
module-scoped, not global. Every one of those 73 sites becomes a ReferenceError, and the
flip is impossible until they say what they mean.

`window.highway = highway` is already set, to the same object, on the same line. So this is
an identity rewrite — verified in the browser below.

━━━ THE REWRITE BIT ME THREE TIMES. REGEX IS NOT ENOUGH FOR THIS. ━━━

1. A SHADOWED LOCAL. capabilities/note-detection.js does `const highway = window.highway`.
   Its 9 bare uses are LOCAL and already correct; a blind rewrite would have emitted
   `const window.highway = window.highway`. Excluded.

2. HALF-CONVERTED GUARDS — the dangerous one. Six sites read
   `typeof highway !== 'undefined' && highway && typeof highway.setTime === 'function'`.
   The regex converted the CONSEQUENT and left the TEST, which is WORSE than not touching
   them: after the flip `typeof highway` is 'undefined', so each guard is PERMANENTLY FALSE
   and the code behind it silently never runs. transport.js's was the seek->setTime sync:
   the chart clock would have quietly desynced after every seek, with nothing failing.
   All six now test window.highway.

3. TWO MORE BARE REFERENCES, found by Codex [P2] and confirmed by an AST scan: app.js:3114
   and :3176 use `highway && typeof window.highway.getSections === 'function'`. My grep
   searched for `typeof highway`, not `highway &&`. After the flip these throw, the catch
   swallows it, and the editor silently falls back to a ±4s edit window and arrangement 0.

Regex missed a shadow, a half-conversion, and two bare reads. The final check is an
AST pass that resolves scopes and reports every `highway` identifier not bound locally.
It now reports ZERO.

VERIFIED. A/B against origin/main in two browsers, 15 probes, IDENTICAL, zero page errors:
window.highway is the same object as the bare global, the whole API surface resolves, a real
song plays, the chart clock advances, getPerf().drawMs > 0 — and `seek syncs chart` passes,
which is the exact guard I nearly broke in (2).

node 1045, pytest 2416, ESLint 0, Codex 0.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-12 11:56:07 +02:00

218 lines
8.3 KiB
JavaScript

const { test } = require('node:test');
const assert = require('node:assert/strict');
const fs = require('node:fs');
const path = require('node:path');
const vm = require('node:vm');
const APP_JS = path.join(__dirname, '..', '..', 'static', 'app.js');
// The speed controls were carved out into static/js/player-controls.js (R3a); playSong,
// which resets them on a new song, stayed in app.js. This test spans both.
const CONTROLS_JS = path.join(__dirname, '..', '..', 'static', 'js', 'player-controls.js');
function extractFunction(src, signature) {
const start = src.indexOf(signature);
if (start === -1) throw new Error(`extractFunction: '${signature}' not found in app.js`);
let scan = start + signature.length;
if (src[scan] === '(') {
let parenDepth = 1;
scan++;
while (scan < src.length && parenDepth > 0) {
const ch = src[scan];
if (ch === '(') parenDepth++;
else if (ch === ')') parenDepth--;
scan++;
}
}
const openBrace = src.indexOf('{', scan);
let depth = 1;
let i = openBrace + 1;
while (i < src.length && depth > 0) {
const ch = src[i];
if (ch === '{') depth++;
else if (ch === '}') depth--;
i++;
}
if (depth !== 0) throw new Error(`extractFunction: unbalanced braces after '${signature}'`);
return src.slice(start, i);
}
function buildSandbox({ juceMode = false } = {}) {
const elements = new Map();
const makeElement = (id) => ({
id,
value: id === 'speed-slider' ? 135 : '',
textContent: id === 'speed-label' ? '1.35x' : '',
style: {},
});
for (const id of ['speed-slider', 'speed-label', 'quality-select', 'highway']) {
elements.set(id, makeElement(id));
}
elements.set('speed-presets', {
id: 'speed-presets',
querySelectorAll() { return []; },
});
const backingCalls = [];
const sliderInputs = [];
const audio = {
playbackRate: 1.35,
pause() {},
};
const jucePlayer = {
_speed: 1.35,
setRate(rate) { this._speed = rate; },
stop() { return Promise.resolve(); },
};
const sandbox = {
console: { log() {}, warn() {}, error() {} },
audio,
jucePlayer,
highway: {
stop() {},
init() {},
connect(url) { sandbox.__connectedUrl = url; },
getRenderScale: () => 1,
},
window: {
_juceMode: juceMode,
_juceAudioUrl: juceMode ? '/audio/old-song.ogg' : null,
_currentSongAudio: { url: '/audio/old-song.ogg' },
_clearJuceRerouteMemo() {},
feedBack: {
isPlaying: true,
emit() {},
},
feedBackDesktop: {
audio: {
setBackingSpeed(rate) {
backingCalls.push(['setBackingSpeed', rate]);
return Promise.resolve();
},
setBackingPreservePitch(value) {
backingCalls.push(['setBackingPreservePitch', value]);
return Promise.resolve();
},
},
},
},
document: {
getElementById(id) {
if (!elements.has(id)) elements.set(id, makeElement(id));
return elements.get(id);
},
querySelector(selector) {
if (selector === '.screen.active') return { id: 'home' };
return null;
},
},
location: {
protocol: 'http:',
host: 'localhost:9999',
},
URLSearchParams,
setTimeout(fn) { fn(); return 0; },
clearTimeout() {},
Promise,
decodeURIComponent,
__elements: elements,
__backingCalls: backingCalls,
__sliderInputs: sliderInputs,
};
sandbox.window.jucePlayer = jucePlayer;
sandbox.handleSliderInput = (el) => {
if (el) sliderInputs.push(el.id);
};
vm.createContext(sandbox);
// highway.js is loaded as a CLASSIC script today, so its top-level `const highway`
// creates a global lexical binding that app.js and the modules could reach as a bare
// name. That binding disappears the moment highway.js becomes a module (R3c), so every
// consumer now says `window.highway` — the same object, explicitly. Mirror it here.
if (sandbox.window && sandbox.highway) sandbox.window.highway = sandbox.highway;
return sandbox;
}
function extractConstLine(src, name) {
const match = src.match(new RegExp(`const ${name} = [^;]+;`));
if (!match) throw new Error(`extractConstLine: '${name}' not found in app.js`);
return match[0];
}
function loadPlaySong(sandbox) {
const src = fs.readFileSync(APP_JS, 'utf8');
// the module is ESM; the vm sandbox evaluates plain script text
const controls = fs.readFileSync(CONTROLS_JS, 'utf8').replace(/^export /gm, '');
const resetHelper = controls.includes('function _resetPlaybackSpeedForNewSong')
? extractFunction(controls, 'function _resetPlaybackSpeedForNewSong')
: '';
const speedPresetHelpers = controls.includes('function _updateSpeedPresetButtons')
? `
${extractConstLine(controls, 'SPEED_PRESET_PCTS')}
${extractConstLine(controls, 'SPEED_SNAP_THRESHOLD')}
${extractFunction(controls, 'function _speedPresetPctFromActive')}
${extractFunction(controls, 'function _updateSpeedPresetButtons')}
`
: '';
const code = `
var artAbortController = null;
// isPlaying moved onto the shared player-state container so a carved module can
// WRITE it (an imported binding is read-only). NB window.feedBack.isPlaying — the
// public mirror stubbed above — is a different thing and is unchanged.
var S = { isPlaying: true, lastAudioTime: 0 };
// The speed controls reach app.js through the host seam (static/js/host.js).
// Route it at the sandbox's EXISTING handleSliderInput spy — a fresh stub would
// swallow the call and the assertion below (which checks the slider was actually
// refreshed) would pass vacuously.
var host = { handleSliderInput: (el) => handleSliderInput(el) };
var currentFilename = null;
var _playerOriginScreen = null;
var _pendingAutostart = false;
function _clearAutoExit() {}
function _clearAutoplayHold() {}
function _resolvePlayerOrigin() { return 'home'; }
function _recordPlaybackBridge() {}
function _cancelCountIn() {}
function _resetJuceAudioShimChain() {}
function _resetAudioSeekState() {}
function setPlayButtonState() {}
function clearLoop() {}
function _resetSectionPracticeLog() {}
function _hideSectionPracticeBar() {}
function showScreen() {}
function _getArrangementNamingMode() { return 'default'; }
function _scheduleSectionPracticeRetries() {}
function loadSavedLoops() {}
function _songEventPayload() { return { time: 7, audioT: 7, chartT: 7, perfNow: 7 }; }
${extractFunction(controls, 'function setSpeed')}
${speedPresetHelpers}
${resetHelper}
${extractFunction(src, 'async function playSong')}
globalThis.__playSong = playSong;
`;
vm.runInContext(code, sandbox);
}
test('new song load resets the HTML audio rate, not only the visible speed controls', async () => {
const sandbox = buildSandbox();
loadPlaySong(sandbox);
await sandbox.__playSong('next-song.archive');
assert.equal(sandbox.__elements.get('speed-slider').value, 100);
assert.match(sandbox.__elements.get('speed-label').textContent, /^1\.0{1,2}x$/);
assert.equal(sandbox.audio.playbackRate, 1);
assert.deepEqual(sandbox.__sliderInputs, ['speed-slider']);
});
test('new song load resets the desktop backing rate when the API is available', async () => {
const sandbox = buildSandbox({ juceMode: true });
loadPlaySong(sandbox);
await sandbox.__playSong('next-song.archive');
await new Promise((resolve) => setImmediate(resolve));
assert.equal(sandbox.jucePlayer._speed, 1);
assert.deepEqual(sandbox.__backingCalls, [
['setBackingSpeed', 1],
['setBackingPreservePitch', true],
]);
});