components

71.3 KB

1. // tests/browser.mjs — THE GATE of components.hybriel.worldapi.org: its own server, real headless Chrome.
2. // node tests/browser.mjs (COMPONENTS_GATE_PORT server, default 8700; COMPONENTS_GATE_CHROME "8701-8709" = Chrome debug ports)
3. // Screenshots (390 / 1280 px) land in .scratch/gate-*.png. Every process started is stopped by PID.
4. import { spawn, execSync } from 'node:child_process';
5. import { writeFileSync, existsSync, mkdirSync, rmSync } from 'node:fs';
6. import { dirname, join, resolve } from 'node:path';
7. import { fileURLToPath } from 'node:url';
8. import { launchBrowser } from './cdp.mjs';
10. if (!process.env.HL_CHROME && existsSync('/opt/google/chrome/chrome')) process.env.HL_CHROME = '/opt/google/chrome/chrome';
11. const HERE = dirname(fileURLToPath(import.meta.url));
12. const APP = resolve(HERE, '..');
13. const PORT = Number(process.env.COMPONENTS_GATE_PORT || 8700);
14. const [CH_FROM, CH_TO] = (process.env.COMPONENTS_GATE_CHROME || '8701-8709').split('-').map(Number);
15. const BASE = `http://127.0.0.1:${PORT}`;
16. const SCRATCH = join(APP, '.scratch');
17. const SESSIONS = join(SCRATCH, 'gate-sessions');
18. rmSync(SESSIONS, { recursive: true, force: true });
19. mkdirSync(SESSIONS, { recursive: true });
21. let failures = 0, passes = 0;
22. function check(label, ok, detail = '') {
23. console.log(`${ok ? 'ok ' : 'FAIL'} ${label}${ok ? '' : ' — ' + detail}`);
24. if (ok) passes++; else failures++;
25. }
26. const sleep = (ms) => new Promise(r => setTimeout(r, ms));
27. let log = '', server = null, browser = null;
29. async function stop() {
30. if (browser) { try { await browser.close(); } catch {} browser = null; }
31. await stopServer();
32. }
33. // the server alone goes down and up again in the offline checks (mission 046)
34. async function stopServer() {
35. if (server) {
36. try { server.kill('SIGTERM'); } catch {}
37. await new Promise(r => { if (server.exitCode !== null || server.signalCode !== null) return r(); server.once('exit', r); setTimeout(r, 3000); });
38. server = null;
39. }
40. }
41. async function startServer() {
42. server = spawn(join(APP, 'bin/hybriel'), ['project.hl'], { cwd: APP, env: { ...process.env, COMPONENTS_PORT: String(PORT), COMPONENTS_SESSIONS: SESSIONS + '/', COMPONENTS_WATCH: '0' }, stdio: ['ignore', 'pipe', 'pipe'] });
43. server.stdout.on('data', d => log += d); server.stderr.on('data', d => log += d);
44. for (let i = 0; ; i++) {
45. try { if ((await fetch(BASE + '/')).ok) break; } catch {}
46. if (i > 80) throw new Error('server did not come up\n' + log);
47. await sleep(250);
48. }
49. }
51. async function main() {
52. await startServer();
54. // the home lists the component; its README is served
55. const home = await (await fetch(BASE + '/')).text();
56. check('no month-view.js served', (await fetch(BASE + '/month-view/month-view.js')).status === 404 && !existsSync(join(APP, 'components/month-view/month-view.js')));
57. check('home lists the month view', home.includes('id="open-month-view"'));
58. check('home shows only the list, no component embedded (creator 2026-09-25)', !home.includes('<month-view'));
59. const readme = await fetch(BASE + '/month-view/README.md');
60. check('README is served as Markdown', readme.ok && /markdown/.test(readme.headers.get('content-type')) && (await readme.text()).includes('Month view'));
61. // first render on the server: 6 weeks of 7 days, one today
62. const demo = await (await fetch(BASE + '/month-view')).text();
63. check('server renders 42 days and one today', (demo.match(/<li class=/g) || []).length === 42 && (demo.match(/class="today"/g) || []).length === 1);
65. browser = await launchBrowser({ debugPortRange: [CH_FROM, CH_TO] });
66. const page = await browser.newPage();
67. const SLOW = 3;
68. const goto = page.goto.bind(page);
69. page.goto = (u, o = {}) => goto(u, { ...o, timeout: 15000 * SLOW });
70. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
71. // a zone already on the next day (UTC+14) compared with the server's UTC date: the visitor's today must win (ticket #11)
72. await page.send('Emulation.setTimezoneOverride', { timezoneId: 'Pacific/Kiritimati' });
73. await page.goto(BASE + '/month-view');
74. // the month view's own demo page (the home only lists the components)
75. await page.waitForSelector('#month-title');
76. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
78. const shot = async (name) => { const { data } = await page.send('Page.captureScreenshot', { format: 'png' }); writeFileSync(join(SCRATCH, `gate-${name}.png`), Buffer.from(data, 'base64')); };
79. const ev = (e) => page.evaluate(e);
80. const title = () => ev('document.querySelector("#month-title").textContent');
81. 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()); })()`);
82. const expectTitle = (y, m) => ev(`new Intl.DateTimeFormat(navigator.language, { month: 'long' }).format(new Date(Date.UTC(${y}, ${m - 1}, 15, 12))) + ' ${y}'`);
83. const [ty, tm] = localToday.split('-').map(Number);
85. // the browser's today and language arrive at load, with no pointer needed
86. await page.waitFor(`!!document.querySelector('li.today time') && document.querySelector('li.today time').getAttribute('datetime') === ${JSON.stringify(localToday)}`, { label: 'browser today marked at load' });
87. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: 300, y: 200 });
88. await page.waitFor(`document.querySelector("#month-title").textContent.toLowerCase() === (${JSON.stringify(await expectTitle(ty, tm))}).toLowerCase()`, { label: 'title in the browser language' });
89. check('title is the current month and year in the browser language', true);
90. check('today is marked (browser date)', (await ev(`document.querySelector('li.today time').getAttribute('datetime')`)) === localToday, localToday);
91. check('42 days, 6 weeks', (await ev('document.querySelectorAll("#month-days li").length')) === 42);
92. const t0 = await title();
94. // next / prev
95. await page.click('#month-next');
96. await page.waitFor(`document.querySelector("#month-title").textContent !== ${JSON.stringify(t0)}`, { label: 'next month' });
97. const nm = tm === 12 ? 1 : tm + 1, ny = tm === 12 ? ty + 1 : ty;
98. await page.waitFor(`document.querySelector('#month-title').textContent.toLowerCase() === ${JSON.stringify((await expectTitle(ny, nm)).toLowerCase())}`, { label: 'next month in the browser language' });
99. check('next shows the next month', true);
100. await page.click('#month-prev');
101. await page.waitFor(`document.querySelector("#month-title").textContent === ${JSON.stringify(t0)}`, { label: 'prev month' });
102. check('prev returns to the month, today marked again', (await ev('document.querySelectorAll("li.today").length')) === 1);
104. // walk to February 2028 (leap year) and check its days and its first weekday (Tuesday)
105. let guard = 0;
106. const feb28 = (await expectTitle(2028, 2)).toLowerCase();
107. while ((await title()).toLowerCase() !== feb28 && guard++ < 40) {
108. const before = await title();
109. await page.click('#month-next');
110. await page.waitFor(`document.querySelector("#month-title").textContent !== ${JSON.stringify(before)}`, { label: 'paging' });
111. }
112. 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 }; })()`);
113. check('Feb 2028: 29 days, the 1st is a Tuesday (column 2)', feb.n === 29 && feb.col === 1, JSON.stringify(feb));
114. // year rollover: go back to December 2027 and January 2028 by prev
115. await page.click('#month-prev');
116. await page.click('#month-prev');
117. const dec27 = (await expectTitle(2027, 12)).toLowerCase();
118. await page.waitFor(`document.querySelector("#month-title").textContent.toLowerCase() === ${JSON.stringify(dec27)}`, { label: 'back to December' });
119. 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 }))()`);
120. check('Dec 2027: 31 days, the 1st is a Wednesday', dec.n === 31 && dec.col === 2, JSON.stringify(dec));
121. check('no console errors', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
123. // the date picker: click the field, pick a day, the value is YYYY-MM-DD; typing works
124. check('home lists the date picker', home.includes('id="open-date-picker"'));
125. check('date picker README is served', (await fetch(BASE + '/date-picker/README.md')).ok);
126. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
127. await page.goto(BASE + '/date-picker');
128. await page.waitForSelector('date-picker input');
129. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
130. await sleep(1500);
131. check('the date picker page loads no script file of its own', (await ev(`[...document.scripts].filter(s => s.src && !s.src.includes('__hl')).length`)) === 0);
132. const pop = (n) => `getComputedStyle(document.querySelectorAll('date-picker picker-popup')[${n}]).display !== 'none'`;
133. const val = (n) => ev(`document.querySelectorAll('date-picker input')[${n}].value`);
134. const realClick = async (sel) => {
135. const r = await ev(`(() => { const b = document.querySelector(${JSON.stringify(sel)}).getBoundingClientRect(); return { x: b.x + b.width / 2, y: b.y + b.height / 2 }; })()`);
136. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: r.x, y: r.y, button: 'none' });
137. await sleep(120);
138. await page.send('Input.dispatchMouseEvent', { type: 'mousePressed', x: r.x, y: r.y, button: 'left', clickCount: 1 });
139. await sleep(100);
140. await page.send('Input.dispatchMouseEvent', { type: 'mouseReleased', x: r.x, y: r.y, button: 'left', clickCount: 1 });
141. await sleep(700);
142. };
143. const typeInto = async (n, text) => {
144. await ev(`document.querySelectorAll('date-picker input')[${n}].focus()`);
145. await ev(`document.querySelectorAll('date-picker input')[${n}].select()`);
146. await page.send('Input.insertText', { text });
147. await sleep(400);
148. };
149. check('two fields with their names', (await ev(`[...document.querySelectorAll('date-picker input')].map(i => i.name).join()`)) === 'arrival,departure');
150. check('the month is closed at first', !(await ev(pop(0))) && !(await ev(pop(1))));
151. await realClick('date-picker input[name=arrival]');
152. await page.waitFor(pop(0), { label: 'popup open' });
153. check('click on the field opens the month under it', (await ev(pop(0))) && !(await ev(pop(1))));
154. const pos = await ev(`(() => { const f = document.querySelectorAll('date-picker input')[0].getBoundingClientRect(), p = document.querySelectorAll('date-picker picker-popup')[0].getBoundingClientRect(); return { dx: Math.abs(p.left - f.left), dy: p.top - f.bottom }; })()`);
155. check('the month sits right under the field', pos.dx < 2 && pos.dy >= 0 && pos.dy < 12, JSON.stringify(pos));
156. await ev(`document.querySelector('date-picker input[name=arrival]').__mark = 1`);
157. await realClick('date-picker date-field:nth-child(1) ol.days li:not(.outside) time[datetime$="-15"]');
158. const picked = await val(0);
159. check('the field element is the same one after picking (not re-created)', (await ev(`document.querySelector('date-picker input[name=arrival]').__mark`)) === 1);
160. check('a picked day is in the field as YYYY-MM-DD', /^\d{4}-\d{2}-15$/.test(picked), picked);
161. check('the month closes after picking', !(await ev(pop(0))));
162. // the month arrows page
163. await realClick('date-picker input[name=departure]');
164. await page.waitFor(pop(1), { label: 'popup open 2' });
165. const dt0 = await ev(`document.querySelectorAll('date-picker h2')[1].textContent`);
166. await realClick('date-picker date-field:nth-child(2) button.next');
167. check('the next-month arrow changes the month', (await ev(`document.querySelectorAll('date-picker h2')[1].textContent`)) !== dt0);
168. await realClick('date-picker date-field:nth-child(2) ol.days li:not(.outside) time[datetime$="-20"]');
169. check('the second field gets its own day, the first keeps its', /^\d{4}-\d{2}-20$/.test(await val(1)) && (await val(0)) === picked, await val(1));
170. // typing: a date in another month opens on that month and is marked
171. await typeInto(0, '2028-02-29');
172. check('typing works: the field holds the typed date', (await val(0)) === '2028-02-29', await val(0));
173. check('a typed date shows its month and is marked', (await ev(`document.querySelectorAll('date-picker date-field')[0].querySelector('li.selected time').getAttribute('datetime')`)) === '2028-02-29');
174. await typeInto(0, '2027-02-30');
175. check('an impossible date marks the field invalid', (await ev(`document.querySelectorAll('date-picker input')[0].getAttribute('aria-invalid')`)) === 'true');
176. await typeInto(0, '2028-02-29');
177. await sleep(300); await shot('picker');
178. await page.send('Input.dispatchKeyEvent', { type: 'keyDown', key: 'Escape', code: 'Escape', windowsVirtualKeyCode: 27 });
179. await sleep(300);
180. check('Escape closes the month', !(await ev(pop(0))));
181. await realClick('h1'); await sleep(200);
182. // the form posts both fields by name
183. await ev(`document.querySelector('date-picker-demo form button[type=submit]').click()`);
184. await page.waitFor(`location.search.includes('arrival=2028-02-29')`, { label: 'form posted' });
185. check('the form posts both fields by name', /arrival=2028-02-29&departure=\d{4}-\d{2}-20/.test(await ev('location.search')), await ev('location.search'));
186. check('no console errors on the date picker page', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
188. // the date range picker: a start click, an end click, both in the field, the days between highlighted
189. check('home lists the range picker', home.includes('id="open-range-picker"'));
190. check('range picker README is served', (await fetch(BASE + '/range-picker/README.md')).ok);
191. await page.goto(BASE + '/range-picker');
192. await page.waitForSelector('#range-picker-input');
193. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
194. await sleep(1500);
195. const rvis = () => ev(`getComputedStyle(document.querySelector('range-picker picker-popup')).display !== 'none'`);
196. const rval = () => ev(`document.getElementById('range-picker-input').value`);
197. const day = (n) => ev(`document.querySelector('range-picker ol.days li:not(.outside) time[datetime$="-${n}"]').closest('li').click()`);
198. check('range: month is closed at first', !(await rvis()));
199. await page.click('#range-picker-input');
200. await page.waitFor(`getComputedStyle(document.querySelector('range-picker picker-popup')).display !== 'none'`, { label: 'popup open' });
201. await day('20');
202. check('range: the first click is the start, the month stays open', /^\d{4}-\d{2}-20 – $/.test(await rval()) && await rvis(), await rval());
203. await day('10');
204. const rv = await rval();
205. check('range: second (earlier) click swaps: start – end in the field', /^\d{4}-\d{2}-10 – \d{4}-\d{2}-20$/.test(rv), rv);
206. await sleep(500);
207. check('range: the month closes after the end', !(await rvis()));
208. await page.click('#range-picker-input');
209. await page.waitFor(`getComputedStyle(document.querySelector('range-picker picker-popup')).display !== 'none'`, { label: 'popup reopen' });
210. const hl = await ev(`(() => ({ sel: [...document.querySelectorAll('range-picker li.selected time')].map(t => t.textContent), between: [...document.querySelectorAll('range-picker li.between time')].map(t => t.textContent) }))()`);
211. check('range: start and end marked, the 9 days between highlighted', hl.sel.join() === '10,20' && hl.between.length === 9, JSON.stringify(hl));
212. await shot('range');
213. await ev(`(() => { const f = document.getElementById('range-picker-input'); f.focus(); f.value = '2028-02-01 – 2028-02-29'; f.dispatchEvent(new Event('input', { bubbles: true })); })()`);
214. await page.waitFor(`document.querySelectorAll('range-picker li.between').length === 27`, { label: 'typed range marked' });
215. check('range: a typed range shows its month, 27 days between', true);
216. await ev(`(() => { const f = document.getElementById('range-picker-input'); f.value = '2028-02-01 – 2028-02-30'; f.dispatchEvent(new Event('input', { bubbles: true })); })()`);
217. await page.waitFor(`document.getElementById('range-picker-input').getAttribute('aria-invalid') === 'true'`, { label: 'impossible range marked' });
218. check('range: an impossible range marks the field invalid', true);
219. await ev(`(() => { const f = document.getElementById('range-picker-input'); f.value = '2028-02-01 – 2028-02-29'; f.dispatchEvent(new Event('input', { bubbles: true })); })()`);
220. await page.waitFor(`document.getElementById('range-picker-input').getAttribute('aria-invalid') === 'false'`, { label: 'valid again' });
221. await ev(`document.querySelector('form button[type=submit]').click()`);
222. await page.waitFor(`location.search.length > 0`, { label: 'form posted' });
223. const q = decodeURIComponent(await ev(`location.search`)).replace(/\+/g, ' ');
224. check('range: the form posts the period by the field name', q.includes('range=2028-02-01 – 2028-02-29'), q);
225. check('range picker has no .js file', !existsSync(join(APP, 'components/range-picker/range-picker.js')));
226. check('no console errors on the range picker page', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
228. // ticket #4: the one-file upload (pure Hybriel): choose / drop -> name, size, progress -> listed; the app stores it
229. {
230. check('home lists the file upload', home.includes('id="open-file-upload"'));
231. check('file upload README is served', (await fetch(BASE + '/file-upload/README.md')).ok);
232. check('file upload has no .js file', !existsSync(join(APP, 'components/file-upload/file-upload.js')));
233. check('no component file uses XMLHttpRequest or fetch(', !execSync(`grep -rlE "XMLHttpRequest|fetch\\(" ${join(APP, 'components')} || true`).toString().trim(), execSync(`grep -rnE "XMLHttpRequest|fetch\\(" ${join(APP, 'components')} || true`).toString());
234. await page.goto(BASE + '/file-upload');
235. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
236. await sleep(600);
237. const FU = (s) => `document.querySelector('file-upload ${s}')`;
238. const mk = (name, n) => `const dt = new DataTransfer(); dt.items.add(new File([new Uint8Array(${n}).fill(66)], '${name}', { type: 'text/plain' }));`;
239. await ev(`(() => { window.__max = 0; const bar = ${FU('progress')}; new MutationObserver(() => { if (bar.max > 1) window.__max = Math.max(window.__max, bar.value / bar.max) }).observe(bar, { attributes: true }); ${mk('report.txt', 3145728)} ${FU('drop-zone')}.dispatchEvent(new DragEvent('drop', { dataTransfer: dt, bubbles: true, cancelable: true })); })()`);
240. await page.waitFor(`${FU('.state')}.textContent === 'Uploaded'`, { timeout: 30000, label: 'uploaded' });
241. check('upload: name and size shown', (await ev(FU('.name') + '.textContent')) === 'report.txt' && (await ev(FU('.size') + '.textContent')) === '3.0 MB');
242. check('upload: progress bar reaches 100%', (await ev(FU('progress') + '.value')) === 100 && (await ev('window.__max')) >= 1);
243. check('upload: listed under Uploaded', (await ev(FU('ul.uploaded li') + '.textContent')) === 'report.txt — 3.0 MB');
244. const stored = execSync(`ls -l ${join(APP, 'storage/uploads')} | grep -c ' 3145728 '`).toString().trim();
245. check('upload: the app stored all bytes', Number(stored) >= 1, stored);
246. // choosing a second file (input) adds a second row
247. const { root } = await page.send('DOM.getDocument');
248. const { nodeId } = await page.send('DOM.querySelector', { nodeId: root.nodeId, selector: 'file-upload input[type=file]' });
249. writeFileSync(join(SCRATCH, 'pick.txt'), 'hello');
250. await page.send('DOM.setFileInputFiles', { files: [join(SCRATCH, 'pick.txt')], nodeId });
251. await page.waitFor(`document.querySelectorAll('file-upload ul.uploaded li').length === 2`, { timeout: 30000, label: 'chosen file listed' });
252. check('choose: second file shown and listed', (await ev(FU('.name') + '.textContent')) === 'pick.txt' && (await ev(FU('ul.uploaded li:nth-child(2)') + '.textContent')) === 'pick.txt — 5 B');
253. check('upload: no console errors', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
254. await page.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 800, deviceScaleFactor: 1, mobile: true });
255. await sleep(300); await shot('file-upload-narrow');
256. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
257. await sleep(200); await shot('file-upload');
258. }
260. // the pagination: 89 pages; the ticket's three shapes
261. check('home lists the pagination', home.includes('id="open-pagination"'));
262. check('pagination README is served', (await fetch(BASE + '/pagination/README.md')).ok);
263. await page.goto(BASE + '/pagination');
264. await page.waitForSelector('#pagination-items');
265. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
266. await sleep(500);
267. const pg = () => ev(`[...document.querySelectorAll('#pagination-items button')].map(b => b.textContent).join(' ')`);
268. const clickPg = (t) => ev(`[...document.querySelectorAll('#pagination-items button')].find(b => b.textContent === ${JSON.stringify(t)}).click()`);
269. const waitPg = (t) => page.waitFor(`[...document.querySelectorAll('#pagination-items button')].map(b => b.textContent).join(' ') === ${JSON.stringify(t)}`, { label: 'pagination ' + t });
270. check('pagination: first page shows 1 2 3 4 … 89 Next', (await pg()) === '1 2 3 4 … 89 Next', await pg());
271. await clickPg('4'); await waitPg('Previous 1 2 3 4 5 … 89 Next');
272. check('pagination: page 4 fills a one-page gap: Previous 1 2 3 4 5 … 89 Next', true);
273. await clickPg('5'); await waitPg('Previous 1 … 4 5 6 … 89 Next'); await clickPg('6'); await waitPg('Previous 1 … 5 6 7 … 89 Next'); await clickPg('7');
274. await waitPg('Previous 1 … 6 7 8 … 89 Next');
275. check('pagination: middle shows first, last, current ± 1', true);
276. check('pagination: current page is marked', (await ev(`document.querySelector('#pagination-items li.current button').textContent`)) === '7');
277. await ev(`document.querySelector('#pagination-items li.gap button').click()`); await sleep(300);
278. check('pagination: a click on … does nothing', (await pg()) === 'Previous 1 … 6 7 8 … 89 Next');
279. await clickPg('Previous'); await waitPg('Previous 1 … 5 6 7 … 89 Next');
280. check('pagination: Previous goes back one page', true);
281. await clickPg('89'); await waitPg('Previous 1 … 86 87 88 89');
282. check('pagination: last page shows Previous 1 … 86 87 88 89, no Next', true);
283. await clickPg('1'); await waitPg('1 2 3 4 … 89 Next');
284. check('pagination: back on page 1 no Previous', true);
285. await shot('pagination');
286. check('no console errors on the pagination page', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
288. // the Markdown editor: two on one page, real typing and real clicks
289. check('home lists the Markdown editor', home.includes('id="open-md-editor"'));
290. const mdr = await fetch(BASE + '/md-editor/README.md');
291. check('Markdown editor README is served as Markdown', mdr.ok && /markdown/.test(mdr.headers.get('content-type')) && (await mdr.text()).includes('Markdown editor'));
292. check('no .js of its own in components/md-editor', !existsSync(join(APP, 'components/md-editor')) || !execSync(`find ${join(APP, 'components/md-editor')} -name '*.js' -o -name '*.mjs'`).toString().trim());
293. await page.send('Emulation.setDeviceMetricsOverride', { width: 1000, height: 1000, deviceScaleFactor: 1, mobile: false });
294. await page.goto(BASE + '/md-editor');
295. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
296. const ED = 'md-editor:nth-of-type(1)';
297. const md1 = (q) => `document.querySelectorAll('md-editor')[0].${q}`;
298. const md2 = (q) => `document.querySelectorAll('md-editor')[1].${q}`;
299. const val1 = () => ev(md1(`querySelector('input.value').value`));
300. const val2 = () => ev(md2(`querySelector('input.value').value`));
301. const art1 = () => ev(md1(`querySelector('article').innerHTML`));
302. await page.waitFor(md1(`querySelector('article h1')`) + ' !== null', { label: 'the value shows formatted' });
303. check('a value shows formatted: heading, bold, italic, code, link, list', (await art1()) === '<h1>Hello</h1><p>Some <strong>bold</strong> and <em>italic</em> text with <code>code</code> and a <a href="https://example.com">link</a>.</p><ul><li>first</li><li>second</li></ul>', await art1());
304. check('an untouched value is the same Markdown', (await val1()) === '# Hello\n\nSome **bold** and *italic* text with `code` and a [link](https://example.com).\n\n- first\n- second', await val1());
305. check('the canonical form of the value equals it (round trip)', await ev(md1(`mdCanon`) + ` === ` + md1(`querySelector('input.value').value`)));
306. check('the second editor is empty and shows its placeholder', (await ev(`getComputedStyle(document.querySelectorAll('md-editor')[1].querySelector('.placeholder')).display`)) === 'block');
307. const key = async (k, code, vk, text) => { await page.send('Input.dispatchKeyEvent', { type: 'keyDown', key: k, code, windowsVirtualKeyCode: vk, text }); await page.send('Input.dispatchKeyEvent', { type: 'keyUp', key: k, code, windowsVirtualKeyCode: vk }); };
308. const typeText = async (t) => { for (const ch of t) await key(ch, '', undefined, ch); };
309. const enter = () => key('Enter', 'Enter', 13, '\r');
310. // type into the second editor: heading, bold, code, list
311. await page.click('md-editor:nth-of-type(2) article');
312. check('the placeholder goes away when it has text', true);
313. await typeText('# Title'); await typeText(' '); await typeText('here'); await enter();
314. await typeText('a **bold** and `code` x'); await enter();
315. check('typing "# " makes a heading while you type', (await ev(md2(`querySelector('article h1')`) + ' !== null')));
316. const html2 = await ev(md2(`querySelector('article').innerHTML`));
317. check('typing **x** and `x` formats them', /<strong>bold<\/strong>/.test(html2) && /<code>code<\/code>/.test(html2), html2);
318. await typeText('- '); await sleep(100);
319. check('typing "- " makes a list', (await ev(md2(`querySelector('article ul')`) + ' !== null')));
320. await typeText('item one'); await enter(); await typeText('item two');
321. await sleep(400);
322. const v2 = await val2();
323. check('the value is plain Markdown of what you typed', v2.startsWith('# Title here\n\na **bold** and `code` x\n\n') && /- item one\n- item two$/.test(v2), JSON.stringify(v2));
324. check('the demo shows that value below the editor', (await ev(`document.getElementById('md-value-summary').textContent`)) === v2);
325. check('the first editor was not touched by typing in the second', (await val1()).startsWith('# Hello'));
326. check('the editor content survives re-renders of the page (same article element)', (await ev(md2(`querySelector('article h1')`) + ' !== null')));
327. // toolbar: select the first list item in the first editor, Bold, then Undo
328. const selectIn = (i, css) => ev(`(()=>{const e=document.querySelectorAll('md-editor')[${i}].querySelector(${JSON.stringify('article ' + css)});const r=document.createRange();r.selectNodeContents(e);const s=getSelection();s.removeAllRanges();s.addRange(r)})()`);
329. await selectIn(0, 'li:nth-child(1)');
330. await page.click('md-editor:nth-of-type(1) nav button.bold'); await sleep(250);
331. check('toolbar Bold: the selection is **bold** in the value', (await val1()).endsWith('- **first**\n- second'), await val1());
332. await page.click('md-editor:nth-of-type(1) nav button.undo'); await sleep(250);
333. check('toolbar Undo takes it back', (await val1()).endsWith('- first\n- second'), await val1());
334. await selectIn(0, 'h1');
335. await page.click('md-editor:nth-of-type(1) nav button.heading'); await sleep(250);
336. check('toolbar heading button: H1 becomes H2', (await val1()).startsWith('## Hello'), await val1());
337. await selectIn(0, 'ul');
338. await page.click('md-editor:nth-of-type(1) nav button.ol'); await sleep(250);
339. check('toolbar numbered list: the bullets become 1. 2.', (await val1()).endsWith('1. first\n2. second'), await val1());
340. await selectIn(0, 'p');
341. await page.click('md-editor:nth-of-type(1) nav button.pre'); await sleep(250);
342. check('toolbar code block: the paragraph becomes a fenced block', /```\nSome .*\n```/.test(await val1()), await val1());
343. // link: Ctrl+K opens the small form, Apply
344. await ev(`(()=>{const a=document.querySelectorAll('md-editor')[1].querySelector('article');const e=a.querySelector('h1');const r=document.createRange();r.selectNodeContents(e);const s=getSelection();s.removeAllRanges();s.addRange(r);a.focus()})()`);
345. await page.click('md-editor:nth-of-type(2) nav button.link'); await sleep(250);
346. check('the link form opens', (await ev(`getComputedStyle(document.querySelectorAll('md-editor')[1].querySelector('link-form')).display`)) === 'flex');
347. await ev(md2(`querySelector('link-form input').focus()`));
348. await typeText('https://example.org/x'); await enter(); await sleep(300);
349. check('a link is added: [text](url) in the value', (await val2()).includes('# [Title here](https://example.org/x)'), await val2());
350. check('a javascript: link is refused', await (async () => { await selectIn(1, 'li:nth-child(1)'); await page.click('md-editor:nth-of-type(2) nav button.link'); await ev(md2(`querySelector('link-form input').focus()`)); await typeText('javascript:alert(1)'); await enter(); await sleep(250); return !(await val2()).includes('javascript:'); })());
351. // paste Markdown in: formatted, plain text; html in it stays text
352. await ev(`(()=>{const a=document.querySelectorAll('md-editor')[0].querySelector('article');a.focus();const s=getSelection();s.selectAllChildren(a);s.collapseToEnd();const dt=new DataTransfer();dt.setData('text/plain','## Pasted\\n\\nhello **there** <b>x</b>');a.dispatchEvent(new ClipboardEvent('paste',{clipboardData:dt,bubbles:true,cancelable:true}))})()`);
353. await sleep(300);
354. const a1 = await art1();
355. check('pasted Markdown shows formatted', /<h2>Pasted<\/h2><p>hello <strong>there<\/strong> /.test(a1), a1);
356. check('pasted HTML stays text (no element made from it)', !/<b>x<\/b>/.test(a1) && (await val1()).includes('\\<b>x\\</b>'), a1);
357. // the Markdown source switch
358. await page.click('md-editor:nth-of-type(1) footer button'); await sleep(300);
359. check('the source switch shows a textarea with the Markdown, hides the visual editor', (await ev(md1(`querySelector('textarea').value`))) === (await val1()) && (await ev(`getComputedStyle(document.querySelectorAll('md-editor')[0].querySelector('article')).display`)) === 'none');
360. await ev(md1(`querySelector('textarea')`) + `.value = '# From source\\n\\n1. a\\n2. b\\n\\n~~~\\nx < y\\n~~~'; ` + md1(`querySelector('textarea')`) + `.dispatchEvent(new Event('input', { bubbles: true }))`);
361. await sleep(200);
362. check('typing in the source is the value (and shown below)', (await val1()) === '# From source\n\n1. a\n2. b\n\n~~~\nx < y\n~~~' && (await ev(`document.getElementById('md-value').textContent`)) === (await val1()));
363. await page.click('md-editor:nth-of-type(1) footer button'); await sleep(300);
364. check('back to the visual editor: the source text is formatted', (await art1()) === '<h1>From source</h1><ol><li>a</li><li>b</li></ol><pre>x &lt; y</pre>', await art1());
365. // the form posts both editors by name
366. await page.click('#md-form button[type=submit]'); await sleep(800);
367. const url = new URL(await ev('location.href'));
368. check('the form posts both values by their names', url.searchParams.get('note').replaceAll('\r\n', '\n') === '# From source\n\n1. a\n2. b\n\n~~~\nx < y\n~~~' && url.searchParams.get('summary') != null && url.searchParams.get('summary').startsWith('# [Title here]'), url.search);
369. await shot('md-editor');
370. check('no console errors on the Markdown editor page', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
371. // typed Markdown shortcuts are CONSUMED: the marker disappears, only the formatting stays (real keys, one character at a time)
372. await page.goto(BASE + '/md-editor');
373. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
374. await page.waitFor(md1(`querySelector('article h1')`) + ' !== null', { label: 'the value shows formatted' });
375. const keyR = async (k, code, vk, text, modifiers) => { await page.send('Input.dispatchKeyEvent', { type: 'keyDown', key: k, code, windowsVirtualKeyCode: vk, text, modifiers }); await page.send('Input.dispatchKeyEvent', { type: 'keyUp', key: k, code, windowsVirtualKeyCode: vk, modifiers }); await sleep(20); };
376. const typeR = async (t) => { for (const ch of t) await keyR(ch, ch === ' ' ? 'Space' : '', ch === ' ' ? 32 : undefined, ch); };
377. const enterR = () => keyR('Enter', 'Enter', 13, '\r');
378. const wipe = async (i) => { await ev(`document.querySelectorAll('md-editor')[${i}].querySelector('article').focus()`); await keyR('a', 'KeyA', 65, undefined, 2); await keyR('Backspace', 'Backspace', 8); await sleep(150); };
379. const valR = (i) => ev(`document.querySelectorAll('md-editor')[${i}].querySelector('input.value').value`);
380. const artR = (i) => ev(`document.querySelectorAll('md-editor')[${i}].querySelector('article').innerHTML`);
381. await page.click('md-editor:nth-of-type(2) article');
382. await typeR('# Heading'); await sleep(200);
383. check('typing "# Heading" in an empty editor: heading, value "# Heading"', (await valR(1)) === '# Heading' && (await artR(1)) === '<h1>Heading</h1>', JSON.stringify([await valR(1), await artR(1)]));
384. await wipe(1);
385. await typeR('# Again'); await sleep(200);
386. check('typing "# " after the editor was emptied (an empty heading is left): "# Again", not "# # Again"', (await valR(1)) === '# Again', JSON.stringify(await valR(1)));
387. await wipe(1); await keyR('Backspace', 'Backspace', 8);
388. await typeR('- one'); await enterR(); await typeR('- two'); await sleep(200);
389. check('typing "- two" in a list item: the marker is consumed, value "- one\n- two"', (await valR(1)) === '- one\n- two', JSON.stringify([await valR(1), await artR(1)]));
390. await enterR(); await typeR('1. three'); await sleep(200);
391. check('typing "1. " in a bulleted list switches to a numbered list without the marker', !(await valR(1)).includes('1. 1.') && !/- 1\. three/.test(await valR(1)) && (await valR(1)).endsWith('three'), JSON.stringify(await valR(1)));
392. await wipe(1); await keyR('Backspace', 'Backspace', 8);
393. await typeR('1. a'); await enterR(); await typeR('2. b'); await sleep(200);
394. check('typing "2. b" in a numbered list: the marker is consumed, value "1. a\n2. b"', (await valR(1)) === '1. a\n2. b', JSON.stringify(await valR(1)));
395. await wipe(1); await keyR('Backspace', 'Backspace', 8);
396. await typeR('# One'); await enterR(); await typeR('text'); await enterR(); await typeR('## Two'); await sleep(200);
397. check('a heading, a paragraph and a second heading typed one after the other', (await valR(1)) === '# One\n\ntext\n\n## Two', JSON.stringify([await valR(1), await artR(1)]));
398. check('no console errors while typing shortcuts', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
399. await page.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 800, deviceScaleFactor: 1, mobile: true });
400. await page.goto(BASE + '/md-editor'); await sleep(800);
401. check('the Markdown editor fits at 390 px', await ev('document.documentElement.scrollWidth <= window.innerWidth'));
402. await shot('md-editor-narrow');
403. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
405. // ticket #9: files and images in the Markdown editor (drop, paste, choose) go through emit, with progress, and land in the text
406. {
407. await page.goto(BASE + '/md-editor');
408. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
409. await sleep(600);
410. const PNG = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
411. const mkFiles = `const png = Uint8Array.from(atob('${PNG}'), c => c.charCodeAt(0)); const big = new Uint8Array(3145728).fill(65); const dt = new DataTransfer(); dt.items.add(new File([png], 'one.png', { type: 'image/png' })); dt.items.add(new File([png], 'two.png', { type: 'image/png' })); dt.items.add(new File([big], 'doc.pdf', { type: 'application/pdf' }));`;
412. await ev(`(() => { const ed = document.querySelectorAll('md-editor')[1]; window.__rows = []; window.__max = 0; new MutationObserver(() => { const l = ed.querySelector('ul.files'); window.__rows.push(l.children.length); const p = l.querySelector('progress'); if (p && p.max > 1) window.__max = Math.max(window.__max, p.value / p.max) }).observe(ed.querySelector('ul.files'), { subtree: true, attributes: true, childList: true }); const a = ed.querySelector('article'); a.focus(); ${mkFiles} a.dispatchEvent(new DragEvent('drop', { dataTransfer: dt, bubbles: true, cancelable: true, clientX: 50, clientY: 50 })); })()`);
413. await page.waitFor(md2(`querySelector('input.value').value`) + '.includes("doc.pdf")', { timeout: 30000, label: 'files uploaded' });
414. const v = await ev(md2(`querySelector('input.value').value`));
415. check('three dropped files: two images and a link in the Markdown', /^!\[one\.png\]\(\/md-editor\/files\/[\w.-]+\.png\)\n\n!\[two\.png\]\(\/md-editor\/files\/[\w.-]+\.png\)\n\n\[doc\.pdf\]\(\/md-editor\/files\/[\w.-]+\.pdf\)$/.test(v), JSON.stringify(v));
416. check('the editor shows two images and a link', (await ev(md2(`querySelectorAll('article img').length`))) === 2 && (await ev(md2(`querySelectorAll('article a').length`))) === 1);
417. check('the images load (the app stored and serves them)', await ev(`new Promise(r => setTimeout(() => r([...document.querySelectorAll('md-editor')[1].querySelectorAll('article img')].every(i => i.complete && i.naturalWidth === 1)), 500))`));
418. check('progress rows were shown, three files, and reached 100%', (await ev('Math.max(...window.__rows)')) === 3 && (await ev('window.__max')) >= 1, JSON.stringify(await ev('[window.__rows.length, window.__max]')));
419. check('progress rows are gone afterwards', (await ev(md2(`querySelector('ul.files').children.length`))) === 0);
420. const url = v.match(/\]\((\/md-editor\/files\/[\w.-]+\.pdf)\)/)[1];
421. const got = await fetch(BASE + url);
422. check('the stored file is served, not sniffed, sandboxed', got.ok && (await got.arrayBuffer()).byteLength === 3145728 && got.headers.get('x-content-type-options') === 'nosniff' && /sandbox/.test(got.headers.get('content-security-policy') || ''));
423. // a pasted image lands too, at the caret
424. await ev(`(() => { const a = document.querySelectorAll('md-editor')[0].querySelector('article'); a.focus(); const s = getSelection(); s.selectAllChildren(a); s.collapseToEnd(); ${mkFiles.replace("dt.items.add(new File([png], 'two.png', { type: 'image/png' }));", '').replace("dt.items.add(new File([big], 'doc.pdf', { type: 'application/pdf' }));", '')} a.dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true })); })()`);
425. await page.waitFor(md1(`querySelector('input.value').value`) + '.includes("![one.png]")', { timeout: 30000, label: 'pasted image' });
426. check('a pasted image is added too', true);
427. // an image in typed-in Markdown is drawn; only http(s) and site paths are images
428. await ev(`(() => { const a = document.querySelectorAll('md-editor')[1].querySelector('article'); a.focus(); const dt = new DataTransfer(); dt.setData('text/plain', '![a](/x.png) ![b](javascript:alert(1)) ![c](data:image/png;base64,AAAA)'); a.dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true })); })()`);
429. await sleep(300);
430. const srcs = await ev(`JSON.stringify([...document.querySelectorAll('md-editor')[1].querySelectorAll('article img')].map(i => i.getAttribute('src')))`);
431. check('javascript: and data: images are not made', !srcs.includes('javascript') && !srcs.includes('data:') && srcs.includes('/x.png'), srcs);
432. // ticket #12: a file added (dropped, pasted, chosen) with the caret at the end of a list item is its own block after the list
433. {
434. const one = mkFiles.replace("dt.items.add(new File([png], 'two.png', { type: 'image/png' }));", '').replace(/dt\.items\.add\(new File\(\[big\][^;]*;/, '');
435. const fire = {
436. drop: `a.dispatchEvent(new DragEvent('drop', { dataTransfer: dt, bubbles: true, cancelable: true, clientX: 0, clientY: 0 }));`,
437. paste: `a.dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true }));`,
438. choose: `const inp = ed.querySelector('input.pick'); inp.files = dt.files; inp.dispatchEvent(new Event('change', { bubbles: true }));`,
439. };
440. for (const way of ['drop', 'paste', 'choose']) {
441. for (const caret of ['in item', 'none']) {
442. await ev(`(() => { const ed = document.querySelectorAll('md-editor')[1]; const a = ed.querySelector('article'); a.focus(); const s = getSelection(); s.selectAllChildren(a); s.deleteFromDocument(); const dt = new DataTransfer(); dt.setData('text/plain', '- first\\n- second'); a.dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true })); })()`);
443. await sleep(300);
444. await ev(`(() => { const ed = document.querySelectorAll('md-editor')[1]; const a = ed.querySelector('article'); ${caret === 'none' ? 's0' : ''} const li = a.querySelector('li:last-child'); a.focus(); const s = getSelection(); if (${caret === 'none'}) s.removeAllRanges(); else { s.selectAllChildren(li); s.collapseToEnd(); } ${one} ${fire[way]} })()`.replace('s0', ''));
445. await page.waitFor(md2(`querySelector('input.value').value`) + '.includes("![one.png]")', { timeout: 30000, label: 'list ' + way });
446. const lv = await ev(md2(`querySelector('input.value').value`));
447. check(`an image (${way}, caret ${caret}) after the last list item is its own block`, /^- first\n- second\n\n!\[one\.png\]\(\/md-editor\/files\/[\w.-]+\.png\)$/.test(lv), JSON.stringify(lv));
448. }
449. }
450. }
451. check('no console errors on files/images', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
452. await shot('md-editor-files');
453. }
455. // the code editor: real keys, real typing
456. {
457. check('home lists the code editor', home.includes('id="open-code-editor"'));
458. const cer = await fetch(BASE + '/code-editor/README.md');
459. check('Code editor README is served as Markdown', cer.ok && /markdown/.test(cer.headers.get('content-type')) && (await cer.text()).includes('Code editor'));
460. check('no .js of its own in components/code-editor', !execSync(`find ${join(APP, 'components/code-editor')} -name '*.js' -o -name '*.mjs'`).toString().trim());
461. await page.send('Emulation.setDeviceMetricsOverride', { width: 1000, height: 1000, deviceScaleFactor: 1, mobile: false });
462. await page.goto(BASE + '/code-editor');
463. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
464. const CE = (i, q) => `document.querySelectorAll('code-editor')[${i}].${q}`;
465. const cval = (i) => ev(CE(i, `querySelector('input.value').value`));
466. const ctext = (i) => ev(CE(i, `querySelector('article').textContent`));
467. const cgut = (i) => ev(CE(i, `querySelector('code-gutter').textContent`));
468. await page.waitFor(CE(0, `querySelector('article .tok-keyword')`) + ' !== null', { label: 'the code is highlighted' });
469. check('Hybriel code is highlighted: comment, keyword, string, function', await ev(`['comment','keyword','string','function'].every(k => ${CE(0, `querySelector('article .tok-' + k)`)} !== null)`));
470. check('JavaScript is highlighted too: number, comment, string', await ev(`['comment','string','number','keyword'].every(k => ${CE(1, `querySelector('article .tok-' + k)`)} !== null)`));
471. check('the keyword is coloured differently from the plain text', await ev(`getComputedStyle(${CE(0, `querySelector('article .tok-keyword')`)}).color !== getComputedStyle(${CE(0, `querySelector('article')`)}).color`));
472. check('line numbers: 1..10 for the ten lines', (await cgut(0)) === '1\n2\n3\n4\n5\n6\n7\n8\n9\n10', JSON.stringify(await cgut(0)));
473. check('the value is the plain text (no markup)', (await cval(0)).startsWith('// a Hybriel component\nString title') && !(await cval(0)).includes('<span'));
474. const ckey = async (k, code, vk, text, mods = 0) => { await page.send('Input.dispatchKeyEvent', { type: 'keyDown', key: k, code, windowsVirtualKeyCode: vk, text, modifiers: mods }); await page.send('Input.dispatchKeyEvent', { type: 'keyUp', key: k, code, windowsVirtualKeyCode: vk, modifiers: mods }); };
475. const ctype = async (t) => { for (const ch of t) { if (ch === '\n') await ckey('Enter', 'Enter', 13, '\r'); else await ckey(ch, '', undefined, ch); } };
476. const CTRL = 2, SHIFT = 8;
477. const tab = (shift) => ckey('Tab', 'Tab', 9, undefined, shift ? SHIFT : 0);
478. const undo = () => ckey('z', 'KeyZ', 90, undefined, CTRL);
479. const redo = () => ckey('z', 'KeyZ', 90, undefined, CTRL | SHIFT);
480. // put the caret at text offsets (start..end) of editor i and focus it
481. const caret = (i, s, e = s) => ev(`(()=>{const a=${CE(i, `querySelector('article')`)};a.focus();const w=document.createTreeWalker(a,4);let pos=0,sn=null,so=0,en=null,eo=0,n;while((n=w.nextNode())){const l=n.data.length;if(!sn&&${s}<=pos+l){sn=n;so=${s}-pos}if(!en&&${e}<=pos+l){en=n;eo=${e}-pos}pos+=l}getSelection().setBaseAndExtent(sn,so,en,eo)})()`);
482. await caret(0, (await cval(0)).length);
483. await ctype('\nlet n = 5');
484. check('typing at the end: the value follows, the new line is numbered 11', (await cval(0)).endsWith('}\nlet n = 5') && (await cgut(0)).endsWith('\n11'), JSON.stringify((await cval(0)).slice(-20)) + ' / ' + JSON.stringify((await cgut(0)).slice(-8)));
485. check('the word you typed is highlighted while typing (let = keyword, 5 = number)', await ev(`(()=>{const k=[...${CE(0, `querySelectorAll('article .tok-keyword')`)}].map(x=>x.textContent);const n=[...${CE(0, `querySelectorAll('article .tok-number')`)}].map(x=>x.textContent);return k.includes('let')&&n.includes('5')})()`));
486. check('the demo shows that text below the editor', (await ev(`document.getElementById('code-value-hybriel').textContent`)) === (await cval(0)));
487. check('the other editor was not touched', (await cval(1)).startsWith('function add(a, b) {'));
488. // Tab / Shift+Tab on one line
489. await ctype('\n'); await tab(false); await ctype('x');
490. check('Tab inserts a tab character', (await cval(0)).endsWith('let n = 5\n\tx'), JSON.stringify((await cval(0)).slice(-14)));
491. await tab(true);
492. check('Shift+Tab removes it again', (await cval(0)).endsWith('let n = 5\nx'), JSON.stringify((await cval(0)).slice(-14)));
493. // Enter keeps the indent; { closes itself; Enter between the braces opens an indented line
494. await ctype('\n'); await tab(false); await ctype('if (a) {');
495. check('typing { adds the closing }', (await cval(0)).endsWith('\tif (a) {}'), JSON.stringify((await cval(0)).slice(-14)));
496. await ctype('\n');
497. check('Enter between { } indents the new line and puts } on its own line', (await cval(0)).endsWith('\tif (a) {\n\t\t\n\t}'), JSON.stringify((await cval(0)).slice(-20)));
498. await ctype('y'); await ctype('\n');
499. check('Enter keeps the indent of the line', (await cval(0)).endsWith('\tif (a) {\n\t\ty\n\t\t\n\t}'), JSON.stringify((await cval(0)).slice(-24)));
500. // typing the closer steps over it; a quote closes itself
501. await ckey('Backspace', 'Backspace', 8); await ckey('Backspace', 'Backspace', 8); await ctype('call("a"');
502. check('quotes close themselves and typing the closing quote / ) steps over it', (await cval(0)).includes('\ncall("a")'), JSON.stringify((await cval(0)).slice(-20)));
503. // undo / redo: back through typing, then forward again
504. const before = await cval(0);
505. await undo(); await sleep(50);
506. const u1 = await cval(0);
507. check('Ctrl+Z undoes the last change', u1 !== before && u1.length < before.length + 4, JSON.stringify(u1.slice(-20)));
508. await undo(); await undo(); await sleep(50);
509. const u3 = await cval(0);
510. check('Ctrl+Z again goes further back', u3.length < u1.length, JSON.stringify(u3.slice(-20)));
511. await redo(); await redo(); await redo(); await sleep(50);
512. check('Ctrl+Shift+Z redoes them: the text is back', (await cval(0)) === before, JSON.stringify((await cval(0)).slice(-20)));
513. await ckey('y', 'KeyY', 89, undefined, CTRL);
514. check('Ctrl+Z past the start stops at the first text', await (async () => { for (let i = 0; i < 80; i++) await undo(); return (await cval(0)).startsWith('// a Hybriel component') && !(await cval(0)).includes('let n'); })());
515. check('the line numbers follow undo', (await cgut(0)) === '1\n2\n3\n4\n5\n6\n7\n8\n9\n10', JSON.stringify(await cgut(0)));
516. // several lines selected: Tab indents all, Shift+Tab outdents all
517. const v0 = await cval(0);
518. await caret(0, 0, v0.length);
519. await tab(false);
520. check('Tab with several lines selected indents every non-empty line', (await cval(0)) === v0.split('\n').map(l => l === '' ? l : '\t' + l).join('\n'), JSON.stringify((await cval(0)).slice(0, 60)));
521. await tab(true);
522. check('Shift+Tab outdents them all again', (await cval(0)) === v0, JSON.stringify((await cval(0)).slice(0, 60)));
523. // the second editor indents with two spaces
524. const w0 = await cval(1);
525. await caret(1, 0); await tab(false);
526. check('spaces = 2: Tab inserts two spaces', (await cval(1)) === ' ' + w0, JSON.stringify((await cval(1)).slice(0, 30)));
527. await tab(true);
528. check('spaces = 2: Shift+Tab removes them', (await cval(1)) === w0);
529. // text inserted as a whole (paste): several lines, highlighted, numbered
530. await caret(1, (await cval(1)).length);
531. await ev(`(()=>{const a=${CE(1, `querySelector('article')`)};const dt=new DataTransfer();dt.setData('text/plain','\\n// pasted\\nlet z = 1');a.dispatchEvent(new ClipboardEvent('paste',{clipboardData:dt,bubbles:true,cancelable:true}))})()`);
532. await sleep(150);
533. check('inserted text (paste) is taken over, highlighted and numbered', (await cval(1)).endsWith('\n// pasted\nlet z = 1') && (await cgut(1)).split('\n').length === (await cval(1)).split('\n').length && (await ev(CE(1, `querySelectorAll('article .tok-comment').length`))) === 2, JSON.stringify(await cval(1)) + ' / ' + JSON.stringify(await cgut(1)));
534. // the form posts both by name
535. await page.click('#code-form button[type=submit]'); await sleep(800);
536. const curl = new URL(await ev('location.href'));
537. check('the form posts both texts by name', curl.searchParams.get('hybriel') != null && curl.searchParams.get('hybriel').replaceAll('\r\n', '\n') === v0 && curl.searchParams.get('js').includes('let z = 1'), curl.search.slice(0, 120));
538. // the code is only ever text: broken / hostile code shows literally, the page structure stays, nothing runs
539. await page.goto(BASE + '/code-editor');
540. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
541. await page.waitFor(CE(0, `querySelector('article .tok-keyword')`) + ' !== null', { label: 'the code is highlighted' });
542. const shape = () => ev(`[...document.body.querySelectorAll('*')].filter(e => !e.closest('article')).length + ':' + document.querySelectorAll('code-editor').length + ':' + document.querySelectorAll('pre').length + ':' + [...document.querySelectorAll('b,img,div')].filter(e => !e.closest('main')).length + ':' + document.querySelectorAll('main b, main img, main div').length`);
543. const shape0 = await shape();
544. await caret(1, (await cval(1)).length);
545. await ctype('\nif (x) {');
546. await sleep(300);
547. check('unbalanced code renders inside the field as typed', (await cval(1)).includes('if (x) {}') && (await shape()) === shape0, await shape() + ' vs ' + shape0);
548. await ctype('\n'); await ctype('}');
549. check('typing } after Enter inside { } does not leave two: if (x) {\\n} only', (await cval(1)).endsWith('if (x) {\n}'), JSON.stringify((await cval(1)).slice(-20)));
550. await ev(`window.__pwned = undefined`);
551. await ctype('\n</div><b>x');
552. await ctype('\n<img src=x onerror=window.__pwned=1>');
553. await sleep(500);
554. check('markup typed is shown literally and the page structure is unchanged', (await cval(1)).includes('</div><b>x') && (await ctext(1)).includes('<img src=x onerror=window.__pwned=1>') && (await shape()) === shape0, await shape() + ' vs ' + shape0);
555. check('the code below the editor shows it literally too', (await ev(`document.getElementById('code-value-js').textContent`)).includes('<img src=x onerror=window.__pwned=1>'));
556. check('typed code did not run (window.__pwned stays undefined)', (await ev(`typeof window.__pwned`)) === 'undefined');
557. await page.goto(BASE + '/code-editor'); await sleep(800);
558. await page.goto(BASE + '/code-editor'); await sleep(800);
559. await shot('code-editor');
560. check('no console errors on the code editor page', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
561. await page.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 800, deviceScaleFactor: 1, mobile: true });
562. await page.goto(BASE + '/code-editor'); await sleep(800);
563. check('the code editor page fits at 390 px', await ev('document.documentElement.scrollWidth <= window.innerWidth'));
564. await shot('code-editor-narrow');
565. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
567. }
569. // ticket #13: the modal — open by the page, every way to close it with its reason, focus kept inside and given back, no scroll behind
570. {
571. check('home lists the modal', home.includes('id="open-modal"'));
572. const mor = await fetch(BASE + '/modal/README.md');
573. check('modal README is served as Markdown', mor.ok && /markdown/.test(mor.headers.get('content-type')) && (await mor.text()).includes('# Modal'));
574. check('no .js of its own in components/modal', !execSync(`find ${join(APP, 'components/modal')} -name '*.js' -o -name '*.mjs'`).toString().trim());
575. const modalRun = async (w, h, mobile, tag) => {
576. await page.send('Emulation.setDeviceMetricsOverride', { width: w, height: h, deviceScaleFactor: 1, mobile });
577. await page.goto(BASE + '/modal');
578. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
579. await sleep(500);
580. const at = async (x, y) => {
581. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x, y, button: 'none' });
582. await page.send('Input.dispatchMouseEvent', { type: 'mousePressed', x, y, button: 'left', clickCount: 1 });
583. await sleep(60);
584. await page.send('Input.dispatchMouseEvent', { type: 'mouseReleased', x, y, button: 'left', clickCount: 1 });
585. await sleep(300);
586. };
587. const on = async (sel) => { const r = await ev(`(() => { const b = document.querySelector(${JSON.stringify(sel)}).getBoundingClientRect(); return { x: b.x + b.width / 2, y: b.y + b.height / 2 }; })()`); await at(r.x, r.y); };
588. const mkey = async (k, code, vk, mods = 0) => { await page.send('Input.dispatchKeyEvent', { type: 'keyDown', key: k, code, windowsVirtualKeyCode: vk, modifiers: mods }); await page.send('Input.dispatchKeyEvent', { type: 'keyUp', key: k, code, windowsVirtualKeyCode: vk, modifiers: mods }); await sleep(150); };
589. const openIds = () => ev(`[...document.querySelectorAll('dialog[open]')].map(d => d.id).join()`);
590. const last = () => ev(`document.getElementById('modal-last').textContent`);
591. const active = () => ev(`document.activeElement.id || document.activeElement.className || document.activeElement.tagName`);
592. const inside = (id) => ev(`document.getElementById(${JSON.stringify(id)}).contains(document.activeElement)`);
593. // a corner of the dim background, outside every window
594. const bg = async () => at(4, h - 4);
595. check(`modal ${tag}: closed at first (no dialog open)`, (await openIds()) === '' && (await ev(`getComputedStyle(document.getElementById('info')).display`)) === 'none');
596. // open by the page's button: title, content, focus inside, page inert behind
597. await on('#open-info');
598. check(`modal ${tag}: the page's button opens it (title and content shown)`, (await openIds()) === 'info' && (await ev(`document.querySelector('#info h2').textContent`)) === 'Information' && (await ev(`document.querySelector('#info modal-body p').getBoundingClientRect().height > 0`)));
599. check(`modal ${tag}: the focus is inside when it opens`, await inside('info'), await active());
600. const box = await ev(`JSON.stringify(document.getElementById('info').getBoundingClientRect())`);
601. const b = JSON.parse(box);
602. check(`modal ${tag}: the window is inside the screen`, b.left >= 0 && b.top >= 0 && b.right <= w && b.bottom <= h, box);
603. check(`modal ${tag}: the page behind is blocked (the element under a point outside is the dialog, not the page)`, await ev(`document.elementFromPoint(4, ${h - 4}) === document.getElementById('info')`));
604. await shot(`modal-open-${w}`);
605. // Esc
606. await mkey('Escape', 'Escape', 27);
607. check(`modal ${tag}: Esc closes it, reason "escape", focus back on the opener`, (await openIds()) === '' && (await last()) === 'info: escape' && (await active()) === 'open-info', `${await openIds()} / ${await last()} / ${await active()}`);
608. // ×
609. await on('#open-info'); await on('#info .modal-x');
610. check(`modal ${tag}: × closes it, reason "close", focus back on the opener`, (await openIds()) === '' && (await last()) === 'info: close' && (await active()) === 'open-info', `${await openIds()} / ${await last()} / ${await active()}`);
611. // the dim background
612. await on('#open-info'); await bg();
613. check(`modal ${tag}: a click on the dim background closes it, reason "backdrop"`, (await openIds()) === '' && (await last()) === 'info: backdrop' && (await active()) === 'open-info', `${await openIds()} / ${await last()} / ${await active()}`);
614. // a press inside the window that ends on the background (a text selection dragged out) does not close it
615. await on('#open-info');
616. const p = await ev(`(() => { const r = document.querySelector('#info modal-body p').getBoundingClientRect(); return { x: r.x + 5, y: r.y + 5 }; })()`);
617. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: p.x, y: p.y, button: 'none' });
618. await page.send('Input.dispatchMouseEvent', { type: 'mousePressed', x: p.x, y: p.y, button: 'left', clickCount: 1 });
619. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: 4, y: h - 4, button: 'left' });
620. await page.send('Input.dispatchMouseEvent', { type: 'mouseReleased', x: 4, y: h - 4, button: 'left', clickCount: 1 });
621. await sleep(300);
622. check(`modal ${tag}: a press started inside and let go on the background keeps it open`, (await openIds()) === 'info');
623. await mkey('Escape', 'Escape', 27);
624. // footer buttons: the value is the reason
625. await on('#open-confirm');
626. check(`modal ${tag}: footer buttons are shown`, (await ev(`[...document.querySelectorAll('#confirm footer button')].map(b => b.textContent).join()`)) === 'Cancel,Delete');
627. check(`modal ${tag}: footer buttons have no border (creator's rule)`, await ev(`[...document.querySelectorAll('#confirm button')].every(b => getComputedStyle(b).borderTopWidth === '0px')`));
628. await on('#confirm footer button[value=ok]');
629. check(`modal ${tag}: a footer button closes it with its value ("ok")`, (await openIds()) === '' && (await last()) === 'confirm: ok' && (await active()) === 'open-confirm', `${await openIds()} / ${await last()} / ${await active()}`);
630. await on('#open-confirm'); await on('#confirm footer button[value=cancel]');
631. check(`modal ${tag}: Cancel closes it with "cancel"`, (await last()) === 'confirm: cancel');
632. // backdrop close switched off; focus goes round inside with Tab / Shift+Tab
633. await on('#open-form'); await bg();
634. check(`modal ${tag}: backdropClose = "false": a click on the background leaves it open`, (await openIds()) === 'form' && (await last()) === 'confirm: cancel' && await inside('form'));
635. const seen = [];
636. for (let i = 0; i < 9; i++) { await mkey('Tab', 'Tab', 9); seen.push((await inside('form')) ? 'in' : 'OUT:' + (await active())); }
637. check(`modal ${tag}: Tab ×9 never leaves the window`, seen.every(s => s === 'in'), seen.join());
638. await ev(`document.getElementById('modal-save').focus()`); await mkey('Tab', 'Tab', 9);
639. check(`modal ${tag}: Tab on the last control goes round to the first (×)`, (await active()) === 'modal-x', await active());
640. await mkey('Tab', 'Tab', 9, 8);
641. check(`modal ${tag}: Shift+Tab on the first goes round to the last (Save)`, (await active()) === 'modal-save', await active());
642. for (let i = 0; i < 6; i++) { await mkey('Tab', 'Tab', 9, 8); seen.push((await inside('form')) ? 'in' : 'OUT:' + (await active())); }
643. check(`modal ${tag}: Shift+Tab never leaves the window`, seen.every(s => s === 'in'), seen.join());
644. await ev(`document.getElementById('modal-name').focus()`);
645. await page.send('Input.insertText', { text: 'Ada' }); await sleep(150);
646. await shot(`modal-form-${w}`);
647. // the page closes it itself, with its own reason
648. await on('#modal-save');
649. check(`modal ${tag}: the page closes it itself (close('saved')), reason "saved", it read the field`, (await openIds()) === '' && (await last()) === 'form: saved' && (await ev(`document.getElementById('modal-saved').textContent`)) === 'Ada' && (await active()) === 'open-form', `${await last()} / ${await active()}`);
650. // no scroll behind: a long page scrolled down stays where it is; the long window scrolls itself
651. await ev(`(() => { const d = document.createElement('div'); d.id = 'gate-tall'; d.style.height = '3000px'; document.querySelector('main').appendChild(d); scrollTo(0, 200); })()`);
652. await sleep(100);
653. await ev(`document.getElementById('open-long').click()`); await sleep(300);
654. const y0 = await ev('scrollY');
655. check(`modal ${tag}: while open the page cannot scroll (html overflow hidden)`, (await ev(`getComputedStyle(document.documentElement).overflow`)) === 'hidden');
656. await page.send('Input.dispatchMouseEvent', { type: 'mouseWheel', x: 4, y: h - 4, deltaX: 0, deltaY: 600 }); await sleep(400);
657. const mb = await ev(`(() => { const r = document.querySelector('#long modal-body').getBoundingClientRect(); return { x: r.x + r.width / 2, y: r.y + r.height / 2 }; })()`);
658. await page.send('Input.dispatchMouseEvent', { type: 'mouseWheel', x: mb.x, y: mb.y, deltaX: 0, deltaY: 600 }); await sleep(400);
659. check(`modal ${tag}: the wheel does not scroll the page behind`, (await ev('scrollY')) === y0, `${y0} → ${await ev('scrollY')}`);
660. check(`modal ${tag}: a long window stays inside the screen and scrolls its content`, (await ev(`document.getElementById('long').getBoundingClientRect().bottom <= innerHeight`)) && (await ev(`document.querySelector('#long modal-body').scrollTop > 0`)));
661. await shot(`modal-long-${w}`);
662. await mkey('Escape', 'Escape', 27);
663. check(`modal ${tag}: after closing the page scrolls again`, (await ev(`getComputedStyle(document.documentElement).overflow`)) !== 'hidden' && (await last()) === 'long: escape');
664. await ev(`document.getElementById('gate-tall').remove(); scrollTo(0, 0)`); await sleep(100);
665. check(`modal ${tag}: no horizontal overflow`, await ev('document.documentElement.scrollWidth <= window.innerWidth'));
666. await shot(`modal-closed-${w}`);
667. check(`modal ${tag}: no console errors or warnings`, page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0 && !/not a standard DOM event/.test(page.dumpConsole()), page.dumpConsole());
668. };
669. await modalRun(1280, 900, false, '1280 px');
670. await modalRun(390, 800, true, '390 px');
671. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
672. }
674. await shot('wide');
675. await page.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 800, deviceScaleFactor: 1, mobile: true });
676. await sleep(300);
677. check('no horizontal overflow at 390 px', await ev('document.documentElement.scrollWidth <= window.innerWidth'));
678. await shot('narrow');
680. // ==== mission 046: THE INSTALLABLE APP — hl:web's own manifest + service worker (project.hl appIcons /
681. // offline = [ Index ]), as tracker.worldapi.org#10. The manifest and every icon over HTTP; Chrome's own verdict
682. // (installability, manifest parse); the worker registered for the whole app; then OFFLINE: the tab loses the
683. // network (the note appears), the server is stopped too (CDP's offline emulation does not reach the service worker's
684. // own fetches, so only a dead server proves the cache), and `/` still opens: header + the note + the home list. A
685. // demo page gets hl:web's "Unavailable offline" page. A separate 390 px tab, so its expected socket errors stay out
686. // of the main tab's console checks. Phone screenshots: .scratch/gate-pwa-phone-{online,offline}.png.
687. const html = await (await fetch(BASE + '/')).text();
688. const mhref = (html.match(/<link rel="manifest" href="([^"]+)"/) || [])[1];
689. check('pwa: every page head links the manifest, the apple-touch-icon, the favicon and the theme colour (the token `darker`)',
690. mhref === '/__hl/manifest.webmanifest' && html.includes('<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">')
691. && html.includes('<link rel="icon" href="/icons/favicon.svg">') && html.includes('<meta name="theme-color" content="rgb(15, 20, 25)">'), html.slice(0, 900));
692. const mres = await fetch(BASE + mhref);
693. const man = await mres.json();
694. check('pwa: the manifest is served as application/manifest+json: name "Hybriel components", short name "Components", start_url /, scope /, display standalone, the token colours',
695. /manifest\+json/.test(mres.headers.get('content-type') || '') && man.name === 'Hybriel components' && man.short_name === 'Components' && man.start_url === '/' && man.scope === '/'
696. && man.display === 'standalone' && man.theme_color === 'rgb(15, 20, 25)' && man.background_color === 'rgb(25, 30, 35)', JSON.stringify(man));
697. const iconOk = [];
698. for (const ic of man.icons || []) {
699. const ir = await fetch(BASE + ic.src);
700. const b = Buffer.from(await ir.arrayBuffer());
701. iconOk.push(ir.ok && ic.type === 'image/png' && b.readUInt32BE(16) === Number(ic.sizes.split('x')[0]) && b.readUInt32BE(20) === Number(ic.sizes.split('x')[1]));
702. }
703. check('pwa: every manifest icon loads and is a real PNG of its declared size (192 + 512, any + maskable)',
704. iconOk.length === 4 && iconOk.every(Boolean) && ['any', 'maskable'].every(pu => ['192x192', '512x512'].every(sz => man.icons.some(i => i.purpose === pu && i.sizes === sz))), JSON.stringify(man.icons) + ' ' + JSON.stringify(iconOk));
705. const touch = await fetch(BASE + '/icons/apple-touch-icon.png');
706. const touchBytes = Buffer.from(await touch.arrayBuffer());
707. const fav = await fetch(BASE + '/icons/favicon.svg');
708. const favText = await fav.text();
709. const ico = await fetch(BASE + '/favicon.ico');
710. const icoBytes = Buffer.from(await ico.arrayBuffer());
711. check('pwa: apple-touch-icon is a 180×180 PNG, the favicon an SVG in green-light #b5cea8, /favicon.ico a real icon file',
712. touch.ok && touchBytes.readUInt32BE(16) === 180 && fav.ok && /image\/svg\+xml/.test(fav.headers.get('content-type') || '') && favText.includes('#b5cea8')
713. && ico.ok && icoBytes.readUInt32BE(0) === 0x00000100, `${touch.status} ${fav.status} ${ico.status}`);
715. await page.goto('about:blank'); // the server goes down below: the main tab must not sit on a page meanwhile
716. const app = await browser.newPage();
717. const aev = (e) => app.evaluate(e);
718. const ashot = async (name) => { const { data } = await app.send('Page.captureScreenshot', { format: 'png' }); writeFileSync(join(SCRATCH, `gate-${name}.png`), Buffer.from(data, 'base64')); };
719. const appHydrated = () => app.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 15000, label: 'app tab hydrated' });
720. await app.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 844, deviceScaleFactor: 2, mobile: true });
721. await app.goto(BASE + '/');
722. await appHydrated();
723. await app.waitFor(`navigator.serviceWorker.getRegistration().then(r => !!(r && r.active))`, { timeout: 15000, label: 'service worker active' });
724. await app.waitFor(`!!navigator.serviceWorker.controller`, { timeout: 10000, label: 'page controlled by the worker' });
725. const inst = await app.send('Page.getInstallabilityErrors');
726. check('pwa: Chrome reports no installability error', (inst.installabilityErrors || []).length === 0, JSON.stringify(inst));
727. const am = await app.send('Page.getAppManifest');
728. check('pwa: Chrome parses the manifest without errors', am.url && am.url.endsWith('/__hl/manifest.webmanifest') && (am.errors || []).length === 0, JSON.stringify(am.errors));
729. check('pwa: hl:web\'s service worker is registered for the whole app (scope /) and controls the page',
730. (await aev(`navigator.serviceWorker.getRegistration().then(r => new URL(r.scope).pathname + ' ' + new URL(r.active.scriptURL).pathname)`)) === '/ /__hl/sw.js' && (await aev('!!navigator.serviceWorker.controller')));
731. check('pwa: online, no offline note', !(await aev(`!!document.querySelector('#offline')`)));
732. check('pwa: no horizontal overflow at 390 px', await aev('document.documentElement.scrollWidth <= window.innerWidth'));
733. await ashot('pwa-phone-online');
735. await app.setOffline(true);
736. await app.waitFor(`!!document.querySelector('#offline')`, { timeout: 5000, label: 'offline note (live)' }).catch(() => {});
737. check('offline: the open page says so within seconds (the shell\'s tick)', (await aev(`document.querySelector('#offline') ? document.querySelector('#offline').textContent : ''`)) === 'You are offline. The demos need the network.');
738. await stopServer();
739. let down = false;
740. try { await fetch(BASE + '/'); } catch { down = true; }
741. await app.goto(BASE + '/');
742. await app.waitFor(`!!document.querySelector('#offline')`, { timeout: 8000, label: 'offline note after reload' }).catch(() => {});
743. check('offline: with the server gone too, a reload of / still opens the shell from the worker\'s cache — header, brand, the note, the home list',
744. down && (await aev(`document.querySelector('application-header .brand') ? document.querySelector('application-header .brand').textContent : ''`)) === 'Hybriel components'
745. && (await aev(`!!document.querySelector('#offline')`)) && (await aev(`document.querySelectorAll('#components li').length`)) === 8
746. && (await aev(`getComputedStyle(document.querySelector('application-header')).backgroundColor`)) === 'rgb(15, 20, 25)', 'server down: ' + down);
747. await ashot('pwa-phone-offline');
748. await app.goto(BASE + '/month-view');
749. check('offline: a demo page (/month-view) is not kept — hl:web\'s "Unavailable offline" page', (await aev(`!!document.querySelector('main[data-hl-offline]') && document.querySelector('h1').textContent`)) === 'Unavailable offline');
751. await app.setOffline(false);
752. await startServer();
753. await app.goto(BASE + '/');
754. await appHydrated();
755. await app.waitFor(`!document.querySelector('#offline')`, { timeout: 5000, label: 'note gone' }).catch(() => {});
756. check('back online: / from the server again, no offline note', !(await aev(`!!document.querySelector('#offline')`)));
757. await app.close();
758. }
760. try { await main(); } catch (e) { check('gate ran', false, String(e && e.stack || e)); }
761. await stop();
762. console.log(`${passes} passed, ${failures} failed`);
763. process.exit(failures ? 1 : 0);