source: Klonkt/test/messages-thread-order.test.js@ 2c0c338

main
Last change on this file since 2c0c338 was 2c0c338, checked in by Robin <roboburr@…>, 2 weeks ago

Berichten: binnen een gesprek nieuwste bovenaan, en de zwaai in de kop

Twee dingen die bij elkaar horen (Robins besluit, 25-8).

Binnen een DRAAD leest het nu van nieuw naar oud: wat er net bij kwam
staat er meteen, in plaats van onderaan een lange draad. De lijst van
gesprekken en de meldingen blijven staan zoals ze stonden -- alleen
binnen een gesprek draait de volgorde om.

Op een kopie van de array, want groupConversations sorteert oplopend en
de rest van de pagina rekent daarop (_tnew en _tto lezen dezelfde
array). En in de markup, niet met column-reverse: dat draait alleen het
beeld om terwijl een schermlezer de oude volgorde houdt.

Een ONTVANGEN zwaai staat nu ook in de kop van de draad. Ingeklapt zijn
de bubbels weg, en een zwaai is het bericht dat om een antwoord vraagt
zonder iets te zeggen -- die mocht niet achter een dichtgeklapt gesprek
verdwijnen. Blijft staan als de draad open is, net als het aantal. Een
zwaai die je zelf stuurde zet geen teken: dat is geen uitnodiging aan
jezelf.

Vijf toetsen die de echte partial renderen (test/messages-thread-order):
EJS-fouten bestaan alleen tijdens het renderen, dus die vielen tot nu
toe nergens in de suite om. Tegenbewijs gedraaid tegen de oude partial:
de volgorde-toets faalt daar, zoals het hoort.

  • Property mode set to 100644
File size: 3.3 KB
Line 
1// Binnen een gesprek leest Berichten van NIEUW naar OUD (Robins besluit,
2// 25-8), en een ontvangen zwaai staat in de KOP van de draad -- want ingeklapt
3// zijn de bubbels weg, en juist een zwaai vraagt om een antwoord.
4//
5// Dit rendert de echte partial. EJS-fouten bestaan alleen tijdens het renderen:
6// een verkeerde variabelenaam of een scheve `<% %>` valt hier om en nergens
7// anders in de suite.
8import { test } from 'node:test';
9import assert from 'node:assert/strict';
10import ejs from 'ejs';
11import path from 'node:path';
12import { fileURLToPath } from 'node:url';
13
14const partial = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'src', 'views', 'partials', 'msg-item.ejs');
15
16// De helpers die de pagina normaal meegeeft. Ze geven hun invoer terug, zodat
17// wat er in het antwoord staat uit de PARTIAL komt en niet uit een stub.
18const helpers = { t: (k) => k, avatar: (u) => u, emojiName: (n) => n, formatDateTime: (d) => String(d), canMutate: false, seen: 0 };
19
20// De naam is het herkenningspunt: de inhoud loopt via note-body, dat eigen
21// velden leest. De kop draagt alleen `people`, dus deze drie namen kunnen
22// alleen uit de bubbels zelf komen.
23function draad(extra = {}) {
24 return {
25 type: 'thread', key: 'k1', post: null, count: 3, people: [{ name: 'Bart' }],
26 created_at: '2026-08-25T10:00:00Z',
27 messages: [
28 { type: 'mention', name: 'OUDSTE', handle: '@a', created_at: '2026-08-25T09:00:00Z' },
29 { type: 'mention', name: 'MIDDELSTE', handle: '@b', created_at: '2026-08-25T09:30:00Z' },
30 { type: 'mention', name: 'NIEUWSTE', handle: '@c', wave: true, created_at: '2026-08-25T10:00:00Z' },
31 ],
32 ...extra,
33 };
34}
35
36const render = (n) => ejs.renderFile(partial, { ...helpers, n });
37
38test('binnen een gesprek staat het nieuwste bovenaan', async () => {
39 const html = await render(draad());
40 const nieuw = html.indexOf('NIEUWSTE'), midden = html.indexOf('MIDDELSTE'), oud = html.indexOf('OUDSTE');
41 assert.ok(nieuw > -1 && midden > -1 && oud > -1, 'alle drie de berichten staan er');
42 assert.ok(nieuw < midden && midden < oud, `nieuwste bovenaan, kreeg N=${nieuw} M=${midden} O=${oud}`);
43});
44
45test('de draad-array zelf blijft oplopend', async () => {
46 // groupConversations sorteert oplopend en de rest van de pagina rekent
47 // daarop: `_tnew` en `_tto` lezen dezelfde array. Draaide de partial het
48 // origineel om, dan werkt dat door naar alles wat er daarna naar kijkt.
49 const d = draad();
50 await render(d);
51 assert.deepEqual(d.messages.map((m) => m.name), ['OUDSTE', 'MIDDELSTE', 'NIEUWSTE']);
52});
53
54test('een ontvangen zwaai staat in de kop, voor de bubbels', async () => {
55 const html = await render(draad());
56 const kop = html.indexOf('msg-thread-wave');
57 assert.ok(kop > -1, 'de kop draagt een zwaai-teken');
58 assert.ok(kop < html.indexOf('msg-thread-msgs'), 'en staat in de kop, niet tussen de bubbels');
59});
60
61test('geen zwaai, geen teken', async () => {
62 const stil = draad();
63 stil.messages = stil.messages.map((m) => ({ ...m, wave: false }));
64 assert.equal((await render(stil)).includes('msg-thread-wave'), false);
65});
66
67test('een zwaai die JIJ stuurde is geen uitnodiging aan jezelf', async () => {
68 const eigen = draad({ messages: [{ type: 'sent', to_handle: '@bart@pruts.nl', wave: true, created_at: '2026-08-25T10:00:00Z' }] });
69 assert.equal((await render(eigen)).includes('msg-thread-wave'), false);
70});
Note: See TracBrowser for help on using the repository browser.