214 lines
8.6 KiB
JavaScript
214 lines
8.6 KiB
JavaScript
'use strict';
|
|
|
|
/**
|
|
* Unit tests for sw-update.js — the "Update available keeps showing after
|
|
* Refresh UI" loop.
|
|
*
|
|
* On the real deployment (slow homelab link that drops requests) the new
|
|
* service worker's all-or-nothing install kept failing, so "Refresh UI"
|
|
* reloaded into the old cached shell and the banner came back. The fix
|
|
* refreshes the cached shell in place (all-or-nothing, cache-busted) before
|
|
* activating any waiting worker and reloading once.
|
|
*
|
|
* No real service worker or browser needed: fake CacheStorage / fetch /
|
|
* registration / container objects drive the functions directly.
|
|
*/
|
|
|
|
const { test } = require('node:test');
|
|
const assert = require('node:assert');
|
|
const { applyUpdate, refreshShellInPlace, BUST_PARAM } = require('./sw-update');
|
|
|
|
const ORIGIN = 'https://worship.example';
|
|
|
|
// A minimal fake ServiceWorkerContainer supporting addEventListener/once.
|
|
function fakeContainer() {
|
|
const listeners = {};
|
|
return {
|
|
addEventListener(type, fn, opts) {
|
|
(listeners[type] = listeners[type] || []).push({ fn, once: !!(opts && opts.once) });
|
|
},
|
|
fireControllerChange() {
|
|
const fns = (listeners.controllerchange || []).slice();
|
|
for (const { fn, once } of fns) {
|
|
fn();
|
|
if (once) listeners.controllerchange = listeners.controllerchange.filter((l) => l.fn !== fn);
|
|
}
|
|
},
|
|
};
|
|
}
|
|
|
|
// Fake CacheStorage: { name: { url: body } }.
|
|
function fakeCaches(initial) {
|
|
const store = new Map(Object.entries(initial).map(([k, v]) => [k, new Map(Object.entries(v))]));
|
|
return {
|
|
store,
|
|
async keys() { return [...store.keys()]; },
|
|
async open(name) {
|
|
if (!store.has(name)) store.set(name, new Map());
|
|
const m = store.get(name);
|
|
return {
|
|
async keys() { return [...m.keys()].map((url) => ({ url })); },
|
|
async put(url, res) { m.set(url, res.body); },
|
|
async delete(req) { return m.delete(req.url); },
|
|
};
|
|
},
|
|
};
|
|
}
|
|
|
|
const res = (body, status = 200) => ({ ok: status >= 200 && status < 300, status, body, clone() { return res(body, status); } });
|
|
const isShellCache = (n) => /^ytplayer-(?!thumbs$|fonts$)/.test(n);
|
|
|
|
test('refreshShellInPlace replaces every cached shell file in every shell cache, cache-busted', async () => {
|
|
const cachesApi = fakeCaches({
|
|
'ytplayer-old': { [`${ORIGIN}/`]: 'old-index', [`${ORIGIN}/app.js`]: 'old-app' },
|
|
'ytplayer-new': { [`${ORIGIN}/app.js`]: 'old-app', [`${ORIGIN}/video-edit.js`]: 'old-edit' },
|
|
'ytplayer-thumbs': { [`${ORIGIN}/thumb.jpg`]: 'thumb' },
|
|
});
|
|
const fetched = [];
|
|
const r = await refreshShellInPlace({
|
|
cachesApi,
|
|
isShellCache,
|
|
bust: 'T1',
|
|
fetchFn: async (url, init) => {
|
|
fetched.push({ url, init });
|
|
return res('NEW ' + new URL(url).pathname);
|
|
},
|
|
});
|
|
assert.strictEqual(r.refreshed, 3);
|
|
// Busted so an old worker's cache-first handler can't answer from its cache.
|
|
for (const f of fetched) {
|
|
assert.strictEqual(new URL(f.url).searchParams.get(BUST_PARAM), 'T1-0');
|
|
assert.strictEqual(f.init.cache, 'reload');
|
|
}
|
|
const old = cachesApi.store.get('ytplayer-old');
|
|
assert.strictEqual(old.get(`${ORIGIN}/`), 'NEW /');
|
|
assert.strictEqual(old.get(`${ORIGIN}/app.js`), 'NEW /app.js');
|
|
assert.strictEqual(old.get(`${ORIGIN}/video-edit.js`), 'NEW /video-edit.js');
|
|
assert.strictEqual(cachesApi.store.get('ytplayer-new').get(`${ORIGIN}/`), 'NEW /');
|
|
assert.strictEqual(cachesApi.store.get('ytplayer-thumbs').get(`${ORIGIN}/thumb.jpg`), 'thumb', 'utility caches untouched');
|
|
});
|
|
|
|
test('refreshShellInPlace is all-or-nothing: one failed download writes nothing and throws', async () => {
|
|
const cachesApi = fakeCaches({
|
|
'ytplayer-old': { [`${ORIGIN}/`]: 'old-index', [`${ORIGIN}/app.js`]: 'old-app', [`${ORIGIN}/styles.css`]: 'old-css' },
|
|
});
|
|
await assert.rejects(refreshShellInPlace({
|
|
cachesApi,
|
|
isShellCache,
|
|
fetchFn: async (url) => (url.includes('/styles.css') ? res('gateway timeout', 504) : res('NEW')),
|
|
}), /styles\.css/, 'fails after its retries are used up');
|
|
const old = cachesApi.store.get('ytplayer-old');
|
|
assert.deepStrictEqual([...old.values()], ['old-index', 'old-app', 'old-css'], 'no partial shell');
|
|
});
|
|
|
|
test('refreshShellInPlace retries a dropped download with a fresh cache-bust token', async () => {
|
|
const cachesApi = fakeCaches({ 'ytplayer-old': { [`${ORIGIN}/app.js`]: 'old-app', [`${ORIGIN}/`]: 'old-index' } });
|
|
const tries = [];
|
|
await refreshShellInPlace({
|
|
cachesApi, isShellCache, bust: 'T3',
|
|
fetchFn: async (url) => {
|
|
tries.push(url);
|
|
if (url.includes('/app.js') && tries.filter((t) => t.includes('/app.js')).length === 1) throw new TypeError('network error');
|
|
return res('NEW');
|
|
},
|
|
});
|
|
const appTries = tries.filter((t) => t.includes('/app.js')).map((t) => new URL(t).searchParams.get(BUST_PARAM));
|
|
assert.deepStrictEqual(appTries, ['T3-0', 'T3-1']);
|
|
assert.strictEqual(cachesApi.store.get('ytplayer-old').get(`${ORIGIN}/app.js`), 'NEW');
|
|
});
|
|
|
|
test('refreshShellInPlace drops busted URLs an old cache-first worker stored on the way through', async () => {
|
|
const cachesApi = fakeCaches({ 'ytplayer-old': { [`${ORIGIN}/app.js`]: 'old-app' } });
|
|
const fetchFn = async (url) => {
|
|
// Simulate the old worker's cacheFirst caching the busted request.
|
|
(await cachesApi.open('ytplayer-old')).put(url, res('NEW'));
|
|
return res('NEW');
|
|
};
|
|
await refreshShellInPlace({ cachesApi, isShellCache, fetchFn, bust: 'T2' });
|
|
assert.deepStrictEqual([...cachesApi.store.get('ytplayer-old').keys()], [`${ORIGIN}/app.js`]);
|
|
});
|
|
|
|
test('refreshShellInPlace times out instead of hanging on a stalled request', async () => {
|
|
const cachesApi = fakeCaches({ 'ytplayer-old': { [`${ORIGIN}/app.js`]: 'old-app' } });
|
|
let fire = null;
|
|
const p = refreshShellInPlace({
|
|
cachesApi, isShellCache,
|
|
fetchFn: () => new Promise(() => {}), // never settles
|
|
timeoutMs: 1000,
|
|
setTimeout: (fn, ms) => { if (ms === 1000) fire = fn; },
|
|
});
|
|
await new Promise((r) => setImmediate(r));
|
|
fire();
|
|
await assert.rejects(p, /timed out/);
|
|
assert.strictEqual(cachesApi.store.get('ytplayer-old').get(`${ORIGIN}/app.js`), 'old-app');
|
|
});
|
|
|
|
test('refreshShellInPlace with no shell caches (uncontrolled page) is a no-op', async () => {
|
|
const r = await refreshShellInPlace({ cachesApi: fakeCaches({}), isShellCache, fetchFn: async () => { throw new Error('no fetch expected'); } });
|
|
assert.deepStrictEqual(r, { refreshed: 0, caches: 0 });
|
|
});
|
|
|
|
test('applyUpdate refreshes first, then activates the waiting worker, then reloads once on controllerchange', async () => {
|
|
const order = [];
|
|
const waiting = { postMessage: (m) => order.push('msg:' + m.type) };
|
|
const container = fakeContainer();
|
|
let reloads = 0;
|
|
await applyUpdate({
|
|
reg: { waiting },
|
|
container,
|
|
reload: () => { reloads++; order.push('reload'); },
|
|
refreshShell: async () => { order.push('refresh'); },
|
|
setTimeout: () => {},
|
|
});
|
|
assert.deepStrictEqual(order, ['refresh', 'msg:SKIP_WAITING']);
|
|
assert.strictEqual(reloads, 0, 'must not reload before the new worker has taken control');
|
|
container.fireControllerChange();
|
|
container.fireControllerChange();
|
|
assert.strictEqual(reloads, 1, 'reloads exactly once');
|
|
});
|
|
|
|
test('applyUpdate with no waiting worker reloads right after the refresh', async () => {
|
|
const order = [];
|
|
await applyUpdate({
|
|
reg: { waiting: null },
|
|
container: fakeContainer(),
|
|
reload: () => order.push('reload'),
|
|
refreshShell: async () => { order.push('refresh'); },
|
|
});
|
|
assert.deepStrictEqual(order, ['refresh', 'reload']);
|
|
});
|
|
|
|
test('applyUpdate does NOT reload or activate anything when the refresh fails', async () => {
|
|
const messages = [];
|
|
let reloads = 0;
|
|
await assert.rejects(applyUpdate({
|
|
reg: { waiting: { postMessage: (m) => messages.push(m) } },
|
|
container: fakeContainer(),
|
|
reload: () => { reloads++; },
|
|
refreshShell: async () => { throw new Error('/app.js → 504'); },
|
|
}), /504/);
|
|
assert.strictEqual(reloads, 0, 'reloading now would just serve the old shell again (the loop)');
|
|
assert.deepStrictEqual(messages, []);
|
|
});
|
|
|
|
test('the timeout safety net reloads once if controllerchange never fires', async () => {
|
|
let fire = null;
|
|
let reloads = 0;
|
|
const container = fakeContainer();
|
|
await applyUpdate({
|
|
reg: { waiting: { postMessage() {} } },
|
|
container,
|
|
reload: () => { reloads++; },
|
|
setTimeout: (fn) => { fire = fn; },
|
|
});
|
|
fire();
|
|
container.fireControllerChange();
|
|
assert.strictEqual(reloads, 1);
|
|
});
|
|
|
|
test('applyUpdate with no registration at all still reloads', async () => {
|
|
let reloads = 0;
|
|
await applyUpdate({ reg: null, container: fakeContainer(), reload: () => { reloads++; } });
|
|
assert.strictEqual(reloads, 1);
|
|
});
|