gitoriaLog in with ident

tracker

All repositories: gitoria

ReadmeCodePull requestsReleasesTicketsSettings
Commitcbdc4ea7cbdc4ea7tracker#12: link icons TMDB/IMDb/TVDB/TVmaze; sync fills missing ids (TVmaze lookup); movies fetched via /movie/mrecbdc4ea7/tests/browser.mjs

62.1 KB

  1. // tests/browser.mjs — THE GATE of tracker.worldapi.org#1: this app's own server on its own storage, its OWN ident
  2. // (a copy of ident's code without .env, codes to a mail sink: tests/identkit.mjs, same as calendar's gate), a real
  3. // headless Chrome. Proves: signed out (header shows "Log in with ident") -> sign in -> the header selector shows
  4. // signed in, "Log out" appears, the page itself stays empty -> sign out -> signed out again (a reload confirms it).
  5. //
  6. // node tests/browser.mjs (TRACKER_GATE_PORT server, default 8700; TRACKER_GATE_IDENT_PORT ident, default 8701;
  7. // TRACKER_GATE_CHROME "8702-8709" = Chrome debug ports; TRACKER_GATE_TMDB_PORT the fake
  8. // TMDB, default 8710)
  9. import { spawn, execFileSync } from 'node:child_process';
  10. import { existsSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
  11. import { dirname, join, resolve } from 'node:path';
  12. import { fileURLToPath } from 'node:url';
  13. import { launchBrowser } from './cdp.mjs';
  14. import { startIdent } from './identkit.mjs';
  15. import { startFakeTmdb, PNG } from './faketmdb.mjs';
  16. if (!process.env.HL_CHROME && existsSync('/opt/google/chrome/chrome')) process.env.HL_CHROME = '/opt/google/chrome/chrome';
  17. const HERE = dirname(fileURLToPath(import.meta.url));
  18. const APP = resolve(HERE, '..');
  19. const PORT = Number(process.env.TRACKER_GATE_PORT || 8700);
  20. const [CH_FROM, CH_TO] = (process.env.TRACKER_GATE_CHROME || '8702-8709').split('-').map(Number);
  21. const IDENT_PORT = Number(process.env.TRACKER_GATE_IDENT_PORT || 8701);
  22. const TMDB_PORT = Number(process.env.TRACKER_GATE_TMDB_PORT || 8710);
  23. const BASE = `http://127.0.0.1:${PORT}`;
  24. const STORE = join(APP, '.scratch', 'gate-store');
  25. const IDENT_DIR = process.env.TRACKER_GATE_IDENT_DIR || [resolve(APP, '../ident.worldapi.org'), '/media/STORAGE/projects/ident.worldapi.org'].find(d => existsSync(join(d, 'project.hl')));
  26. const SCRATCH = join(APP, '.scratch');
  27. const SESSIONS = join(SCRATCH, 'gate-sessions');
  28. rmSync(SESSIONS, { recursive: true, force: true });
  29. rmSync(STORE, { recursive: true, force: true });
  30. mkdirSync(SESSIONS, { recursive: true });
  31. let failures = 0, passes = 0;
  32. function check(label, ok, detail = '') {
  33. console.log(`${ok ? 'ok ' : 'FAIL'} ${label}${ok ? '' : ' — ' + detail}`);
  34. if (ok) passes++; else failures++;
  35. }
  36. let ident = null, server = null, browser = null, log = '', tmdb = null;
  37. async function stopServer() {
  38. if (server) {
  39. const s = server;
  40. try { s.kill('SIGTERM'); } catch {}
  41. await new Promise(r => { if (s.exitCode !== null || s.signalCode !== null) return r(); s.once('exit', r); setTimeout(r, 3000); });
  42. server = null;
  43. }
  44. }
  45. async function stop() {
  46. if (ident) { try { await ident.stop(); } catch {} ident = null; }
  47. if (browser) { try { await browser.close(); } catch {} browser = null; }
  48. await stopServer();
  49. if (tmdb) { try { await tmdb.stop(); } catch {} tmdb = null; }
  50. }
  51. // tracker.worldapi.org#9: what the fake TMDB (tests/faketmdb.mjs) knows about the two fixture shows (tmdbId 1001,
  52. // 1002, tests/seed-show.hl). Show 1: season 0 (must NOT be synced — the show has no season 0), S1 with the two
  53. // fixture episodes (no tmdbId locally → matched by number; E2 renamed "Second Episode") + a new E3 (released),
  54. // S2 unchanged, a NEW S3 (E1 released, E2 upcoming 2098-06-01). Show 2 (no seasons yet): a NEW S1 E1 (upcoming
  55. // 2097-01-01). Both have a poster.
  56. // tracker.worldapi.org#12: TMDB's external_ids — show 1 a DIFFERENT imdb id than the stored tt0000001 (must not overwrite)
  57. // + a tvdb id (fills); show 2 an imdb id (fills) + a different tvdb id than the stored 4002 (must not overwrite). The movie
  58. // 1003 (only via /movie/): an imdb id. The fake TVmaze knows imdb tt0000001 → 501 and thetvdb 4002 → 502 (tt0000002 is unknown).
  59. const gateTmdbMovies = () => ({ 1003: { id: 1003, title: 'Gate Test Movie', poster_path: '/gate3.png', external_ids: { imdb_id: 'tt0000003', wikidata_id: 'Q1' } } });
  60. const gateTvmaze = () => ({ imdb: { tt0000001: 501 }, thetvdb: { 4002: 502 } });
  61. const gateTmdbShows = () => ({
  62. 1001: { id: 1001, name: 'Gate Test Show', overview: 'TMDB overview', status: 'Returning Series', poster_path: '/gate1.png', external_ids: { imdb_id: 'tt9999999', tvdb_id: 4001, tvrage_id: null }, seasons: [
  63. { id: 90, season_number: 0, name: 'Specials', air_date: '2019-01-01', episodes: [{ id: 5000, episode_number: 1, name: 'A Special', air_date: '2019-01-01' }] },
  64. { id: 91, season_number: 1, name: 'Season 1', air_date: '2020-01-01', episodes: [
  65. { id: 5001, episode_number: 1, name: 'Pilot', air_date: '2020-01-01' },
  66. { id: 5002, episode_number: 2, name: 'Second Episode', air_date: '2020-06-15' },
  67. { id: 5003, episode_number: 3, name: 'Third', air_date: '2020-09-01' }] },
  68. { id: 92, season_number: 2, name: 'Season 2', air_date: '2099-01-01', episodes: [{ id: 5004, episode_number: 1, name: 'Season Two Opener', air_date: '2099-01-01' }] },
  69. { id: 93, season_number: 3, name: 'Season 3', air_date: '2021-05-05', episodes: [
  70. { id: 5005, episode_number: 1, name: 'Third Season Start', air_date: '2021-05-05' },
  71. { id: 5006, episode_number: 2, name: 'Coming Soon', air_date: '2098-06-01' }] }] },
  72. 1002: { id: 1002, name: 'Unwatched Gate Show', overview: 'second', status: 'Returning Series', poster_path: '/gate2.png', external_ids: { imdb_id: 'tt0000002', tvdb_id: 4999 }, seasons: [
  73. { id: 94, season_number: 1, name: 'Season 1', air_date: '2097-01-01', episodes: [{ id: 7001, episode_number: 1, name: 'Brand New', air_date: '2097-01-01' }] }] },
  74. });
  75. async function main() {
  76. ident = await startIdent({ identDir: IDENT_DIR, workDir: join(STORE, 'ident'), port: IDENT_PORT });
  77. const alice = await ident.signIn('[email protected]');
  78. const APPKEY = await ident.registerApp(alice, 'tracker (gate)', [BASE]);
  79. check('ident: our own ident runs (a copy without .env), tracker is registered', /^pk_[0-9a-f]{32}$/.test(APPKEY.key) && !existsSync(join(STORE, 'ident', 'ident-code', '.env')));
  80. // tracker.worldapi.org#5: learn alice's per-app identity (a throwaway code, consumed here) so the
  81. // fixture below can seed a follow for the SAME user the real login flow will later resolve to
  82. // (users.hl `ensureUser` matches an existing users.db row by `identity`, reusing its id) — this is
  83. // the only way to give /unwatched a known followed show before the browser ever signs in.
  84. const preCode = await ident.selectorCode(alice, APPKEY, BASE);
  85. const aliceIdentity = await ident.exchange(APPKEY, preCode);
  86. // tracker.worldapi.org#4/#5: a tiny fixture show (tests/seed-show.hl) — written BEFORE the server
  87. // starts, self-assigned ids only (never update(), see that file's header)
  88. const MPACKDB = join(STORE, 'mpackdb');
  89. mkdirSync(MPACKDB, { recursive: true });
  90. const seedOut = execFileSync(join(APP, 'bin/hybriel'), ['tests/seed-show.hl'], { cwd: APP, env: { ...process.env, TRACKER_STORAGE: MPACKDB, TRACKER_SEED_IDENTITY: aliceIdentity } }).toString();
  91. check('seed: the fixture show was written, alice follows it', seedOut.includes('gate-test-show') && seedOut.includes('follows it'), seedOut);
  92. // tracker.worldapi.org#8: the fixture show's poster FILE exists (a 1×1 png), the second show has none →
  93. // /my/shows must give the first its own /posters/sh1.png and the second the one placeholder URL /posters/none
  94. mkdirSync(join(MPACKDB, 'posters'), { recursive: true });
  95. writeFileSync(join(MPACKDB, 'posters', 'sh1.png'), Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==', 'base64'));
  96. // tracker.worldapi.org#9: the fake TMDB. EVERY run of the app/tool in this gate points at it with the gate's own
  97. // token — the runtime loads the project's real .env (TMDB_READ_TOKEN) by itself, the environment given here wins
  98. tmdb = await startFakeTmdb({ port: TMDB_PORT, shows: gateTmdbShows(), movies: gateTmdbMovies(), tvmaze: gateTvmaze() });
  99. const TMDB_ENV = { TMDB_READ_TOKEN: 'gate-token', TMDB_BASE_URL: tmdb.base + '/3', TMDB_IMAGE_URL: tmdb.base + '/t/p', TVMAZE_BASE_URL: tmdb.base + '/tvmaze' };
  100. const startServer = async (extra = {}) => {
  101. log = '';
  102. server = spawn(join(APP, 'bin/hybriel'), ['project.hl'], { cwd: APP, env: { ...process.env, TRACKER_PORT: String(PORT), TRACKER_SESSIONS: SESSIONS + '/', TRACKER_STORAGE: MPACKDB, TRACKER_WATCH: '0',
  103. TRACKER_URL: BASE, IDENT_URL: ident.base, IDENT_EXCHANGE_URL: ident.base, TRACKER_KEY: APPKEY.key, TRACKER_SECRET: APPKEY.secret, ...TMDB_ENV, TRACKER_SYNC: '0', ...extra }, stdio: ['ignore', 'pipe', 'pipe'] });
  104. server.stdout.on('data', d => log += d); server.stderr.on('data', d => log += d);
  105. for (let i = 0; ; i++) {
  106. try { if ((await fetch(BASE + '/')).ok) break; } catch {}
  107. if (i > 80) throw new Error('tracker did not come up\n' + log);
  108. await new Promise(r => setTimeout(r, 250));
  109. }
  110. };
  111. await startServer();
  112. check('tracker is up', true);
  113. browser = await launchBrowser({ debugPortRange: [CH_FROM, CH_TO] });
  114. const page = await browser.newPage();
  115. page.captureNetwork();
  116. const ev = (e) => page.evaluate(e);
  117. const hydrated = () => page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 15000, label: 'hydrated' });
  118. // mission 047: every check icon AND season caret on the page is a real SVG element (not XHTML) and actually drawn
  119. const svgState = () => ev(`JSON.stringify((() => {
  120. const svgs = Array.from(document.querySelectorAll('button.checkicon svg, season-caret svg'));
  121. const shapes = Array.from(document.querySelectorAll('button.checkicon svg circle, button.checkicon svg path, season-caret svg path'));
  122. return { svgs: svgs.length, badNs: svgs.concat(shapes).filter(e => e.namespaceURI !== 'http://www.w3.org/2000/svg').length,
  123. undrawn: Array.from(document.querySelectorAll('button.checkicon svg circle')).filter(c => !(c.getBoundingClientRect().width > 0)).length };
  124. })())`);
  125. const svgOk = (st) => { const v = JSON.parse(st); return v.svgs > 0 && v.badNs === 0 && v.undrawn === 0; };
  126. // the caret's rotation per season row, top to bottom: 'down' (open) or 'right' (collapsed, rotate(-90deg))
  127. const carets = () => ev(`JSON.stringify(Array.from(document.querySelectorAll('season-row')).map(r => {
  128. const t = getComputedStyle(r.querySelector('season-caret')).transform;
  129. return t === 'none' ? 'down' : (t.startsWith('matrix(') && Math.abs(Number(t.slice(7).split(',')[1]) + 1) < 1e-6 ? 'right' : t);
  130. }))`);
  131. // tracker.worldapi.org#12: the header's link icons as [label, href, target, rel], in order
  132. const extLinks = () => ev(`JSON.stringify(Array.from(document.querySelectorAll('show-links a.extlink')).map(a => [a.textContent, a.getAttribute('href'), a.getAttribute('target'), a.getAttribute('rel')]))`);
  133. const linksAre = (got, want) => JSON.stringify(JSON.parse(got)) === JSON.stringify(want.map(([l, h]) => [l, h, '_blank', 'noopener']));
  134. const TMDB_TV = 'https://www.themoviedb.org/tv/', TMDB_MOVIE = 'https://www.themoviedb.org/movie/', IMDB = 'https://www.imdb.com/title/', TVDB = 'https://thetvdb.com/dereferrer/series/', TVMAZE = 'https://www.tvmaze.com/shows/';
  135. // a click on a link icon: a NEW tab opens at that address (no access to this one: noopener), this tab stays where it is.
  136. // The new tab is closed again at once (it would load the real site).
  137. const clickOpensNewTab = async (sel) => {
  138. const seen = new Map();
  139. const off = browser.conn.onEvent((m) => {
  140. if ((m.method === 'Target.targetCreated' || m.method === 'Target.targetInfoChanged') && m.params.targetInfo.type === 'page') seen.set(m.params.targetInfo.targetId, m.params.targetInfo);
  141. });
  142. await browser.conn.send('Target.setDiscoverTargets', { discover: true });
  143. const known = new Set(seen.keys());
  144. const before = await ev('location.href');
  145. await page.click(sel);
  146. const fresh = () => [...seen.values()].find(i => !known.has(i.targetId) && i.url && i.url !== 'about:blank');
  147. for (let i = 0; i < 100 && !fresh(); i++) await new Promise(r => setTimeout(r, 50));
  148. const tab = fresh();
  149. off();
  150. await browser.conn.send('Target.setDiscoverTargets', { discover: false });
  151. if (tab) await browser.conn.send('Target.closeTarget', { targetId: tab.targetId }).catch(() => {});
  152. return { url: tab ? tab.url : null, canAccessOpener: tab ? tab.canAccessOpener : null, stayed: (await ev('location.href')) === before };
  153. };
  154. const modalOpen = () => ev(`!!(document.querySelector('dialog#signin') && document.querySelector('dialog#signin').open)`);
  155. const loginAs = async (who) => {
  156. const code = await ident.selectorCode(who, APPKEY, BASE);
  157. await page.goto(BASE + '/login/callback?ident_code=' + code);
  158. await page.waitForSelector('#logout');
  159. await hydrated();
  160. };
  161. // ---- signed out: header shows the selector + "Log in with ident", the page itself is empty ----
  162. await page.goto(BASE + '/');
  163. await hydrated();
  164. check('signed out: the identity selector is in the header', await ev(`!!document.querySelector('#selector')`));
  165. check('signed out: "Log in with ident" shows, no "Log out"', (await ev(`!!document.querySelector('#loginbutton')`)) && !(await ev(`!!document.querySelector('#logout')`)));
  166. check('the page itself stays empty (no centered sign-in)', (await ev(`document.querySelector('main').textContent.trim()`)) === '');
  167. // ---- tracker.worldapi.org#4: /shows/:slug signed OUT — the header/genres/cast show, no checks ----
  168. await page.goto(BASE + '/shows/gate-test-show');
  169. await hydrated();
  170. check('signed out: the show header renders (title, genre, cast)', (await ev(`document.querySelector('show-header h1').textContent`)) === 'Gate Test Show'
  171. && (await ev(`document.querySelector('.genre-pill').textContent`)) === 'Drama'
  172. && (await ev(`document.querySelector('.artist-link').textContent`)) === 'Test Actor');
  173. // ---- tracker.worldapi.org#12: link icons only for the ids the show has (before any sync: show 1 has tmdb + imdb) ----
  174. let lk = await extLinks();
  175. check('link icons: show 1 (tmdbId + imdbId only) has exactly TMDB (tv/1001) and IMDb (tt0000001), each target=_blank rel=noopener',
  176. linksAre(lk, [['TMDB', TMDB_TV + '1001'], ['IMDb', IMDB + 'tt0000001/']]), lk);
  177. check('link icons: monochrome badges (one colour for all, no image), small (≤ 1.6rem high)',
  178. (await ev(`(() => { const a = Array.from(document.querySelectorAll('a.extlink')); const c = a.map(e => getComputedStyle(e)); return a.length > 0 && new Set(c.map(x => x.backgroundColor + x.color)).size === 1 && a.every(e => !e.querySelector('img') && e.getBoundingClientRect().height <= 25.6) })()`)));
  179. const nt = await clickOpensNewTab('a.extlink[data-site="imdb"]');
  180. check('link icons: a click opens the show on IMDb in a NEW tab without access to this one (noopener); this page stays', nt.url === IMDB + 'tt0000001/' && nt.canAccessOpener === false && nt.stayed, JSON.stringify(nt));
  181. await page.goto(BASE + '/shows/unwatched-gate-show');
  182. await hydrated();
  183. lk = await extLinks();
  184. check('link icons: show 2 (tmdbId + tvdbId only) has exactly TMDB and TheTVDB (dereferrer/series/4002)', linksAre(lk, [['TMDB', TMDB_TV + '1002'], ['TVDB', TVDB + '4002']]), lk);
  185. await page.goto(BASE + '/shows/gate-test-movie');
  186. await hydrated();
  187. lk = await extLinks();
  188. check('link icons: a movie (tmdbId only) has exactly TMDB as /movie/1003', linksAre(lk, [['TMDB', TMDB_MOVIE + '1003']]), lk);
  189. await page.goto(BASE + '/shows/gate-test-show');
  190. await hydrated();
  191. check('signed out: the latest season (2) is expanded, season 1 collapsed', (await ev(`document.querySelectorAll('episode-row').length`)) === 1);
  192. // mission 047: signed out the checks and "Follow" are VISIBLE; a click opens the sign-in modal and writes nothing
  193. check('signed out (mission 047): the season + episode checks are visible (drawn SVG) and so is "Follow"',
  194. (await ev(`document.querySelectorAll('button.checkicon').length`)) === 3 && svgOk(await svgState())
  195. && (await ev(`document.querySelector('#follow').textContent`)) === 'Follow' && (await ev(`document.querySelector('#follow').getBoundingClientRect().width > 0`)), await svgState());
  196. check('signed out: the sign-in modal is closed at first', !(await modalOpen()));
  197. await page.click('button.checkicon[value="ep0000000000ep0e3"]');
  198. await page.waitFor(`document.querySelector('dialog#signin').open`, { timeout: 5000, label: 'modal after a check click' }).catch(() => {});
  199. check('signed out: a check click opens the modal "You need to sign in to follow shows and mark episodes" with a sign-in link (ident login) and Close',
  200. (await modalOpen()) && (await ev(`document.querySelector('dialog#signin p').textContent`)) === 'You need to sign in to follow shows and mark episodes.'
  201. && (await ev(`document.querySelector('#signin-link').getAttribute('href')`)).startsWith(ident.base + '/login?key=')
  202. && (await ev(`document.querySelector('#signin-link').getBoundingClientRect().width > 0`))
  203. && (await ev(`Array.from(document.querySelectorAll('dialog#signin footer button')).map(b => b.textContent).join()`)) === 'Close',
  204. await ev(`document.querySelector('dialog#signin') ? document.querySelector('dialog#signin').outerHTML.slice(0, 600) : 'no dialog'`));
  205. if (process.env.TRACKER_GATE_SHOTS) { mkdirSync(process.env.TRACKER_GATE_SHOTS, { recursive: true }); writeFileSync(join(process.env.TRACKER_GATE_SHOTS, 'signed-out-modal-1280.png'), Buffer.from((await page.send('Page.captureScreenshot', { format: 'png' })).data, 'base64')); }
  206. await page.click('dialog#signin footer button');
  207. await page.waitFor(`!document.querySelector('dialog#signin').open`, { timeout: 5000, label: 'modal closed' }).catch(() => {});
  208. check('signed out: Close closes the modal; the check stayed unwatched (nothing written)', !(await modalOpen())
  209. && (await ev(`document.querySelector('button.checkicon[value="ep0000000000ep0e3"]').getAttribute('class')`)) === 'checkicon regular');
  210. await page.click('#follow');
  211. await page.waitFor(`document.querySelector('dialog#signin').open`, { timeout: 5000, label: 'modal after Follow' }).catch(() => {});
  212. check('signed out: "Follow" opens the same modal and stays "Follow"', (await modalOpen()) && (await ev(`document.querySelector('#follow').textContent`)) === 'Follow');
  213. await page.click('dialog#signin footer button');
  214. await page.click('button.checkicon[value="se000000000se0s1"]');
  215. await page.waitFor(`document.querySelector('dialog#signin').open`, { timeout: 5000, label: 'modal after a season check' }).catch(() => {});
  216. check('signed out: a SEASON check opens the modal too', await modalOpen());
  217. await page.click('dialog#signin footer button');
  218. await page.goto(BASE + '/shows/gate-test-show');
  219. await hydrated();
  220. check('signed out: after a reload every check is still unwatched (the clicks wrote nothing)',
  221. (await ev(`Array.from(document.querySelectorAll('button.checkicon')).every(b => b.getAttribute('class') === 'checkicon regular')`)));
  222. // ---- tracker.worldapi.org#5: /my/unwatched signed OUT — no rows, no checks ----
  223. await page.goto(BASE + '/my/unwatched');
  224. await hydrated();
  225. check('signed out: /my/unwatched shows no rows and asks to sign in', (await ev(`document.querySelectorAll('unwatched-row').length`)) === 0
  226. && (await ev(`document.querySelector('.muted').textContent`)) === 'Sign in to see the shows you follow.');
  227. // ---- tracker.worldapi.org#6: /my/schedule signed OUT — no rows, no checks ----
  228. await page.goto(BASE + '/my/schedule');
  229. await hydrated();
  230. check('signed out: /my/schedule shows no rows and asks to sign in', (await ev(`document.querySelectorAll('schedule-row').length`)) === 0
  231. && (await ev(`document.querySelector('.muted').textContent`)) === 'Sign in to see the shows you follow.');
  232. // ---- tracker.worldapi.org#7: /my/shows signed OUT — no rows, the same sign-in message ----
  233. await page.goto(BASE + '/my/shows');
  234. await hydrated();
  235. check('signed out: /my/shows shows no rows and asks to sign in', (await ev(`document.querySelectorAll('my-show-row').length`)) === 0
  236. && (await ev(`document.querySelector('.muted').textContent`)) === 'Sign in to see the shows you follow.');
  237. // ---- tracker.worldapi.org#3: no bottom border on the header, no border on filled buttons ----
  238. check('the header has no bottom border', (await ev(`getComputedStyle(document.querySelector('application-header')).borderBottomWidth`)) === '0px');
  239. check('"Log in with ident" has no border', (await ev(`getComputedStyle(document.querySelector('#loginbutton')).borderTopWidth`)) === '0px');
  240. check('the ident selector\'s "choose ident" button has no border', (await ev(`getComputedStyle(document.querySelector('#selector').shadowRoot.querySelector('[part~="button"]')).borderTopWidth`)) === '0px');
  241. // ---- tracker.worldapi.org#8: the old addresses answer a permanent redirect to the /my/ ones ----
  242. for (const [from, to] of [['/unwatched', '/my/unwatched'], ['/schedule', '/my/schedule']]) {
  243. const m = await fetch(BASE + from, { redirect: 'manual' });
  244. check(`${from} answers 301 → ${to}`, m.status === 301 && m.headers.get('location') === to, m.status + ' ' + m.headers.get('location'));
  245. }
  246. await page.goto(BASE + '/unwatched');
  247. await hydrated();
  248. check('the browser following /unwatched lands on /my/unwatched', (await ev(`location.pathname`)) === '/my/unwatched' && !!(await ev(`document.querySelector('unwatched-page')`)));
  249. // ---- tracker.worldapi.org#8: the show page says "1 episode" for one, "2 episodes" for two ----
  250. await page.goto(BASE + '/shows/gate-test-show');
  251. await hydrated();
  252. check('show page: season counts "1 episode" (singular) and "2 episodes"', JSON.stringify(await ev(`Array.from(document.querySelectorAll('season-count')).map(e => e.textContent)`)) === JSON.stringify(['1 episode', '2 episodes']),
  253. JSON.stringify(await ev(`Array.from(document.querySelectorAll('season-count')).map(e => e.textContent)`)));
  254. let r = await fetch(BASE + '/login/callback', { redirect: 'manual' });
  255. check('login: /login/callback without a code → /login/failed', r.status === 302 && r.headers.get('location') === '/login/failed');
  256. // ---- sign in: the header selector flips to signed in, "Log out" appears, page stays empty ----
  257. await loginAs(alice);
  258. check('signed in: the selector is still in the header, now signed in', (await ev(`!!document.querySelector('#selector')`)) && (await ev(`document.querySelector('#selector').classList.contains('in')`)));
  259. check('signed in: "Log out" shows, no "Log in with ident"', (await ev(`!!document.querySelector('#logout')`)) && !(await ev(`!!document.querySelector('#loginbutton')`)));
  260. check('the page itself stays empty while signed in too', (await ev(`document.querySelector('main').textContent.trim()`)) === '');
  261. check('"Log out" has no border (only inverted buttons have one)', (await ev(`getComputedStyle(document.querySelector('#logout')).borderTopWidth`)) === '0px');
  262. check('the ident selector\'s signed-in status has no border', (await ev(`(() => { const e = document.querySelector('#selector').shadowRoot.querySelector('[part~="status"]'); return e ? getComputedStyle(e).borderTopWidth : '0px' })()`)) === '0px');
  263. check('the header brand "tracker" has font weight 100', (await ev(`getComputedStyle(document.querySelector('application-header .brand')).fontWeight`)) === '100');
  264. // ---- tracker.worldapi.org#5: /unwatched signed IN — only already-released, unwatched episodes of
  265. // followed shows, newest release first; a click removes the row. Run BEFORE the show-page checks
  266. // below (which toggle these same fixture episodes watched) so all three still start unwatched here.
  267. await page.goto(BASE + '/my/unwatched');
  268. await hydrated();
  269. const unwatchedRowTexts = () => ev(`Array.from(document.querySelectorAll('.unwatched-show')).map(e => e.textContent)`);
  270. check('signed in: /my/unwatched lists only already-released episodes, newest release first (not the future one), titles with the year',
  271. JSON.stringify(await unwatchedRowTexts()) === JSON.stringify(['Gate Test Show (2024)', 'Gate Test Show (2024)'])
  272. && (await ev(`document.querySelectorAll('unwatched-row').length`)) === 2);
  273. check('signed in: /my/unwatched shows show title, the episode as S01E02 + title and release date, linking to the show',
  274. (await ev(`document.querySelector('unwatched-row unwatched-episode').textContent`)) === 'S01E02 · Second'
  275. && (await ev(`document.querySelector('unwatched-row unwatched-date').textContent`)) === '2020-06-15'
  276. && (await ev(`document.querySelector('unwatched-row .unwatched-show').getAttribute('href')`)) === '/shows/gate-test-show');
  277. check('signed in: /my/unwatched starts with regular (unwatched) check icons', (await ev(`document.querySelectorAll('unwatched-row button.checkicon.regular').length`)) === 2);
  278. await page.click('unwatched-row button.checkicon');
  279. await page.waitFor(`document.querySelectorAll('unwatched-row').length === 1`, { timeout: 10000, label: 'unwatched row removed' });
  280. check('click an unwatched episode\'s check: it disappears from the list', (await ev(`document.querySelectorAll('unwatched-row').length`)) === 1
  281. && (await ev(`document.querySelector('unwatched-episode').textContent`)) === 'S01E01 · Pilot');
  282. await page.goto(BASE + '/my/unwatched');
  283. await hydrated();
  284. check('reload: the watch from /my/unwatched is server-side, not just client state', (await ev(`document.querySelectorAll('unwatched-row').length`)) === 1
  285. && (await ev(`document.querySelector('unwatched-episode').textContent`)) === 'S01E01 · Pilot');
  286. // ---- tracker.worldapi.org#7: /my/shows signed IN — followed shows, newest follow first, small
  287. // poster, title linking to the show, the last watched episode (only ep 2 "Second" is watched so far)
  288. const myShows = () => ev(`Array.from(document.querySelectorAll('my-show-row')).map(r => ({
  289. title: r.querySelector('.myshow-title') && r.querySelector('.myshow-title').textContent,
  290. href: r.querySelector('.myshow-title') && r.querySelector('.myshow-title').getAttribute('href'),
  291. poster: r.querySelector('img.myshow-poster') && r.querySelector('img.myshow-poster').getAttribute('src'),
  292. posterLoaded: !!(r.querySelector('img.myshow-poster') && r.querySelector('img.myshow-poster').complete && r.querySelector('img.myshow-poster').naturalWidth > 0),
  293. episode: r.querySelector('my-show-episode') ? r.querySelector('my-show-episode').textContent : null }))`);
  294. const waitPostersLoaded = () => page.waitFor(`Array.from(document.querySelectorAll('img.myshow-poster')).every(i => i.complete && i.naturalWidth > 0)`, { timeout: 10000, label: 'posters loaded' });
  295. await page.goto(BASE + '/my/shows');
  296. await hydrated();
  297. await waitPostersLoaded();
  298. let ms = await myShows();
  299. check('signed in: /my/shows lists both followed shows, newest follow first, with the year (2025 from `release` — that show has no `year`)', JSON.stringify(ms.map(m => m.title)) === JSON.stringify(['Unwatched Gate Show (2025)', 'Gate Test Show (2024)']), JSON.stringify(ms));
  300. check('signed in: /my/shows titles link to the show pages', ms.length === 2 && ms[0].href === '/shows/unwatched-gate-show' && ms[1].href === '/shows/gate-test-show', JSON.stringify(ms));
  301. check('signed in: /my/shows shows a loaded poster per row (its own file, else the one placeholder URL /posters/none)', ms.length === 2 && ms.every(m => m.posterLoaded) && ms[1].poster === '/posters/sh1.png' && ms[0].poster === '/posters/none', JSON.stringify(ms));
  302. check('signed in: /my/shows shows the last watched episode as S01E02, none for the never-watched show', ms.length === 2 && ms[1].episode === 'S01E02' && ms[0].episode === null, JSON.stringify(ms));
  303. check('/my/shows: the poster is small (2.5rem wide)', (await ev(`getComputedStyle(document.querySelector('img.myshow-poster')).width`)) === '40px');
  304. // ---- tracker.worldapi.org#6: /schedule signed IN — only NOT-yet-released episodes of followed
  305. // shows, soonest first, no check icons at all (read-only page, unaffected by any watch toggle above)
  306. await page.goto(BASE + '/my/schedule');
  307. await hydrated();
  308. check('signed in: /my/schedule lists only the not-yet-released episode, title with the year', (await ev(`document.querySelectorAll('schedule-row').length`)) === 1
  309. && (await ev(`document.querySelector('.schedule-show').textContent`)) === 'Gate Test Show (2024)');
  310. check('signed in: /my/schedule shows show title, the episode as S02E01 + title, release date, linking to the show, no checks',
  311. (await ev(`document.querySelector('schedule-row schedule-episode').textContent`)) === 'S02E01 · Season Two Opener'
  312. && (await ev(`document.querySelector('schedule-row schedule-date').textContent`)) === '2099-01-01'
  313. && (await ev(`document.querySelector('schedule-row .schedule-show').getAttribute('href')`)) === '/shows/gate-test-show'
  314. && (await ev(`document.querySelectorAll('schedule-row button.checkicon').length`)) === 0);
  315. // ---- tracker.worldapi.org#4: /shows/:slug signed IN — check icons, episode toggle, season toggle,
  316. // collapse/expand, and a reload proves the watch really is server-side ----
  317. const EP3 = 'ep0000000000ep0e3'; // season 2 (expanded by default), episode 1 "Season Two Opener"
  318. const EP1 = 'ep0000000000ep0e1'; // season 1 (collapsed by default), episode 1 "Pilot"
  319. const EP2 = 'ep0000000000ep0e2'; // season 1, episode 2 "Second"
  320. const SEASON1 = 'se000000000se0s1';
  321. const checkClass = (id) => ev(`document.querySelector('button.checkicon[value="${id}"]').getAttribute('class')`);
  322. const clickValue = (sel, id) => page.click(`${sel}[value="${id}"]`);
  323. await page.goto(BASE + '/shows/gate-test-show');
  324. await hydrated();
  325. check('signed in: episode check icons show, starting "regular" (not watched)', (await checkClass(EP3)) === 'checkicon regular');
  326. await clickValue('button.checkicon', EP3);
  327. await page.waitFor(`document.querySelector('button.checkicon[value="${EP3}"]').getAttribute('class') === 'checkicon solid'`, { timeout: 10000, label: 'ep3 solid' });
  328. check('click an episode check: it turns solid', (await checkClass(EP3)) === 'checkicon solid');
  329. check('season 1 starts collapsed (no episode rows of it yet)', (await ev(`document.querySelectorAll('episode-row').length`)) === 1);
  330. await clickValue('button.checkicon', SEASON1);
  331. await page.waitFor(`document.querySelector('button.checkicon[value="${SEASON1}"]').getAttribute('class') === 'checkicon solid'`, { timeout: 10000, label: 'season1 solid' });
  332. check('click a season check: the season itself turns solid', (await checkClass(SEASON1)) === 'checkicon solid');
  333. await clickValue('button.season-toggle', SEASON1);
  334. await page.waitForSelector(`button.checkicon[value="${EP1}"]`, { timeout: 10000 });
  335. check('expanding season 1 shows its episodes already solid (the season check watched them too)',
  336. (await checkClass(EP1)) === 'checkicon solid' && (await checkClass(EP2)) === 'checkicon solid');
  337. await page.goto(BASE + '/shows/gate-test-show');
  338. await hydrated();
  339. check('reload: episode 3\'s watch is server-side, not just client state', (await checkClass(EP3)) === 'checkicon solid');
  340. await clickValue('button.season-toggle', SEASON1);
  341. await page.waitForSelector(`button.checkicon[value="${EP1}"]`, { timeout: 10000 });
  342. check('reload: season 1\'s bulk watch is server-side too', (await checkClass(EP1)) === 'checkicon solid' && (await checkClass(EP2)) === 'checkicon solid' && (await checkClass(SEASON1)) === 'checkicon solid');
  343. // ---- mission 047, the creator's additions on the show page (signed in) ----
  344. check('episodes are not indented: an episode\'s check is exactly under its season\'s check (same left edge)',
  345. (await ev(`Math.abs(document.querySelector('episode-row button.checkicon').getBoundingClientRect().left - document.querySelector('season-row button.checkicon').getBoundingClientRect().left) < 0.5`)));
  346. check('artist links are orange #ce9178 (not red)', (await ev(`getComputedStyle(document.querySelector('.artist-link')).color`)) === 'rgb(206, 145, 120)');
  347. check('an unwatched check is the inverted solid icon: accent outline circle AND accent check mark; watched = filled accent disc, dark check',
  348. (await ev(`(() => { const b = document.querySelector('button.checkicon.regular'); const c = getComputedStyle(b.querySelector('circle')), p = getComputedStyle(b.querySelector('path'));
  349. return c.stroke === 'rgb(78, 201, 176)' && c.fill !== 'rgb(78, 201, 176)' && p.stroke === 'rgb(78, 201, 176)' })()`))
  350. && (await ev(`(() => { const b = document.querySelector('button.checkicon.solid'); const c = getComputedStyle(b.querySelector('circle')), p = getComputedStyle(b.querySelector('path'));
  351. return c.fill === 'rgb(78, 201, 176)' && p.stroke === 'rgb(15, 20, 25)' })()`)));
  352. // ---- tracker.worldapi.org#7: /my/shows again — S02E01 was watched BEFORE season 1's bulk watch, so
  353. // this proves "last" = the highest season/episode watched, not the most recently watched one
  354. await page.goto(BASE + '/my/shows');
  355. await hydrated();
  356. ms = await myShows();
  357. check('/my/shows: the last episode is the HIGHEST watched (S02E01), not the most recent watch; the other show still none',
  358. ms.length === 2 && ms[1].episode === 'S02E01' && ms[0].episode === null, JSON.stringify(ms));
  359. // ---- mission 047 (the creator: "i dont see the check marks"): a CLIENT-SIDE navigation /my/shows → click the show
  360. // title builds the show page in the browser; its check <svg> must be an SVG element (the old vendored build made it
  361. // in the XHTML namespace: nothing drawn, circle width 0). A window marker proves no full page load happened.
  362. await ev(`window.__w047 = 'same document'`);
  363. await page.click(`a.myshow-title[href="/shows/gate-test-show"]`);
  364. await page.waitFor(`location.pathname === '/shows/gate-test-show' && !!document.querySelector('button.checkicon svg circle')`, { timeout: 10000, label: 'show page after client-side navigation' });
  365. const svgNs = await ev(`JSON.stringify({ marker: window.__w047 || null, ns: document.querySelector('button.checkicon svg').namespaceURI,
  366. circleNs: document.querySelector('button.checkicon svg circle').namespaceURI,
  367. circleWidth: document.querySelector('button.checkicon svg circle').getBoundingClientRect().width })`);
  368. const sv = JSON.parse(svgNs);
  369. check('client-side navigation /my/shows → show page: the check svg is in the SVG namespace and its circle is drawn (width > 0)',
  370. sv.marker === 'same document' && sv.ns === 'http://www.w3.org/2000/svg' && sv.circleNs === 'http://www.w3.org/2000/svg' && sv.circleWidth > 0, svgNs);
  371. lk = await extLinks();
  372. check('client-side navigation: the link icons are there too (TMDB + IMDb)', linksAre(lk, [['TMDB', TMDB_TV + '1001'], ['IMDb', IMDB + 'tt0000001/']]), lk);
  373. // mission 047 #11: the checks also vanished after expanding/collapsing a season — same cause; and the caret flips
  374. let cs = await carets();
  375. check('season caret at the header\'s right edge: down for the open season 2, right for the collapsed season 1',
  376. cs === JSON.stringify(['down', 'right']) && (await ev(`(() => { const r = document.querySelector('season-row'); return Math.abs(r.getBoundingClientRect().right - r.querySelector('season-caret').getBoundingClientRect().right) < 2 })()`)), cs);
  377. await clickValue('button.season-toggle', SEASON1);
  378. await page.waitForSelector(`button.checkicon[value="${EP1}"]`, { timeout: 10000 });
  379. let st = await svgState();
  380. cs = await carets();
  381. check('after EXPANDING season 1 (client-side): every check + caret is a drawn SVG, season 1\'s caret now points down', svgOk(st) && cs === JSON.stringify(['down', 'down']), st + ' ' + cs);
  382. await clickValue('button.checkicon', EP1);
  383. await page.waitFor(`document.querySelector('button.checkicon[value="${EP1}"]').getAttribute('class') === 'checkicon regular'`, { timeout: 10000, label: 'ep1 regular' });
  384. st = await svgState();
  385. check('after an EPISODE click: every check is still a drawn SVG', svgOk(st), st);
  386. await clickValue('button.checkicon', EP1);
  387. await page.waitFor(`document.querySelector('button.checkicon[value="${EP1}"]').getAttribute('class') === 'checkicon solid'`, { timeout: 10000, label: 'ep1 solid again' });
  388. await clickValue('button.season-toggle', SEASON1);
  389. await page.waitFor(`!document.querySelector('button.checkicon[value="${EP1}"]')`, { timeout: 10000, label: 'season 1 collapsed' });
  390. st = await svgState();
  391. cs = await carets();
  392. check('after COLLAPSING season 1 again: every check + caret is a drawn SVG, its caret points right again', svgOk(st) && cs === JSON.stringify(['down', 'right']), st + ' ' + cs);
  393. // ---- mission 047 #12: FOLLOW on the show page — "Following" filled; a click unfollows ("Follow", outlined in the
  394. // accent), the show leaves /my/shows; a click follows again (follow date = now) → the top of /my/shows; reloads keep it
  395. const followState = () => ev(`JSON.stringify((() => { const b = document.querySelector('#follow'); const c = getComputedStyle(b);
  396. return { text: b.textContent, cls: b.getAttribute('class'), bg: c.backgroundColor, border: c.borderTopWidth + ' ' + c.borderTopColor }; })())`);
  397. let fs = JSON.parse(await followState());
  398. check('follow: alice follows the show → "Following", the filled accent button (no border)', fs.text === 'Following' && fs.cls === 'follow' && fs.bg === 'rgb(78, 201, 176)' && fs.border.startsWith('0px'), JSON.stringify(fs));
  399. await page.click('#follow');
  400. await page.waitFor(`document.querySelector('#follow').textContent === 'Follow'`, { timeout: 10000, label: 'unfollowed' }).catch(() => {});
  401. fs = JSON.parse(await followState());
  402. check('follow: a click unfollows → "Follow", outlined (1px accent border, transparent)', fs.text === 'Follow' && fs.cls === 'follow inverted' && fs.border === '1px rgb(78, 201, 176)' && fs.bg === 'rgba(0, 0, 0, 0)', JSON.stringify(fs));
  403. await page.goto(BASE + '/shows/gate-test-show');
  404. await hydrated();
  405. check('follow: the unfollow survives a reload', (await ev(`document.querySelector('#follow').textContent`)) === 'Follow');
  406. await page.goto(BASE + '/my/shows');
  407. await hydrated();
  408. ms = await myShows();
  409. check('follow: the unfollowed show is gone from /my/shows', ms.length === 1 && ms[0].href === '/shows/unwatched-gate-show', JSON.stringify(ms));
  410. await page.goto(BASE + '/shows/gate-test-show');
  411. await hydrated();
  412. await page.click('#follow');
  413. await page.waitFor(`document.querySelector('#follow').textContent === 'Following'`, { timeout: 10000, label: 'followed' }).catch(() => {});
  414. check('follow: a click follows again → "Following"', (await ev(`document.querySelector('#follow').textContent`)) === 'Following');
  415. await page.goto(BASE + '/my/shows');
  416. await hydrated();
  417. ms = await myShows();
  418. check('follow: followed just now → the TOP of /my/shows (newest follow first), after a reload', ms.length === 2 && ms[0].href === '/shows/gate-test-show' && ms[1].href === '/shows/unwatched-gate-show', JSON.stringify(ms));
  419. await page.goto(BASE + '/shows/gate-test-show');
  420. await hydrated();
  421. check('follow: "Following" survives a reload', (await ev(`document.querySelector('#follow').textContent`)) === 'Following');
  422. // ---- mission 047, MOBILE FIRST: at a phone's 390 px the header is ONE row (brand + ident selector + "Log out"), and
  423. // no page scrolls sideways; at 1280 px the same pages. Screenshots of both widths with TRACKER_GATE_SHOTS.
  424. const pages = [['home', '/'], ['show', '/shows/gate-test-show'], ['my-shows', '/my/shows'], ['my-unwatched', '/my/unwatched'], ['my-schedule', '/my/schedule']];
  425. if (process.env.TRACKER_GATE_SHOTS) mkdirSync(process.env.TRACKER_GATE_SHOTS, { recursive: true });
  426. for (const [w, h, mobile] of [[390, 844, true], [1280, 900, false]]) {
  427. await page.send('Emulation.setDeviceMetricsOverride', { width: w, height: h, deviceScaleFactor: mobile ? 2 : 1, mobile });
  428. const bad = [];
  429. for (const [name, path] of pages) {
  430. await page.goto(BASE + path);
  431. await hydrated();
  432. const m = JSON.parse(await ev(`JSON.stringify((() => {
  433. const hd = document.querySelector('application-header').getBoundingClientRect();
  434. const mid = (s) => { const r = document.querySelector(s).getBoundingClientRect(); return r.top + r.height / 2; };
  435. const mids = ['application-header .brand', '#selector', '#logout'].map(mid);
  436. const wd = (s) => Math.round(document.querySelector(s).getBoundingClientRect().width);
  437. return { headerH: hd.height, spread: Math.max(...mids) - Math.min(...mids), scrollW: document.documentElement.scrollWidth, widths: ['application-header .brand', '#userbox', '#selector', '#logout'].map(wd) };
  438. })())`));
  439. if (m.spread > 8 || m.headerH > 64 || m.scrollW > w) bad.push(name + ' ' + JSON.stringify(m));
  440. if (name === 'show') {
  441. // mission 047 #8: phone = title first, then the poster at the full content width, then genres/plot/cast;
  442. // desktop unchanged = poster left (10rem), title right of it
  443. const L = JSON.parse(await ev(`JSON.stringify((() => { const b = (s) => { const r = document.querySelector(s).getBoundingClientRect(); return { l: r.left, r: r.right, t: r.top, b: r.bottom, w: r.width }; };
  444. const main = document.querySelector('main'); const cs = getComputedStyle(main);
  445. return { h1: b('show-header h1'), follow: b('#follow'), links: b('show-links'), poster: b('show-poster img'), genres: b('show-genres'), summary: b('show-summary'), cast: b('show-cast'),
  446. content: main.getBoundingClientRect().width - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight) }; })())`));
  447. const ok = mobile
  448. ? L.h1.b <= L.links.t && L.links.b <= L.poster.t && Math.abs(L.poster.w - L.content) < 1 && L.poster.b <= L.genres.t && L.genres.b <= L.summary.t && L.summary.b <= L.cast.t && L.follow.t < L.poster.t
  449. : Math.abs(L.poster.w - 160) < 1 && L.poster.r <= L.h1.l && L.h1.t < L.poster.b && L.poster.t <= L.genres.t && L.poster.r <= L.links.l && L.h1.b <= L.links.t && L.links.b <= L.genres.t;
  450. check(`${w} px: show page layout — ${mobile ? 'title (+ Follow) first, the link icons under it, then the poster at the full content width, then genres, plot, cast' : 'poster left (10rem), the title right of it, the link icons under the title'}`, ok, JSON.stringify(L));
  451. }
  452. if (process.env.TRACKER_GATE_SHOTS) {
  453. if (name === 'my-shows') await waitPostersLoaded();
  454. const shot = await page.send('Page.captureScreenshot', { format: 'png' });
  455. writeFileSync(join(process.env.TRACKER_GATE_SHOTS, `${name}-${w}.png`), Buffer.from(shot.data, 'base64'));
  456. }
  457. }
  458. check(`${w} px: on every page the header is one row (brand, ident selector, "Log out" side by side, ≤ 64 px high) and nothing scrolls sideways`, bad.length === 0, bad.join('; '));
  459. }
  460. await page.send('Emulation.clearDeviceMetricsOverride', {});
  461. // ==== tracker.worldapi.org#9: THE TMDB SYNC, against the fake TMDB — first the tool (app stopped: hl:mpackdb is
  462. // one process per storage), twice (idempotent), then the pages; then the app's own daily run ====
  463. check('sync: the app ran with the daily sync switched off until now (TRACKER_SYNC=0), no TMDB request yet', log.includes('tmdb sync: off (TRACKER_SYNC=0)') && tmdb.requests.length === 0, log);
  464. await page.goto('about:blank'); // leave the app first: an open page would log websocket reconnect errors
  465. await stopServer();
  466. // spawned, not execFileSync: the fake TMDB lives in THIS node process and must keep answering meanwhile
  467. const runTool = () => new Promise((ok) => {
  468. const p = spawn(join(APP, 'bin/hybriel'), ['tools/sync-tmdb.hl', '--limit', '5'], { cwd: APP, env: { ...process.env, TRACKER_STORAGE: MPACKDB, ...TMDB_ENV }, stdio: ['ignore', 'pipe', 'pipe'] });
  469. let o = '';
  470. p.stdout.on('data', d => o += d); p.stderr.on('data', d => o += d);
  471. p.on('exit', () => ok(o));
  472. });
  473. let out = await runTool();
  474. let done = (out.match(/tmdb sync done: .*/) || [''])[0];
  475. check('sync tool: 3 followed shows (2 series + a movie another user follows) → 2 new seasons (show 1 S3, show 2 S1), 4 new episodes, the 3 fixture episodes updated (tmdbId by S/E number, E2 renamed), 3 posters, 5 ids filled, 3 TVmaze lookups, 0 errors',
  476. done.includes('shows=3 newSeasons=2 newEpisodes=4 updatedEpisodes=3') && done.includes('posters=3 ids=5') && done.includes('tvmazeRequests=3 errors=0'), out);
  477. // per show, in this order (the order BETWEEN shows follows the follow table, which the follow test above reshuffled)
  478. const perShow = [['/3/tv/1001?append_to_response=external_ids', '/3/tv/1001?append_to_response=season/1,season/2,season/3', '/t/p/w342/gate1.png'],
  479. ['/3/tv/1002?append_to_response=external_ids', '/3/tv/1002?append_to_response=season/1', '/t/p/w342/gate2.png'], ['/3/movie/1003?append_to_response=external_ids', '/t/p/w342/gate3.png']];
  480. const paths = tmdb.requests.map(q => q.path);
  481. check('sync tool: every TMDB call carried the Bearer token, season 0 was never asked for; per show ONE details request that also brings external_ids (no extra request), one for its seasons, the poster; the movie only via /movie/, never /tv/1003',
  482. tmdb.requests.filter(q => q.path.startsWith('/3/')).every(q => q.authorization === 'Bearer gate-token') && !paths.some(p => p.includes('season/0'))
  483. && JSON.stringify([...paths].sort()) === JSON.stringify(perShow.flat().sort()) && perShow.every(list => list.every((p, i) => i === 0 || paths.indexOf(list[i - 1]) < paths.indexOf(p))),
  484. JSON.stringify(paths));
  485. check('sync tool: TVmaze asked only for shows without a TVmaze id: show 1 by imdb (hit), show 2 by imdb (404) then by thetvdb (hit); never for the movie',
  486. JSON.stringify([...tmdb.tvmazeRequests].sort()) === JSON.stringify(['/tvmaze/lookup/shows?imdb=tt0000001', '/tvmaze/lookup/shows?imdb=tt0000002', '/tvmaze/lookup/shows?thetvdb=4002', '/tvmaze/shows/501', '/tvmaze/shows/502'].sort()),
  487. JSON.stringify(tmdb.tvmazeRequests));
  488. const tvmazeBefore = tmdb.tvmazeRequests.length;
  489. out = await runTool();
  490. done = (out.match(/tmdb sync done: .*/) || [''])[0];
  491. check('sync tool again: idempotent — nothing new, nothing updated, no poster downloaded again, no id filled, no TVmaze lookup (every show has its TVmaze id now)',
  492. done.includes('newSeasons=0 newEpisodes=0 updatedEpisodes=0 updatedSeasons=0 posters=0 ids=0') && done.includes('tvmazeRequests=0 errors=0') && tmdb.tvmazeRequests.length === tvmazeBefore, out);
  493. await startServer();
  494. await page.goto(BASE + '/my/schedule');
  495. await hydrated();
  496. const scheduleRows = () => ev(`Array.from(document.querySelectorAll('schedule-row')).map(r => r.querySelector('.schedule-show').textContent + ' | ' + r.querySelector('schedule-episode').textContent + ' | ' + r.querySelector('schedule-date').textContent)`);
  497. let rows = await scheduleRows();
  498. check('after the sync: /my/schedule lists the new upcoming episodes of both shows, soonest first', JSON.stringify(rows) === JSON.stringify([
  499. 'Unwatched Gate Show (2025) | S01E01 · Brand New | 2097-01-01', 'Gate Test Show (2024) | S03E02 · Coming Soon | 2098-06-01', 'Gate Test Show (2024) | S02E01 · Season Two Opener | 2099-01-01']), JSON.stringify(rows));
  500. await page.goto(BASE + '/my/unwatched');
  501. await hydrated();
  502. rows = await ev(`Array.from(document.querySelectorAll('unwatched-row')).map(r => r.querySelector('unwatched-episode').textContent + ' | ' + r.querySelector('unwatched-date').textContent)`);
  503. check('after the sync: /my/unwatched lists the newly released episodes (S03E01, S01E03), newest first', JSON.stringify(rows) === JSON.stringify(['S03E01 · Third Season Start | 2021-05-05', 'S01E03 · Third | 2020-09-01']), JSON.stringify(rows));
  504. await page.goto(BASE + '/my/shows');
  505. await hydrated();
  506. await waitPostersLoaded();
  507. ms = await myShows();
  508. check('after the sync: /my/shows shows both real posters (/posters/sh2.png is new), loaded', ms.length === 2 && ms.every(m => m.posterLoaded) && ms[0].poster === '/posters/sh1.png' && ms[1].poster === '/posters/sh2.png', JSON.stringify(ms));
  509. r = await fetch(BASE + '/posters/sh2.png');
  510. const posterBytes = Buffer.from(await r.arrayBuffer());
  511. check('the downloaded poster is served by /posters/… byte for byte (image/png), stored in storage (mpackdb/posters/)', r.status === 200 && r.headers.get('content-type') === 'image/png' && posterBytes.equals(PNG) && existsSync(join(MPACKDB, 'posters', 'sh2.png')));
  512. await page.goto(BASE + '/shows/gate-test-show');
  513. await hydrated();
  514. const seasonCounts = await ev(`Array.from(document.querySelectorAll('season-row')).map(e => e.querySelector('season-label').textContent + ': ' + e.querySelector('season-count').textContent)`);
  515. check('after the sync: the show page has S3 (new) S2 S1, no season 0, no duplicated episode (S1 has 3)', JSON.stringify(seasonCounts) === JSON.stringify(['Season 3: 2 episodes', 'Season 2: 1 episode', 'Season 1: 3 episodes']), JSON.stringify(seasonCounts));
  516. check('after the sync: the latest season shows its new episodes, the poster is the downloaded one',
  517. JSON.stringify(await ev(`Array.from(document.querySelectorAll('episode-row episode-title')).map(e => e.textContent)`)) === JSON.stringify(['Third Season Start', 'Coming Soon'])
  518. && (await ev(`document.querySelector('show-poster img').getAttribute('src')`)) === '/posters/sh1.png' && (await ev(`document.querySelector('show-poster img').naturalWidth`)) > 0);
  519. await clickValue('button.season-toggle', SEASON1);
  520. await page.waitForSelector(`button.checkicon[value="${EP1}"]`, { timeout: 10000 });
  521. const s1 = await ev(`Array.from(document.querySelectorAll('episode-row')).map(e => e.querySelector('episode-number').textContent + ' ' + e.querySelector('episode-title').textContent + ' ' + e.querySelector('button.checkicon').getAttribute('class'))`);
  522. check('after the sync: S1 keeps its episodes (same ids, still watched), E2 renamed from TMDB, E3 new and unwatched',
  523. s1.includes('1 Pilot checkicon solid') && s1.includes('2 Second Episode checkicon solid') && s1.includes('3 Third checkicon regular') && s1.length === 5, JSON.stringify(s1));
  524. // ---- tracker.worldapi.org#12: after the sync every show has the ids it lacked — the stored ones unchanged ----
  525. await page.goto(BASE + '/shows/gate-test-show');
  526. await hydrated();
  527. lk = await extLinks();
  528. check('after the sync: show 1 has all four icons — its OWN imdb id kept (tt0000001, not TMDB\'s tt9999999), tvdb 4001 + TVmaze 501 filled',
  529. linksAre(lk, [['TMDB', TMDB_TV + '1001'], ['IMDb', IMDB + 'tt0000001/'], ['TVDB', TVDB + '4001'], ['TVmaze', TVMAZE + '501']]), lk);
  530. await page.goto(BASE + '/shows/unwatched-gate-show');
  531. await hydrated();
  532. lk = await extLinks();
  533. check('after the sync: show 2 has all four — imdb tt0000002 filled, its OWN tvdb 4002 kept (not 4999), TVmaze 502 (found by thetvdb after imdb missed)',
  534. linksAre(lk, [['TMDB', TMDB_TV + '1002'], ['IMDb', IMDB + 'tt0000002/'], ['TVDB', TVDB + '4002'], ['TVmaze', TVMAZE + '502']]), lk);
  535. await page.goto(BASE + '/shows/gate-test-movie');
  536. await hydrated();
  537. lk = await extLinks();
  538. check('after the sync: the movie has TMDB (/movie/1003) + IMDb (tt0000003 filled), no TheTVDB/TVmaze, no seasons',
  539. linksAre(lk, [['TMDB', TMDB_MOVIE + '1003'], ['IMDb', IMDB + 'tt0000003/']]) && (await ev(`document.querySelectorAll('season-row').length`)) === 0, lk);
  540. if (process.env.TRACKER_GATE_SHOTS) {
  541. await page.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 844, deviceScaleFactor: 2, mobile: true });
  542. for (const [name, path] of [['synced-show-390', '/shows/gate-test-show'], ['synced-movie-390', '/shows/gate-test-movie']]) {
  543. await page.goto(BASE + path);
  544. await hydrated();
  545. writeFileSync(join(process.env.TRACKER_GATE_SHOTS, name + '.png'), Buffer.from((await page.send('Page.captureScreenshot', { format: 'png' })).data, 'base64'));
  546. }
  547. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
  548. for (const [name, path] of [['synced-show', '/shows/gate-test-show'], ['synced-movie', '/shows/gate-test-movie'], ['synced-my-shows', '/my/shows'], ['synced-my-unwatched', '/my/unwatched'], ['synced-my-schedule', '/my/schedule']]) {
  549. await page.goto(BASE + path);
  550. await hydrated();
  551. if (name === 'synced-my-shows') await waitPostersLoaded();
  552. const shot = await page.send('Page.captureScreenshot', { format: 'png' });
  553. writeFileSync(join(process.env.TRACKER_GATE_SHOTS, name + '.png'), Buffer.from(shot.data, 'base64'));
  554. }
  555. await page.send('Emulation.clearDeviceMetricsOverride', {});
  556. }
  557. // ---- THE DAILY RUN INSIDE THE APP: TRACKER_SYNC_HOUR = this very UTC hour, so the app's own clock starts the
  558. // run right after boot. TMDB now has one more episode and answers slowly (700 ms per request): the run takes
  559. // seconds, and pages asked for meanwhile must still be answered between two shows, never after the whole run.
  560. await page.goto('about:blank');
  561. await stopServer();
  562. tmdb.shows[1001].seasons[3].episodes.push({ id: 5007, episode_number: 3, name: 'Added Live', air_date: '2096-03-03' });
  563. tmdb.delayMs = 700;
  564. const before = tmdb.requests.length;
  565. await startServer({ TRACKER_SYNC: '1', TRACKER_SYNC_HOUR: String(new Date().getUTCHours()) });
  566. const lat = [];
  567. const t0 = Date.now();
  568. while (!log.includes('tmdb sync done') && Date.now() - t0 < 30000) {
  569. const a = Date.now();
  570. await fetch(BASE + '/');
  571. lat.push({ at: a - t0, ms: Date.now() - a, running: log.includes('tmdb sync: start') && !log.includes('tmdb sync done') });
  572. await new Promise(r => setTimeout(r, 150));
  573. }
  574. const runDone = (log.match(/tmdb sync done: .*/) || [''])[0];
  575. check('in-app daily run: started by the app\'s own clock at the configured hour, found the new episode, 0 errors',
  576. log.includes('tmdb sync: daily at ' + new Date().getUTCHours() + ':00 UTC') && log.includes('tmdb sync: start, 3 followed shows') && runDone.includes('newSeasons=0 newEpisodes=1 updatedEpisodes=0') && runDone.includes('errors=0'), log);
  577. const during = lat.filter(l => l.running);
  578. const runSecs = Number((runDone.match(/seconds=([0-9.]+)/) || [0, 0])[1]);
  579. console.log(` (in-app run ${runSecs} s; ${during.length} pages asked during it, slowest ${Math.max(0, ...during.map(l => l.ms))} ms)`);
  580. check('in-app daily run: the server kept answering DURING the run (between shows) — every page < 2.5 s though the run took ≥ 3 s',
  581. runSecs >= 3 && during.length >= 3 && during.every(l => l.ms < 2500), 'run ' + runSecs + ' s, during: ' + JSON.stringify(during));
  582. check('in-app daily run: the Bearer token on every call, 5 requests (2 per series, 1 for the movie; no poster again: unchanged), no TVmaze lookup', tmdb.requests.slice(before).filter(q => q.path.startsWith('/3/')).every(q => q.authorization === 'Bearer gate-token') && tmdb.requests.length - before === 5 && tmdb.tvmazeRequests.length === tvmazeBefore, JSON.stringify(tmdb.requests.slice(before)));
  583. await page.goto(BASE + '/my/schedule');
  584. await hydrated();
  585. rows = await scheduleRows();
  586. check('after the in-app run: /my/schedule has the episode TMDB added meanwhile (S03E03, 2096-03-03) on top', rows.length === 4 && rows[0] === 'Gate Test Show (2024) | S03E03 · Added Live | 2096-03-03', JSON.stringify(rows));
  587. // ==== tracker.worldapi.org#10: THE INSTALLABLE APP — hl:web's own manifest + service worker (project.hl appIcons /
  588. // offline = [ Home ]). The manifest and every icon over HTTP; Chrome's own verdict (installability, manifest parse);
  589. // the worker registered for the whole app; then OFFLINE: the tab loses the network (the note appears), the server
  590. // is stopped too (CDP's offline emulation does not reach the service worker's own fetches — measured — so only a
  591. // dead server proves the cache), and `/` still opens: header + the note. A data page gets hl:web's "Unavailable
  592. // offline" page. A separate tab, so its expected socket errors stay out of the main tab's console check.
  593. const html = await (await fetch(BASE + '/')).text();
  594. const mhref = (html.match(/<link rel="manifest" href="([^"]+)"/) || [])[1];
  595. check('pwa: every page head links the manifest, the apple-touch-icon, the favicon and the theme colour (the token `darker`)',
  596. mhref === '/__hl/manifest.webmanifest' && html.includes('<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">')
  597. && html.includes('<link rel="icon" href="/icons/favicon.svg">') && html.includes('<meta name="theme-color" content="rgb(15, 20, 25)">'), html.slice(0, 900));
  598. const mres = await fetch(BASE + mhref);
  599. const man = await mres.json();
  600. check('pwa: the manifest is served as application/manifest+json: name "tracker", start_url /, scope /, display standalone, the token colours',
  601. /manifest\+json/.test(mres.headers.get('content-type') || '') && man.name === 'tracker' && man.short_name === 'tracker' && man.start_url === '/' && man.scope === '/'
  602. && man.display === 'standalone' && man.theme_color === 'rgb(15, 20, 25)' && man.background_color === 'rgb(25, 30, 35)', JSON.stringify(man));
  603. const iconOk = [];
  604. for (const ic of man.icons || []) {
  605. const ir = await fetch(BASE + ic.src);
  606. const b = Buffer.from(await ir.arrayBuffer());
  607. iconOk.push(ir.ok && ic.type === 'image/png' && b.readUInt32BE(16) === Number(ic.sizes.split('x')[0]) && b.readUInt32BE(20) === Number(ic.sizes.split('x')[1]));
  608. }
  609. check('pwa: every manifest icon loads and is a real PNG of its declared size (192 + 512, any + maskable)',
  610. iconOk.length === 4 && iconOk.every(Boolean) && ['any', 'maskable'].every(pu => ['192x192', '512x512'].every(sz => man.icons.some(i => i.purpose === pu && i.sizes === sz))), JSON.stringify(man.icons) + ' ' + JSON.stringify(iconOk));
  611. const touch = await fetch(BASE + '/icons/apple-touch-icon.png');
  612. const touchBytes = Buffer.from(await touch.arrayBuffer());
  613. const fav = await fetch(BASE + '/icons/favicon.svg');
  614. const favText = await fav.text();
  615. const ico = await fetch(BASE + '/favicon.ico');
  616. const icoBytes = Buffer.from(await ico.arrayBuffer());
  617. check('pwa: apple-touch-icon is a 180×180 PNG, the favicon an SVG in tracker green, /favicon.ico a real icon file',
  618. touch.ok && touchBytes.readUInt32BE(16) === 180 && fav.ok && /image\/svg\+xml/.test(fav.headers.get('content-type') || '') && favText.includes('#4ec9b0')
  619. && ico.ok && icoBytes.readUInt32BE(0) === 0x00000100, `${touch.status} ${fav.status} ${ico.status}`);
  620. await page.goto('about:blank'); // the server goes down below: the main tab must not sit on a page meanwhile
  621. const app = await browser.newPage();
  622. const aev = (e) => app.evaluate(e);
  623. const appHydrated = () => app.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 15000, label: 'app tab hydrated' });
  624. await app.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 844, deviceScaleFactor: 2, mobile: true });
  625. await app.goto(BASE + '/');
  626. await appHydrated();
  627. await app.waitFor(`navigator.serviceWorker.getRegistration().then(r => !!(r && r.active))`, { timeout: 15000, label: 'service worker active' });
  628. await app.waitFor(`!!navigator.serviceWorker.controller`, { timeout: 10000, label: 'page controlled by the worker' });
  629. const inst = await app.send('Page.getInstallabilityErrors');
  630. check('pwa: Chrome reports no installability error', (inst.installabilityErrors || []).length === 0, JSON.stringify(inst));
  631. const am = await app.send('Page.getAppManifest');
  632. check('pwa: Chrome parses the manifest without errors', am.url && am.url.endsWith('/__hl/manifest.webmanifest') && (am.errors || []).length === 0, JSON.stringify(am.errors));
  633. check('pwa: hl:web\'s service worker is registered for the whole app (scope /) and controls the page',
  634. (await aev(`navigator.serviceWorker.getRegistration().then(r => new URL(r.scope).pathname + ' ' + new URL(r.active.scriptURL).pathname)`)) === '/ /__hl/sw.js' && (await aev('!!navigator.serviceWorker.controller')));
  635. check('pwa: online, no offline note', !(await aev(`!!document.querySelector('#offline')`)));
  636. if (process.env.TRACKER_GATE_SHOTS) writeFileSync(join(process.env.TRACKER_GATE_SHOTS, 'pwa-phone-online.png'), Buffer.from((await app.send('Page.captureScreenshot', { format: 'png' })).data, 'base64'));
  637. await app.setOffline(true);
  638. await app.waitFor(`!!document.querySelector('#offline')`, { timeout: 5000, label: 'offline note (live)' }).catch(() => {});
  639. check('offline: the open page says so within seconds (the shell\'s tick)', (await aev(`document.querySelector('#offline') ? document.querySelector('#offline').textContent : ''`)) === 'You are offline. Your shows and lists need the network.');
  640. await stopServer();
  641. let down = false;
  642. try { await fetch(BASE + '/'); } catch { down = true; }
  643. await app.goto(BASE + '/');
  644. await app.waitFor(`!!document.querySelector('#offline')`, { timeout: 8000, label: 'offline note after reload' }).catch(() => {});
  645. check('offline: with the server gone too, a reload of / still opens the shell from the worker\'s cache — header, brand, the note, the empty home',
  646. down && (await aev(`document.querySelector('application-header .brand') ? document.querySelector('application-header .brand').textContent : ''`)) === 'tracker'
  647. && (await aev(`!!document.querySelector('#offline')`)) && (await aev(`document.querySelector('main').textContent.trim()`)) === ''
  648. && (await aev(`getComputedStyle(document.querySelector('application-header')).backgroundColor`)) === 'rgb(15, 20, 25)', 'server down: ' + down);
  649. if (process.env.TRACKER_GATE_SHOTS) writeFileSync(join(process.env.TRACKER_GATE_SHOTS, 'pwa-phone-offline.png'), Buffer.from((await app.send('Page.captureScreenshot', { format: 'png' })).data, 'base64'));
  650. await app.goto(BASE + '/my/shows');
  651. check('offline: a data page (/my/shows) is not kept — hl:web\'s "Unavailable offline" page', (await aev(`!!document.querySelector('main[data-hl-offline]') && document.querySelector('h1').textContent`)) === 'Unavailable offline');
  652. await app.setOffline(false);
  653. await startServer();
  654. await app.goto(BASE + '/');
  655. await appHydrated();
  656. await app.waitFor(`!document.querySelector('#offline')`, { timeout: 5000, label: 'note gone' }).catch(() => {});
  657. check('back online: / from the server again, no offline note', !(await aev(`!!document.querySelector('#offline')`)));
  658. await app.close();
  659. await page.goto(BASE + '/my/schedule');
  660. await hydrated();
  661. // ---- sign out: back to signed out, a reload confirms the app's own session (not just client state) ----
  662. await page.click('#logout');
  663. await page.waitForSelector('#loginbutton', { timeout: 15000 });
  664. check('sign out returns to the signed-out header', (await ev(`!!document.querySelector('#loginbutton')`)) && !(await ev(`!!document.querySelector('#logout')`)));
  665. await page.goto(BASE + '/');
  666. await hydrated();
  667. check('reload after sign-out stays signed out', (await ev(`!!document.querySelector('#loginbutton')`)) && !(await ev(`!!document.querySelector('#logout')`)));
  668. const problems = page.problems();
  669. check('no console errors/warnings', problems.length === 0, page.dumpConsole());
  670. }
  671. try {
  672. await main();
  673. } catch (e) {
  674. check('gate ran without throwing', false, e.stack || String(e));
  675. } finally {
  676. await stop();
  677. }
  678. console.log(`\n${passes} passed, ${failures} failed`);
  679. process.exit(failures === 0 ? 0 : 1);

