1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95// Keyboard path through the wallet: swiping the carousel to Savings opens its
// Receive pane (the on-chain address, no extra tap); on Send, Enter in the
// recipient field picks the top suggestion, and Enter after an amount
// presses the screen's main button (Review), Enter again presses the next
// one (confirm). A held Enter (auto-repeat) presses nothing.
// Uses the live registrar for the 'adam' lookup. Spends nothing: the wallet
// is fresh and empty, and the confirm step is checked on a stand-in button.
// Run: bun tools/send-enter-keys-test.js
import puppeteer from './puppeteer.js';
import { generateMnemonic } from '@scure/bip39';
import { wordlist } from '@scure/bip39/wordlists/english';
import { buildHtml } from '../build.js';
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
let ok = true;
const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' — ' + d : ''}`); if (!c) ok = false; };
const html = await buildHtml({ minify: true, pwa: false });
const server = Bun.serve({ port: 0, fetch: (req) => {
const p = new URL(req.url).pathname;
if (p.startsWith('/punks') || p === '/verify-worker.js' || p.startsWith('/locales') || /\.js$/.test(p)) { const f = Bun.file('dist' + p); return f.size ? new Response(f) : new Response('', { status: 404 }); }
return new Response(html, { headers: { 'content-type': 'text/html' } });
} });
const browser = await puppeteer.launch({ executablePath: process.env.CHROME || '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox'] });
const page = await browser.newPage();
const errs = []; page.on('pageerror', (e) => errs.push(String(e)));
const click = (t) => page.evaluate((x) => { const e = [...document.querySelectorAll('button')].find((n) => n.textContent.trim().toLowerCase().includes(x)); if (e) { e.click(); return true; } return false; }, t);
const lit = () => page.evaluate(() => document.querySelector('.tabs .active, .tabs [aria-selected=true]')?.textContent.trim() || '');
const addrShown = () => page.evaluate(() => document.querySelector('.addr-box')?.textContent.trim() || '');
// swipe the carousel to a card the way a finger does: scroll the strip, let it settle
const swipeTo = (cls) => page.evaluate((c) => {
const el = document.querySelector('.bal-carousel'); const k = el && el.querySelector('.' + c);
if (!k) return false;
el.scrollTo({ left: k.offsetLeft + k.offsetWidth / 2 - el.clientWidth / 2, behavior: 'auto' });
el.dispatchEvent(new Event('scroll'));
return true;
}, cls);
// Replace the main button's action with a recorder, so a press is visible
// and nothing is really sent.
const armPrimary = () => page.evaluate(() => {
const b = document.querySelector('[data-send-pane] .btn-primary.btn-block:not(:disabled), [data-send-pane] .btn-primary.grow:not(:disabled)');
if (!b) return null;
window.__pressed = null;
b.onclick = () => { window.__pressed = b.textContent.trim(); };
return b.textContent.trim();
});
try {
await page.setViewport({ width: 390, height: 844 });
await page.goto(server.url.origin, { waitUntil: 'domcontentloaded' });
await sleep(400);
await click('create a new wallet'); await sleep(500); await click('to import'); await sleep(400);
await page.waitForSelector('textarea'); await page.type('textarea', generateMnemonic(wordlist)); await click('open wallet');
for (let i = 0; i < 80 && !(await page.evaluate(() => [...document.querySelectorAll('button')].some((b) => b.textContent.trim() === 'Send'))); i++) {
await page.evaluate(() => [...document.querySelectorAll('button')].find((b) => /^(not now|skip|continue|later)$/i.test(b.textContent.trim()))?.click());
await sleep(400);
}
await sleep(3000); // features (names, zaps, ark) load
console.log('[carousel → Savings]');
// a fresh wallet is Savings only: set up its Spending side for the carousel
for (let i = 0; i < 60 && !(await click('set up a spending account')); i++) await sleep(500);
for (let i = 0; i < 60 && !(await page.$('.bal-carousel .face-savings')); i++) {
await page.evaluate(() => [...document.querySelectorAll('button')].find((b) => /^(not now|skip|continue|later|done)$/i.test(b.textContent.trim()))?.click());
await sleep(500);
}
check('the carousel is up', !!(await page.$('.bal-carousel .face-savings')));
await swipeTo('face-spending'); await sleep(1200);
check('on Spending, its history (no pane open)', !(await lit()), await lit());
await swipeTo('face-savings'); await sleep(1200);
let a = await addrShown();
check('Savings opens on Receive', /receive/i.test(await lit()), await lit());
check('...showing the on-chain deposit address', /^(bc1|tb1|bcrt1)/.test(a), a);
await swipeTo('face-spending'); await sleep(1200);
check('back on Spending, history again', !(await lit()), await lit());
console.log('[recipient: Enter picks the top suggestion]');
// a REAL click: Chrome focuses the button clicked, and the recipient field
// must still take the cursor from it
const openSend = async () => {
for (const b of await page.$$('button')) if ((await b.evaluate((n) => n.textContent.trim())) === 'Send') { await b.click(); return; }
};
await openSend();
await page.waitForSelector('textarea.send-dest', { timeout: 10000 });
await sleep(300);
check('desktop: Send opens with the cursor in the recipient field', await page.evaluate(() => document.activeElement?.matches('textarea.send-dest')),
await page.evaluate(() => document.activeElement?.outerHTML.slice(0, 80)));
// away and back, two ways: the cursor lands again each time
await page.evaluate(() => document.activeElement?.blur());
await page.evaluate(() => [...document.querySelectorAll('button')].find((b) => b.textContent.trim() === 'Receive')?.click()); await sleep(600);
await openSend(); await sleep(600);
check('...again after Receive and back to Send', await page.evaluate(() => document.activeElement?.matches('textarea.send-dest')),
await page.evaluate(() => document.activeElement?.outerHTML.slice(0, 80)));
await page.evaluate(() => document.activeElement?.blur());
await swipeTo('face-savings'); await sleep(1200);
await swipeTo('face-spending'); await sleep(1200);
await openSend(); await sleep(600);
check('...and after swiping to Savings and back', await page.evaluate(() => document.activeElement?.matches('textarea.send-dest')),
await page.evaluate(() => document.activeElement?.outerHTML.slice(0, 80)));
await page.focus('textarea.send-dest');
await page.keyboard.type('adam', { delay: 80 });
let top = '';
for (let i = 0; i < 40 && !top; i++) { await sleep(250); top = await page.evaluate(() => { const s = document.querySelector('.send-suggest'); return s && s.style.display !== 'none' ? s.querySelector('.item .muted')?.textContent.trim() || s.querySelector('.item')?.textContent.trim() || '' : ''; }); }
check('suggestions show for "adam"', !!top, top || await page.evaluate(() => document.querySelector('[data-send-pane]')?.innerText.slice(0, 200)));
await page.keyboard.press('Enter');
let amt = null;
for (let i = 0; i < 40 && !amt; i++) { await sleep(250); amt = await page.$('[data-send-pane] input[type=number]'); }
const field = await page.evaluate(() => document.querySelector('textarea.send-dest')?.value ?? document.querySelector('[data-send-pane] h3')?.textContent);
check('Enter picked it: the amount step is up', !!amt, field);
check('no line break went into the field', !/\n/.test(field || ''), JSON.stringify(field));
await sleep(300);
check('desktop: the amount field has the cursor already', await page.evaluate(() => !matchMedia('(pointer: coarse)').matches && document.activeElement?.matches('[data-send-pane] input[type=number]')),
await page.evaluate(() => document.activeElement?.outerHTML.slice(0, 80)));
// left alone after that: a re-render (unit toggle) doesn't pull it back
await page.evaluate(() => document.activeElement.blur());
await page.evaluate(() => document.querySelector('[data-send-pane] button[title]')?.click()); await sleep(300);
await page.evaluate(() => document.querySelector('[data-send-pane] button[title]')?.click()); await sleep(300);
check('...only once: a later render leaves focus alone', await page.evaluate(() => document.activeElement === document.body),
await page.evaluate(() => document.activeElement?.outerHTML.slice(0, 80)));
console.log('[amount: Enter presses the main button]');
await page.focus('[data-send-pane] input[type=number]');
await page.keyboard.type('1000');
const label = await armPrimary();
check('there is a main button to press', !!label, label);
await page.keyboard.down('Enter'); await page.keyboard.up('Enter');
check('Enter in the amount pressed it', await page.evaluate(() => window.__pressed) === label, label);
check('...and let go of the field', await page.evaluate(() => document.activeElement === document.body));
console.log('[nothing focused: Enter presses the next main button]');
const label2 = await armPrimary();
await page.keyboard.press('Enter');
check('Enter with nothing focused pressed it', await page.evaluate(() => window.__pressed) === label2, label2);
console.log('[held Enter presses nothing]');
await armPrimary();
await page.evaluate(() => window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', repeat: true, bubbles: true })));
check('an auto-repeat Enter is ignored', await page.evaluate(() => window.__pressed) === null);
console.log('[the real thing: adam ⏎ 1000 ⏎ goes to the next screen]');
await page.evaluate(() => [...document.querySelectorAll('button')].find((b) => b.textContent.trim() === 'Send')?.click()); await sleep(400);
await page.evaluate(() => [...document.querySelectorAll('button')].find((b) => b.textContent.trim() === 'Send')?.click());
await page.waitForSelector('textarea.send-dest', { timeout: 10000 });
await page.$eval('textarea.send-dest', (e) => { e.value = ''; e.dispatchEvent(new Event('input', { bubbles: true })); }); await sleep(300);
await page.focus('textarea.send-dest');
await page.keyboard.type('adam', { delay: 80 });
await sleep(2500);
await page.keyboard.press('Enter');
await page.waitForSelector('[data-send-pane] input[type=number]', { timeout: 10000 });
await page.focus('[data-send-pane] input[type=number]');
await page.keyboard.type('1000');
const before = await page.evaluate(() => document.querySelector('[data-send-pane]')?.innerText || '');
await page.keyboard.press('Enter');
await sleep(2500);
const after = await page.evaluate(() => document.querySelector('[data-send-pane]')?.innerText || '');
console.log(' screen after ⏎:', JSON.stringify(after.slice(0, 200)));
check('the screen moved on to the review', after !== before && /Send$/.test(after.trim()), after.slice(-40));
const confirmLabel = await armPrimary();
await page.keyboard.press('Enter');
check('⏎ again presses Send (stand-in: nothing is sent)', confirmLabel === 'Send' && await page.evaluate(() => window.__pressed) === 'Send', confirmLabel);
check('no page errors', errs.length === 0, errs.join('; ').slice(0, 300));
} catch (e) {
console.error(e); ok = false;
} finally {
await browser.close(); server.stop();
}
console.log(ok ? 'PASS' : 'FAIL');
process.exit(ok ? 0 : 1);
|
