Changeset fd8faf5 in Klonkt for test

Timestamp:

09/30/2026 07:27:05 AM (4 hours ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

19e28ce

Parents:

86cfa1a

Message:

Zoeken is één vlak: de balk bovenaan, de resultaten eronder, en @naam@server

Robins ontwerp van 30-9: de aparte resultatenpagina is niet meer nodig als het
vak onder de zoekbalk blijft staan. De balk en het vak eronder zijn samen het
hele zoeken, en het vak krijgt alle ruimte die er onder de balk is.

EEN VORM, TWEE INGANGEN. partials/search-surface.ejs is de balk plus het vak;
de overlay op elke pagina gebruikt hem, en /search?q=... ook. De resultaten
zelf staan in partials/search-results.ejs, en het live vak haalt precies die
render op (/search/results). De pagina bevat dus teken voor teken wat het vak
toont; een toets bewaakt dat, want twee renders lopen gegarandeerd uit de pas.
/search blijft bestaan zodat een gedeelde link en Enter zonder JavaScript op
hetzelfde beeld uitkomen.

/search/suggest (JSON, dat de browser tot een eigen lijstje bouwde, anders dan
de pagina) en /search/remote (alleen het adres) zijn weg; niets anders
gebruikte ze. remote-preview.ejs ging mee.

HET VLAK. Vaste positie over het hele scherm, de balk bovenaan, het vak vult
de rest en scrolt zelf. Op z-index 1060: de vorige overlay lag op 200, onder de
tabbalk (1050), zodat op een telefoon het onderste stuk resultaten wegviel. Enter
blijft staan en zoekt meteen, want het vak ís de resultaten. Op de pagina beweegt
het adres mee (/search?q=...), zodat wat je ziet te delen blijft; sluiten is daar
teruggaan. Balk en resultaten staan op één lijn: een scrollbalk alleen rechts
schoof de kolom anders zo'n 9 pixels naar links.

WEBFINGER. @naam@server (met of zonder @ vooraan, zoals Mastodon) haalt het
profiel op, met de volgknop. Zonder eerst een post te proberen: een handle is
nooit een post. De server moet een echte domeinnaam zijn; "@robin" blijft een
naam om naar te zoeken. WebFinger zelf is openbaar en loopt via safeFetch;
het profiel erachter gaat ondertekend, en alleen namens een ingelogde
beheerder, dezelfde grens als een geplakte link.

Onderweg gevonden: search-results.ejs verwees kaal naar queryError, en een
aanroeper die hem vergat liet de hele render omvallen. Alles gaat nu via
locals. In de app gaf gather hem altijd mee, dus live ging het goed; het was
één vergeten veld van een kapotte zoekpagina.

Nagelopen in de browser op 375 en 1280 pixels: de balk bovenaan, het vak tot
de onderrand, tabbalk bedekt, geen horizontale overloop, tikdoelen 44, balk en
resultaten op één lijn. Het gedrag met de echte chrome.js: openen vers en met
focus, typen, Enter zonder weg te gaan, de wachtregel bij een link en een
handle, een traag antwoord dat niets overschrijft, een resultaat aantikken en
Escape sluiten, en het adres dat op de pagina meebeweegt.

Getoetst: pagina en vak teken voor teken gelijk, de handle-herkenning, een
handle ondertekend en zonder post-poging, en niet ingelogd geen enkel verzoek.
Tegenproef: pagina laten afwijken, handle niet herkennen, bij een handle toch
een post proberen en de inlogcontrole eruit laten elk hun toetsen omvallen.
Volledige suite 1292 groen.

shaer-utpi

Co-Authored-By: Claude Opus 5.5 <noreply@…>

File:

• test/search-fediverse.test.js (modified) (9 diffs)

test/search-fediverse.test.js

@@ -26 +26 @@
 const searchMod = await import('../src/routes/search.js');
 const router = searchMod.default;
-const { lookupUri } = searchMod;
+const { lookupUri, lookupHandle } = searchMod;
 
 db.prepare('INSERT INTO users (id, username, email, password_hash, role) VALUES (?,?,?,?,?)')
@@ -55 +55 @@
   gevraagd.push(['actor', uri]);
   actorOpties.push(opts || {});
-  if (!uri.includes('/u/')) return null;
+  const actorUri = uri === '@oma@elders.test' ? 'https://elders.test/u/oma' : uri;
+  if (!actorUri.includes('/u/')) return null;
   return {
-    actor_uri: uri, actor_name: 'Oma', actor_handle: '@oma@elders.test',
-    actor_url: uri, actor_icon: 'https://elders.test/avatar.png', inbox: uri + '/inbox',
+    actor_uri: actorUri, actor_name: 'Oma', actor_handle: '@oma@elders.test',
+    actor_url: actorUri, actor_icon: 'https://elders.test/avatar.png', inbox: actorUri + '/inbox',
   };
 };