Branches

Latest commits

  • cbdc4ea7tracker#12: link icons TMDB/IMDb/TVDB/TVmaze; sync fills missing ids (TVmaze lookup); movies fetched via /movie/mre
  • b105bcd8tracker#11: Hybriel master ff51cf46 (checks no longer vanish), mobile-first styles, carets, follow button, sign-in modal, inverted check, orange castmre
  • 31b758aatracker#10: installable app (manifest, service worker, offline shell), own icon + faviconmre
  • 2fa9d997tracker#9: TMDB sync (followed shows: seasons, episodes, posters), tools/sync-tmdb.hl + daily run 04:00 UTC, fake TMDB in gatemre
  • 49e1f61edeploy.sh: back up live storage/.sessions/.env before every deploy (newest 5 kept)mre
  • 54070a4etracker#8: /my/unwatched + /my/schedule (301 from old), S01E01, title (year), 1 episode, watched-set lookup (unwatched 15s -> 1s)mre
  • 3251488atracker#7: /my/shows (followed shows, newest follow first, poster, title, last watched SxxEyy); gate can take screenshots (TRACKER_GATE_SHOTS)mre
  • 44b7d9f9tracker#6: /schedule — upcoming episodes of followed shows, soonest firstmre
  • 91c9fc8ctracker#5: /unwatched — unwatched released episodes of followed shows, newest firstmre
  • a97c0295tracker#4: show page /shows/:slug (header, seasons, episodes, watch checks) + tools/relink-episode-seasons.hlmre
  • 05f407c5tracker: no border on any button except inverted ones (Log out, ident status and identities too); header brand weight 100mre
  • 17375427tracker#2: tools/migrate.hl + tools/verify.hl — old MongoDB data into mpackdb with new idsmre
  • 31aac936tracker#3: no border on the header and on filled buttons; inverted buttons keep theirsmre
  • 2ad9d29ctracker#1: login exactly like calendar (identity selector in the header, empty homepage)mre
  • 3691e176tracker#1: empty tracker with the ident login (state of 2026-09-27)mre