tracker

21.5 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)
8. import { spawn, execFileSync } from 'node:child_process';
9. import { existsSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
10. import { dirname, join, resolve } from 'node:path';
11. import { fileURLToPath } from 'node:url';
12. import { launchBrowser } from './cdp.mjs';
13. import { startIdent } from './identkit.mjs';
15. if (!process.env.HL_CHROME && existsSync('/opt/google/chrome/chrome')) process.env.HL_CHROME = '/opt/google/chrome/chrome';
16. const HERE = dirname(fileURLToPath(import.meta.url));
17. const APP = resolve(HERE, '..');
18. const PORT = Number(process.env.TRACKER_GATE_PORT || 8700);
19. const [CH_FROM, CH_TO] = (process.env.TRACKER_GATE_CHROME || '8702-8709').split('-').map(Number);
20. const IDENT_PORT = Number(process.env.TRACKER_GATE_IDENT_PORT || 8701);
21. const BASE = `http://127.0.0.1:${PORT}`;
22. const STORE = join(APP, '.scratch', 'gate-store');
23. 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')));
24. const SCRATCH = join(APP, '.scratch');
25. const SESSIONS = join(SCRATCH, 'gate-sessions');
26. rmSync(SESSIONS, { recursive: true, force: true });
27. rmSync(STORE, { recursive: true, force: true });
28. mkdirSync(SESSIONS, { recursive: true });
30. let failures = 0, passes = 0;
31. function check(label, ok, detail = '') {
32. console.log(`${ok ? 'ok ' : 'FAIL'} ${label}${ok ? '' : ' — ' + detail}`);
33. if (ok) passes++; else failures++;
34. }
36. let ident = null, server = null, browser = null, log = '';
37. async function stop() {
38. if (ident) { try { await ident.stop(); } catch {} ident = null; }
39. if (browser) { try { await browser.close(); } catch {} browser = null; }
40. if (server) {
41. try { server.kill('SIGTERM'); } catch {}
42. await new Promise(r => { if (server.exitCode !== null || server.signalCode !== null) return r(); server.once('exit', r); setTimeout(r, 3000); });
43. server = null;
44. }
45. }
47. async function main() {
48. ident = await startIdent({ identDir: IDENT_DIR, workDir: join(STORE, 'ident'), port: IDENT_PORT });
49. const alice = await ident.signIn('[email protected]');
50. const APPKEY = await ident.registerApp(alice, 'tracker (gate)', [BASE]);
51. 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')));
53. // tracker.worldapi.org#5: learn alice's per-app identity (a throwaway code, consumed here) so the
54. // fixture below can seed a follow for the SAME user the real login flow will later resolve to
55. // (users.hl `ensureUser` matches an existing users.db row by `identity`, reusing its id) — this is
56. // the only way to give /unwatched a known followed show before the browser ever signs in.
57. const preCode = await ident.selectorCode(alice, APPKEY, BASE);
58. const aliceIdentity = await ident.exchange(APPKEY, preCode);
60. // tracker.worldapi.org#4/#5: a tiny fixture show (tests/seed-show.hl) — written BEFORE the server
61. // starts, self-assigned ids only (never update(), see that file's header)
62. const MPACKDB = join(STORE, 'mpackdb');
63. mkdirSync(MPACKDB, { recursive: true });
64. const seedOut = execFileSync(join(APP, 'bin/hybriel'), ['tests/seed-show.hl'], { cwd: APP, env: { ...process.env, TRACKER_STORAGE: MPACKDB, TRACKER_SEED_IDENTITY: aliceIdentity } }).toString();
65. check('seed: the fixture show was written, alice follows it', seedOut.includes('gate-test-show') && seedOut.includes('follows it'), seedOut);
66. // tracker.worldapi.org#8: the fixture show's poster FILE exists (a 1×1 png), the second show has none →
67. // /my/shows must give the first its own /posters/sh1.png and the second the one placeholder URL /posters/none
68. mkdirSync(join(MPACKDB, 'posters'), { recursive: true });
69. writeFileSync(join(MPACKDB, 'posters', 'sh1.png'), Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==', 'base64'));
71. 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',
72. TRACKER_URL: BASE, IDENT_URL: ident.base, IDENT_EXCHANGE_URL: ident.base, TRACKER_KEY: APPKEY.key, TRACKER_SECRET: APPKEY.secret }, stdio: ['ignore', 'pipe', 'pipe'] });
73. server.stdout.on('data', d => log += d); server.stderr.on('data', d => log += d);
74. for (let i = 0; ; i++) {
75. try { if ((await fetch(BASE + '/')).ok) break; } catch {}
76. if (i > 80) throw new Error('tracker did not come up\n' + log);
77. await new Promise(r => setTimeout(r, 250));
78. }
79. check('tracker is up', true);
81. browser = await launchBrowser({ debugPortRange: [CH_FROM, CH_TO] });
82. const page = await browser.newPage();
83. page.captureNetwork();
84. const ev = (e) => page.evaluate(e);
85. const hydrated = () => page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 15000, label: 'hydrated' });
86. const loginAs = async (who) => {
87. const code = await ident.selectorCode(who, APPKEY, BASE);
88. await page.goto(BASE + '/login/callback?ident_code=' + code);
89. await page.waitForSelector('#logout');
90. await hydrated();
91. };
93. // ---- signed out: header shows the selector + "Log in with ident", the page itself is empty ----
94. await page.goto(BASE + '/');
95. await hydrated();
96. check('signed out: the identity selector is in the header', await ev(`!!document.querySelector('#selector')`));
97. check('signed out: "Log in with ident" shows, no "Log out"', (await ev(`!!document.querySelector('#loginbutton')`)) && !(await ev(`!!document.querySelector('#logout')`)));
98. check('the page itself stays empty (no centered sign-in)', (await ev(`document.querySelector('main').textContent.trim()`)) === '');
100. // ---- tracker.worldapi.org#4: /shows/:slug signed OUT — the header/genres/cast show, no checks ----
101. await page.goto(BASE + '/shows/gate-test-show');
102. await hydrated();
103. check('signed out: the show header renders (title, genre, cast)', (await ev(`document.querySelector('show-header h1').textContent`)) === 'Gate Test Show'
104. && (await ev(`document.querySelector('.genre-pill').textContent`)) === 'Drama'
105. && (await ev(`document.querySelector('.artist-link').textContent`)) === 'Test Actor');
106. check('signed out: no check icons at all', (await ev(`document.querySelectorAll('button.checkicon').length`)) === 0);
107. check('signed out: the latest season (2) is expanded, season 1 collapsed', (await ev(`document.querySelectorAll('episode-row').length`)) === 1);
109. // ---- tracker.worldapi.org#5: /my/unwatched signed OUT — no rows, no checks ----
110. await page.goto(BASE + '/my/unwatched');
111. await hydrated();
112. check('signed out: /my/unwatched shows no rows and asks to sign in', (await ev(`document.querySelectorAll('unwatched-row').length`)) === 0
113. && (await ev(`document.querySelector('.muted').textContent`)) === 'Sign in to see the shows you follow.');
115. // ---- tracker.worldapi.org#6: /my/schedule signed OUT — no rows, no checks ----
116. await page.goto(BASE + '/my/schedule');
117. await hydrated();
118. check('signed out: /my/schedule shows no rows and asks to sign in', (await ev(`document.querySelectorAll('schedule-row').length`)) === 0
119. && (await ev(`document.querySelector('.muted').textContent`)) === 'Sign in to see the shows you follow.');
121. // ---- tracker.worldapi.org#7: /my/shows signed OUT — no rows, the same sign-in message ----
122. await page.goto(BASE + '/my/shows');
123. await hydrated();
124. check('signed out: /my/shows shows no rows and asks to sign in', (await ev(`document.querySelectorAll('my-show-row').length`)) === 0
125. && (await ev(`document.querySelector('.muted').textContent`)) === 'Sign in to see the shows you follow.');
127. // ---- tracker.worldapi.org#3: no bottom border on the header, no border on filled buttons ----
128. check('the header has no bottom border', (await ev(`getComputedStyle(document.querySelector('application-header')).borderBottomWidth`)) === '0px');
129. check('"Log in with ident" has no border', (await ev(`getComputedStyle(document.querySelector('#loginbutton')).borderTopWidth`)) === '0px');
130. check('the ident selector\'s "choose ident" button has no border', (await ev(`getComputedStyle(document.querySelector('#selector').shadowRoot.querySelector('[part~="button"]')).borderTopWidth`)) === '0px');
131. // ---- tracker.worldapi.org#8: the old addresses answer a permanent redirect to the /my/ ones ----
132. for (const [from, to] of [['/unwatched', '/my/unwatched'], ['/schedule', '/my/schedule']]) {
133. const m = await fetch(BASE + from, { redirect: 'manual' });
134. check(`${from} answers 301 → ${to}`, m.status === 301 && m.headers.get('location') === to, m.status + ' ' + m.headers.get('location'));
135. }
136. await page.goto(BASE + '/unwatched');
137. await hydrated();
138. check('the browser following /unwatched lands on /my/unwatched', (await ev(`location.pathname`)) === '/my/unwatched' && !!(await ev(`document.querySelector('unwatched-page')`)));
139. // ---- tracker.worldapi.org#8: the show page says "1 episode" for one, "2 episodes" for two ----
140. await page.goto(BASE + '/shows/gate-test-show');
141. await hydrated();
142. 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']),
143. JSON.stringify(await ev(`Array.from(document.querySelectorAll('season-count')).map(e => e.textContent)`)));
144. let r = await fetch(BASE + '/login/callback', { redirect: 'manual' });
145. check('login: /login/callback without a code → /login/failed', r.status === 302 && r.headers.get('location') === '/login/failed');
147. // ---- sign in: the header selector flips to signed in, "Log out" appears, page stays empty ----
148. await loginAs(alice);
149. 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')`)));
150. check('signed in: "Log out" shows, no "Log in with ident"', (await ev(`!!document.querySelector('#logout')`)) && !(await ev(`!!document.querySelector('#loginbutton')`)));
151. check('the page itself stays empty while signed in too', (await ev(`document.querySelector('main').textContent.trim()`)) === '');
152. check('"Log out" has no border (only inverted buttons have one)', (await ev(`getComputedStyle(document.querySelector('#logout')).borderTopWidth`)) === '0px');
153. 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');
154. check('the header brand "tracker" has font weight 100', (await ev(`getComputedStyle(document.querySelector('application-header .brand')).fontWeight`)) === '100');
156. // ---- tracker.worldapi.org#5: /unwatched signed IN — only already-released, unwatched episodes of
157. // followed shows, newest release first; a click removes the row. Run BEFORE the show-page checks
158. // below (which toggle these same fixture episodes watched) so all three still start unwatched here.
159. await page.goto(BASE + '/my/unwatched');
160. await hydrated();
161. const unwatchedRowTexts = () => ev(`Array.from(document.querySelectorAll('.unwatched-show')).map(e => e.textContent)`);
162. check('signed in: /my/unwatched lists only already-released episodes, newest release first (not the future one), titles with the year',
163. JSON.stringify(await unwatchedRowTexts()) === JSON.stringify(['Gate Test Show (2024)', 'Gate Test Show (2024)'])
164. && (await ev(`document.querySelectorAll('unwatched-row').length`)) === 2);
165. check('signed in: /my/unwatched shows show title, the episode as S01E02 + title and release date, linking to the show',
166. (await ev(`document.querySelector('unwatched-row unwatched-episode').textContent`)) === 'S01E02 · Second'
167. && (await ev(`document.querySelector('unwatched-row unwatched-date').textContent`)) === '2020-06-15'
168. && (await ev(`document.querySelector('unwatched-row .unwatched-show').getAttribute('href')`)) === '/shows/gate-test-show');
169. check('signed in: /my/unwatched starts with regular (unwatched) check icons', (await ev(`document.querySelectorAll('unwatched-row button.checkicon.regular').length`)) === 2);
171. await page.click('unwatched-row button.checkicon');
172. await page.waitFor(`document.querySelectorAll('unwatched-row').length === 1`, { timeout: 10000, label: 'unwatched row removed' });
173. check('click an unwatched episode\'s check: it disappears from the list', (await ev(`document.querySelectorAll('unwatched-row').length`)) === 1
174. && (await ev(`document.querySelector('unwatched-episode').textContent`)) === 'S01E01 · Pilot');
176. await page.goto(BASE + '/my/unwatched');
177. await hydrated();
178. check('reload: the watch from /my/unwatched is server-side, not just client state', (await ev(`document.querySelectorAll('unwatched-row').length`)) === 1
179. && (await ev(`document.querySelector('unwatched-episode').textContent`)) === 'S01E01 · Pilot');
181. // ---- tracker.worldapi.org#7: /my/shows signed IN — followed shows, newest follow first, small
182. // poster, title linking to the show, the last watched episode (only ep 2 "Second" is watched so far)
183. const myShows = () => ev(`Array.from(document.querySelectorAll('my-show-row')).map(r => ({
184. title: r.querySelector('.myshow-title') && r.querySelector('.myshow-title').textContent,
185. href: r.querySelector('.myshow-title') && r.querySelector('.myshow-title').getAttribute('href'),
186. poster: r.querySelector('img.myshow-poster') && r.querySelector('img.myshow-poster').getAttribute('src'),
187. posterLoaded: !!(r.querySelector('img.myshow-poster') && r.querySelector('img.myshow-poster').complete && r.querySelector('img.myshow-poster').naturalWidth > 0),
188. episode: r.querySelector('my-show-episode') ? r.querySelector('my-show-episode').textContent : null }))`);
189. const waitPostersLoaded = () => page.waitFor(`Array.from(document.querySelectorAll('img.myshow-poster')).every(i => i.complete && i.naturalWidth > 0)`, { timeout: 10000, label: 'posters loaded' });
190. await page.goto(BASE + '/my/shows');
191. await hydrated();
192. await waitPostersLoaded();
193. let ms = await myShows();
194. 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));
195. 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));
196. 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));
197. 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));
198. check('/my/shows: the poster is small (2.5rem wide)', (await ev(`getComputedStyle(document.querySelector('img.myshow-poster')).width`)) === '40px');
200. // ---- tracker.worldapi.org#6: /schedule signed IN — only NOT-yet-released episodes of followed
201. // shows, soonest first, no check icons at all (read-only page, unaffected by any watch toggle above)
202. await page.goto(BASE + '/my/schedule');
203. await hydrated();
204. check('signed in: /my/schedule lists only the not-yet-released episode, title with the year', (await ev(`document.querySelectorAll('schedule-row').length`)) === 1
205. && (await ev(`document.querySelector('.schedule-show').textContent`)) === 'Gate Test Show (2024)');
206. check('signed in: /my/schedule shows show title, the episode as S02E01 + title, release date, linking to the show, no checks',
207. (await ev(`document.querySelector('schedule-row schedule-episode').textContent`)) === 'S02E01 · Season Two Opener'
208. && (await ev(`document.querySelector('schedule-row schedule-date').textContent`)) === '2099-01-01'
209. && (await ev(`document.querySelector('schedule-row .schedule-show').getAttribute('href')`)) === '/shows/gate-test-show'
210. && (await ev(`document.querySelectorAll('schedule-row button.checkicon').length`)) === 0);
212. // ---- tracker.worldapi.org#4: /shows/:slug signed IN — check icons, episode toggle, season toggle,
213. // collapse/expand, and a reload proves the watch really is server-side ----
214. const EP3 = 'ep0000000000ep0e3'; // season 2 (expanded by default), episode 1 "Season Two Opener"
215. const EP1 = 'ep0000000000ep0e1'; // season 1 (collapsed by default), episode 1 "Pilot"
216. const EP2 = 'ep0000000000ep0e2'; // season 1, episode 2 "Second"
217. const SEASON1 = 'se000000000se0s1';
218. const checkClass = (id) => ev(`document.querySelector('button.checkicon[value="${id}"]').getAttribute('class')`);
219. const clickValue = (sel, id) => page.click(`${sel}[value="${id}"]`);
221. await page.goto(BASE + '/shows/gate-test-show');
222. await hydrated();
223. check('signed in: episode check icons show, starting "regular" (not watched)', (await checkClass(EP3)) === 'checkicon regular');
225. await clickValue('button.checkicon', EP3);
226. await page.waitFor(`document.querySelector('button.checkicon[value="${EP3}"]').getAttribute('class') === 'checkicon solid'`, { timeout: 10000, label: 'ep3 solid' });
227. check('click an episode check: it turns solid', (await checkClass(EP3)) === 'checkicon solid');
229. check('season 1 starts collapsed (no episode rows of it yet)', (await ev(`document.querySelectorAll('episode-row').length`)) === 1);
230. await clickValue('button.checkicon', SEASON1);
231. await page.waitFor(`document.querySelector('button.checkicon[value="${SEASON1}"]').getAttribute('class') === 'checkicon solid'`, { timeout: 10000, label: 'season1 solid' });
232. check('click a season check: the season itself turns solid', (await checkClass(SEASON1)) === 'checkicon solid');
234. await clickValue('button.season-toggle', SEASON1);
235. await page.waitForSelector(`button.checkicon[value="${EP1}"]`, { timeout: 10000 });
236. check('expanding season 1 shows its episodes already solid (the season check watched them too)',
237. (await checkClass(EP1)) === 'checkicon solid' && (await checkClass(EP2)) === 'checkicon solid');
239. await page.goto(BASE + '/shows/gate-test-show');
240. await hydrated();
241. check('reload: episode 3\'s watch is server-side, not just client state', (await checkClass(EP3)) === 'checkicon solid');
242. await clickValue('button.season-toggle', SEASON1);
243. await page.waitForSelector(`button.checkicon[value="${EP1}"]`, { timeout: 10000 });
244. 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');
246. // ---- tracker.worldapi.org#7: /my/shows again — S02E01 was watched BEFORE season 1's bulk watch, so
247. // this proves "last" = the highest season/episode watched, not the most recently watched one
248. await page.goto(BASE + '/my/shows');
249. await hydrated();
250. ms = await myShows();
251. check('/my/shows: the last episode is the HIGHEST watched (S02E01), not the most recent watch; the other show still none',
252. ms.length === 2 && ms[1].episode === 'S02E01' && ms[0].episode === null, JSON.stringify(ms));
254. // ---- optional: screenshots of the signed-in pages (TRACKER_GATE_SHOTS=<dir>) so a human/architect can SEE them ----
255. if (process.env.TRACKER_GATE_SHOTS) {
256. mkdirSync(process.env.TRACKER_GATE_SHOTS, { recursive: true });
257. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
258. for (const [name, path] of [['home', '/'], ['show', '/shows/gate-test-show'], ['my-shows', '/my/shows'], ['my-unwatched', '/my/unwatched'], ['my-schedule', '/my/schedule']]) {
259. await page.goto(BASE + path);
260. await hydrated();
261. const shot = await page.send('Page.captureScreenshot', { format: 'png' });
262. writeFileSync(join(process.env.TRACKER_GATE_SHOTS, name + '.png'), Buffer.from(shot.data, 'base64'));
263. }
264. await page.send('Emulation.clearDeviceMetricsOverride', {});
265. }
267. // ---- sign out: back to signed out, a reload confirms the app's own session (not just client state) ----
268. await page.click('#logout');
269. await page.waitForSelector('#loginbutton', { timeout: 15000 });
270. check('sign out returns to the signed-out header', (await ev(`!!document.querySelector('#loginbutton')`)) && !(await ev(`!!document.querySelector('#logout')`)));
271. await page.goto(BASE + '/');
272. await hydrated();
273. check('reload after sign-out stays signed out', (await ev(`!!document.querySelector('#loginbutton')`)) && !(await ev(`!!document.querySelector('#logout')`)));
275. const problems = page.problems();
276. check('no console errors/warnings', problems.length === 0, page.dumpConsole());
277. }
279. try {
280. await main();
281. } catch (e) {
282. check('gate ran without throwing', false, e.stack || String(e));
283. } finally {
284. await stop();
285. }
287. console.log(`\n${passes} passed, ${failures} failed`);
288. process.exit(failures === 0 ? 0 : 1);