components

64.0 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. if (server) {
32. try { server.kill('SIGTERM'); } catch {}
33. await new Promise(r => { if (server.exitCode !== null || server.signalCode !== null) return r(); server.once('exit', r); setTimeout(r, 3000); });
34. server = null;
35. }
36. }
38. async function main() {
39. 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'] });
40. server.stdout.on('data', d => log += d); server.stderr.on('data', d => log += d);
41. for (let i = 0; ; i++) {
42. try { if ((await fetch(BASE + '/')).ok) break; } catch {}
43. if (i > 80) throw new Error('server did not come up\n' + log);
44. await sleep(250);
45. }
47. // the home lists the component; its README is served
48. const home = await (await fetch(BASE + '/')).text();
49. 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')));
50. check('home lists the month view', home.includes('id="open-month-view"'));
51. check('home shows only the list, no component embedded (creator 2026-09-25)', !home.includes('<month-view'));
52. const readme = await fetch(BASE + '/month-view/README.md');
53. check('README is served as Markdown', readme.ok && /markdown/.test(readme.headers.get('content-type')) && (await readme.text()).includes('Month view'));
54. // first render on the server: 6 weeks of 7 days, one today
55. const demo = await (await fetch(BASE + '/month-view')).text();
56. check('server renders 42 days and one today', (demo.match(/<li class=/g) || []).length === 42 && (demo.match(/class="today"/g) || []).length === 1);
58. browser = await launchBrowser({ debugPortRange: [CH_FROM, CH_TO] });
59. const page = await browser.newPage();
60. const SLOW = 3;
61. const goto = page.goto.bind(page);
62. page.goto = (u, o = {}) => goto(u, { ...o, timeout: 15000 * SLOW });
63. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
64. // a zone already on the next day (UTC+14) compared with the server's UTC date: the visitor's today must win (ticket #11)
65. await page.send('Emulation.setTimezoneOverride', { timezoneId: 'Pacific/Kiritimati' });
66. await page.goto(BASE + '/month-view');
67. // the month view's own demo page (the home only lists the components)
68. await page.waitForSelector('#month-title');
69. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
71. const shot = async (name) => { const { data } = await page.send('Page.captureScreenshot', { format: 'png' }); writeFileSync(join(SCRATCH, `gate-${name}.png`), Buffer.from(data, 'base64')); };
72. const ev = (e) => page.evaluate(e);
73. const title = () => ev('document.querySelector("#month-title").textContent');
74. 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()); })()`);
75. const expectTitle = (y, m) => ev(`new Intl.DateTimeFormat(navigator.language, { month: 'long' }).format(new Date(Date.UTC(${y}, ${m - 1}, 15, 12))) + ' ${y}'`);
76. const [ty, tm] = localToday.split('-').map(Number);
78. // the browser's today and language arrive at load, with no pointer needed
79. await page.waitFor(`!!document.querySelector('li.today time') && document.querySelector('li.today time').getAttribute('datetime') === ${JSON.stringify(localToday)}`, { label: 'browser today marked at load' });
80. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: 300, y: 200 });
81. await page.waitFor(`document.querySelector("#month-title").textContent.toLowerCase() === (${JSON.stringify(await expectTitle(ty, tm))}).toLowerCase()`, { label: 'title in the browser language' });
82. check('title is the current month and year in the browser language', true);
83. check('today is marked (browser date)', (await ev(`document.querySelector('li.today time').getAttribute('datetime')`)) === localToday, localToday);
84. check('42 days, 6 weeks', (await ev('document.querySelectorAll("#month-days li").length')) === 42);
85. const t0 = await title();
87. // next / prev
88. await page.click('#month-next');
89. await page.waitFor(`document.querySelector("#month-title").textContent !== ${JSON.stringify(t0)}`, { label: 'next month' });
90. const nm = tm === 12 ? 1 : tm + 1, ny = tm === 12 ? ty + 1 : ty;
91. await page.waitFor(`document.querySelector('#month-title').textContent.toLowerCase() === ${JSON.stringify((await expectTitle(ny, nm)).toLowerCase())}`, { label: 'next month in the browser language' });
92. check('next shows the next month', true);
93. await page.click('#month-prev');
94. await page.waitFor(`document.querySelector("#month-title").textContent === ${JSON.stringify(t0)}`, { label: 'prev month' });
95. check('prev returns to the month, today marked again', (await ev('document.querySelectorAll("li.today").length')) === 1);
97. // walk to February 2028 (leap year) and check its days and its first weekday (Tuesday)
98. let guard = 0;
99. const feb28 = (await expectTitle(2028, 2)).toLowerCase();
100. while ((await title()).toLowerCase() !== feb28 && guard++ < 40) {
101. const before = await title();
102. await page.click('#month-next');
103. await page.waitFor(`document.querySelector("#month-title").textContent !== ${JSON.stringify(before)}`, { label: 'paging' });
104. }
105. 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 }; })()`);
106. check('Feb 2028: 29 days, the 1st is a Tuesday (column 2)', feb.n === 29 && feb.col === 1, JSON.stringify(feb));
107. // year rollover: go back to December 2027 and January 2028 by prev
108. await page.click('#month-prev');
109. await page.click('#month-prev');
110. const dec27 = (await expectTitle(2027, 12)).toLowerCase();
111. await page.waitFor(`document.querySelector("#month-title").textContent.toLowerCase() === ${JSON.stringify(dec27)}`, { label: 'back to December' });
112. 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 }))()`);
113. check('Dec 2027: 31 days, the 1st is a Wednesday', dec.n === 31 && dec.col === 2, JSON.stringify(dec));
114. check('no console errors', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
116. // the date picker: click the field, pick a day, the value is YYYY-MM-DD; typing works
117. check('home lists the date picker', home.includes('id="open-date-picker"'));
118. check('date picker README is served', (await fetch(BASE + '/date-picker/README.md')).ok);
119. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
120. await page.goto(BASE + '/date-picker');
121. await page.waitForSelector('date-picker input');
122. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
123. await sleep(1500);
124. 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);
125. const pop = (n) => `getComputedStyle(document.querySelectorAll('date-picker picker-popup')[${n}]).display !== 'none'`;
126. const val = (n) => ev(`document.querySelectorAll('date-picker input')[${n}].value`);
127. const realClick = async (sel) => {
128. 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 }; })()`);
129. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: r.x, y: r.y, button: 'none' });
130. await sleep(120);
131. await page.send('Input.dispatchMouseEvent', { type: 'mousePressed', x: r.x, y: r.y, button: 'left', clickCount: 1 });
132. await sleep(100);
133. await page.send('Input.dispatchMouseEvent', { type: 'mouseReleased', x: r.x, y: r.y, button: 'left', clickCount: 1 });
134. await sleep(700);
135. };
136. const typeInto = async (n, text) => {
137. await ev(`document.querySelectorAll('date-picker input')[${n}].focus()`);
138. await ev(`document.querySelectorAll('date-picker input')[${n}].select()`);
139. await page.send('Input.insertText', { text });
140. await sleep(400);
141. };
142. check('two fields with their names', (await ev(`[...document.querySelectorAll('date-picker input')].map(i => i.name).join()`)) === 'arrival,departure');
143. check('the month is closed at first', !(await ev(pop(0))) && !(await ev(pop(1))));
144. await realClick('date-picker input[name=arrival]');
145. await page.waitFor(pop(0), { label: 'popup open' });
146. check('click on the field opens the month under it', (await ev(pop(0))) && !(await ev(pop(1))));
147. 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 }; })()`);
148. check('the month sits right under the field', pos.dx < 2 && pos.dy >= 0 && pos.dy < 12, JSON.stringify(pos));
149. await ev(`document.querySelector('date-picker input[name=arrival]').__mark = 1`);
150. await realClick('date-picker date-field:nth-child(1) ol.days li:not(.outside) time[datetime$="-15"]');
151. const picked = await val(0);
152. check('the field element is the same one after picking (not re-created)', (await ev(`document.querySelector('date-picker input[name=arrival]').__mark`)) === 1);
153. check('a picked day is in the field as YYYY-MM-DD', /^\d{4}-\d{2}-15$/.test(picked), picked);
154. check('the month closes after picking', !(await ev(pop(0))));
155. // the month arrows page
156. await realClick('date-picker input[name=departure]');
157. await page.waitFor(pop(1), { label: 'popup open 2' });
158. const dt0 = await ev(`document.querySelectorAll('date-picker h2')[1].textContent`);
159. await realClick('date-picker date-field:nth-child(2) button.next');
160. check('the next-month arrow changes the month', (await ev(`document.querySelectorAll('date-picker h2')[1].textContent`)) !== dt0);
161. await realClick('date-picker date-field:nth-child(2) ol.days li:not(.outside) time[datetime$="-20"]');
162. 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));
163. // typing: a date in another month opens on that month and is marked
164. await typeInto(0, '2028-02-29');
165. check('typing works: the field holds the typed date', (await val(0)) === '2028-02-29', await val(0));
166. 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');
167. await typeInto(0, '2027-02-30');
168. check('an impossible date marks the field invalid', (await ev(`document.querySelectorAll('date-picker input')[0].getAttribute('aria-invalid')`)) === 'true');
169. await typeInto(0, '2028-02-29');
170. await sleep(300); await shot('picker');
171. await page.send('Input.dispatchKeyEvent', { type: 'keyDown', key: 'Escape', code: 'Escape', windowsVirtualKeyCode: 27 });
172. await sleep(300);
173. check('Escape closes the month', !(await ev(pop(0))));
174. await realClick('h1'); await sleep(200);
175. // the form posts both fields by name
176. await ev(`document.querySelector('date-picker-demo form button[type=submit]').click()`);
177. await page.waitFor(`location.search.includes('arrival=2028-02-29')`, { label: 'form posted' });
178. 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'));
179. 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());
181. // the date range picker: a start click, an end click, both in the field, the days between highlighted
182. check('home lists the range picker', home.includes('id="open-range-picker"'));
183. check('range picker README is served', (await fetch(BASE + '/range-picker/README.md')).ok);
184. await page.goto(BASE + '/range-picker');
185. await page.waitForSelector('#range-picker-input');
186. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
187. await sleep(1500);
188. const rvis = () => ev(`getComputedStyle(document.querySelector('range-picker picker-popup')).display !== 'none'`);
189. const rval = () => ev(`document.getElementById('range-picker-input').value`);
190. const day = (n) => ev(`document.querySelector('range-picker ol.days li:not(.outside) time[datetime$="-${n}"]').closest('li').click()`);
191. check('range: month is closed at first', !(await rvis()));
192. await page.click('#range-picker-input');
193. await page.waitFor(`getComputedStyle(document.querySelector('range-picker picker-popup')).display !== 'none'`, { label: 'popup open' });
194. await day('20');
195. check('range: the first click is the start, the month stays open', /^\d{4}-\d{2}-20 – $/.test(await rval()) && await rvis(), await rval());
196. await day('10');
197. const rv = await rval();
198. check('range: second (earlier) click swaps: start – end in the field', /^\d{4}-\d{2}-10 – \d{4}-\d{2}-20$/.test(rv), rv);
199. await sleep(500);
200. check('range: the month closes after the end', !(await rvis()));
201. await page.click('#range-picker-input');
202. await page.waitFor(`getComputedStyle(document.querySelector('range-picker picker-popup')).display !== 'none'`, { label: 'popup reopen' });
203. 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) }))()`);
204. check('range: start and end marked, the 9 days between highlighted', hl.sel.join() === '10,20' && hl.between.length === 9, JSON.stringify(hl));
205. await shot('range');
206. 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 })); })()`);
207. await page.waitFor(`document.querySelectorAll('range-picker li.between').length === 27`, { label: 'typed range marked' });
208. check('range: a typed range shows its month, 27 days between', true);
209. await ev(`(() => { const f = document.getElementById('range-picker-input'); f.value = '2028-02-01 – 2028-02-30'; f.dispatchEvent(new Event('input', { bubbles: true })); })()`);
210. await page.waitFor(`document.getElementById('range-picker-input').getAttribute('aria-invalid') === 'true'`, { label: 'impossible range marked' });
211. check('range: an impossible range marks the field invalid', true);
212. await ev(`(() => { const f = document.getElementById('range-picker-input'); f.value = '2028-02-01 – 2028-02-29'; f.dispatchEvent(new Event('input', { bubbles: true })); })()`);
213. await page.waitFor(`document.getElementById('range-picker-input').getAttribute('aria-invalid') === 'false'`, { label: 'valid again' });
214. await ev(`document.querySelector('form button[type=submit]').click()`);
215. await page.waitFor(`location.search.length > 0`, { label: 'form posted' });
216. const q = decodeURIComponent(await ev(`location.search`)).replace(/\+/g, ' ');
217. check('range: the form posts the period by the field name', q.includes('range=2028-02-01 – 2028-02-29'), q);
218. check('range picker has no .js file', !existsSync(join(APP, 'components/range-picker/range-picker.js')));
219. 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());
221. // ticket #4: the one-file upload (pure Hybriel): choose / drop -> name, size, progress -> listed; the app stores it
222. {
223. check('home lists the file upload', home.includes('id="open-file-upload"'));
224. check('file upload README is served', (await fetch(BASE + '/file-upload/README.md')).ok);
225. check('file upload has no .js file', !existsSync(join(APP, 'components/file-upload/file-upload.js')));
226. 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());
227. await page.goto(BASE + '/file-upload');
228. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
229. await sleep(600);
230. const FU = (s) => `document.querySelector('file-upload ${s}')`;
231. const mk = (name, n) => `const dt = new DataTransfer(); dt.items.add(new File([new Uint8Array(${n}).fill(66)], '${name}', { type: 'text/plain' }));`;
232. 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 })); })()`);
233. await page.waitFor(`${FU('.state')}.textContent === 'Uploaded'`, { timeout: 30000, label: 'uploaded' });
234. check('upload: name and size shown', (await ev(FU('.name') + '.textContent')) === 'report.txt' && (await ev(FU('.size') + '.textContent')) === '3.0 MB');
235. check('upload: progress bar reaches 100%', (await ev(FU('progress') + '.value')) === 100 && (await ev('window.__max')) >= 1);
236. check('upload: listed under Uploaded', (await ev(FU('ul.uploaded li') + '.textContent')) === 'report.txt — 3.0 MB');
237. const stored = execSync(`ls -l ${join(APP, 'storage/uploads')} | grep -c ' 3145728 '`).toString().trim();
238. check('upload: the app stored all bytes', Number(stored) >= 1, stored);
239. // choosing a second file (input) adds a second row
240. const { root } = await page.send('DOM.getDocument');
241. const { nodeId } = await page.send('DOM.querySelector', { nodeId: root.nodeId, selector: 'file-upload input[type=file]' });
242. writeFileSync(join(SCRATCH, 'pick.txt'), 'hello');
243. await page.send('DOM.setFileInputFiles', { files: [join(SCRATCH, 'pick.txt')], nodeId });
244. await page.waitFor(`document.querySelectorAll('file-upload ul.uploaded li').length === 2`, { timeout: 30000, label: 'chosen file listed' });
245. 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');
246. check('upload: no console errors', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
247. await page.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 800, deviceScaleFactor: 1, mobile: true });
248. await sleep(300); await shot('file-upload-narrow');
249. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
250. await sleep(200); await shot('file-upload');
251. }
253. // the pagination: 89 pages; the ticket's three shapes
254. check('home lists the pagination', home.includes('id="open-pagination"'));
255. check('pagination README is served', (await fetch(BASE + '/pagination/README.md')).ok);
256. await page.goto(BASE + '/pagination');
257. await page.waitForSelector('#pagination-items');
258. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
259. await sleep(500);
260. const pg = () => ev(`[...document.querySelectorAll('#pagination-items button')].map(b => b.textContent).join(' ')`);
261. const clickPg = (t) => ev(`[...document.querySelectorAll('#pagination-items button')].find(b => b.textContent === ${JSON.stringify(t)}).click()`);
262. const waitPg = (t) => page.waitFor(`[...document.querySelectorAll('#pagination-items button')].map(b => b.textContent).join(' ') === ${JSON.stringify(t)}`, { label: 'pagination ' + t });
263. check('pagination: first page shows 1 2 3 4 … 89 Next', (await pg()) === '1 2 3 4 … 89 Next', await pg());
264. await clickPg('4'); await waitPg('Previous 1 2 3 4 5 … 89 Next');
265. check('pagination: page 4 fills a one-page gap: Previous 1 2 3 4 5 … 89 Next', true);
266. 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');
267. await waitPg('Previous 1 … 6 7 8 … 89 Next');
268. check('pagination: middle shows first, last, current ± 1', true);
269. check('pagination: current page is marked', (await ev(`document.querySelector('#pagination-items li.current button').textContent`)) === '7');
270. await ev(`document.querySelector('#pagination-items li.gap button').click()`); await sleep(300);
271. check('pagination: a click on … does nothing', (await pg()) === 'Previous 1 … 6 7 8 … 89 Next');
272. await clickPg('Previous'); await waitPg('Previous 1 … 5 6 7 … 89 Next');
273. check('pagination: Previous goes back one page', true);
274. await clickPg('89'); await waitPg('Previous 1 … 86 87 88 89');
275. check('pagination: last page shows Previous 1 … 86 87 88 89, no Next', true);
276. await clickPg('1'); await waitPg('1 2 3 4 … 89 Next');
277. check('pagination: back on page 1 no Previous', true);
278. await shot('pagination');
279. check('no console errors on the pagination page', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
281. // the Markdown editor: two on one page, real typing and real clicks
282. check('home lists the Markdown editor', home.includes('id="open-md-editor"'));
283. const mdr = await fetch(BASE + '/md-editor/README.md');
284. check('Markdown editor README is served as Markdown', mdr.ok && /markdown/.test(mdr.headers.get('content-type')) && (await mdr.text()).includes('Markdown editor'));
285. 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());
286. await page.send('Emulation.setDeviceMetricsOverride', { width: 1000, height: 1000, deviceScaleFactor: 1, mobile: false });
287. await page.goto(BASE + '/md-editor');
288. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
289. const ED = 'md-editor:nth-of-type(1)';
290. const md1 = (q) => `document.querySelectorAll('md-editor')[0].${q}`;
291. const md2 = (q) => `document.querySelectorAll('md-editor')[1].${q}`;
292. const val1 = () => ev(md1(`querySelector('input.value').value`));
293. const val2 = () => ev(md2(`querySelector('input.value').value`));
294. const art1 = () => ev(md1(`querySelector('article').innerHTML`));
295. await page.waitFor(md1(`querySelector('article h1')`) + ' !== null', { label: 'the value shows formatted' });
296. 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());
297. 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());
298. check('the canonical form of the value equals it (round trip)', await ev(md1(`mdCanon`) + ` === ` + md1(`querySelector('input.value').value`)));
299. check('the second editor is empty and shows its placeholder', (await ev(`getComputedStyle(document.querySelectorAll('md-editor')[1].querySelector('.placeholder')).display`)) === 'block');
300. 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 }); };
301. const typeText = async (t) => { for (const ch of t) await key(ch, '', undefined, ch); };
302. const enter = () => key('Enter', 'Enter', 13, '\r');
303. // type into the second editor: heading, bold, code, list
304. await page.click('md-editor:nth-of-type(2) article');
305. check('the placeholder goes away when it has text', true);
306. await typeText('# Title'); await typeText(' '); await typeText('here'); await enter();
307. await typeText('a **bold** and `code` x'); await enter();
308. check('typing "# " makes a heading while you type', (await ev(md2(`querySelector('article h1')`) + ' !== null')));
309. const html2 = await ev(md2(`querySelector('article').innerHTML`));
310. check('typing **x** and `x` formats them', /<strong>bold<\/strong>/.test(html2) && /<code>code<\/code>/.test(html2), html2);
311. await typeText('- '); await sleep(100);
312. check('typing "- " makes a list', (await ev(md2(`querySelector('article ul')`) + ' !== null')));
313. await typeText('item one'); await enter(); await typeText('item two');
314. await sleep(400);
315. const v2 = await val2();
316. 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));
317. check('the demo shows that value below the editor', (await ev(`document.getElementById('md-value-summary').textContent`)) === v2);
318. check('the first editor was not touched by typing in the second', (await val1()).startsWith('# Hello'));
319. check('the editor content survives re-renders of the page (same article element)', (await ev(md2(`querySelector('article h1')`) + ' !== null')));
320. // toolbar: select the first list item in the first editor, Bold, then Undo
321. 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)})()`);
322. await selectIn(0, 'li:nth-child(1)');
323. await page.click('md-editor:nth-of-type(1) nav button.bold'); await sleep(250);
324. check('toolbar Bold: the selection is **bold** in the value', (await val1()).endsWith('- **first**\n- second'), await val1());
325. await page.click('md-editor:nth-of-type(1) nav button.undo'); await sleep(250);
326. check('toolbar Undo takes it back', (await val1()).endsWith('- first\n- second'), await val1());
327. await selectIn(0, 'h1');
328. await page.click('md-editor:nth-of-type(1) nav button.heading'); await sleep(250);
329. check('toolbar heading button: H1 becomes H2', (await val1()).startsWith('## Hello'), await val1());
330. await selectIn(0, 'ul');
331. await page.click('md-editor:nth-of-type(1) nav button.ol'); await sleep(250);
332. check('toolbar numbered list: the bullets become 1. 2.', (await val1()).endsWith('1. first\n2. second'), await val1());
333. await selectIn(0, 'p');
334. await page.click('md-editor:nth-of-type(1) nav button.pre'); await sleep(250);
335. check('toolbar code block: the paragraph becomes a fenced block', /```\nSome .*\n```/.test(await val1()), await val1());
336. // link: Ctrl+K opens the small form, Apply
337. 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()})()`);
338. await page.click('md-editor:nth-of-type(2) nav button.link'); await sleep(250);
339. check('the link form opens', (await ev(`getComputedStyle(document.querySelectorAll('md-editor')[1].querySelector('link-form')).display`)) === 'flex');
340. await ev(md2(`querySelector('link-form input').focus()`));
341. await typeText('https://example.org/x'); await enter(); await sleep(300);
342. check('a link is added: [text](url) in the value', (await val2()).includes('# [Title here](https://example.org/x)'), await val2());
343. 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:'); })());
344. // paste Markdown in: formatted, plain text; html in it stays text
345. 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}))})()`);
346. await sleep(300);
347. const a1 = await art1();
348. check('pasted Markdown shows formatted', /<h2>Pasted<\/h2><p>hello <strong>there<\/strong> /.test(a1), a1);
349. check('pasted HTML stays text (no element made from it)', !/<b>x<\/b>/.test(a1) && (await val1()).includes('\\<b>x\\</b>'), a1);
350. // the Markdown source switch
351. await page.click('md-editor:nth-of-type(1) footer button'); await sleep(300);
352. 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');
353. 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 }))`);
354. await sleep(200);
355. 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()));
356. await page.click('md-editor:nth-of-type(1) footer button'); await sleep(300);
357. 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());
358. // the form posts both editors by name
359. await page.click('#md-form button[type=submit]'); await sleep(800);
360. const url = new URL(await ev('location.href'));
361. 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);
362. await shot('md-editor');
363. 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());
364. // typed Markdown shortcuts are CONSUMED: the marker disappears, only the formatting stays (real keys, one character at a time)
365. await page.goto(BASE + '/md-editor');
366. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
367. await page.waitFor(md1(`querySelector('article h1')`) + ' !== null', { label: 'the value shows formatted' });
368. 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); };
369. const typeR = async (t) => { for (const ch of t) await keyR(ch, ch === ' ' ? 'Space' : '', ch === ' ' ? 32 : undefined, ch); };
370. const enterR = () => keyR('Enter', 'Enter', 13, '\r');
371. 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); };
372. const valR = (i) => ev(`document.querySelectorAll('md-editor')[${i}].querySelector('input.value').value`);
373. const artR = (i) => ev(`document.querySelectorAll('md-editor')[${i}].querySelector('article').innerHTML`);
374. await page.click('md-editor:nth-of-type(2) article');
375. await typeR('# Heading'); await sleep(200);
376. 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)]));
377. await wipe(1);
378. await typeR('# Again'); await sleep(200);
379. check('typing "# " after the editor was emptied (an empty heading is left): "# Again", not "# # Again"', (await valR(1)) === '# Again', JSON.stringify(await valR(1)));
380. await wipe(1); await keyR('Backspace', 'Backspace', 8);
381. await typeR('- one'); await enterR(); await typeR('- two'); await sleep(200);
382. 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)]));
383. await enterR(); await typeR('1. three'); await sleep(200);
384. 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)));
385. await wipe(1); await keyR('Backspace', 'Backspace', 8);
386. await typeR('1. a'); await enterR(); await typeR('2. b'); await sleep(200);
387. 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)));
388. await wipe(1); await keyR('Backspace', 'Backspace', 8);
389. await typeR('# One'); await enterR(); await typeR('text'); await enterR(); await typeR('## Two'); await sleep(200);
390. 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)]));
391. check('no console errors while typing shortcuts', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
392. await page.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 800, deviceScaleFactor: 1, mobile: true });
393. await page.goto(BASE + '/md-editor'); await sleep(800);
394. check('the Markdown editor fits at 390 px', await ev('document.documentElement.scrollWidth <= window.innerWidth'));
395. await shot('md-editor-narrow');
396. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
398. // ticket #9: files and images in the Markdown editor (drop, paste, choose) go through emit, with progress, and land in the text
399. {
400. await page.goto(BASE + '/md-editor');
401. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
402. await sleep(600);
403. const PNG = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
404. 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' }));`;
405. 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 })); })()`);
406. await page.waitFor(md2(`querySelector('input.value').value`) + '.includes("doc.pdf")', { timeout: 30000, label: 'files uploaded' });
407. const v = await ev(md2(`querySelector('input.value').value`));
408. 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));
409. 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);
410. 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))`));
411. 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]')));
412. check('progress rows are gone afterwards', (await ev(md2(`querySelector('ul.files').children.length`))) === 0);
413. const url = v.match(/\]\((\/md-editor\/files\/[\w.-]+\.pdf)\)/)[1];
414. const got = await fetch(BASE + url);
415. 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') || ''));
416. // a pasted image lands too, at the caret
417. 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 })); })()`);
418. await page.waitFor(md1(`querySelector('input.value').value`) + '.includes("![one.png]")', { timeout: 30000, label: 'pasted image' });
419. check('a pasted image is added too', true);
420. // an image in typed-in Markdown is drawn; only http(s) and site paths are images
421. 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 })); })()`);
422. await sleep(300);
423. const srcs = await ev(`JSON.stringify([...document.querySelectorAll('md-editor')[1].querySelectorAll('article img')].map(i => i.getAttribute('src')))`);
424. check('javascript: and data: images are not made', !srcs.includes('javascript') && !srcs.includes('data:') && srcs.includes('/x.png'), srcs);
425. // 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
426. {
427. const one = mkFiles.replace("dt.items.add(new File([png], 'two.png', { type: 'image/png' }));", '').replace(/dt\.items\.add\(new File\(\[big\][^;]*;/, '');
428. const fire = {
429. drop: `a.dispatchEvent(new DragEvent('drop', { dataTransfer: dt, bubbles: true, cancelable: true, clientX: 0, clientY: 0 }));`,
430. paste: `a.dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true }));`,
431. choose: `const inp = ed.querySelector('input.pick'); inp.files = dt.files; inp.dispatchEvent(new Event('change', { bubbles: true }));`,
432. };
433. for (const way of ['drop', 'paste', 'choose']) {
434. for (const caret of ['in item', 'none']) {
435. 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 })); })()`);
436. await sleep(300);
437. 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', ''));
438. await page.waitFor(md2(`querySelector('input.value').value`) + '.includes("![one.png]")', { timeout: 30000, label: 'list ' + way });
439. const lv = await ev(md2(`querySelector('input.value').value`));
440. 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));
441. }
442. }
443. }
444. check('no console errors on files/images', page.problems().filter(m => !/favicon|Failed to load resource/.test(m.text)).length === 0, page.dumpConsole());
445. await shot('md-editor-files');
446. }
448. // the code editor: real keys, real typing
449. {
450. check('home lists the code editor', home.includes('id="open-code-editor"'));
451. const cer = await fetch(BASE + '/code-editor/README.md');
452. check('Code editor README is served as Markdown', cer.ok && /markdown/.test(cer.headers.get('content-type')) && (await cer.text()).includes('Code editor'));
453. check('no .js of its own in components/code-editor', !execSync(`find ${join(APP, 'components/code-editor')} -name '*.js' -o -name '*.mjs'`).toString().trim());
454. await page.send('Emulation.setDeviceMetricsOverride', { width: 1000, height: 1000, deviceScaleFactor: 1, mobile: false });
455. await page.goto(BASE + '/code-editor');
456. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
457. const CE = (i, q) => `document.querySelectorAll('code-editor')[${i}].${q}`;
458. const cval = (i) => ev(CE(i, `querySelector('input.value').value`));
459. const ctext = (i) => ev(CE(i, `querySelector('article').textContent`));
460. const cgut = (i) => ev(CE(i, `querySelector('code-gutter').textContent`));
461. await page.waitFor(CE(0, `querySelector('article .tok-keyword')`) + ' !== null', { label: 'the code is highlighted' });
462. check('Hybriel code is highlighted: comment, keyword, string, function', await ev(`['comment','keyword','string','function'].every(k => ${CE(0, `querySelector('article .tok-' + k)`)} !== null)`));
463. check('JavaScript is highlighted too: number, comment, string', await ev(`['comment','string','number','keyword'].every(k => ${CE(1, `querySelector('article .tok-' + k)`)} !== null)`));
464. 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`));
465. 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)));
466. check('the value is the plain text (no markup)', (await cval(0)).startsWith('// a Hybriel component\nString title') && !(await cval(0)).includes('<span'));
467. 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 }); };
468. const ctype = async (t) => { for (const ch of t) { if (ch === '\n') await ckey('Enter', 'Enter', 13, '\r'); else await ckey(ch, '', undefined, ch); } };
469. const CTRL = 2, SHIFT = 8;
470. const tab = (shift) => ckey('Tab', 'Tab', 9, undefined, shift ? SHIFT : 0);
471. const undo = () => ckey('z', 'KeyZ', 90, undefined, CTRL);
472. const redo = () => ckey('z', 'KeyZ', 90, undefined, CTRL | SHIFT);
473. // put the caret at text offsets (start..end) of editor i and focus it
474. 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)})()`);
475. await caret(0, (await cval(0)).length);
476. await ctype('\nlet n = 5');
477. 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)));
478. 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')})()`));
479. check('the demo shows that text below the editor', (await ev(`document.getElementById('code-value-hybriel').textContent`)) === (await cval(0)));
480. check('the other editor was not touched', (await cval(1)).startsWith('function add(a, b) {'));
481. // Tab / Shift+Tab on one line
482. await ctype('\n'); await tab(false); await ctype('x');
483. check('Tab inserts a tab character', (await cval(0)).endsWith('let n = 5\n\tx'), JSON.stringify((await cval(0)).slice(-14)));
484. await tab(true);
485. check('Shift+Tab removes it again', (await cval(0)).endsWith('let n = 5\nx'), JSON.stringify((await cval(0)).slice(-14)));
486. // Enter keeps the indent; { closes itself; Enter between the braces opens an indented line
487. await ctype('\n'); await tab(false); await ctype('if (a) {');
488. check('typing { adds the closing }', (await cval(0)).endsWith('\tif (a) {}'), JSON.stringify((await cval(0)).slice(-14)));
489. await ctype('\n');
490. 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)));
491. await ctype('y'); await ctype('\n');
492. 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)));
493. // typing the closer steps over it; a quote closes itself
494. await ckey('Backspace', 'Backspace', 8); await ckey('Backspace', 'Backspace', 8); await ctype('call("a"');
495. 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)));
496. // undo / redo: back through typing, then forward again
497. const before = await cval(0);
498. await undo(); await sleep(50);
499. const u1 = await cval(0);
500. check('Ctrl+Z undoes the last change', u1 !== before && u1.length < before.length + 4, JSON.stringify(u1.slice(-20)));
501. await undo(); await undo(); await sleep(50);
502. const u3 = await cval(0);
503. check('Ctrl+Z again goes further back', u3.length < u1.length, JSON.stringify(u3.slice(-20)));
504. await redo(); await redo(); await redo(); await sleep(50);
505. check('Ctrl+Shift+Z redoes them: the text is back', (await cval(0)) === before, JSON.stringify((await cval(0)).slice(-20)));
506. await ckey('y', 'KeyY', 89, undefined, CTRL);
507. 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'); })());
508. check('the line numbers follow undo', (await cgut(0)) === '1\n2\n3\n4\n5\n6\n7\n8\n9\n10', JSON.stringify(await cgut(0)));
509. // several lines selected: Tab indents all, Shift+Tab outdents all
510. const v0 = await cval(0);
511. await caret(0, 0, v0.length);
512. await tab(false);
513. 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)));
514. await tab(true);
515. check('Shift+Tab outdents them all again', (await cval(0)) === v0, JSON.stringify((await cval(0)).slice(0, 60)));
516. // the second editor indents with two spaces
517. const w0 = await cval(1);
518. await caret(1, 0); await tab(false);
519. check('spaces = 2: Tab inserts two spaces', (await cval(1)) === ' ' + w0, JSON.stringify((await cval(1)).slice(0, 30)));
520. await tab(true);
521. check('spaces = 2: Shift+Tab removes them', (await cval(1)) === w0);
522. // text inserted as a whole (paste): several lines, highlighted, numbered
523. await caret(1, (await cval(1)).length);
524. 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}))})()`);
525. await sleep(150);
526. 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)));
527. // the form posts both by name
528. await page.click('#code-form button[type=submit]'); await sleep(800);
529. const curl = new URL(await ev('location.href'));
530. 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));
531. // the code is only ever text: broken / hostile code shows literally, the page structure stays, nothing runs
532. await page.goto(BASE + '/code-editor');
533. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
534. await page.waitFor(CE(0, `querySelector('article .tok-keyword')`) + ' !== null', { label: 'the code is highlighted' });
535. 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`);
536. const shape0 = await shape();
537. await caret(1, (await cval(1)).length);
538. await ctype('\nif (x) {');
539. await sleep(300);
540. check('unbalanced code renders inside the field as typed', (await cval(1)).includes('if (x) {}') && (await shape()) === shape0, await shape() + ' vs ' + shape0);
541. await ctype('\n'); await ctype('}');
542. 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)));
543. await ev(`window.__pwned = undefined`);
544. await ctype('\n</div><b>x');
545. await ctype('\n<img src=x onerror=window.__pwned=1>');
546. await sleep(500);
547. 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);
548. 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>'));
549. check('typed code did not run (window.__pwned stays undefined)', (await ev(`typeof window.__pwned`)) === 'undefined');
550. await page.goto(BASE + '/code-editor'); await sleep(800);
551. await page.goto(BASE + '/code-editor'); await sleep(800);
552. await shot('code-editor');
553. 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());
554. await page.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 800, deviceScaleFactor: 1, mobile: true });
555. await page.goto(BASE + '/code-editor'); await sleep(800);
556. check('the code editor page fits at 390 px', await ev('document.documentElement.scrollWidth <= window.innerWidth'));
557. await shot('code-editor-narrow');
558. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
560. }
562. // 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
563. {
564. check('home lists the modal', home.includes('id="open-modal"'));
565. const mor = await fetch(BASE + '/modal/README.md');
566. check('modal README is served as Markdown', mor.ok && /markdown/.test(mor.headers.get('content-type')) && (await mor.text()).includes('# Modal'));
567. check('no .js of its own in components/modal', !execSync(`find ${join(APP, 'components/modal')} -name '*.js' -o -name '*.mjs'`).toString().trim());
568. const modalRun = async (w, h, mobile, tag) => {
569. await page.send('Emulation.setDeviceMetricsOverride', { width: w, height: h, deviceScaleFactor: 1, mobile });
570. await page.goto(BASE + '/modal');
571. await page.waitFor('!!window.__hl && window.__hl.socket && window.__hl.socket.readyState === 1', { timeout: 30000, label: 'hydrated' });
572. await sleep(500);
573. const at = async (x, y) => {
574. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x, y, button: 'none' });
575. await page.send('Input.dispatchMouseEvent', { type: 'mousePressed', x, y, button: 'left', clickCount: 1 });
576. await sleep(60);
577. await page.send('Input.dispatchMouseEvent', { type: 'mouseReleased', x, y, button: 'left', clickCount: 1 });
578. await sleep(300);
579. };
580. 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); };
581. 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); };
582. const openIds = () => ev(`[...document.querySelectorAll('dialog[open]')].map(d => d.id).join()`);
583. const last = () => ev(`document.getElementById('modal-last').textContent`);
584. const active = () => ev(`document.activeElement.id || document.activeElement.className || document.activeElement.tagName`);
585. const inside = (id) => ev(`document.getElementById(${JSON.stringify(id)}).contains(document.activeElement)`);
586. // a corner of the dim background, outside every window
587. const bg = async () => at(4, h - 4);
588. check(`modal ${tag}: closed at first (no dialog open)`, (await openIds()) === '' && (await ev(`getComputedStyle(document.getElementById('info')).display`)) === 'none');
589. // open by the page's button: title, content, focus inside, page inert behind
590. await on('#open-info');
591. 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`)));
592. check(`modal ${tag}: the focus is inside when it opens`, await inside('info'), await active());
593. const box = await ev(`JSON.stringify(document.getElementById('info').getBoundingClientRect())`);
594. const b = JSON.parse(box);
595. check(`modal ${tag}: the window is inside the screen`, b.left >= 0 && b.top >= 0 && b.right <= w && b.bottom <= h, box);
596. 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')`));
597. await shot(`modal-open-${w}`);
598. // Esc
599. await mkey('Escape', 'Escape', 27);
600. 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()}`);
601. // ×
602. await on('#open-info'); await on('#info .modal-x');
603. 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()}`);
604. // the dim background
605. await on('#open-info'); await bg();
606. 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()}`);
607. // a press inside the window that ends on the background (a text selection dragged out) does not close it
608. await on('#open-info');
609. const p = await ev(`(() => { const r = document.querySelector('#info modal-body p').getBoundingClientRect(); return { x: r.x + 5, y: r.y + 5 }; })()`);
610. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: p.x, y: p.y, button: 'none' });
611. await page.send('Input.dispatchMouseEvent', { type: 'mousePressed', x: p.x, y: p.y, button: 'left', clickCount: 1 });
612. await page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: 4, y: h - 4, button: 'left' });
613. await page.send('Input.dispatchMouseEvent', { type: 'mouseReleased', x: 4, y: h - 4, button: 'left', clickCount: 1 });
614. await sleep(300);
615. check(`modal ${tag}: a press started inside and let go on the background keeps it open`, (await openIds()) === 'info');
616. await mkey('Escape', 'Escape', 27);
617. // footer buttons: the value is the reason
618. await on('#open-confirm');
619. check(`modal ${tag}: footer buttons are shown`, (await ev(`[...document.querySelectorAll('#confirm footer button')].map(b => b.textContent).join()`)) === 'Cancel,Delete');
620. check(`modal ${tag}: footer buttons have no border (creator's rule)`, await ev(`[...document.querySelectorAll('#confirm button')].every(b => getComputedStyle(b).borderTopWidth === '0px')`));
621. await on('#confirm footer button[value=ok]');
622. 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()}`);
623. await on('#open-confirm'); await on('#confirm footer button[value=cancel]');
624. check(`modal ${tag}: Cancel closes it with "cancel"`, (await last()) === 'confirm: cancel');
625. // backdrop close switched off; focus goes round inside with Tab / Shift+Tab
626. await on('#open-form'); await bg();
627. check(`modal ${tag}: backdropClose = "false": a click on the background leaves it open`, (await openIds()) === 'form' && (await last()) === 'confirm: cancel' && await inside('form'));
628. const seen = [];
629. for (let i = 0; i < 9; i++) { await mkey('Tab', 'Tab', 9); seen.push((await inside('form')) ? 'in' : 'OUT:' + (await active())); }
630. check(`modal ${tag}: Tab ×9 never leaves the window`, seen.every(s => s === 'in'), seen.join());
631. await ev(`document.getElementById('modal-save').focus()`); await mkey('Tab', 'Tab', 9);
632. check(`modal ${tag}: Tab on the last control goes round to the first (×)`, (await active()) === 'modal-x', await active());
633. await mkey('Tab', 'Tab', 9, 8);
634. check(`modal ${tag}: Shift+Tab on the first goes round to the last (Save)`, (await active()) === 'modal-save', await active());
635. for (let i = 0; i < 6; i++) { await mkey('Tab', 'Tab', 9, 8); seen.push((await inside('form')) ? 'in' : 'OUT:' + (await active())); }
636. check(`modal ${tag}: Shift+Tab never leaves the window`, seen.every(s => s === 'in'), seen.join());
637. await ev(`document.getElementById('modal-name').focus()`);
638. await page.send('Input.insertText', { text: 'Ada' }); await sleep(150);
639. await shot(`modal-form-${w}`);
640. // the page closes it itself, with its own reason
641. await on('#modal-save');
642. 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()}`);
643. // no scroll behind: a long page scrolled down stays where it is; the long window scrolls itself
644. await ev(`(() => { const d = document.createElement('div'); d.id = 'gate-tall'; d.style.height = '3000px'; document.querySelector('main').appendChild(d); scrollTo(0, 200); })()`);
645. await sleep(100);
646. await ev(`document.getElementById('open-long').click()`); await sleep(300);
647. const y0 = await ev('scrollY');
648. check(`modal ${tag}: while open the page cannot scroll (html overflow hidden)`, (await ev(`getComputedStyle(document.documentElement).overflow`)) === 'hidden');
649. await page.send('Input.dispatchMouseEvent', { type: 'mouseWheel', x: 4, y: h - 4, deltaX: 0, deltaY: 600 }); await sleep(400);
650. 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 }; })()`);
651. await page.send('Input.dispatchMouseEvent', { type: 'mouseWheel', x: mb.x, y: mb.y, deltaX: 0, deltaY: 600 }); await sleep(400);
652. check(`modal ${tag}: the wheel does not scroll the page behind`, (await ev('scrollY')) === y0, `${y0} → ${await ev('scrollY')}`);
653. 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`)));
654. await shot(`modal-long-${w}`);
655. await mkey('Escape', 'Escape', 27);
656. check(`modal ${tag}: after closing the page scrolls again`, (await ev(`getComputedStyle(document.documentElement).overflow`)) !== 'hidden' && (await last()) === 'long: escape');
657. await ev(`document.getElementById('gate-tall').remove(); scrollTo(0, 0)`); await sleep(100);
658. check(`modal ${tag}: no horizontal overflow`, await ev('document.documentElement.scrollWidth <= window.innerWidth'));
659. await shot(`modal-closed-${w}`);
660. 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());
661. };
662. await modalRun(1280, 900, false, '1280 px');
663. await modalRun(390, 800, true, '390 px');
664. await page.send('Emulation.setDeviceMetricsOverride', { width: 1280, height: 900, deviceScaleFactor: 1, mobile: false });
665. }
667. await shot('wide');
668. await page.send('Emulation.setDeviceMetricsOverride', { width: 390, height: 800, deviceScaleFactor: 1, mobile: true });
669. await sleep(300);
670. check('no horizontal overflow at 390 px', await ev('document.documentElement.scrollWidth <= window.innerWidth'));
671. await shot('narrow');
672. }
674. try { await main(); } catch (e) { check('gate ran', false, String(e && e.stack || e)); }
675. await stop();
676. console.log(`${passes} passed, ${failures} failed`);
677. process.exit(failures ? 1 : 0);