test(frontend): harness expansion + utility coverage push (F0 + F6) (#539)

* test(frontend): expand harness for store/component/contract tests

- factories: makeSubsonicSong, makeServer, makeAuthState, makeQueueState
- storeReset.ts: per-test reset for player/auth/preview/orbit stores
- mocks/subsonic.ts: realistic fixtures + stream/cover URL helpers
- mocks/browser.ts: ResizeObserver/IntersectionObserver/matchMedia/clipboard/object URLs
- mocks/tauri.ts: tauriMockListenerCount for listener-lifecycle regression tests
- renderWithProviders: pin i18n language to 'en' by default; { language } opt-out
- vitest.config: pool 'forks' + isolate to avoid module-mock + Zustand-global flake
- README: documented patterns, store-reset policy, i18n rule, isolation rationale

* test(frontend): bump utility coverage + expand hot-path gate

serverMagicString: 71→100% (encode/decode rejection branches, clipboard
fallback paths). shareLink: 69→97% (all entity kinds, queue trim, orbit
decoder, findServerIdForShareUrl). dynamicColors: 44→100% (extractCoverColors
DOM paths via Image / canvas / fetch mocks).

Gate adds shareLink.ts and dynamicColors.ts — both stable above 95%.
Comments updated for the new floor and the M4 hard-gate handoff.
This commit is contained in:
Frank Stellmacher
2026-05-11 21:11:23 +02:00
committed by GitHub
parent a228ce1c91
commit 4f9ad07d65
13 changed files with 990 additions and 35 deletions
+216
View File
@@ -0,0 +1,216 @@
/**
* DOM-touching tests for `dynamicColors.ts` — orchestrator paths in
* `extractCoverColors` that exercise the Image / canvas / fetch surfaces.
*
* jsdom ships HTMLImageElement but does not fire onload/onerror; canvas
* `getContext('2d')` returns null. We swap in lightweight mocks so the
* orchestrator's branch logic gets covered without a real browser.
*
* Pure-math helpers live in `dynamicColors.test.ts`.
*/
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { extractCoverColors } from './dynamicColors';
type ImageBehavior = 'load' | 'error';
interface MockImageHandle {
setBehavior(b: ImageBehavior): void;
}
function installImageMock(): MockImageHandle {
let behavior: ImageBehavior = 'load';
const original = globalThis.Image;
class MockImage {
onload: (() => void) | null = null;
onerror: (() => void) | null = null;
crossOrigin = '';
private _src = '';
get src() { return this._src; }
set src(v: string) {
this._src = v;
queueMicrotask(() => {
if (behavior === 'load') this.onload?.();
else this.onerror?.();
});
}
}
globalThis.Image = MockImage as unknown as typeof Image;
return {
setBehavior(b: ImageBehavior) { behavior = b; },
[Symbol.dispose]: () => { globalThis.Image = original; },
} as MockImageHandle;
}
function installCanvasContextMock(opts: { tainted?: boolean } = {}): () => void {
const originalGetContext = HTMLCanvasElement.prototype.getContext;
HTMLCanvasElement.prototype.getContext = function (this: HTMLCanvasElement, _id: string) {
if (opts.tainted) {
return {
drawImage: vi.fn(),
getImageData: vi.fn(() => {
throw new Error('tainted canvas');
}),
} as unknown as CanvasRenderingContext2D;
}
// Return a context with a fixed 8x8 image where every pixel is a vibrant
// orange — the saturation pick will land on it, exercising the
// sampleImageToAccent loop.
const data = new Uint8ClampedArray(8 * 8 * 4);
for (let i = 0; i < data.length; i += 4) {
data[i] = 230; // R
data[i + 1] = 110; // G
data[i + 2] = 30; // B
data[i + 3] = 255; // A
}
return {
drawImage: vi.fn(),
getImageData: vi.fn(() => ({ data, width: 8, height: 8 })),
} as unknown as CanvasRenderingContext2D;
} as typeof HTMLCanvasElement.prototype.getContext;
return () => {
HTMLCanvasElement.prototype.getContext = originalGetContext;
};
}
describe('extractCoverColors — early returns', () => {
it('returns empty for an empty URL', async () => {
expect(await extractCoverColors('')).toEqual({ accent: '' });
});
it('returns empty for the bundled logo (avoids self-tinting)', async () => {
expect(await extractCoverColors('/assets/logo-psysonic-256.png')).toEqual({ accent: '' });
});
});
describe('extractCoverColors — blob: URL', () => {
let imageMock: MockImageHandle;
let restoreCanvas: () => void;
beforeEach(() => {
imageMock = installImageMock();
restoreCanvas = installCanvasContextMock();
});
afterEach(() => {
(imageMock as { [Symbol.dispose]?: () => void })[Symbol.dispose]?.();
restoreCanvas();
});
it('returns an accent on a successful sample', async () => {
imageMock.setBehavior('load');
const result = await extractCoverColors('blob:fake/abc-123');
expect(result.accent).toMatch(/^rgb\(\d+,\d+,\d+\)$/);
});
it('returns empty when image load fails', async () => {
imageMock.setBehavior('error');
const result = await extractCoverColors('blob:fake/oops');
expect(result).toEqual({ accent: '' });
});
it('returns empty when the canvas is tainted', async () => {
imageMock.setBehavior('load');
restoreCanvas(); // swap to tainted canvas
restoreCanvas = installCanvasContextMock({ tainted: true });
const result = await extractCoverColors('blob:fake/tainted');
expect(result).toEqual({ accent: '' });
});
it('returns empty when getContext returns null', async () => {
imageMock.setBehavior('load');
const originalGetContext = HTMLCanvasElement.prototype.getContext;
HTMLCanvasElement.prototype.getContext = (() => null) as typeof HTMLCanvasElement.prototype.getContext;
try {
const result = await extractCoverColors('blob:fake/no-ctx');
expect(result).toEqual({ accent: '' });
} finally {
HTMLCanvasElement.prototype.getContext = originalGetContext;
}
});
});
describe('extractCoverColors — remote http(s) URL', () => {
let imageMock: MockImageHandle;
let restoreCanvas: () => void;
let fetchMock: ReturnType<typeof vi.fn>;
const originalFetch = globalThis.fetch;
beforeEach(() => {
imageMock = installImageMock();
restoreCanvas = installCanvasContextMock();
fetchMock = vi.fn();
globalThis.fetch = fetchMock as unknown as typeof fetch;
});
afterEach(() => {
(imageMock as { [Symbol.dispose]?: () => void })[Symbol.dispose]?.();
restoreCanvas();
globalThis.fetch = originalFetch;
});
it('fetches the blob, samples, and revokes the object URL', async () => {
imageMock.setBehavior('load');
const blob = new Blob([new Uint8Array([1, 2, 3])], { type: 'image/png' });
fetchMock.mockResolvedValue({ ok: true, blob: async () => blob } as Response);
const result = await extractCoverColors('https://music.example.com/cover.png');
expect(result.accent).toMatch(/^rgb\(\d+,\d+,\d+\)$/);
expect(fetchMock).toHaveBeenCalledWith('https://music.example.com/cover.png');
expect(URL.revokeObjectURL).toHaveBeenCalled();
});
it('falls back to crossOrigin=anonymous when fetch fails', async () => {
imageMock.setBehavior('load');
fetchMock.mockRejectedValue(new Error('CORS blocked'));
const result = await extractCoverColors('https://music.example.com/cover.png');
// Anonymous-CORS image load succeeds in the mock → still samples.
expect(result.accent).toMatch(/^rgb\(\d+,\d+,\d+\)$/);
});
it('falls back to crossOrigin=anonymous when fetch returns !ok', async () => {
imageMock.setBehavior('load');
fetchMock.mockResolvedValue({ ok: false, blob: async () => new Blob() } as Response);
const result = await extractCoverColors('https://music.example.com/cover.png');
expect(result.accent).toMatch(/^rgb\(\d+,\d+,\d+\)$/);
});
it('returns empty when both fetch and the anonymous fallback fail', async () => {
imageMock.setBehavior('error');
fetchMock.mockRejectedValue(new Error('network down'));
const result = await extractCoverColors('https://music.example.com/cover.png');
expect(result).toEqual({ accent: '' });
});
});
describe('extractCoverColors — other URL shapes', () => {
let imageMock: MockImageHandle;
let restoreCanvas: () => void;
beforeEach(() => {
imageMock = installImageMock();
restoreCanvas = installCanvasContextMock();
});
afterEach(() => {
(imageMock as { [Symbol.dispose]?: () => void })[Symbol.dispose]?.();
restoreCanvas();
});
it('handles a data: URL through the same blob-or-data path', async () => {
imageMock.setBehavior('load');
const result = await extractCoverColors('data:image/png;base64,iVBORw0KGgo=');
expect(result.accent).toMatch(/^rgb\(\d+,\d+,\d+\)$/);
});
it('handles a relative path as a direct image load', async () => {
imageMock.setBehavior('load');
const result = await extractCoverColors('/local/cover.jpg');
expect(result.accent).toMatch(/^rgb\(\d+,\d+,\d+\)$/);
});
});
+92 -1
View File
@@ -1,7 +1,8 @@
import { describe, expect, it } from 'vitest';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import {
SERVER_MAGIC_STRING_PREFIX,
DECODED_PASSWORD_VISUAL_MASK,
copyTextToClipboard,
decodeServerMagicString,
decodeServerMagicStringFromText,
encodeServerMagicString,
@@ -36,12 +37,55 @@ describe('serverMagicString', () => {
expect(decodeServerMagicString(encoded)).toEqual(original);
});
it('drops a name that becomes empty after trim', () => {
const encoded = encodeServerMagicString({
url: 'https://x.example',
username: 'u',
password: 'p',
name: ' ',
});
const decoded = decodeServerMagicString(encoded);
expect(decoded?.name).toBeUndefined();
});
it('rejects invalid input', () => {
expect(decodeServerMagicString('')).toBeNull();
expect(decodeServerMagicString('nope')).toBeNull();
expect(decodeServerMagicString(`${SERVER_MAGIC_STRING_PREFIX}%%%`)).toBeNull();
});
it('rejects an empty payload after the prefix', () => {
expect(decodeServerMagicString(SERVER_MAGIC_STRING_PREFIX)).toBeNull();
expect(decodeServerMagicString(`${SERVER_MAGIC_STRING_PREFIX} `)).toBeNull();
});
it('rejects a payload that is not JSON', () => {
// valid base64url of "not-json" → JSON.parse throws
const garbage = `${SERVER_MAGIC_STRING_PREFIX}bm90LWpzb24`;
expect(decodeServerMagicString(garbage)).toBeNull();
});
it('rejects a payload with the wrong version', () => {
const wrongVersion = btoa(JSON.stringify({ v: 2, url: 'https://x', u: 'u', w: 'p' }))
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeServerMagicString(SERVER_MAGIC_STRING_PREFIX + wrongVersion)).toBeNull();
});
it('rejects a payload missing url or username', () => {
const noUrl = btoa(JSON.stringify({ v: 1, url: '', u: 'u', w: 'p' }))
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeServerMagicString(SERVER_MAGIC_STRING_PREFIX + noUrl)).toBeNull();
const noUser = btoa(JSON.stringify({ v: 1, url: 'https://x', u: '', w: 'p' }))
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeServerMagicString(SERVER_MAGIC_STRING_PREFIX + noUser)).toBeNull();
});
it('rejects a payload where url/username are not strings', () => {
const wrongTypes = btoa(JSON.stringify({ v: 1, url: 42, u: ['a'], w: 'p' }))
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeServerMagicString(SERVER_MAGIC_STRING_PREFIX + wrongTypes)).toBeNull();
});
it('decodes invite embedded in surrounding text', () => {
const original = {
url: 'https://music.example.com',
@@ -52,4 +96,51 @@ describe('serverMagicString', () => {
expect(decodeServerMagicStringFromText(`Copy:\n${line}\nThanks`)).toEqual(original);
expect(decodeServerMagicStringFromText('no token')).toBeNull();
});
it('rejects text that contains only the bare prefix', () => {
expect(decodeServerMagicStringFromText(`prefix only: ${SERVER_MAGIC_STRING_PREFIX} done`)).toBeNull();
});
});
describe('copyTextToClipboard', () => {
const originalExecCommand = document.execCommand;
beforeEach(() => {
// setup.ts already installs a clipboard mock — start each test fresh.
vi.mocked(navigator.clipboard.writeText).mockResolvedValue();
});
afterEach(() => {
document.execCommand = originalExecCommand;
});
it('uses the modern clipboard API on success', async () => {
const ok = await copyTextToClipboard('hello');
expect(ok).toBe(true);
expect(navigator.clipboard.writeText).toHaveBeenCalledWith('hello');
});
it('falls back to execCommand("copy") when clipboard API rejects', async () => {
vi.mocked(navigator.clipboard.writeText).mockRejectedValueOnce(new Error('blocked'));
document.execCommand = vi.fn(() => true) as unknown as typeof document.execCommand;
const ok = await copyTextToClipboard('fallback-text');
expect(ok).toBe(true);
expect(document.execCommand).toHaveBeenCalledWith('copy');
});
it('returns false when both clipboard API and execCommand fail', async () => {
vi.mocked(navigator.clipboard.writeText).mockRejectedValueOnce(new Error('blocked'));
document.execCommand = vi.fn(() => {
throw new Error('not allowed');
}) as unknown as typeof document.execCommand;
const ok = await copyTextToClipboard('x');
expect(ok).toBe(false);
});
it('returns the result of execCommand even when it returns false', async () => {
vi.mocked(navigator.clipboard.writeText).mockRejectedValueOnce(new Error('blocked'));
document.execCommand = vi.fn(() => false) as unknown as typeof document.execCommand;
const ok = await copyTextToClipboard('x');
expect(ok).toBe(false);
});
});
+206 -1
View File
@@ -1,10 +1,14 @@
import { describe, expect, it } from 'vitest';
import {
PSYSONIC_SHARE_PREFIX,
decodeOrbitSharePayloadFromText,
decodeSharePayloadFromText,
encodeSharePayload,
PSYSONIC_SHARE_PREFIX,
findServerIdForShareUrl,
normalizeShareServerUrl,
} from './shareLink';
import { decodeServerMagicString, encodeServerMagicString, SERVER_MAGIC_STRING_PREFIX } from './serverMagicString';
import { makeServer } from '@/test/helpers/factories';
describe('shareLink vs serverMagicString', () => {
it('uses the same psysonic* prefix family as server invites (distinct digit)', () => {
@@ -63,3 +67,204 @@ describe('shareLink vs serverMagicString', () => {
expect(decodeServerMagicString(encoded)).toBeNull();
});
});
describe('normalizeShareServerUrl', () => {
it('returns empty string for whitespace input', () => {
expect(normalizeShareServerUrl(' ')).toBe('');
expect(normalizeShareServerUrl('')).toBe('');
});
it('strips trailing slashes', () => {
expect(normalizeShareServerUrl('https://x.example/')).toBe('https://x.example');
expect(normalizeShareServerUrl('https://x.example')).toBe('https://x.example');
});
it('prepends http:// when no scheme is given', () => {
expect(normalizeShareServerUrl('192.168.1.10:4533')).toBe('http://192.168.1.10:4533');
expect(normalizeShareServerUrl('music.local')).toBe('http://music.local');
});
it('leaves https URLs unchanged (modulo trailing slash)', () => {
expect(normalizeShareServerUrl('https://music.example.com')).toBe('https://music.example.com');
});
});
describe('encodeSharePayload — entity kinds', () => {
it('round-trips a track share', () => {
const encoded = encodeSharePayload({ srv: 'https://x.example', k: 'track', id: 't-1' });
expect(decodeSharePayloadFromText(encoded)).toEqual({
srv: 'https://x.example',
k: 'track',
id: 't-1',
});
});
it('round-trips an artist share', () => {
const encoded = encodeSharePayload({ srv: 'https://x.example', k: 'artist', id: 'ar-1' });
expect(decodeSharePayloadFromText(encoded)).toEqual({
srv: 'https://x.example',
k: 'artist',
id: 'ar-1',
});
});
it('round-trips a composer share', () => {
const encoded = encodeSharePayload({ srv: 'https://x.example', k: 'composer', id: 'co-1' });
expect(decodeSharePayloadFromText(encoded)).toEqual({
srv: 'https://x.example',
k: 'composer',
id: 'co-1',
});
});
it('trims whitespace in queue ids and drops empty ones', () => {
const encoded = encodeSharePayload({
srv: 'https://x.example',
k: 'queue',
ids: [' a ', '', 'b', ' '],
});
expect(decodeSharePayloadFromText(encoded)).toEqual({
srv: 'https://x.example',
k: 'queue',
ids: ['a', 'b'],
});
});
});
describe('decodeSharePayloadFromText — rejection paths', () => {
it('rejects text with no prefix', () => {
expect(decodeSharePayloadFromText('just text')).toBeNull();
});
it('rejects bare prefix with no token', () => {
expect(decodeSharePayloadFromText(`a ${PSYSONIC_SHARE_PREFIX} b`)).toBeNull();
});
it('rejects a payload with the wrong version', () => {
const body = JSON.stringify({ v: 2, srv: 'https://x.example', k: 'track', id: 't' });
const b64 = btoa(body).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeSharePayloadFromText(PSYSONIC_SHARE_PREFIX + b64)).toBeNull();
});
it('rejects a payload with non-string srv', () => {
const body = JSON.stringify({ v: 1, srv: 42, k: 'track', id: 't' });
const b64 = btoa(body).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeSharePayloadFromText(PSYSONIC_SHARE_PREFIX + b64)).toBeNull();
});
it('rejects an unknown entity kind', () => {
const body = JSON.stringify({ v: 1, srv: 'https://x.example', k: 'playlist', id: 'pl-1' });
const b64 = btoa(body).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeSharePayloadFromText(PSYSONIC_SHARE_PREFIX + b64)).toBeNull();
});
it('rejects an entity payload with an empty id', () => {
const body = JSON.stringify({ v: 1, srv: 'https://x.example', k: 'track', id: ' ' });
const b64 = btoa(body).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeSharePayloadFromText(PSYSONIC_SHARE_PREFIX + b64)).toBeNull();
});
it('rejects a queue payload with no ids', () => {
const body = JSON.stringify({ v: 1, srv: 'https://x.example', k: 'queue', ids: [] });
const b64 = btoa(body).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeSharePayloadFromText(PSYSONIC_SHARE_PREFIX + b64)).toBeNull();
});
it('rejects a queue payload where ids is not an array', () => {
const body = JSON.stringify({ v: 1, srv: 'https://x.example', k: 'queue', ids: 'a,b' });
const b64 = btoa(body).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeSharePayloadFromText(PSYSONIC_SHARE_PREFIX + b64)).toBeNull();
});
it('rejects a queue payload whose ids are all whitespace', () => {
const body = JSON.stringify({ v: 1, srv: 'https://x.example', k: 'queue', ids: [' ', ''] });
const b64 = btoa(body).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeSharePayloadFromText(PSYSONIC_SHARE_PREFIX + b64)).toBeNull();
});
it('rejects malformed base64', () => {
expect(decodeSharePayloadFromText(`${PSYSONIC_SHARE_PREFIX}!!!notbase64!!!`)).toBeNull();
});
it('refuses to surface an orbit payload via the entity decoder', () => {
const orbit = encodeSharePayload({ srv: 'https://x.example', k: 'orbit', sid: 'abcd1234' });
expect(decodeSharePayloadFromText(orbit)).toBeNull();
});
});
describe('decodeOrbitSharePayloadFromText', () => {
it('round-trips an orbit invite', () => {
const encoded = encodeSharePayload({ srv: 'https://x.example', k: 'orbit', sid: 'abcd1234' });
expect(decodeOrbitSharePayloadFromText(`come to orbit: ${encoded}`)).toEqual({
srv: 'https://x.example',
k: 'orbit',
sid: 'abcd1234',
});
});
it('lowercases the session id', () => {
const body = JSON.stringify({ v: 1, srv: 'https://x.example', k: 'orbit', sid: 'ABCD1234' });
const b64 = btoa(body).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeOrbitSharePayloadFromText(PSYSONIC_SHARE_PREFIX + b64)).toEqual({
srv: 'https://x.example',
k: 'orbit',
sid: 'abcd1234',
});
});
it('rejects text with no prefix', () => {
expect(decodeOrbitSharePayloadFromText('hello')).toBeNull();
});
it('rejects bare prefix with no token', () => {
expect(decodeOrbitSharePayloadFromText(`a ${PSYSONIC_SHARE_PREFIX} b`)).toBeNull();
});
it('rejects a non-orbit payload kind', () => {
const encoded = encodeSharePayload({ srv: 'https://x.example', k: 'track', id: 't' });
expect(decodeOrbitSharePayloadFromText(encoded)).toBeNull();
});
it('rejects an invalid version', () => {
const body = JSON.stringify({ v: 9, srv: 'https://x.example', k: 'orbit', sid: 'abcd1234' });
const b64 = btoa(body).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeOrbitSharePayloadFromText(PSYSONIC_SHARE_PREFIX + b64)).toBeNull();
});
it('rejects an empty server', () => {
const body = JSON.stringify({ v: 1, srv: '', k: 'orbit', sid: 'abcd1234' });
const b64 = btoa(body).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeOrbitSharePayloadFromText(PSYSONIC_SHARE_PREFIX + b64)).toBeNull();
});
it('rejects a session id that is not 8 hex characters', () => {
const sids = ['', 'abcd', 'abcd1234e', 'zzzz1234'];
for (const sid of sids) {
const body = JSON.stringify({ v: 1, srv: 'https://x.example', k: 'orbit', sid });
const b64 = btoa(body).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
expect(decodeOrbitSharePayloadFromText(PSYSONIC_SHARE_PREFIX + b64)).toBeNull();
}
});
it('rejects malformed base64', () => {
expect(decodeOrbitSharePayloadFromText(`${PSYSONIC_SHARE_PREFIX}!!!`)).toBeNull();
});
});
describe('findServerIdForShareUrl', () => {
it('matches by normalized URL', () => {
const a = makeServer({ id: 'a', url: 'https://music.example.com/' });
const b = makeServer({ id: 'b', url: 'http://other.local' });
expect(findServerIdForShareUrl([a, b], 'https://music.example.com')).toBe('a');
expect(findServerIdForShareUrl([a, b], 'http://other.local/')).toBe('b');
});
it('returns null when no server matches', () => {
const a = makeServer({ id: 'a', url: 'https://music.example.com' });
expect(findServerIdForShareUrl([a], 'https://elsewhere.example')).toBeNull();
});
it('returns null on an empty server list', () => {
expect(findServerIdForShareUrl([], 'https://x.example')).toBeNull();
});
});