tracker

37.1 KB

1. // tests/franchises.mjs — THE GATE of tracker.worldapi.org#19 (mission 066): franchises, timelines, the widget, the editor —
2. // a gate of its own beside tests/browser.mjs (same parts: its own ident from identkit.mjs, the fake TMDB, a real headless
3. // Chrome), on its own storage (.scratch/franchise-store). Proves:
4. // - THE SEED from fake TMDB collections: one timeline per collection with ≥ 2 of our movies, parts in release order, a part
5. // we don't have / an adult one left out, a 1-title collection gives none, 404 and "no collection" are remembered; every
6. // part of a known collection is checked WITHOUT its own request; ≥ 260 ms between TMDB requests; it RESUMES after a stop
7. // (no movie asked twice, no timeline twice) and has nothing to do on the next start
8. // - the WIDGET: "‹ Prequel | name | Sequel ›" links, the ends greyed out, a Sequel click (client-side) moves along, the
9. // franchise above it once the timeline has one → its index
10. // - /franchises, /franchises/<slug> (each timeline sortable: timeline order | release date, a series by its LAST episode),
11. // /timelines/<slug>
12. // - THE EDITOR only for the creator (TRACKER_EDITORS = alice's ident id here; az5b2 in production): signed out and bob see
13. // "Only the creator …" and no forms; alice creates a franchise and a timeline, attaches, adds (search), moves, removes
14. // - 390 / 1280 px: nothing scrolls sideways; screenshots with TRACKER_GATE_SHOTS
15. //
16. // TRACKER_GATE_SHOTS=/tmp/w066/shots TRACKER_GATE_PORT=8732 TRACKER_GATE_IDENT_PORT=8733 TRACKER_GATE_CHROME=8734-8736 \
17. // TRACKER_GATE_TMDB_PORT=8737 node tests/franchises.mjs
18. import { spawn, execFileSync } from 'node:child_process';
19. import { existsSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
20. import { dirname, join, resolve } from 'node:path';
21. import { fileURLToPath } from 'node:url';
22. import { launchBrowser } from './cdp.mjs';
23. import { startIdent } from './identkit.mjs';
24. import { startFakeTmdb } from './faketmdb.mjs';
26. if (!process.env.HL_CHROME && existsSync('/opt/google/chrome/chrome')) process.env.HL_CHROME = '/opt/google/chrome/chrome';
27. const HERE = dirname(fileURLToPath(import.meta.url));
28. const APP = resolve(HERE, '..');
29. const PORT = Number(process.env.TRACKER_GATE_PORT || 8700);
30. const [CH_FROM, CH_TO] = (process.env.TRACKER_GATE_CHROME || '8702-8709').split('-').map(Number);
31. const IDENT_PORT = Number(process.env.TRACKER_GATE_IDENT_PORT || 8701);
32. const TMDB_PORT = Number(process.env.TRACKER_GATE_TMDB_PORT || 8710);
33. const SHOTS = process.env.TRACKER_GATE_SHOTS || '';
34. const BASE = `http://127.0.0.1:${PORT}`;
35. const STORE = join(APP, '.scratch', 'franchise-store');
36. const SESSIONS = join(APP, '.scratch', 'franchise-sessions');
37. 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')));
38. rmSync(STORE, { recursive: true, force: true });
39. rmSync(SESSIONS, { recursive: true, force: true });
40. mkdirSync(SESSIONS, { recursive: true });
41. if (SHOTS) mkdirSync(SHOTS, { recursive: true });
43. let failures = 0, passes = 0;
44. function check(label, ok, detail = '') {
45. console.log(`${ok ? 'ok ' : 'FAIL'} ${label}${ok ? '' : ' — ' + detail}`);
46. if (ok) passes++; else failures++;
47. }
48. const sleep = (ms) => new Promise(r => setTimeout(r, ms));
50. let ident = null, server = null, browser = null, log = '', tmdb = null;
51. async function stopServer() {
52. if (server) {
53. const s = server;
54. try { s.kill('SIGTERM'); } catch {}
55. await new Promise(r => { if (s.exitCode !== null || s.signalCode !== null) return r(); s.once('exit', r); setTimeout(r, 3000); });
56. server = null;
57. }
58. }
59. async function stop() {
60. if (ident) { try { await ident.stop(); } catch {} ident = null; }
61. if (browser) { try { await browser.close(); } catch {} browser = null; }
62. await stopServer();
63. if (tmdb) { try { await tmdb.stop(); } catch {} tmdb = null; }
64. }
66. // what the fake TMDB says (tests/seed-franchises.hl has the movies): collection 900's parts OUT of release order, with a part
67. // we don't have (9999) and an adult one (9105); 901 has one part of ours; 9106 has none; 9107 is unknown (404)
68. const coll900 = { id: 900, name: 'Gate Alien Collection' };
69. const gateMovies = () => ({
70. 1003: { id: 1003, title: 'Gate Test Movie', poster_path: null, belongs_to_collection: null },
71. 9101: { id: 9101, title: 'Gate Alien', belongs_to_collection: coll900 },
72. 9102: { id: 9102, title: 'Gate Aliens', belongs_to_collection: coll900 },
73. 9103: { id: 9103, title: 'Gate Alien 3', belongs_to_collection: coll900 },
74. 9104: { id: 9104, title: 'Gate Loner', belongs_to_collection: { id: 901, name: 'Gate Lonely Collection' } },
75. 9105: { id: 9105, title: 'Gate Adult Alien', adult: true, belongs_to_collection: coll900 },
76. 9106: { id: 9106, title: 'Gate Standalone', belongs_to_collection: null },
77. });
78. const gateCollections = () => ({
79. 900: { id: 900, name: 'Gate Alien Collection', parts: [
80. { id: 9103, title: 'Gate Alien 3', release_date: '1992-05-22', adult: false },
81. { id: 9999, title: 'Not Ours', release_date: '1980-01-01', adult: false },
82. { id: 9101, title: 'Gate Alien', release_date: '1979-05-25', adult: false },
83. { id: 9105, title: 'Gate Adult Alien', release_date: '1990-01-01', adult: true },
84. { id: 9102, title: 'Gate Aliens', release_date: '1986-07-18', adult: false }] },
85. 901: { id: 901, name: 'Gate Lonely Collection', parts: [{ id: 9104, title: 'Gate Loner', release_date: '2000-01-01' }, { id: 9998, title: 'Not Ours Either', release_date: '2003-01-01' }] },
86. });
88. async function main() {
89. ident = await startIdent({ identDir: IDENT_DIR, workDir: join(STORE, 'ident'), port: IDENT_PORT });
90. const alice = await ident.signIn('[email protected]');
91. const bob = await ident.signIn('[email protected]');
92. const APPKEY = await ident.registerApp(alice, 'tracker (franchise gate)', [BASE]);
93. const aliceIdentity = await ident.exchange(APPKEY, await ident.selectorCode(alice, APPKEY, BASE));
94. check('ident: our own ident runs, the app is registered, alice\'s ident id known (she is the "creator" here)', /^pk_[0-9a-f]{32}$/.test(APPKEY.key) && !!aliceIdentity);
96. const MPACKDB = join(STORE, 'mpackdb');
97. mkdirSync(MPACKDB, { recursive: true });
98. const seedOut = execFileSync(join(APP, 'bin/hybriel'), ['tests/seed-show.hl'], { cwd: APP, env: { ...process.env, TRACKER_STORAGE: MPACKDB, TRACKER_SEED_IDENTITY: aliceIdentity } }).toString()
99. + execFileSync(join(APP, 'bin/hybriel'), ['tests/seed-franchises.hl'], { cwd: APP, env: { ...process.env, TRACKER_STORAGE: MPACKDB } }).toString();
100. check('seed: the fixture shows (tests/seed-show.hl) + 7 collection movies (tests/seed-franchises.hl)', seedOut.includes('gate-test-show') && seedOut.includes('seed-franchises: 7 movies'), seedOut);
102. tmdb = await startFakeTmdb({ port: TMDB_PORT, shows: {}, movies: gateMovies(), collections: gateCollections() });
103. const startServer = async (extra = {}) => {
104. log = '';
105. server = spawn(join(APP, 'bin/hybriel'), ['project.hl'], { cwd: APP, env: { ...process.env, TRACKER_PORT: String(PORT), TRACKER_SESSIONS: SESSIONS + '/', TRACKER_STORAGE: MPACKDB,
106. TRACKER_WATCH: '0', TRACKER_URL: BASE, IDENT_URL: ident.base, IDENT_EXCHANGE_URL: ident.base, TRACKER_KEY: APPKEY.key, TRACKER_SECRET: APPKEY.secret,
107. TMDB_READ_TOKEN: 'gate-token', TMDB_BASE_URL: tmdb.base + '/3', TMDB_IMAGE_URL: tmdb.base + '/t/p', TVMAZE_BASE_URL: tmdb.base + '/tvmaze',
108. TRACKER_SYNC: '0', TRACKER_BACKFILL: '0', TRACKER_SHORTIDS: '0', TRACKER_REPAIR: '0', TRACKER_KINDS: '0', TRACKER_CREDITS: '0', TRACKER_EDITORS: aliceIdentity, TRACKER_COLLECTIONS_LOG_EVERY: '1', TRACKER_COLLECTIONS_PERSIST_EVERY: '1', ...extra },
109. stdio: ['ignore', 'pipe', 'pipe'] });
110. server.stdout.on('data', d => log += d); server.stderr.on('data', d => log += d);
111. for (let i = 0; ; i++) {
112. try { if ((await fetch(BASE + '/')).ok) break; } catch {}
113. if (i > 80) throw new Error('tracker did not come up\n' + log);
114. await sleep(250);
115. }
116. };
117. const waitLog = async (re, ms, label) => {
118. for (let t = 0; t < ms && !re.test(log); t += 100) await sleep(100);
119. if (!re.test(log)) throw new Error('log never showed ' + label + '\n' + log.slice(-3000));
120. };
122. // ==== THE SEED, stopped in the middle (TMDB answers slowly), then resumed ====
123. tmdb.delayMs = 700;
124. await startServer();
125. await waitLog(/collections: start, 7 movies to check/, 10000, 'the seed start');
126. check('seed: starts by itself, 7 movies to check (Gate Test Movie + 6 of the 7 fixtures: the adult one is skipped)', true);
127. await waitLog(/collections: [23]\/7 movies/, 20000, 'two steps');
128. await stopServer();
129. const firstRun = log;
130. const firstRequests = tmdb.requests.length;
131. tmdb.delayMs = 0;
132. await startServer();
133. await waitLog(/collections done: /, 20000, 'the seed done');
134. const startLine = (log.match(/collections: start, (\d+) movies to check/) || [])[1];
135. check('seed RESUMES after a stop: the second start has fewer movies left than 7', startLine && Number(startLine) < 7 && Number(startLine) > 0, 'second start: ' + startLine + '\nfirst run:\n' + firstRun.split('\n').filter(l => l.startsWith('collections')).join('\n'));
136. const paths = tmdb.requests.map(r => r.path);
137. const moviePaths = paths.filter(p => p.startsWith('/3/movie/'));
138. const dup = moviePaths.filter((p, i) => moviePaths.indexOf(p) !== i);
139. check('seed: no movie asked twice across the stop and the restart; never the adult one (9105) nor a part of a known collection on its own (two of 9101/9102/9103 never asked)',
140. dup.length === 0 && !moviePaths.includes('/3/movie/9105') && ['9101', '9102', '9103'].filter(id => moviePaths.includes('/3/movie/' + id)).length === 1, JSON.stringify(paths));
141. check('seed: each collection asked exactly once (900, 901), 7 TMDB requests in all (5 movies + 2 collections)',
142. paths.filter(p => p === '/3/collection/900').length === 1 && paths.filter(p => p === '/3/collection/901').length === 1 && paths.length === 7, JSON.stringify(paths) + ' (first run: ' + firstRequests + ')');
143. const second = tmdb.requests.slice(firstRequests);
144. // a step's 1–2 requests, then 260 ms per request made: any 3 requests in a row span ≥ 500 ms (≤ 40 / 10 s)
145. const spans = second.slice(2).map((r, i) => r.at - second[i].at);
146. check('seed: paced like the adult backfill — any 3 TMDB requests in a row span ≥ 500 ms (≤ 40 / 10 s)', spans.length > 0 && spans.every(g => g >= 500), JSON.stringify(spans));
147. // the counters are per start: the first run's last line + the done line add up to the whole seed
148. const done = log.match(/collections done: .*/)[0];
149. const lastFirst = firstRun.split('\n').filter(l => /^collections: \d+\/7 movies/.test(l)).pop() || '';
150. const sum = (k) => Number((lastFirst.match(new RegExp(' ' + k + '=(\\d+)')) || [0, 0])[1]) + Number((done.match(new RegExp(' ' + k + '=(\\d+)')) || [0, 0])[1]);
151. check('seed totals (both starts): 1 timeline with 3 titles, 1 too-small collection, 2 without a collection, 1 TMDB 404, 0 retries',
152. sum('timelines') === 1 && sum('titles') === 3 && sum('small') === 1 && sum('noCollection') === 2 && sum('notFound') === 1 && sum('retries') === 0, lastFirst + '\n' + done);
153. await stopServer();
154. await startServer();
155. await waitLog(/collections: (nothing to do|start, 0 movies)/, 10000, 'nothing to do');
156. check('seed: the next start finds every movie checked — nothing to do, no TMDB request', /collections: start, 0 movies to check/.test(log) && /collections: nothing to do/.test(log) && tmdb.requests.length === 7, log.split('\n').filter(l => l.startsWith('collections')).join('\n'));
158. // ==== the pages, signed OUT ====
159. browser = await launchBrowser({ debugPortRange: [CH_FROM, CH_TO] });
160. const page = await browser.newPage();
161. globalThis.__gatePage = page;
162. const ev = (e) => page.evaluate(e);
163. const hydrated = () => page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 15000, label: 'hydrated' });
164. const open = async (path) => { await page.goto(BASE + path); await hydrated(); };
165. const widgets = () => ev(`JSON.stringify(Array.from(document.querySelectorAll('franchise-widget')).map(w => ({
166. franchise: w.querySelector('a.fw-franchise') ? w.querySelector('a.fw-franchise').textContent + ' ' + w.querySelector('a.fw-franchise').getAttribute('href') : '',
167. prev: w.querySelector('.fw-prev') ? (w.querySelector('.fw-prev').tagName === 'A' ? 'A ' + w.querySelector('.fw-prev').getAttribute('href') + ' ' + w.querySelector('.fw-prev fw-title').textContent : 'OFF ' + w.querySelector('.fw-prev').textContent.trim()) : '',
168. name: w.querySelector('a.fw-timeline').textContent + ' ' + w.querySelector('a.fw-timeline').getAttribute('href'),
169. next: w.querySelector('.fw-next') ? (w.querySelector('.fw-next').tagName === 'A' ? 'A ' + w.querySelector('.fw-next').getAttribute('href') + ' ' + w.querySelector('.fw-next fw-title').textContent : 'OFF ' + w.querySelector('.fw-next').textContent.trim()) : '' })))`).then(JSON.parse);
170. const loginAs = async (who) => {
171. const code = await ident.selectorCode(who, APPKEY, BASE);
172. await page.goto(BASE + '/login/callback?ident_code=' + code);
173. await page.waitForSelector('#logout');
174. await hydrated();
175. };
176. // tracker#32: Logout sits in the user icon's dropdown
177. const logout = async () => { await page.click('button.user-toggle'); await page.waitFor(`document.querySelector('#user-menu').matches(':popover-open')`, { timeout: 5000 }); await page.click('#logout'); await page.waitForSelector('#loginbutton', { timeout: 15000 }); };
179. await open('/movies/gate-aliens');
180. let w = await widgets();
181. check('widget (Gate Aliens): ONE widget, no franchise yet, "‹ Prequel" → Gate Alien (1979), the timeline → /timelines/Gate-Alien-Collection, "Sequel ›" → Gate Alien 3 (1992)',
182. w.length === 1 && w[0].franchise === '' && w[0].prev === 'A /movies/gate-alien Gate Alien (1979)' && w[0].name === 'Gate Alien Collection /timelines/Gate-Alien-Collection'
183. && w[0].next === 'A /movies/gate-alien-3 Gate Alien 3 (1992)', JSON.stringify(w));
184. // mission 025: right under the title/poster block — phone: below the poster, above the plot; wide: in the right column under the title
185. const widgetPos = () => ev(`JSON.stringify((() => { const r = (s) => document.querySelector(s).getBoundingClientRect(), w = r('franchise-widgets');
186. return { inMeta: !!document.querySelector('show-meta franchise-widgets'), title: r('show-title').bottom, poster: r('show-poster').bottom, posterRight: r('show-poster').right, top: w.top, bottom: w.bottom, left: w.left, summary: r('show-summary').top }; })())`).then(JSON.parse);
187. await page.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 844, deviceScaleFactor: 2, mobile: true });
188. const posPhone = await widgetPos();
189. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
190. const posWide = await widgetPos();
191. await page.send('Emulation.clearDeviceMetricsOverride', {});
192. check('widget on a phone (390 px): under the title and the poster, above the plot (mission 025: it was below the cast)', posPhone.inMeta && posPhone.title <= posPhone.top && posPhone.poster <= posPhone.top && posPhone.bottom <= posPhone.summary, JSON.stringify(posPhone));
193. check('widget at 1280 px: right of the poster, under the title, above the plot', posWide.left >= posWide.posterRight && posWide.title <= posWide.top && posWide.bottom <= posWide.summary, JSON.stringify(posWide));
194. await open('/movies/gate-alien');
195. w = await widgets();
196. check('widget (Gate Alien, the first): the Prequel end is greyed out (no link), Sequel → Gate Aliens', w.length === 1 && w[0].prev === 'OFF ‹ Prequel' && w[0].next === 'A /movies/gate-aliens Gate Aliens (1986)'
197. && (await ev(`getComputedStyle(document.querySelector('.fw-prev.off')).opacity`)) === '0.5', JSON.stringify(w));
198. await ev(`window.__w066 = 'same document'`);
199. await page.click('a.fw-next');
200. await page.waitFor(`location.pathname === '/movies/gate-aliens' && document.querySelector('show-title h1 type-name') && document.querySelector('show-title h1 type-name').textContent === 'Gate Aliens'`, { timeout: 10000, label: 'sequel click' });
201. await sleep(300);
202. w = await widgets();
203. check('widget: a "Sequel ›" click opens Gate Aliens client-side (no reload) and its widget follows (Prequel → Gate Alien)', (await ev('window.__w066')) === 'same document'
204. && w.length === 1 && w[0].prev === 'A /movies/gate-alien Gate Alien (1979)' && w[0].next === 'A /movies/gate-alien-3 Gate Alien 3 (1992)', JSON.stringify(w));
205. await open('/movies/gate-alien-3');
206. w = await widgets();
207. check('widget (Gate Alien 3, the last): Sequel greyed out', w.length === 1 && w[0].next === 'OFF Sequel ›' && w[0].prev === 'A /movies/gate-aliens Gate Aliens (1986)', JSON.stringify(w));
208. for (const [slug, why] of [['gate-loner', 'a 1-title collection'], ['gate-standalone', 'no collection'], ['gate-test-show', 'in no timeline']]) {
209. await open('/shows/' + slug);
210. check(`widget: none on ${slug} (${why})`, (await ev(`document.querySelectorAll('franchise-widget').length`)) === 0);
211. }
213. await open('/franchises');
214. const loose = await ev(`Array.from(document.querySelectorAll('#timeline-list a.timeline-link')).map(a => a.querySelector('timeline-link-name').textContent + ' (' + a.querySelector('timeline-link-count').textContent + ') ' + a.getAttribute('href')).join('|')`);
215. check('/franchises signed out: "No franchises yet.", the timelines without one: only Gate Alien Collection (3 titles; the 1-title one made none), no Edit link',
216. (await ev(`document.querySelector('franchises-page p.muted').textContent`)) === 'No franchises yet.'
217. && loose === 'Gate Alien Collection (3 titles) /timelines/Gate-Alien-Collection' && !(await ev(`!!document.querySelector('#franchises-edit')`)), loose);
218. await open('/timelines/Gate-Alien-Collection');
219. const items = () => ev(`Array.from(document.querySelectorAll('a.timeline-item')).map(a => a.getAttribute('data-timeline').slice(0, 4) + ':' + a.querySelector('film-title').textContent + '@' + a.querySelector('.timeline-date').textContent).join('|')`);
220. check('/timelines/Gate-Alien-Collection: the parts in release order (TMDB gave them mixed), without the one we lack and the adult one; no franchise above, no Edit link signed out',
221. (await items()).replace(/^[^:]*:/, '').split('|').map(x => x.replace(/^[^:]*:/, '')).join('|') === 'Gate Alien (1979)@1979-05-25|Gate Aliens (1986)@1986-07-18|Gate Alien 3 (1992)@1992-05-22'
222. && !(await ev(`!!document.querySelector('#franchise-up')`)) && !(await ev(`!!document.querySelector('#timeline-edit')`)), await items());
223. await open('/franchises/edit');
224. check('/franchises/edit signed out: "Only the creator …", no form', (await ev(`document.querySelector('#edit-refused') ? document.querySelector('#edit-refused').textContent : ''`)) === 'Only the creator can edit franchises and timelines.'
225. && !(await ev(`!!document.querySelector('#fe-name')`)));
226. await open('/franchises/nope');
227. check('/franchises/<unknown> and /timelines/<unknown>: Not found', (await ev(`document.querySelector('h1').textContent`)) === 'Not found'
228. && (await (await fetch(BASE + '/timelines/nope')).text()).includes('Not found'));
230. // ==== bob (signed in, not the creator): no editor ====
231. await loginAs(bob);
232. await open('/franchises/edit');
233. const bobRefused = (await ev(`!!document.querySelector('#edit-refused')`)) && !(await ev(`!!document.querySelector('#fe-name')`));
234. await open('/timelines/Gate-Alien-Collection/edit');
235. check('bob (signed in, not the creator): /franchises/edit and /timelines/…/edit say "Only the creator …", no forms, no chips, no ↑↓✕',
236. bobRefused && (await ev(`!!document.querySelector('#edit-refused')`)) && !(await ev(`!!document.querySelector('#franchise-chips') || !!document.querySelector('button.mv')`)));
237. await open('/franchises');
238. check('bob: no Edit link on /franchises', !(await ev(`!!document.querySelector('#franchises-edit')`)));
239. await logout();
241. // ==== alice = the creator: the editor ====
242. await loginAs(alice);
243. await open('/franchises');
244. check('creator: /franchises has the Edit link → /franchises/edit', (await ev(`document.querySelector('#franchises-edit') ? document.querySelector('#franchises-edit').getAttribute('href') : ''`)) === '/franchises/edit');
245. await page.click('#franchises-edit');
246. await page.waitFor(`location.pathname === '/franchises/edit' && !!document.querySelector('#fe-name')`, { timeout: 10000, label: 'editor' });
247. await page.type('#fe-name', 'Gate Alien Franchise');
248. await page.type('#fe-summary', 'Facehuggers, all of them.');
249. await page.click('#fe-create');
250. await page.waitFor(`location.pathname === '/franchises/Gate-Alien-Franchise' && document.querySelector('h1 type-name') && document.querySelector('h1 type-name').textContent === 'Gate Alien Franchise'`, { timeout: 10000, label: 'new franchise page' });
251. check('editor: "Create franchise" opens the new franchise\'s index (/franchises/Gate-Alien-Franchise): name, summary, "No timelines yet."',
252. (await ev(`document.querySelector('p.franchise-summary').textContent`)) === 'Facehuggers, all of them.' && (await ev(`document.querySelector('franchise-page p.muted').textContent`)) === 'No timelines yet.');
253. await open('/franchises/edit');
254. await page.click('#fe-create');
255. await page.waitFor(`!!document.querySelector('#edit-message')`, { timeout: 5000, label: 'empty name refused' });
256. check('editor: an empty name is refused with a message', /needs a name/.test(await ev(`document.querySelector('#edit-message').textContent`)));
258. // attach the seeded timeline to the franchise
259. await open('/timelines/Gate-Alien-Collection/edit');
260. const chips = () => ev(`Array.from(document.querySelectorAll('#franchise-chips button')).map(b => b.textContent + (b.classList.contains('on') ? '*' : '')).join('|')`);
261. check('editor (Gate Alien Collection): the franchise chips — None (on) | Gate Alien Franchise; the 3 titles in order with ↑ ↓ ✕', (await chips()) === 'None*|Gate Alien Franchise'
262. && (await ev(`Array.from(document.querySelectorAll('#edit-rows edit-row film-title')).map(x => x.textContent).join('|')`)) === 'Gate Alien (1979)|Gate Aliens (1986)|Gate Alien 3 (1992)', await chips());
263. await page.click('#franchise-chips button[value]:not(.on)');
264. await page.waitFor(`document.querySelector('#franchise-chips button.on') && document.querySelector('#franchise-chips button.on').textContent === 'Gate Alien Franchise'`, { timeout: 5000, label: 'chip on' });
265. await open('/timelines/Gate-Alien-Collection/edit');
266. check('editor: a tap on the franchise chip attaches the timeline (still on after a reload)', (await chips()) === 'None|Gate Alien Franchise*', await chips());
267. await open('/movies/gate-aliens');
268. w = await widgets();
269. check('widget: the franchise ABOVE the row now, linking to its index', w.length === 1 && w[0].franchise === 'Gate Alien Franchise /franchises/Gate-Alien-Franchise'
270. && (await ev(`document.querySelector('a.fw-franchise').getBoundingClientRect().bottom <= document.querySelector('fw-row').getBoundingClientRect().top`)), JSON.stringify(w));
271. await page.click('a.fw-franchise');
272. await page.waitFor(`location.pathname === '/franchises/Gate-Alien-Franchise' && document.querySelectorAll('timeline-head').length === 1`, { timeout: 10000, label: 'franchise index via the widget' });
273. check('widget: a click on the franchise opens its index with the timeline', (await ev(`document.querySelector('a.timeline-name').textContent`)) === 'Gate Alien Collection');
275. // a new hand-made timeline: series + movie, attached, titles added by search, moved, one removed
276. await open('/franchises/edit');
277. await page.type('#te-name', 'Gate Mixed Timeline');
278. await page.click('#te-create');
279. await page.waitFor(`location.pathname === '/timelines/Gate-Mixed-Timeline/edit' && !!document.querySelector('#ted-search')`, { timeout: 10000, label: 'new timeline editor' });
280. check('editor: "Create timeline" opens its editor, no titles yet', /No titles yet/.test(await ev(`document.querySelector('timeline-edit-page').textContent`)));
281. await page.click('#franchise-chips button[value]:not(.on)');
282. await page.waitFor(`document.querySelector('#franchise-chips button.on') && document.querySelector('#franchise-chips button.on').textContent === 'Gate Alien Franchise'`, { timeout: 5000, label: 'chip on (mixed)' });
283. const addBySearch = async (text, title) => {
284. await page.type('#ted-search', text, { clear: true });
285. await page.waitFor(`Array.from(document.querySelectorAll('#ted-results edit-row')).some(r => r.querySelector('film-title').textContent === ${JSON.stringify(title)})`, { timeout: 8000, label: 'result ' + title });
286. const before = await ev(`document.querySelectorAll('#edit-rows edit-row').length`);
287. await ev(`Array.from(document.querySelectorAll('#ted-results edit-row')).find(r => r.querySelector('film-title').textContent === ${JSON.stringify(title)}).querySelector('button.add').click()`);
288. await page.waitFor(`document.querySelectorAll('#edit-rows edit-row').length === ${before + 1}`, { timeout: 8000, label: 'added ' + title });
289. };
290. const editRows = () => ev(`Array.from(document.querySelectorAll('#edit-rows edit-row')).map(r => r.querySelector('edit-pos').textContent + '.' + r.querySelector('film-title').textContent).join('|')`);
291. await addBySearch('pager older', 'Pager Older Series (2019)');
292. await addBySearch('gate test', 'Gate Test Show (2024)');
293. await addBySearch('gate test', 'Gate Test Movie (1996)');
294. await addBySearch('alien 3', 'Gate Alien 3 (1992)');
295. check('editor: four titles added by search, each at the end', (await editRows()) === '1.Pager Older Series (2019)|2.Gate Test Show (2024)|3.Gate Test Movie (1996)|4.Gate Alien 3 (1992)', await editRows());
296. check('editor: a title already in the timeline is not offered again', !(await ev(`Array.from(document.querySelectorAll('#ted-results film-title')).some(t => t.textContent === 'Gate Alien 3 (1992)')`)));
297. await ev(`document.querySelector('#edit-rows edit-row[data-show="fr0000000000f103"] button.rm').click()`);
298. await page.waitFor(`document.querySelectorAll('#edit-rows edit-row').length === 3`, { timeout: 8000, label: 'removed' });
299. await ev(`document.querySelectorAll('#edit-rows edit-row')[2].querySelector('button[value="up"]').click()`);
300. await page.waitFor(`document.querySelectorAll('#edit-rows edit-row')[1].querySelector('film-title').textContent === 'Gate Test Movie (1996)'`, { timeout: 8000, label: 'moved up' });
301. check('editor: ✕ removes, ↑ moves one place up: Pager Older Series, Gate Test Movie, Gate Test Show', (await editRows()) === '1.Pager Older Series (2019)|2.Gate Test Movie (1996)|3.Gate Test Show (2024)', await editRows());
302. check('editor: the first row\'s ↑ and the last row\'s ↓ are greyed out (not clickable)', (await ev(`document.querySelectorAll('#edit-rows edit-row')[0].querySelector('button[value="up"]').classList.contains('off') && document.querySelectorAll('#edit-rows edit-row')[2].querySelector('button[value="down"]').classList.contains('off') && getComputedStyle(document.querySelectorAll('#edit-rows edit-row')[0].querySelector('button[value="up"]')).pointerEvents === 'none'`)));
303. if (SHOTS) {
304. for (const [wd, h, mobile] of [[390, 844, true], [1280, 900, false]]) {
305. await page.send('Emulation.setDeviceMetricsOverride', { width: wd, height: h, deviceScaleFactor: mobile ? 2 : 1, mobile });
306. await page.type('#ted-search', 'gate', { clear: true });
307. await page.waitFor(`document.querySelectorAll('#ted-results edit-row').length > 0`, { timeout: 8000, label: 'results for the shot' });
308. writeFileSync(join(SHOTS, `timeline-edit-${wd}.png`), Buffer.from((await page.send('Page.captureScreenshot', { format: 'png', captureBeyondViewport: true })).data, 'base64'));
309. }
310. await page.send('Emulation.clearDeviceMetricsOverride', {});
311. }
312. await open('/timelines/Gate-Mixed-Timeline/edit');
313. check('editor: after a reload the order and the franchise are stored', (await editRows()) === '1.Pager Older Series (2019)|2.Gate Test Movie (1996)|3.Gate Test Show (2024)' && (await chips()) === 'None|Gate Alien Franchise*', await editRows());
315. // the franchise index: two timelines, each sortable on its own
316. await open('/franchises/Gate-Alien-Franchise');
317. const blockItems = (tid) => ev(`Array.from(document.querySelectorAll('a.timeline-item[data-timeline="' + ${tid} + '"]')).map(a => a.querySelector('film-title').textContent + '@' + a.querySelector('.timeline-date').textContent).join('|')`);
318. const heads = JSON.parse(await ev(`JSON.stringify(Array.from(document.querySelectorAll('timeline-head')).map(h => ({ id: h.getAttribute('data-timeline'), name: h.querySelector('a.timeline-name').textContent, on: h.querySelector('button.sortbtn.on').textContent })))`));
319. check('index: both timelines of the franchise, the older first (by first release), each sorted by "Timeline"', heads.map(h => h.name + ':' + h.on).join('|') === 'Gate Alien Collection:Timeline|Gate Mixed Timeline:Timeline', JSON.stringify(heads));
320. const mixedId = JSON.stringify((heads.find(h => h.name === 'Gate Mixed Timeline') || {}).id);
321. const alienId = JSON.stringify((heads.find(h => h.name === 'Gate Alien Collection') || {}).id);
322. const mixedTimelineOrder = await blockItems(mixedId);
323. check('index: the mixed timeline in timeline order; a series shows the date of its LAST released episode', mixedTimelineOrder === 'Pager Older Series (2019)@last episode 2021-01-01|Gate Test Movie (1996)@1996-11-18|Gate Test Show (2024)@last episode 2020-06-15', mixedTimelineOrder);
324. await ev(`document.querySelector('timeline-head[data-timeline=' + JSON.stringify(${mixedId}) + '] button[value="release"]').click()`);
325. await page.waitFor(`document.querySelector('timeline-head[data-timeline=' + JSON.stringify(${mixedId}) + '] button.sortbtn.on').textContent === 'Release'`, { timeout: 5000, label: 'release toggle' });
326. const mixedRelease = await blockItems(mixedId);
327. check('index: "Release" sorts that timeline by release date — Gate Test Show (last episode 2020-06-15, not its 2099 one nor its 2024 year) between the 1996 movie and the series ending 2021',
328. mixedRelease === 'Gate Test Movie (1996)@1996-11-18|Gate Test Show (2024)@last episode 2020-06-15|Pager Older Series (2019)@last episode 2021-01-01', mixedRelease);
329. check('index: the other timeline keeps its own toggle ("Timeline")', (await ev(`document.querySelector('timeline-head[data-timeline=' + JSON.stringify(${alienId}) + '] button.sortbtn.on').textContent`)) === 'Timeline');
330. await ev(`document.querySelector('timeline-head[data-timeline=' + JSON.stringify(${mixedId}) + '] button[value="timeline"]').click()`);
331. await page.waitFor(`document.querySelector('timeline-head[data-timeline=' + JSON.stringify(${mixedId}) + '] button.sortbtn.on').textContent === 'Timeline'`, { timeout: 5000, label: 'timeline toggle' });
332. check('index: "Timeline" brings the in-world order back', (await blockItems(mixedId)) === mixedTimelineOrder);
333. await open('/timelines/Gate-Mixed-Timeline');
334. check('/timelines/Gate-Mixed-Timeline: the franchise above it (→ its index), the creator\'s Edit link', (await ev(`document.querySelector('#franchise-up').textContent + ' ' + document.querySelector('#franchise-up').getAttribute('href')`)) === 'Gate Alien Franchise /franchises/Gate-Alien-Franchise'
335. && (await ev(`document.querySelector('#timeline-edit').getAttribute('href')`)) === '/timelines/Gate-Mixed-Timeline/edit');
336. await open('/movies/gate-test-movie');
337. w = await widgets();
338. check('widget on a movie in the mixed timeline: Prequel → the SERIES before it, Sequel → the series after it', w.length === 1 && w[0].prev === 'A /series/pager-older-series Pager Older Series (2019)'
339. && w[0].next === 'A /series/gate-test-show Gate Test Show (2024)' && w[0].franchise === 'Gate Alien Franchise /franchises/Gate-Alien-Franchise', JSON.stringify(w));
340. await open('/series/gate-test-show');
341. w = await widgets();
342. check('widget on a series page too (last of its timeline: Sequel greyed out)', w.length === 1 && w[0].next === 'OFF Sequel ›' && w[0].prev === 'A /movies/gate-test-movie Gate Test Movie (1996)', JSON.stringify(w));
343. // a title in TWO timelines: Gate Alien 3 into the mixed one again → two widgets
344. await open('/timelines/Gate-Mixed-Timeline/edit');
345. await addBySearch('alien 3', 'Gate Alien 3 (1992)');
346. await open('/movies/gate-alien-3');
347. w = await widgets();
348. check('a title in TWO timelines has two widgets (one per timeline)', w.length === 2 && w.map(x => x.name.split(' /')[0]).sort().join('|') === 'Gate Alien Collection|Gate Mixed Timeline' && w.every(x => x.franchise.startsWith('Gate Alien Franchise')), JSON.stringify(w));
350. // ==== mission 070 (merge with #20/#21): typed headings "Franchise | …" / "Timeline | …" in their colours; title links → /movies|/series ====
351. const typedH1 = () => ev(`JSON.stringify((() => { const h = document.querySelector('h1.typed'); if (!h) return null; const w = h.querySelector('type-word'), n = h.querySelector('type-name');
352. return { text: h.textContent.replace(/\\s+/g, ' ').trim(), word: w ? [w.textContent, getComputedStyle(w).color] : null, name: n ? n.textContent : null }; })())`).then(JSON.parse);
353. const typedHeads = {};
354. for (const p of ['/franchises', '/franchises/Gate-Alien-Franchise', '/timelines/Gate-Alien-Collection', '/timelines/Gate-Mixed-Timeline/edit']) { await open(p); typedHeads[p] = await typedH1(); }
355. check('#20 headings on #19 pages: "Franchises" (blueLight), "Franchise | Gate Alien Franchise" (blueLight), "Timeline | Gate Alien Collection" (greenLight), the editor "Timeline | Gate Mixed Timeline"',
356. typedHeads['/franchises'] && typedHeads['/franchises'].word[0] === 'Franchises' && typedHeads['/franchises'].word[1] === 'rgb(156, 220, 254)'
357. && typedHeads['/franchises/Gate-Alien-Franchise'].text === 'Franchise | Gate Alien Franchise' && typedHeads['/franchises/Gate-Alien-Franchise'].word[1] === 'rgb(156, 220, 254)'
358. && typedHeads['/timelines/Gate-Alien-Collection'].text === 'Timeline | Gate Alien Collection' && typedHeads['/timelines/Gate-Alien-Collection'].word[1] === 'rgb(181, 206, 168)'
359. && typedHeads['/timelines/Gate-Mixed-Timeline/edit'].text === 'Timeline | Gate Mixed Timeline', JSON.stringify(typedHeads));
360. await open('/timelines/Gate-Alien-Collection');
361. const nameCount = await ev(`document.querySelector('franchise-page').innerText.split('Gate Alien Collection').length - 1`);
362. check('timeline page: its name once (the heading), not again over the list (mission 025); count and sort toggle still there', nameCount === 1 && (await ev(`document.querySelectorAll('a.timeline-name').length`)) === 0
363. && (await ev(`!!document.querySelector('timeline-head timeline-count') && document.querySelectorAll('timeline-head button.sortbtn').length === 2`)), 'name ' + nameCount + '×');
364. await open('/timelines/Gate-Mixed-Timeline');
365. const mixedHrefs = await ev(`Array.from(document.querySelectorAll('a.timeline-item')).map(a => a.getAttribute('href')).join(',')`);
366. check('#21 links on #19 pages: the mixed timeline links its series to /series/<slug> and its movie to /movies/<slug>, none to /shows/',
367. mixedHrefs.includes('/series/pager-older-series') && mixedHrefs.includes('/movies/gate-test-movie') && mixedHrefs.includes('/series/gate-test-show') && !mixedHrefs.includes('/shows/'), mixedHrefs);
369. // ==== 390 / 1280: nothing scrolls sideways; screenshots ====
370. const pages = [['franchises', '/franchises'], ['franchise', '/franchises/Gate-Alien-Franchise'], ['timeline', '/timelines/Gate-Alien-Collection'], ['widget-movie', '/movies/gate-alien-3'],
371. ['widget-aliens', '/movies/gate-aliens'], ['franchise-edit', '/franchises/edit'], ['timeline-edit-reload', '/timelines/Gate-Mixed-Timeline/edit']];
372. for (const [wd, h, mobile] of [[390, 844, true], [1280, 900, false]]) {
373. await page.send('Emulation.setDeviceMetricsOverride', { width: wd, height: h, deviceScaleFactor: mobile ? 2 : 1, mobile });
374. const bad = [];
375. for (const [name, path] of pages) {
376. await open(path);
377. if (name.startsWith('widget')) await ev(`document.querySelector('franchise-widget').scrollIntoView({ block: 'center' })`);
378. const sw = await ev('document.documentElement.scrollWidth');
379. if (sw > wd) bad.push(name + ' ' + sw);
380. if (name.startsWith('widget')) {
381. const row = JSON.parse(await ev(`JSON.stringify((() => { const r = (s) => document.querySelector(s).getBoundingClientRect(); return { p: r('.fw-prev'), t: r('a.fw-timeline'), n: r('.fw-next') }; })())`));
382. if (!(row.p.right <= row.t.left + 1 && row.t.right <= row.n.left + 1 && Math.abs((row.p.top + row.p.bottom) / 2 - (row.n.top + row.n.bottom) / 2) < 30)) bad.push(name + ' widget not one row ' + JSON.stringify(row));
383. }
384. if (SHOTS) writeFileSync(join(SHOTS, `${name}-${wd}.png`), Buffer.from((await page.send('Page.captureScreenshot', { format: 'png' })).data, 'base64'));
385. }
386. check(`${wd} px: no franchise page scrolls sideways; the widget is ONE row (Prequel | name | Sequel side by side)`, bad.length === 0, bad.join('; '));
387. }
388. await page.send('Emulation.clearDeviceMetricsOverride', {});
389. await logout();
390. const problems = page.problems();
391. check('no console errors/warnings', problems.length === 0, page.dumpConsole());
392. }
394. try {
395. await main();
396. } catch (e) {
397. check('gate ran without throwing', false, (e.stack || String(e)) + (globalThis.__gatePage ? '\nbrowser console:\n' + globalThis.__gatePage.dumpConsole() : '') + '\nserver log (tail):\n' + log.slice(-2500));
398. } finally {
399. await stop();
400. }
402. console.log(`\n${passes} passed, ${failures} failed`);
403. process.exit(failures === 0 ? 0 : 1);