@@ -105 +106 @@
   assert.equal(status, 200);
   assert.deepEqual(gevraagd, [], 'een zoekterm hoort geen netwerkverzoek te worden');
-  assert.ok(!html.includes('search-remote'), 'en er hoort geen fediverse-blok te staan');
+  assert.ok(!html.includes('sr-fediverse'), 'en er hoort geen fediverse-blok te staan');
 });
 
@@ -113 +114 @@
   assert.ok(html.includes('Een bericht van ver weg'), 'de inhoud hoort er te staan');
   assert.ok(html.includes('@oma@elders.test'), 'en van wie het is');
-  // De functies van authorize_interaction, op de zoekpagina.
-  for (const actie of ['/authorize_interaction/like', '/authorize_interaction/boost', '/authorize_interaction/report']) {
+  // Waarderen en boosten kan ter plekke; antwoorden en melden op de volle
+  // interactiepagina. De zoekpagina ziet er sinds 30-9 precies zo uit als het
+  // live vak, dus ook hier de compacte kaart.
+  for (const actie of ['/authorize_interaction/like', '/authorize_interaction/boost']) {
     assert.ok(html.includes(`action="${actie}"`), `${actie} ontbreekt`);
   }
-  assert.ok(html.includes('action="/authorize_interaction"'), 'het antwoordvenster ontbreekt');
+  assert.ok(html.includes('/authorize_interaction?uri=https%3A%2F%2Felders.test%2Fnotes%2F1&reply=1'),
+    'antwoorden wijst naar de volle pagina, met het venster open');
 });
 
@@ -131 +135 @@
   assert.equal(status, 200);
   assert.equal(gevraagd.length, 2, 'beide vormen zijn geprobeerd');
-  assert.ok(html.includes('search-remote'), 'het blok staat er, met de melding erin');
-  assert.ok(html.includes('search-page-form'), 'en de zoekpagina zelf is niet weggevallen');
+  assert.ok(/sr-fediverse[\s\S]*class="sr-note"/.test(html), 'het blok staat er, met de melding erin');
+  assert.ok(html.includes('search-bar-form'), 'en de zoekbalk zelf is niet weggevallen');
 });
 
@@ -203 +207 @@
 const preview = async (q) => {
   gevraagd = []; opties = [];
-  const r = await fetch(`http://127.0.0.1:${poort}/search/remote?q=${encodeURIComponent(q)}`, { signal: AbortSignal.timeout(10000) });
+  const r = await fetch(`http://127.0.0.1:${poort}/search/results?q=${encodeURIComponent(q)}`, { signal: AbortSignal.timeout(10000) });
   return { status: r.status, html: await r.text(), cache: r.headers.get('cache-control') };
 };
