1 files changed, 27 insertions, 6 deletions
diff --git a/tools/pager-wheel-test.js b/tools/pager-wheel-test.js
index b73171b..45a5115 100644
--- a/tools/pager-wheel-test.js
+++ b/tools/pager-wheel-test.js
@@ -13,7 +13,7 @@ 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 png = (size) => Bun.spawnSync(['ffmpeg', '-loglevel', 'error', '-f', 'lavfi', '-i', 'testsrc=size=' + size, '-frames:v', '1', '-f', 'image2', '-c:v', 'png', 'pipe:1']).stdout;
-const PICS = { a1: png('400x300'), a2: png('300x400'), b: png('320x320'), d: png('360x240') };
+const PICS = { a1: png('400x300'), a2: png('300x400'), b: png('320x320'), d: png('360x240'), e: png('240x180') };
 
 const SK = generateSecretKey(), AUTHOR = getPublicKey(SK);
 const now = Math.floor(Date.now() / 1000);
@@ -22,7 +22,7 @@ const html = await buildHtml({ minify: true, pwa: false });
 const server = Bun.serve({ port: 0, fetch: (req) => {
   const path = new URL(req.url).pathname;
   if (path.startsWith('/punks')) return new Response(Bun.file('dist' + path));
-  const m = /^\/(a1|a2|b|d)\.png$/.exec(path);
+  const m = /^\/(a1|a2|b|d|e)\d*\.png$/.exec(path);
   if (m) return new Response(PICS[m[1]], { headers: { 'content-type': 'image/png' } });
   return new Response(html, { headers: { 'content-type': 'text/html' } });
 } });
@@ -32,7 +32,7 @@ const seeded = [
   post('one picture ' + U('b'), 200),
   post('only words here, nothing to look at', 300),
   post('a last picture ' + U('d'), 400),
-  ...Array.from({ length: 12 }, (_, i) => post('filler ' + i + ' ' + 'lorem ipsum dolor sit amet. '.repeat(5), 500 + i * 60)),
+  ...Array.from({ length: 12 }, (_, i) => post('more ' + i + ' ' + U('e' + i), 500 + i * 60)), // a dozen more, one picture each, for a flight
 ];
 
 const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox', '--blink-settings=primaryHoverType=2,availableHoverTypes=2,primaryPointerType=4,availablePointerTypes=4'] /* a pointer that hovers: headless has none */ });
@@ -94,6 +94,8 @@ try {
   console.log('\n[a wheel notch is a step]');
   await openPic('two pictures');
   check('the picture opens in the pager', await resting('a1.png'), await curPic());
+  check('opening fills the media buffer without scrolling to the end', await waitFor(() => document.querySelectorAll('.mp-group').length === 15, null, 8000));
+  check('background loading keeps the first picture on screen', await curPic() === 'a1.png');
   await page.mouse.move(640, 450);
   await wheel(100);
   check('a notch down: the next post\'s picture', await resting('b.png'), await curPic());
@@ -113,10 +115,29 @@ try {
   check('shift+wheel at the first: stays', (await curPic()) === 'a1.png', await curPic());
   await wheel(100, { mods: 8 }); await resting('a2.png');
   await sleep(300);
+  console.log('\n[a spin flies, and lands snapped]');
+  // posts with pictures, in order: a (two), b, d, e0 … e11 — a spin of five
+  // notches is 1 + 1 + 2 + 2 + 2 = 8 posts on from a: e5
   for (let i = 0; i < 5; i++) { await wheel(100); await sleep(10); }
-  await sleep(700);
-  check('a spin of five notches in a blink is a step or two, not five', ['b.png', 'd.png'].includes(await curPic()), await curPic());
-  await wheel(-100); await resting('b.png'); await wheel(-100); await resting('a2.png'); await wheel(100); await resting('b.png');
+  await sleep(250);
+  const mid = await pos();
+  check('mid-flight: between posts, gliding', /glide:true/.test(mid) && (await curPic()) === 'between', mid);
+  check('a spin of five notches flies eight posts on and lands snapped', await resting('e5.png'), await curPic() + ' ' + await pos());
+  check('the landing is arrived at: the sideways arrows know the post', await page.evaluate(() => !document.querySelector('.media-pager').classList.contains('has-right')));
+  for (let i = 0; i < 5; i++) { await wheel(-100); await sleep(10); }
+  check('a spin back flies back the same way', await resting('a2.png'), await curPic() + ' ' + await pos());
+  // a notch against a flight catches it on the post it is passing
+  for (let i = 0; i < 5; i++) { await wheel(100); await sleep(10); }
+  await sleep(200);
+  await wheel(-100);
+  await sleep(900);
+  const caught = await curPic();
+  check('a notch back mid-flight catches it, snapped on a post short of the target', caught !== 'between' && !['e5.png', 'a1.png', 'a2.png'].includes(caught), caught + ' ' + await pos());
+  await sleep(300);
+  await wheel(-100); await resting(caught === 'b.png' ? 'a2.png' : caught === 'd.png' ? 'b.png' : caught === 'e0.png' ? 'd.png' : 'e' + (Number(caught[1]) - 1) + '.png');
+  // back to b for what follows
+  while ((await curPic()) !== 'b.png') { await wheel((await curPic()) === 'a2.png' || (await curPic()) === 'a1.png' ? 100 : -100); await sleep(500); }
+  await sleep(300);
 
   console.log('\n[a trackpad\'s run is one step]');
   await sleep(300);