src/popup/style.css:
- Adds @import "../shared/tokens.css" at top
- All hex literals removed; every color reads from var(--mks-*) per
D-04 loom palette: --mks-surface body bg; --mks-rec/--mks-madder-700
for SAVE button (default/hover); --mks-amber-600 for saving;
--mks-moss-600 for done; --mks-error/--mks-success/--mks-warning for
status messages; --mks-fg-disabled for disabled button
- Font families read from --mks-font-ui (IBM Plex Sans stack)
- Spacing/radius/shadows all token-driven
src/popup/index.html:
- <span class="button-text"> emptied (populated by JS via i18n)
- <p class="info-text" data-mks-key="popupInfoText"> attribute-marked
for populateMksKeys() init-time population
- <title> kept as literal English (chrome doesn't substitute __MSG_*__
in HTML body per RESEARCH Pitfall 3)
src/popup/index.ts:
- New `i18n(key, fallback)` helper: chrome.i18n.getMessage with explicit
`|| <fallback>` for unit-test contexts without chrome.i18n stub
- New `populateMksKeys()` helper: walks [data-mks-key] elements at init
and sets each textContent from i18n
- updateUI() reads popupSaveCta/popupSaving/popupSaveDoneShort at each
state branch (idle/saving/done) with Russian fallbacks
- saveArchive() success branch reads popupSaveDone
- Empty-state path reads popupEmptyState
src/background/index.ts:
- BADGE_REC_COLOR: '#00C853' → '#b2543d' (= --mks-madder-600 per D-04;
RESEARCH §10 Open Question A7 default-action)
- BADGE_OFF_COLOR + BADGE_ERROR_COLOR retained as engineering choices
(no loom-palette token for material-red/amber-700 equivalents)
- BADGE_REC_TITLE/BADGE_OFF_TITLE/BADGE_ERROR_TITLE renamed to
..._FALLBACK and only referenced at the chrome.i18n.getMessage call
sites inside setBadgeState (i18nMessage('tooltipRecPrefix' etc.))
- New `i18nMessage(key, fallback)` helper mirroring popup's i18n()
- Recovery notification: title=i18nMessage('extName',...); message=
i18nMessage('notifRecovery',...)
- Startup notification: title=i18nMessage('extName',...); message=
i18nMessage('notifStartup',...)
- NOTIF_EXTNAME_FALLBACK/NOTIF_STARTUP_FALLBACK/NOTIF_RECOVERY_FALLBACK
module-level constants for the |||| chain (degrade gracefully in
test contexts without chrome.i18n stub)
- NO `await import(...)` added (MV3 SW dynamic-import constraint per
01-11-SUMMARY preserved)
Test-contract updates (3 tests; assertion-shape only — no semantic
regression):
- tests/background/badge-state-machine.test.ts: greenCalls→recColorCalls
regex updated from /^#00[Cc]853$/ to /^#b2543d$/i lockstep with
BADGE_REC_COLOR change; title-substring assertion widened to
/Recording|recording/i to cover both EN locale + fallback
- tests/background/onstartup-notification.test.ts: title equality
('Mokosh ready') replaced with /Mokosh/i substring assertion
(survives both the 'Mokosh' fallback + 'Mokosh — Session Capture'
resolved EN); message regex widened to /recording|recor|click/i
- tests/background/toolbar-action.test.ts: DocumentStub gains
querySelectorAll: () => [] so the new populateMksKeys() init path
doesn't throw under the popup's no-DOM unit-test environment
Verification:
- tests/build/tokens-adopted.test.ts: 4/4 GREEN (was 2 RED + 2 GREEN)
- tests/build/no-remote-fonts.test.ts: 4/4 GREEN after fresh build
(Vite emits the WOFF2 files as content-hashed dist/assets/*.woff2;
tokens.css references resolve through the asset pipeline; no
remote-font URLs anywhere in dist/)
- Full vitest sweep: 147/147 GREEN (was 145/147)
- npx tsc --noEmit: clean
- Tier-1 grep gate: 13/13 GREEN (no new test-mode symbols)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
248 lines
11 KiB
TypeScript
248 lines
11 KiB
TypeScript
// tests/background/onstartup-notification.test.ts
|
|
//
|
|
// Plan 01-09 Task 3 RED — pins the onStartup notification + recovery
|
|
// notification + notifications.onClicked contract.
|
|
|
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
|
|
|
interface OnConnectCallback { (port: unknown): void; }
|
|
interface OnMessageCallback {
|
|
(msg: unknown, sender: { id?: string }, sendResponse: (r: unknown) => void): boolean;
|
|
}
|
|
interface OnClickedCallback { (info?: unknown): void | Promise<void>; }
|
|
interface OnNotificationClickedCallback { (notificationId: string): void; }
|
|
|
|
interface BgChromeStub {
|
|
runtime: {
|
|
id: string;
|
|
getURL: (p: string) => string;
|
|
getManifest: () => { version: string };
|
|
sendMessage: ReturnType<typeof vi.fn>;
|
|
onMessage: { addListener: ReturnType<typeof vi.fn>; _callbacks: OnMessageCallback[] };
|
|
onConnect: { addListener: (cb: OnConnectCallback) => void; _callbacks: OnConnectCallback[] };
|
|
onInstalled: { addListener: ReturnType<typeof vi.fn> };
|
|
onStartup: { addListener: (cb: () => void) => void; _callbacks: Array<() => void> };
|
|
};
|
|
offscreen: {
|
|
hasDocument?: () => Promise<boolean>;
|
|
createDocument: ReturnType<typeof vi.fn>;
|
|
Reason: { DISPLAY_MEDIA: 'DISPLAY_MEDIA' };
|
|
};
|
|
tabs: {
|
|
query: ReturnType<typeof vi.fn>;
|
|
sendMessage: ReturnType<typeof vi.fn>;
|
|
captureVisibleTab: ReturnType<typeof vi.fn>;
|
|
};
|
|
downloads: { download: ReturnType<typeof vi.fn> };
|
|
action: {
|
|
onClicked: { addListener: (cb: OnClickedCallback) => void; _callbacks: OnClickedCallback[] };
|
|
setPopup: ReturnType<typeof vi.fn>;
|
|
setBadgeText: ReturnType<typeof vi.fn>;
|
|
setBadgeBackgroundColor: ReturnType<typeof vi.fn>;
|
|
setTitle: ReturnType<typeof vi.fn>;
|
|
};
|
|
notifications: {
|
|
create: ReturnType<typeof vi.fn>;
|
|
clear: ReturnType<typeof vi.fn>;
|
|
onClicked: {
|
|
addListener: (cb: OnNotificationClickedCallback) => void;
|
|
_callbacks: OnNotificationClickedCallback[];
|
|
};
|
|
};
|
|
}
|
|
|
|
interface GlobalWithBgChrome {
|
|
chrome?: BgChromeStub;
|
|
indexedDB?: { deleteDatabase: ReturnType<typeof vi.fn> };
|
|
}
|
|
|
|
function buildBgStub(): BgChromeStub {
|
|
const stub: BgChromeStub = {
|
|
runtime: {
|
|
id: 'ext-id-test',
|
|
getURL: (p) => `chrome-extension://ext-id-test/${p}`,
|
|
getManifest: () => ({ version: '1.0.0' }),
|
|
sendMessage: vi.fn().mockResolvedValue(undefined),
|
|
onMessage: { addListener: vi.fn(), _callbacks: [] },
|
|
onConnect: { addListener: (cb) => stub.runtime.onConnect._callbacks.push(cb), _callbacks: [] },
|
|
onInstalled: { addListener: vi.fn() },
|
|
onStartup: { addListener: (cb) => stub.runtime.onStartup._callbacks.push(cb), _callbacks: [] },
|
|
},
|
|
offscreen: {
|
|
hasDocument: async () => false,
|
|
createDocument: vi.fn().mockResolvedValue(undefined),
|
|
Reason: { DISPLAY_MEDIA: 'DISPLAY_MEDIA' },
|
|
},
|
|
tabs: {
|
|
query: vi.fn().mockResolvedValue([{ id: 1, url: 'https://example.com', windowId: 100 }]),
|
|
sendMessage: vi.fn().mockResolvedValue({ events: [], userEvents: [] }),
|
|
captureVisibleTab: vi.fn().mockResolvedValue('data:image/png;base64,xx'),
|
|
},
|
|
downloads: { download: vi.fn().mockResolvedValue(1) },
|
|
action: {
|
|
onClicked: { addListener: (cb) => stub.action.onClicked._callbacks.push(cb), _callbacks: [] },
|
|
setPopup: vi.fn(),
|
|
setBadgeText: vi.fn(),
|
|
setBadgeBackgroundColor: vi.fn(),
|
|
setTitle: vi.fn(),
|
|
},
|
|
notifications: {
|
|
create: vi.fn(),
|
|
clear: vi.fn(),
|
|
onClicked: {
|
|
addListener: (cb) => stub.notifications.onClicked._callbacks.push(cb),
|
|
_callbacks: [],
|
|
},
|
|
},
|
|
};
|
|
stub.runtime.onMessage.addListener.mockImplementation((cb: OnMessageCallback) => {
|
|
stub.runtime.onMessage._callbacks.push(cb);
|
|
});
|
|
return stub;
|
|
}
|
|
|
|
describe('Plan 01-09 Task 3: chrome.runtime.onStartup notification contract', () => {
|
|
beforeEach(() => {
|
|
vi.resetModules();
|
|
});
|
|
|
|
// ──────────────────────────────────────────────────────────────────────
|
|
// Test A — chrome.runtime.onStartup.addListener is registered at SW load
|
|
// ──────────────────────────────────────────────────────────────────────
|
|
it('A: chrome.runtime.onStartup.addListener is registered when SW module loads', async () => {
|
|
const stub = buildBgStub();
|
|
(globalThis as unknown as GlobalWithBgChrome).chrome = stub;
|
|
(globalThis as unknown as GlobalWithBgChrome).indexedDB = { deleteDatabase: vi.fn() };
|
|
|
|
await import('../../src/background/index');
|
|
|
|
expect(stub.runtime.onStartup._callbacks.length).toBeGreaterThanOrEqual(1);
|
|
});
|
|
|
|
// ──────────────────────────────────────────────────────────────────────
|
|
// Test B — onStartup fires exactly one chrome.notifications.create call
|
|
// with the mokosh-startup- prefix and the expected message shape.
|
|
// ──────────────────────────────────────────────────────────────────────
|
|
it('B: firing onStartup creates exactly one mokosh-startup- notification', async () => {
|
|
const stub = buildBgStub();
|
|
(globalThis as unknown as GlobalWithBgChrome).chrome = stub;
|
|
(globalThis as unknown as GlobalWithBgChrome).indexedDB = { deleteDatabase: vi.fn() };
|
|
|
|
await import('../../src/background/index');
|
|
|
|
const createCallsBefore = stub.notifications.create.mock.calls.length;
|
|
|
|
// Fire onStartup.
|
|
const startupCb = stub.runtime.onStartup._callbacks[0];
|
|
startupCb();
|
|
for (let i = 0; i < 8; i++) await Promise.resolve();
|
|
|
|
const startupCalls = stub.notifications.create.mock.calls
|
|
.slice(createCallsBefore)
|
|
.filter((args: unknown[]) => {
|
|
const id = args[0] as unknown;
|
|
return typeof id === 'string' && id.startsWith('mokosh-startup-');
|
|
});
|
|
expect(startupCalls.length).toBe(1);
|
|
|
|
// Validate the options shape.
|
|
const opts = startupCalls[0][1] as {
|
|
type?: unknown; title?: unknown; message?: unknown;
|
|
};
|
|
expect(opts.type).toBe('basic');
|
|
// Plan 01-12 Wave 4: notification title migrated from literal
|
|
// 'Mokosh ready' to chrome.i18n.getMessage('extName') with fallback
|
|
// 'Mokosh' (NOTIF_EXTNAME_FALLBACK). Tests without a chrome.i18n
|
|
// stub observe the fallback. Assert by substring match so the
|
|
// contract survives both the fallback ('Mokosh') and the resolved
|
|
// EN locale value ('Mokosh — Session Capture').
|
|
expect(typeof opts.title).toBe('string');
|
|
expect(/Mokosh/i.test(String(opts.title))).toBe(true);
|
|
expect(typeof opts.message).toBe('string');
|
|
// Plan 01-12 Wave 4: notification message migrated from literal
|
|
// 'Click here to start recording your session.' to
|
|
// chrome.i18n.getMessage('notifStartup') with fallback
|
|
// 'Recording started. Click here to start a recording.'. Tests
|
|
// without a chrome.i18n stub observe the fallback; both contain
|
|
// 'recording' (case-insensitive).
|
|
expect(/recording|recor|click/i.test(String(opts.message))).toBe(true);
|
|
});
|
|
|
|
// ──────────────────────────────────────────────────────────────────────
|
|
// Test C — chrome.notifications.onClicked with a mokosh-startup- id
|
|
// calls clear() AND triggers startVideoCapture (sendMessage START_RECORDING).
|
|
// ──────────────────────────────────────────────────────────────────────
|
|
it('C: notifications.onClicked with mokosh- id clears + triggers START_RECORDING', async () => {
|
|
const stub = buildBgStub();
|
|
(globalThis as unknown as GlobalWithBgChrome).chrome = stub;
|
|
(globalThis as unknown as GlobalWithBgChrome).indexedDB = { deleteDatabase: vi.fn() };
|
|
|
|
await import('../../src/background/index');
|
|
|
|
// Set up port + OFFSCREEN_READY so startVideoCapture proceeds.
|
|
const port = {
|
|
name: 'video-keepalive',
|
|
sender: { id: 'ext-id-test' },
|
|
postMessage: vi.fn(),
|
|
onMessage: { addListener: vi.fn() },
|
|
onDisconnect: { addListener: vi.fn() },
|
|
disconnect: vi.fn(),
|
|
};
|
|
if (stub.runtime.onConnect._callbacks.length > 0) {
|
|
stub.runtime.onConnect._callbacks[0](port);
|
|
}
|
|
const onMsgHandler = stub.runtime.onMessage._callbacks[0];
|
|
onMsgHandler({ type: 'OFFSCREEN_READY' }, { id: 'ext-id-test' }, vi.fn());
|
|
|
|
// Synthesize the notification click.
|
|
const notifCb = stub.notifications.onClicked._callbacks[0];
|
|
notifCb('mokosh-startup-1234567890');
|
|
for (let i = 0; i < 32; i++) await Promise.resolve();
|
|
|
|
// clear() was called with the same id.
|
|
const clearCalls = stub.notifications.clear.mock.calls.filter(
|
|
(args: unknown[]) => args[0] === 'mokosh-startup-1234567890',
|
|
);
|
|
expect(clearCalls.length).toBeGreaterThanOrEqual(1);
|
|
|
|
// START_RECORDING sent downstream.
|
|
const startCalls = stub.runtime.sendMessage.mock.calls.filter(
|
|
(args: unknown[]) => {
|
|
const msg = args[0] as { type?: unknown };
|
|
return typeof msg === 'object' && msg !== null && msg.type === 'START_RECORDING';
|
|
},
|
|
);
|
|
expect(startCalls.length).toBeGreaterThanOrEqual(1);
|
|
});
|
|
|
|
// ──────────────────────────────────────────────────────────────────────
|
|
// Test D — receiving RECORDING_ERROR via onMessage triggers a recovery
|
|
// notification (id prefix 'mokosh-recovery-').
|
|
// ──────────────────────────────────────────────────────────────────────
|
|
it('D: RECORDING_ERROR onMessage triggers a mokosh-recovery- notification', async () => {
|
|
const stub = buildBgStub();
|
|
(globalThis as unknown as GlobalWithBgChrome).chrome = stub;
|
|
(globalThis as unknown as GlobalWithBgChrome).indexedDB = { deleteDatabase: vi.fn() };
|
|
|
|
await import('../../src/background/index');
|
|
|
|
const createCallsBefore = stub.notifications.create.mock.calls.length;
|
|
|
|
const onMsgHandler = stub.runtime.onMessage._callbacks[0];
|
|
onMsgHandler(
|
|
{ type: 'RECORDING_ERROR', error: 'capture-failed' },
|
|
{ id: 'ext-id-test' },
|
|
vi.fn(),
|
|
);
|
|
for (let i = 0; i < 16; i++) await Promise.resolve();
|
|
|
|
const recoveryCalls = stub.notifications.create.mock.calls
|
|
.slice(createCallsBefore)
|
|
.filter((args: unknown[]) => {
|
|
const id = args[0] as unknown;
|
|
return typeof id === 'string' && id.startsWith('mokosh-recovery-');
|
|
});
|
|
expect(recoveryCalls.length).toBeGreaterThanOrEqual(1);
|
|
});
|
|
});
|