@@ -240 +244 @@
   try {
     const { status, html } = await preview('https://elders.test/notes/1');
-    // 204 en geen 403: voor een bezoeker is een geplakte link gewoon een
-    // zoekterm, en de zoekbalk valt dan terug op de gewone suggesties.
-    assert.equal(status, 204);
+    // Voor een bezoeker is een geplakte link gewoon een zoekterm: hij krijgt
+    // de gewone resultaten en de zin waarom er verder niets staat.
+    assert.equal(status, 200);
     assert.deepEqual(gevraagd, [], 'zonder rechten hoort er geen enkel verzoek uit te gaan');
-    assert.equal(html, '');
+    assert.ok(!html.includes('/authorize_interaction/like'), 'en er staan geen knoppen');
   } finally {
     ingelogd = true;
@@ -252 +256 @@
 test('een zoekterm in de preview haalt niets op', async () => {
   const { status } = await preview('soundfabrics.nl');
-  assert.equal(status, 204);
-  assert.deepEqual(gevraagd, []);
+  assert.equal(status, 200, 'gewoon zoeken');
+  assert.deepEqual(gevraagd, [], 'maar niets ophalen');
 });
 
@@ -323 +327 @@
 });
 
+// ── Eén zoekvlak: de pagina en het live vak zijn hetzelfde ─────────────────
+//
+// Robins ontwerp van 30-9: de zoekbalk en het vak eronder zijn het hele
+// zoeken, en /search?q=... ziet er hetzelfde uit. Dat is alleen waar zolang
+// beide dezelfde render gebruiken; deze toets vangt het moment dat ze uit
+// elkaar gaan lopen.
+
+test('de pagina en het live vak tonen dezelfde resultaten, teken voor teken', async () => {
+  const pagina = (await zoek('https://elders.test/notes/1')).html;
+  const vak = (await preview('https://elders.test/notes/1')).html.trim();
+  assert.ok(vak.startsWith('<div class="sr">'), 'het vak levert de resultaten-render');
+  assert.ok(pagina.includes(vak), 'de pagina bevat exact dezelfde render als het live vak');
+});
+
+test('een lege vraag in het live vak levert niets en haalt niets op', async () => {
+  const { status } = await preview('x');
+  assert.equal(status, 204);
+  assert.deepEqual(gevraagd, []);
+});
+
+// ── WebFinger: @naam@server in de zoekbalk ───────────────────────────────────
+
+test('een handle wordt herkend, een naam of zin niet', () => {
+  assert.equal(lookupHandle('@oma@elders.test'), '@oma@elders.test');
+  assert.equal(lookupHandle('oma@Elders.Test'), '@oma@elders.test', 'zonder @ vooraan, zoals Mastodon');
+  assert.equal(lookupHandle('  @oma.v_d-berg@sub.elders.test  '), '@oma.v_d-berg@sub.elders.test');
+  assert.equal(lookupHandle('@oma'), null, 'een naam om naar te zoeken, geen adres');
+  assert.equal(lookupHandle('@oma@localhost'), null, 'een server zonder domeinnaam');
+  assert.equal(lookupHandle('oma @elders.test'), null, 'een spatie maakt er een zoekopdracht van');
+  assert.equal(lookupHandle('https://elders.test/@oma'), null, 'een adres is een adres, geen handle');
+});
+
+test('een handle haalt het profiel op, ondertekend, zonder eerst een post te proberen', async () => {
+  actorOpties = [];
+  const { html } = await preview('@oma@elders.test');
+  assert.deepEqual(gevraagd, [['actor', '@oma@elders.test']], 'alleen het profiel: een handle is nooit een post');
+  assert.equal(actorOpties[0] && actorOpties[0].asSlug, 'robo', 'het profiel achter de handle gaat ondertekend');
+  assert.ok(html.includes('action="/authorize_interaction/follow"'), 'met de volgknop');
+  assert.ok(html.includes('https://elders.test/u/oma'), 'voor het profiel dat WebFinger opleverde');
+});
+
+test('een handle op de zoekpagina geeft hetzelfde profiel', async () => {
+  const { html } = await zoek('oma@elders.test');
+  assert.ok(html.includes('action="/authorize_interaction/follow"'));
+});
+
+test('niet ingelogd levert een handle geen enkel verzoek op', async () => {
+  ingelogd = false;
+  try {
+    const { status, html } = await preview('@oma@elders.test');
+    assert.equal(status, 200);
+    assert.deepEqual(gevraagd, [], 'geen WebFinger en geen profiel');
+    assert.ok(!html.includes('/authorize_interaction/follow'));
+  } finally {
+    ingelogd = true;
+  }
+});
+