calendar

40.6 KB

1. // tests/browser.mjs — THE GATE of calendar.worldapi.org: its own server on its own storage, its OWN ident (a copy of
2. // ident's code without .env, codes to a mail sink: tests/identkit.mjs), real headless Chrome.
3. // node tests/browser.mjs (CALENDAR_GATE_PORT server, default 8700; CALENDAR_GATE_IDENT_PORT ident, default 8701;
4. // CALENDAR_GATE_CHROME "8702-8709" = Chrome debug ports)
5. // Screenshots (390 / 1280 px) land in .scratch/gate-*.png. Every process started is stopped by PID.
6. import { spawn } from 'node:child_process';
7. import { writeFileSync, existsSync, mkdirSync, rmSync } from 'node:fs';
8. import { dirname, join, resolve } from 'node:path';
9. import { fileURLToPath } from 'node:url';
10. import { launchBrowser } from './cdp.mjs';
11. import { startIdent } from './identkit.mjs';
13. if (!process.env.HL_CHROME && existsSync('/opt/google/chrome/chrome')) process.env.HL_CHROME = '/opt/google/chrome/chrome';
14. const HERE = dirname(fileURLToPath(import.meta.url));
15. const APP = resolve(HERE, '..');
16. const PORT = Number(process.env.CALENDAR_GATE_PORT || 8700);
17. const [CH_FROM, CH_TO] = (process.env.CALENDAR_GATE_CHROME || '8702-8709').split('-').map(Number);
18. const IDENT_PORT = Number(process.env.CALENDAR_GATE_IDENT_PORT || 8701);
19. const BASE = `http://127.0.0.1:${PORT}`;
20. const STORE = join(APP, '.scratch', 'gate-store');
21. const IDENT_DIR = process.env.CALENDAR_GATE_IDENT_DIR || [resolve(APP, '../ident.worldapi.org'), '/media/STORAGE/projects/ident.worldapi.org'].find(d => existsSync(join(d, 'project.hl')));
22. let ident = null;
23. const SCRATCH = join(APP, '.scratch');
24. const SESSIONS = join(SCRATCH, 'gate-sessions');
25. rmSync(SESSIONS, { recursive: true, force: true });
26. rmSync(STORE, { recursive: true, force: true });
27. mkdirSync(SESSIONS, { recursive: true });
29. let failures = 0, passes = 0;
30. function check(label, ok, detail = '') {
31. console.log(`${ok ? 'ok ' : 'FAIL'} ${label}${ok ? '' : ' — ' + detail}`);
32. if (ok) passes++; else failures++;
33. }
34. const sleep = (ms) => new Promise(r => setTimeout(r, ms));
35. let spawnServer = null, log = '', server = null, browser = null, lastPage = null;
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 bob = await ident.signIn('[email protected]');
51. const APPKEY = await ident.registerApp(alice, 'calendar (gate)', [BASE]);
52. check('ident: our own ident runs (a copy without .env), the calendar is registered', /^pk_[0-9a-f]{32}$/.test(APPKEY.key) && !existsSync(join(STORE, 'ident', 'ident-code', '.env')));
53. spawnServer = () => {
54. server = spawn(join(APP, 'bin/hybriel'), ['project.hl'], { cwd: APP, env: { ...process.env, CALENDAR_PORT: String(PORT), CALENDAR_SESSIONS: SESSIONS + '/', CALENDAR_STORAGE: join(STORE, 'mpackdb'), CALENDAR_WATCH: '0',
55. CALENDAR_PUBLIC_URL: BASE, IDENT_URL: ident.base, IDENT_EXCHANGE_URL: ident.base, IDENT_API_KEY: APPKEY.key, IDENT_API_SECRET: APPKEY.secret }, stdio: ['ignore', 'pipe', 'pipe'] });
56. server.stdout.on('data', d => log += d); server.stderr.on('data', d => log += d);
57. };
58. spawnServer();
59. for (let i = 0; ; i++) {
60. try { if ((await fetch(BASE + '/')).ok) break; } catch {}
61. if (i > 80) throw new Error('server did not come up\n' + log);
62. await sleep(250);
63. }
65. // the app's first page is the month view, rendered on the server: 6 weeks of 7 days, one today
66. const home = await (await fetch(BASE + '/')).text();
67. check('server renders 42 days and one today', (home.match(/<li class=/g) || []).length === 42 && (home.match(/class="today"/g) || []).length === 1);
69. browser = await launchBrowser({ debugPortRange: [CH_FROM, CH_TO] });
70. const page = await browser.newPage();
71. lastPage = page;
72. const SLOW = 3;
73. const goto = page.goto.bind(page);
74. page.goto = (u, o = {}) => goto(u, { ...o, timeout: 15000 * SLOW });
75. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
76. await page.goto(BASE + '/');
77. await page.waitForSelector('#month-title');
78. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
80. const shot = async (name) => { const { data } = await page.send('Page.captureScreenshot', { format: 'png' }); writeFileSync(join(SCRATCH, `gate-${name}.png`), Buffer.from(data, 'base64')); };
81. const ev = (e) => page.evaluate(e);
82. const title = () => ev('document.querySelector("#month-title").textContent');
83. const localToday = await ev(`(() => { const n = new Date(), p = x => String(x).padStart(2, '0'); return n.getFullYear() + '-' + p(n.getMonth() + 1) + '-' + p(n.getDate()); })()`);
84. const expectTitle = (y, m) => ev(`new Intl.DateTimeFormat(navigator.language, { month: 'long' }).format(new Date(Date.UTC(${y}, ${m - 1}, 15, 12))) + ' ${y}'`);
85. const [ty, tm] = localToday.split('-').map(Number);
87. // ticket #6: the FIRST render (no mouse yet) already has the names, in the language of the request, when the server knows it
88. const firstDays = await ev('[...document.querySelectorAll("#month-weekdays li")].map(l => l.textContent).join(" ")');
89. const wantDays = await ev(`[1,2,3,4,5,6,7].map(i => new Intl.DateTimeFormat(navigator.language, { weekday: 'short' }).format(new Date(Date.UTC(2024, 0, i, 12)))).join(' ')`);
90. if (/^(en|de|fr|es|it|nl|pt)/.test(await ev('navigator.language'))) check('first page already shows the weekday names in the browser language', firstDays === wantDays, firstDays + ' / ' + wantDays);
91. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: 400, y: 300 }); // a real user's pointer reaches the month view
92. await page.waitFor(`document.querySelector("#month-title").textContent.toLowerCase() === (${JSON.stringify(await expectTitle(ty, tm))}).toLowerCase()`, { label: 'title in the browser language' });
93. check('title is the current month and year in the browser language', true);
94. check('today is marked (browser date)', (await ev(`document.querySelector('li.today time').getAttribute('datetime')`)) === localToday, localToday);
95. check('42 days, 6 weeks', (await ev('document.querySelectorAll("#month-days li").length')) === 42);
96. const t0 = await title();
98. // next / prev
99. await page.click('#month-next');
100. await page.waitFor(`document.querySelector("#month-title").textContent !== ${JSON.stringify(t0)}`, { label: 'next month' });
101. const nm = tm === 12 ? 1 : tm + 1, ny = tm === 12 ? ty + 1 : ty;
102. await page.waitFor(`document.querySelector("#month-title").textContent.toLowerCase() === ${JSON.stringify((await expectTitle(ny, nm)).toLowerCase())}`, { label: 'next month title' });
103. check('next shows the next month', true);
104. await page.click('#month-prev');
105. await page.waitFor(`document.querySelector("#month-title").textContent === ${JSON.stringify(t0)}`, { label: 'prev month' });
106. check('prev returns to the month, today marked again', (await ev('document.querySelectorAll("li.today").length')) === 1);
108. // walk to February 2028 (leap year) and check its days and its first weekday (Tuesday)
109. let guard = 0;
110. const feb28 = (await expectTitle(2028, 2)).toLowerCase();
111. while ((await title()).toLowerCase() !== feb28 && guard++ < 40) {
112. const before = await title();
113. await page.click('#month-next');
114. await page.waitFor(`document.querySelector("#month-title").textContent !== ${JSON.stringify(before)}`, { label: 'paging' });
115. }
116. const feb = await ev(`(() => { const inM = [...document.querySelectorAll('month-view #month-days li:not(.outside) time')]; const first = document.querySelector('#month-days li:not(.outside)'); return { n: inM.length, col: [...first.parentNode.children].indexOf(first) % 7 }; })()`);
117. check('Feb 2028: 29 days, the 1st is a Tuesday (column 2)', feb.n === 29 && feb.col === 1, JSON.stringify(feb));
118. // year rollover: go back to December 2027 and January 2028 by prev
119. await page.click('#month-prev');
120. await page.click('#month-prev');
121. const dec27 = (await expectTitle(2027, 12)).toLowerCase();
122. await page.waitFor(`document.querySelector("#month-title").textContent.toLowerCase() === ${JSON.stringify(dec27)}`, { label: 'back to December' });
123. const dec = await ev(`(() => ({ n: document.querySelectorAll('#month-days li:not(.outside)').length, col: [...document.querySelectorAll('#month-days li')].indexOf(document.querySelector('#month-days li:not(.outside)')) % 7 }))()`);
124. check('Dec 2027: 31 days, the 1st is a Wednesday', dec.n === 31 && dec.col === 2, JSON.stringify(dec));
125. check('no console errors', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
128. await languagePart();
129. await shot('wide');
130. await page.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 800, deviceScaleFactor: 1, mobile: true });
131. await sleep(300);
132. check('no horizontal overflow at 390 px', await ev('document.documentElement.scrollWidth <= window.innerWidth'));
133. await shot('narrow');
135. if (!process.env.GATE_SKIP_EVENTS) await eventsPart(page, { alice, bob, APPKEY });
136. await remindersPart(page, { alice, APPKEY });
137. }
139. // ---- ticket calendar#2: login with ident, private events ------------------------------------------------------
140. async function eventsPart(page, { alice, bob, APPKEY }) {
141. const ev = (e) => page.evaluate(e);
142. const J = JSON.stringify;
143. // (a user's pointer reaches the month view first, and takes a moment before the click: the month view reads the browser then)
144. const hydrated = async () => {
145. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
146. const at = await page.evaluate(`(() => { const r = document.querySelector('#month-title').getBoundingClientRect(); return { x: Math.round(r.x + r.width / 2), y: Math.round(r.y + r.height / 2) }; })()`);
147. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: at.x, y: at.y });
148. await sleep(700);
149. };
150. const setField = (sel, v) => ev(`(() => { const e = document.querySelector(${J(sel)}); e.value = ${J(v)}; e.dispatchEvent(new Event('input', { bubbles: true })); })()`);
151. const pad = (n) => String(n).padStart(2, '0');
152. const now = new Date();
153. const ym = `${now.getFullYear()}-${pad(now.getMonth() + 1)}`;
154. const day = (d) => `${ym}-${pad(d)}`;
155. const cell = (d) => `#month-days li:has(time[datetime="${day(d)}"])`;
156. const evTexts = (d) => ev(`[...document.querySelectorAll(${J(cell(d) + ' button.event')})].map(b => b.textContent)`);
157. const editorOpen = () => ev(`document.querySelector('#eventeditor').classList.contains('open')`);
158. const emitRaw = async (cookie, event, payload) => {
159. const r = await fetch(BASE + '/__hl/emit', { method: 'POST', headers: { 'content-type': 'application/json', cookie }, body: J({ t: 'emit', i: 1, event, payload }) });
160. const t = await r.text(); let j = null; try { j = JSON.parse(t); } catch {}
161. return j && j.value !== undefined ? j.value : t;
162. };
163. const loginAs = async (who) => {
164. const code = await ident.selectorCode(who, APPKEY, BASE);
165. await page.goto(BASE + '/login/callback?ident_code=' + code);
166. await page.waitForSelector('#logout');
167. await hydrated();
168. };
169. const cookieOf = async () => (await page.cookies([BASE])).map(c => c.name + '=' + c.value).join('; ');
171. // signed out: no login, no editor, the faces refuse
172. await page.goto(BASE + '/');
173. await hydrated();
174. check('signed out: "Log in with ident" shows', (await ev(`!!document.querySelector('#loginbutton')`)) && !(await ev(`!!document.querySelector('#logout')`)));
175. await page.click(cell(15));
176. await sleep(500);
177. check('signed out: clicking a day opens no editor', !(await editorOpen()));
178. const refused = await emitRaw('', 'calSave', [{ title: 'x', allDay: false, startDate: day(15), startTime: '09:00', endDate: '', endTime: '', place: '', notes: '', zone: 'UTC' }, day(1), day(28)]);
179. check('signed out: the server refuses to save an event', refused && refused.error === 'log in with ident first', J(refused));
180. let r = await fetch(BASE + '/login/callback', { redirect: 'manual' });
181. check('login: /login/callback without a code → /login/failed', r.status === 302 && r.headers.get('location') === '/login/failed');
183. // log in as alice, add an event on the 15th
184. await loginAs(alice);
185. check('logged in: "Log out" shows', await ev(`!!document.querySelector('#logout')`));
186. await page.click(cell(15));
187. await page.waitFor(`document.querySelector('#eventeditor').classList.contains('open')`, { label: 'editor opens' });
188. await page.waitFor(`document.querySelector('#f-startdate').value === ${J(day(15))}`, { label: 'form shows the clicked date' });
189. check('a click on a day opens the editor at that date', (await ev(`document.querySelector('#f-startdate').value`)) === day(15), await ev(`JSON.stringify([...document.querySelectorAll('#eventform input, #eventform textarea')].map(i => i.id + '=' + i.value))`));
190. await page.click('#f-title');
191. await page.type('#f-title', 'Dentist');
192. await setField('#f-starttime', '18:00');
193. await setField('#f-endtime', '19:00');
194. await setField('#f-place', 'Dr. Huber');
195. await setField('#f-notes', 'Bring the insurance card');
196. check('typing into the title kept its focus and text', (await ev(`document.querySelector('#f-title').value`)) === 'Dentist');
197. await page.click('#event-save');
198. await page.waitFor(`document.querySelectorAll(${J(cell(15) + ' button.event')}).length === 1`, { label: 'event shows on its day' });
199. check('the event shows on that day with its time', J(await evTexts(15)) === '["18:00 Dentist"]', J(await evTexts(15)));
200. check('the editor closed after saving', !(await editorOpen()));
202. // it survives a reload (server render for the signed-in user)
203. await page.goto(BASE + '/');
204. await hydrated();
205. await page.waitFor(`document.querySelectorAll(${J(cell(15) + ' button.event')}).length === 1`, { label: 'event after reload' });
206. check('after a reload the event is still there', J(await evTexts(15)) === '["18:00 Dentist"]');
207. const html = await (await fetch(BASE + '/', { headers: { cookie: await cookieOf() } })).text();
208. check('the server renders the event into the page for its owner', html.includes('18:00 Dentist'));
209. check('a visitor without login gets no event in the page', !(await (await fetch(BASE + '/')).text()).includes('Dentist'));
211. // edit
212. const aliceEventId = await ev(`document.querySelector(${J(cell(15) + ' button.event')}).value`);
213. await page.click(cell(15) + ' button.event');
214. await page.waitFor(`document.querySelector('#eventeditor').classList.contains('open')`, { label: 'editor opens to edit' });
215. check('a click on an event opens it with its values', (await ev(`[document.querySelector('#f-title').value, document.querySelector('#f-starttime').value, document.querySelector('#f-endtime').value, document.querySelector('#f-place').value, document.querySelector('#f-notes').value].join('|')`)) === 'Dentist|18:00|19:00|Dr. Huber|Bring the insurance card');
216. await setField('#f-title', 'Dentist (moved)');
217. await setField('#f-startdate', day(16));
218. await setField('#f-enddate', day(16));
219. await page.click('#event-save');
220. await page.waitFor(`document.querySelectorAll(${J(cell(16) + ' button.event')}).length === 1`, { label: 'event moved' });
221. check('editing moves and renames the event', J(await evTexts(16)) === '["18:00 Dentist (moved)"]' && (await evTexts(15)).length === 0, J([await evTexts(15), await evTexts(16)]));
223. // all-day, several days
224. await page.click(cell(20));
225. await page.waitFor(`document.querySelector('#eventeditor').classList.contains('open')`, { label: 'editor opens (all day)' });
226. await page.click('#kind-allday');
227. await page.click('#f-title');
228. await page.type('#f-title', 'Vacation');
229. await setField('#f-enddate', day(22));
230. check('all-day hides the time fields', !(await ev(`(() => { const e = document.querySelector('#f-starttime'); return e.offsetWidth > 0; })()`)));
231. await page.click('#event-save');
232. await page.waitFor(`document.querySelectorAll('#month-days button.event').length === 4`, { label: 'three all-day days' });
233. check('an all-day event of three days shows on each day', J([await evTexts(20), await evTexts(21), await evTexts(22), await evTexts(23)]) === '[["Vacation"],["Vacation"],["Vacation"],[]]');
235. // validation: the end before the start is refused with a message, nothing changes
236. await page.click(cell(25));
237. await page.waitFor(`document.querySelector('#eventeditor').classList.contains('open')`, { label: 'editor opens (bad)' });
238. await page.click('#f-title');
239. await page.type('#f-title', 'Backwards');
240. await setField('#f-starttime', '10:00');
241. await setField('#f-endtime', '09:00');
242. await page.click('#event-save');
243. await page.waitFor(`document.querySelector('#formerror').textContent.length > 0`, { label: 'error shows' });
244. check('an end before the start is refused with a message', (await ev(`document.querySelector('#formerror').textContent`)).includes('before the start') && (await evTexts(25)).length === 0 && (await editorOpen()));
245. await page.click('#event-cancel');
246. check('cancel closes the editor', !(await editorOpen()));
248. // paging loads the events of that month
249. await page.click('#month-next');
250. await page.waitFor(`document.querySelector('#month-title').textContent !== ${J(await ev(`document.querySelector('#month-title').textContent`))}`, { label: 'next month' });
251. await page.click('#month-prev');
252. await page.waitFor(`document.querySelectorAll('#month-days button.event').length === 4`, { label: 'events back after paging' });
253. check('paging away and back shows the events again', true);
255. // private: bob sees nothing of alice's and cannot change or delete them
256. const aliceCookie = await cookieOf();
257. await page.click('#logout');
258. await page.waitForSelector('#loginbutton');
259. await sleep(300);
260. await page.goto(BASE + '/');
261. await hydrated();
262. check('after log out no event shows', (await ev(`document.querySelectorAll('#month-days button.event').length`)) === 0);
263. await loginAs(bob);
264. await page.goto(BASE + '/');
265. await hydrated();
266. await sleep(500);
267. check("another identity does not see alice's events", (await ev(`document.querySelectorAll('#month-days button.event').length`)) === 0);
268. const bobCookie = await cookieOf();
269. const del = await emitRaw(bobCookie, 'calDelete', [aliceEventId, day(1), day(28)]);
270. check("another identity cannot delete alice's event", del && del.error === 'no such event', J(del));
271. const chg = await emitRaw(bobCookie, 'calSave', [{ id: aliceEventId, title: 'hacked', allDay: false, startDate: day(16), startTime: '09:00', endDate: '', endTime: '', place: '', notes: '', zone: 'UTC' }, day(1), day(28)]);
272. check("another identity cannot change alice's event", chg && chg.error === 'no such event', J(chg));
273. const rows = await emitRaw(bobCookie, 'calLoad', [day(1), day(28)]);
274. check('another identity loads no events', rows && Array.isArray(rows.events) && rows.events.length === 0, J(rows));
275. // validWindow / soonOf are plain (non-static) members of calendar.hl called from server faces (hybriel #115/#116, mission 048)
276. const badWin = await emitRaw(bobCookie, 'calLoad', ['nope', day(28)]);
277. check('the server refuses a window that is not two dates', badWin && badWin.error === 'not a date', J(badWin));
278. const bad = await emitRaw(bobCookie, 'calSave', [{ title: '', allDay: false, startDate: 'nope', startTime: '09:00', endDate: '', endTime: '', place: '', notes: '', zone: 'UTC' }, day(1), day(28)]);
279. check('the server validates an event strictly', bad && typeof bad.error === 'string' && bad.error.length > 0, J(bad));
281. // alice again: her events are all there; delete one
282. await page.click('#logout');
283. await page.waitForSelector('#loginbutton');
284. await sleep(300);
285. await loginAs(alice);
286. await page.goto(BASE + '/');
287. await hydrated();
288. await page.waitFor(`document.querySelectorAll('#month-days button.event').length === 4`, { label: 'alice events back' });
289. check('logging in again shows her events', J(await evTexts(16)) === '["18:00 Dentist (moved)"]');
290. { const { data } = await page.send('Page.captureScreenshot', { format: 'png' }); writeFileSync(join(SCRATCH, 'gate-events-wide.png'), Buffer.from(data, 'base64')); }
291. await page.click(cell(16) + ' button.event');
292. await page.waitFor(`document.querySelector('#eventeditor').classList.contains('open')`, { label: 'editor opens to delete' });
293. await page.click('#event-delete');
294. await page.waitFor(`document.querySelectorAll(${J(cell(16) + ' button.event')}).length === 0`, { label: 'event deleted' });
295. check('delete removes the event', (await evTexts(16)).length === 0 && !(await editorOpen()) && (await ev(`document.querySelectorAll('#month-days button.event').length`)) === 3);
296. await page.goto(BASE + '/');
297. await hydrated();
298. await sleep(500);
299. check('the deleted event stays gone after a reload', (await ev(`document.querySelectorAll('#month-days button.event').length`)) === 3);
301. await page.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 800, deviceScaleFactor: 1, mobile: true });
302. await sleep(300);
303. await page.click(cell(9));
304. await page.waitFor(`document.querySelector('#eventeditor').classList.contains('open')`, { label: 'editor opens on a phone' });
305. await sleep(200);
306. const { data } = await page.send('Page.captureScreenshot', { format: 'png' });
307. writeFileSync(join(SCRATCH, 'gate-editor-narrow.png'), Buffer.from(data, 'base64'));
308. check('the editor fits a phone (no horizontal overflow)', await ev('document.documentElement.scrollWidth <= window.innerWidth'));
309. // THE INSTALLABLE APP (ticket #3): manifest (served as manifest JSON, installable fields), icons, link, theme colour
310. const mhref = await (async () => { const h = await (await fetch(BASE + '/')).text(); const m = h.match(/<link rel="manifest" href="([^"]+)"/); return m ? m[1] : null; })();
311. check('the page head links the manifest', !!mhref, String(mhref));
312. const mres = await fetch(BASE + (mhref || '/manifest.webmanifest'));
313. const man = await mres.json();
314. check('manifest is served as a web manifest with start_url, standalone display, name', /manifest\+json/.test(mres.headers.get('content-type') || '') && man.start_url === '/' && man.display === 'standalone' && !!man.name);
315. const sizes = [];
316. for (const ic of man.icons) { const r = await fetch(BASE + ic.src); const b = Buffer.from(await r.arrayBuffer()); sizes.push(r.ok && ic.type === 'image/png' && b.readUInt32BE(16) === Number(ic.sizes.split('x')[0])); }
317. check('every icon of the manifest is a real PNG of its declared size (192 and 512, any and maskable)', sizes.length === 4 && sizes.every(Boolean) && man.icons.some(i => i.sizes === '512x512' && i.purpose === 'maskable'));
318. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
319. await page.goto(BASE + '/');
320. await hydrated();
321. // installable: Chrome finds the manifest, and hl:web's own service worker (offline = [ Calendar ]) is registered
322. await page.waitFor(`navigator.serviceWorker.getRegistration().then(r => !!(r && (r.active || r.installing || r.waiting)))`, { label: 'service worker registered' }).catch(() => {});
323. await sleep(1500);
324. const inst = await page.send('Page.getInstallabilityErrors');
325. check('Chrome reports no installability error', (inst.installabilityErrors || []).length === 0, JSON.stringify(inst));
326. check('a service worker is registered for the whole app', await ev(`navigator.serviceWorker.getRegistration().then(r => !!r && new URL(r.scope).pathname === '/')`));
327. check('the page carries the theme colour', (await ev(`document.querySelector('meta[name="theme-color"]').getAttribute('content')`)) === '#191e23');
328. check('no console errors during the event steps', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
329. }
331. // ---- calendar#6 through hybriel #105: the page reads `headers['accept-language']` (no framework patch) ------------------
332. // A fresh tab per language; its Accept-Language is set by CDP and the BROWSER's own language (Intl locale and
333. // navigator.language) is set to the OTHER one, so
334. // the names can only come from the request header. First page (no pointer yet), then two pages forward and one back
335. // with a real pointer: the names stay in the header's language.
336. async function languagePart() {
337. const NAMES = {
338. de: { months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'], days: 'Mo Di Mi Do Fr Sa So' },
339. en: { months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], days: 'Mon Tue Wed Thu Fri Sat Sun' },
340. };
341. for (const [lang, header, other] of [['de', 'de-DE,de;q=0.9,en;q=0.8', 'en-US'], ['en', 'en-US,en;q=0.9,de;q=0.8', 'de-DE']]) {
342. const p = await browser.newPage();
343. try {
344. await p.send('Network.enable');
345. await p.send('Network.setExtraHTTPHeaders', { headers: { 'Accept-Language': header } });
346. await p.send('Emulation.setLocaleOverride', { locale: other });
347. // navigator.language follows the machine (German on Loreana), not the override: pin it to the other language too
348. await p.addInitScript(`Object.defineProperty(Navigator.prototype, 'language', { get: () => ${JSON.stringify(other)} }); Object.defineProperty(Navigator.prototype, 'languages', { get: () => [${JSON.stringify(other)}] });`);
349. await p.goto(BASE + '/', { timeout: 45000 });
350. await p.waitForSelector('#month-title');
351. await p.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated (' + lang + ')' });
352. const t = NAMES[lang];
353. const seen = async () => ({ title: await p.evaluate('document.querySelector("#month-title").textContent'), days: await p.evaluate('[...document.querySelectorAll("#month-weekdays li")].map(l => l.textContent).join(" ")') });
354. const monthOf = (title) => t.months.indexOf(title.replace(/ \d{4}$/, ''));
355. const first = await seen();
356. const m0 = monthOf(first.title);
357. const own = await p.evaluate('navigator.language + " / Intl " + Intl.DateTimeFormat().resolvedOptions().locale');
358. check(`language ${lang}: first page (browser itself: ${own}) has ${lang} names`, m0 >= 0 && first.days === t.days && !own.startsWith(lang) && own.endsWith('Intl ' + other), JSON.stringify(first) + ' ' + own);
359. // the server's own document (before any script): the names are in it
360. const html = await (await fetch(BASE + '/', { headers: { 'accept-language': header } })).text();
361. const days = [...html.matchAll(/<li>([^<]*)<\/li>/g)].map(x => x[1]).slice(0, 7).join(' ');
362. check(`language ${lang}: the server's HTML for Accept-Language ${header} carries ${lang} weekday names`, days === t.days, days);
363. const steps = [['#month-next', 1], ['#month-next', 2], ['#month-prev', 1]];
364. let ok = true, trail = [];
365. for (const [btn, off] of steps) {
366. const before = (await seen()).title;
367. await p.click(btn); // a real pointer: the browser's own language would be read now if the server had not known one
368. await p.waitFor(`document.querySelector("#month-title").textContent !== ${JSON.stringify(before)}`, { label: 'paging ' + lang });
369. const now = await seen();
370. trail.push(now.title + ' / ' + now.days);
371. if (monthOf(now.title) !== (m0 + off) % 12 || now.days !== t.days) ok = false;
372. }
373. check(`language ${lang}: after paging (next, next, prev) the names are still ${lang}`, ok, trail.join(' | '));
374. } finally { await p.close(); }
375. }
376. }
378. // ---- ticket calendar#4: reminders and notifications, also offline -------------------------------------------------
379. async function remindersPart(page, { alice, APPKEY }) {
380. const ev = (e) => page.evaluate(e);
381. const J = JSON.stringify;
382. const pad = (n) => String(n).padStart(2, '0');
383. const hydrated = async () => {
384. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
385. const at = await page.evaluate(`(() => { const r = document.querySelector('#month-title').getBoundingClientRect(); return { x: Math.round(r.x + r.width / 2), y: Math.round(r.y + r.height / 2) }; })()`);
386. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: at.x, y: at.y });
387. await sleep(700);
388. };
389. const setField = (sel, v, type = 'input') => ev(`(() => { const e = document.querySelector(${J(sel)}); e.value = ${J(v)}; e.dispatchEvent(new Event(${J(type)}, { bubbles: true })); })()`);
390. const dateOf = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
391. const timeOf = (d) => `${pad(d.getHours())}:${pad(d.getMinutes())}`;
392. const shown = () => ev(`document.querySelector('#notify-planned').textContent`);
393. const notices = () => ev(`navigator.serviceWorker.getRegistration().then(r => r.getNotifications()).then(l => l.map(n => n.title + '|' + n.body))`);
394. const cell = (d) => `#month-days li:has(time[datetime="${dateOf(d)}"])`;
395. const openEditorOn = async (start) => {
396. await ev(`document.querySelector(${J(cell(start) + ' time')}).click()`); // the day number: an event chip in the middle would edit that event
397. await page.waitFor(`document.querySelector('#eventeditor').classList.contains('open')`, { label: 'editor opens' });
398. await setField('#f-startdate', dateOf(start));
399. await setField('#f-starttime', timeOf(start));
400. await setField('#f-enddate', '');
401. await setField('#f-endtime', '');
402. const t = await ev(`document.querySelector('#f-title').value`);
403. check('a new event starts with an empty title', t === '', J(t));
404. };
405. const addEvent = async (name, start, own) => {
406. await openEditorOn(start);
407. await setField('#f-title', name);
408. if (own) {
409. await page.click('#rem-own');
410. await ev(`document.querySelectorAll('#rem-rows reminder-row button').forEach((b, i) => { if (i > 0) b.click(); })`);
411. await sleep(300);
412. await setField('#rem-rows reminder-row select', 'minutes', 'change');
413. await setField('#rem-rows reminder-row input[type=number]', String(own), 'change');
414. }
415. await page.click('#event-save');
416. await page.waitFor(`!document.querySelector('#eventeditor').classList.contains('open')`, { label: 'editor closed after save', timeout: 15000 });
417. };
418. const wanted = async (titles, ms) => {
419. const t0 = Date.now(); let got = [];
420. while (Date.now() - t0 < ms) { got = await notices(); if (titles.every(t => got.some(g => g.startsWith(t + '|')))) return got; await sleep(2000); }
421. return got;
422. };
424. await page.send('Browser.grantPermissions', { origin: BASE, permissions: ['notifications'] });
425. const code = await ident.selectorCode(alice, APPKEY, BASE);
426. await page.goto(BASE + '/login/callback?ident_code=' + code);
427. await page.waitForSelector('#logout');
428. await hydrated();
429. await page.waitFor(`navigator.serviceWorker.getRegistration().then(r => !!(r && r.active))`, { label: 'service worker active', timeout: 30000 });
430. check('reminders: notifications are allowed, so no "Turn on notifications" button', await ev(`document.querySelector('#notify-ask').classList.contains('hidden')`) && await ev(`document.querySelector('#notify-blocked').classList.contains('hidden')`));
432. // THE CALENDAR SETTINGS: the defaults are 1 hour before and the day before at 20:00
433. await page.click('#settings-open');
434. await page.waitFor(`document.querySelector('#settingseditor').classList.contains('open') && document.querySelectorAll('#set-rows reminder-row').length === 2`, { label: 'settings open with two rows' });
435. const rowsOf = (sel) => ev(`[...document.querySelectorAll(${J(sel + ' reminder-row')})].map(r => [r.querySelector('input[type=number]').value, r.querySelector('select').value, r.querySelector('input[type=time]').value].join(' '))`);
436. const first = await rowsOf('#set-rows');
437. check('settings: the default reminders are 1 hour before and the day before at 20:00', first[0] === '1 hours 09:00' && first[1] === '1 days 20:00', J(first));
438. await page.click('#set-cancel');
440. // THE TICKET'S FIRST TEST: an event 70 minutes from now — with the defaults, one reminder (1 hour before) is planned
441. const in70 = new Date(Date.now() + 70 * 60000);
442. await addEvent('Bus to the lake', in70);
443. const dayBefore = new Date(in70.getFullYear(), in70.getMonth(), in70.getDate() - 1, 20, 0, 0).getTime() > Date.now() ? 1 : 0;
444. await page.waitFor(`document.querySelector('#notify-planned').textContent.length > 0`, { label: 'reminders planned' });
445. const want = 1 + dayBefore;
446. check('an event 70 minutes ahead gets the default reminders planned', (await shown()) === (want === 1 ? '1 reminder set for the next 7 days' : want + ' reminders set for the next 7 days'), await shown());
448. // an event in another time zone: 30 minutes ahead in Tokyo → its 1-hour reminder is already past, whatever this browser's zone
449. const tokyo = (t) => new Intl.DateTimeFormat('sv-SE', { timeZone: 'Asia/Tokyo', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }).format(t).replace(' ', 'T');
450. const browserZone = await ev('Intl.DateTimeFormat().resolvedOptions().timeZone');
451. const tk = tokyo(new Date(Date.now() + 30 * 60000));
452. const cookie = (await page.cookies([BASE])).map(c => c.name + '=' + c.value).join('; ');
453. const win = [dateOf(new Date(Date.now() - 86400000)), dateOf(new Date(Date.now() + 86400000 * 5))];
454. const emitRaw = async (event, payload) => {
455. const r = await fetch(BASE + '/__hl/emit', { method: 'POST', headers: { 'content-type': 'application/json', cookie }, body: J({ t: 'emit', i: 1, event, payload }) });
456. const j = JSON.parse(await r.text()); return j.value;
457. };
458. const tkHour = Number(tk.slice(11, 13));
459. if (browserZone !== 'Asia/Tokyo' && tkHour < 19) {
460. const saved = await emitRaw('calSave', [{ title: 'Tokyo call', allDay: false, startDate: tk.slice(0, 10), startTime: tk.slice(11, 16), endDate: '', endTime: '', place: '', notes: '', zone: 'Asia/Tokyo', custom: false, reminders: [] }, win[0], win[1]]);
461. await page.goto(BASE + '/');
462. await hydrated();
463. await sleep(500);
464. check('a time zone is honoured: 30 minutes ahead in Tokyo has no 1-hour reminder left', (await shown()) === (want === 1 ? '1 reminder set for the next 7 days' : want + ' reminders set for the next 7 days') && !saved.error, (await shown()) + ' ' + J(saved && saved.error));
465. } else { console.log('skip Tokyo zone check (browser in Tokyo, or Tokyo evening)'); }
467. // OWN REMINDERS: switch to "Own", the calendar's two rows are the start; drop one; it is kept
468. const later = new Date(Date.now() + 5 * 3600000);
469. await openEditorOn(later);
470. await setField('#f-title', 'Own reminders');
471. check('the editor offers "Calendar\'s" reminders first, in words', (await ev(`document.querySelector('#rem-default-text').textContent`)) === '1 hour before, the day before at 20:00');
472. await page.click('#rem-own');
473. await page.waitFor(`document.querySelectorAll('#rem-rows reminder-row').length === 2`, { label: 'own rows start from the calendar\'s' });
474. await page.click('#rem-add');
475. await page.waitFor(`document.querySelectorAll('#rem-rows reminder-row').length === 3`, { label: 'row added' });
476. await setField('#rem-rows reminder-row:nth-child(3) input[type=number]', '15', 'change');
477. await ev(`document.querySelector('#rem-rows reminder-row:nth-child(2) button').click()`);
478. await page.waitFor(`document.querySelectorAll('#rem-rows reminder-row').length === 2`, { label: 'row removed' });
479. const own = await rowsOf('#rem-rows');
480. check('own reminders: add, change and remove a row', own[0] === '1 hours 09:00' && own[1] === '15 minutes 09:00', J(own));
481. await page.click('#event-save');
482. await page.waitFor(`!document.querySelector('#eventeditor').classList.contains('open')`, { label: 'saved' });
483. await page.goto(BASE + '/');
484. await hydrated();
485. await page.click(`${cell(later)} button.event:last-child`).catch(() => {});
486. await sleep(300);
487. const evList = await emitRaw('calLoad', [win[0], win[1]]);
488. const stored = (evList.events || []).find(e => e.title === 'Own reminders');
489. check('the server keeps the own reminders as WorldAPI $reminders rows', stored && stored.custom === true && stored.rows.length === 2 && stored.rows[1].unit === 'minutes' && stored.rows[1].n === '15', J(stored));
490. const plain = (evList.events || []).find(e => e.title === 'Bus to the lake');
491. check('an event without its own reminders inherits (custom = false)', plain && plain.custom === false, J(evList.events));
492. check('calLoad answers the soon list (soonOf, a plain member called from a face)', Array.isArray(evList.soon) && evList.soon.length > 0, J(evList.soon));
493. const bad = await emitRaw('calSave', [{ title: 'x', allDay: false, startDate: dateOf(later), startTime: '10:00', endDate: '', endTime: '', place: '', notes: '', zone: 'UTC', custom: true, reminders: [{ unit: 'minutes', n: '-5', time: '' }] }, win[0], win[1]]);
494. check('a bad reminder is refused by the server', bad && bad.error, J(bad));
495. const badSet = await emitRaw('calSettingsSave', [[{ unit: 'weeks', n: '1', time: '' }]]);
496. check('bad default reminders are refused', badSet && badSet.error, J(badSet));
498. // SETTINGS SAVED: only "1 minute before"
499. await page.goto(BASE + '/');
500. await hydrated();
501. await page.click('#settings-open');
502. await page.waitFor(`document.querySelectorAll('#set-rows reminder-row').length === 2`, { label: 'settings rows' });
503. await ev(`document.querySelector('#set-rows reminder-row:nth-child(2) button').click()`);
504. await page.waitFor(`document.querySelectorAll('#set-rows reminder-row').length === 1`, { label: 'one row' });
505. await setField('#set-rows reminder-row select', 'minutes', 'change');
506. await setField('#set-rows reminder-row input[type=number]', '1', 'change');
507. await page.click('#set-save');
508. await page.waitFor(`!document.querySelector('#settingseditor').classList.contains('open')`, { label: 'settings saved' });
509. await page.goto(BASE + '/');
510. await hydrated();
511. await page.click('#settings-open');
512. await page.waitFor(`document.querySelectorAll('#set-rows reminder-row').length === 1`, { label: 'settings reload' });
513. check('settings are kept: 1 minute before', J(await rowsOf('#set-rows')) === '["1 minutes 09:00"]', J(await rowsOf('#set-rows')));
514. await page.click('#set-cancel');
516. // NOTIFICATIONS ON TIME: A inherits (1 minute before the start), B has its own (2 minutes before)
517. await addEvent('Inherits the default', new Date(Date.now() + 3 * 60000));
518. await addEvent('Has its own reminder', new Date(Date.now() + 4 * 60000), 2);
519. check('reminders are planned for both', Number((await shown()).split(' ')[0]) >= 4, await shown());
520. const got = await wanted(['Inherits the default', 'Has its own reminder'], 240000);
521. check('the notifications came on time, the default one saying "Starts in 1 minute"', got.includes('Inherits the default|Starts in 1 minute') && got.some(g => g.startsWith('Has its own reminder|Starts in 2 minutes')), J(got));
523. // OFFLINE: the server is gone; an event with a reminder is added anyway and its notification still comes
524. server.kill('SIGTERM');
525. await new Promise(r => { server.once('exit', r); setTimeout(r, 3000); });
526. await page.waitFor(`window.__hl.socket == null || window.__hl.socket.readyState !== 1`, { label: 'socket closed', timeout: 20000 });
527. // the count only holds reminders still to come (the ones that fired are gone once the page counts again): the three
528. // still waiting (Bus to the lake, the two of Own reminders) plus the new one; that it FIRES is the next check
529. await addEvent('Added offline', new Date(Date.now() + 3 * 60000));
530. check('offline: the event shows on its day and its reminder is planned', Number((await shown()).split(' ')[0]) >= 4, await shown());
531. const got2 = await wanted(['Added offline'], 200000);
532. check('offline: the notification still comes', got2.some(g => g.startsWith('Added offline|Starts in 1 minute')), J(got2));
533. // back online: the queued save reaches the server
534. spawnServer();
535. let saved = false;
536. for (let i = 0; i < 60 && !saved; i++) {
537. await sleep(1500);
538. try { const l = await emitRaw('calLoad', [win[0], win[1]]); saved = (l.events || []).some(e => e.title === 'Added offline'); } catch {}
539. }
540. check('back online: the event saved while offline reaches the server', saved);
541. check('no console errors in the reminder steps', page.problems().filter(m => !/favicon|Failed to load resource|WebSocket|ERR_|calSave did not reach/.test(m.text)).length === 0, page.dumpConsole());
542. }
544. try { await main(); } catch (e) { check('gate ran', false, String(e && e.stack || e)); }
545. if (failures) console.log('---- server log (tail)\n' + log.slice(-3000) + (lastPage ? '\n---- browser console\n' + lastPage.dumpConsole() : ''));
546. await stop();
547. console.log(`${passes} passed, ${failures} failed`);
548. process.exit(failures ? 1 : 0);