Versie 0.2.0

tests/ui/task-card.test.mjs

@@ -0,0 +1,74 @@
+// Generated, do not edit. sha256:da5a18d6a0bc54d00b68ce5ce60b1415a99e474e0a0bf30235954a3ad3d1cb69
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+const { taskCardHtml, nothingPendingHtml } = await import('../../client/ui/task-card.js');
+
+describe('taskCardHtml: the shell', () => {
+  it('wraps title and body in one card', () => {
+    const html = taskCardHtml({ title: 'Meldingen', body: '<p>drie</p>' });
+    assert.match(html, /^<div class="card">/);
+    assert.match(html, /<div class="t-label">Meldingen<\/div>/);
+    assert.match(html, /<p>drie<\/p>/);
+    assert.match(html, /<\/div>$/);
+  });
+
+  it('leaves out the header row when there are no actions', () => {
+    const html = taskCardHtml({ title: 'Meldingen', body: 'x' });
+    assert.doesNotMatch(html, /task-card-head/);
+  });
+
+  it('adds the header row as soon as there are actions, with the label inside it', () => {
+    const html = taskCardHtml({ title: 'Afstemmen', actions: '<button>Opnieuw</button>', body: 'x' });
+    assert.match(html, /<div class="task-card-head"><div class="t-label">Afstemmen<\/div><button>Opnieuw<\/button><\/div>/);
+  });
+
+  it('puts className on the card and keeps the base class', () => {
+    const html = taskCardHtml({ title: 'Dubbele boekingen', className: 'health-finding health-warn' });
+    assert.match(html, /^<div class="card health-finding health-warn">/);
+  });
+
+  it('adds no stray space when there is no className', () => {
+    assert.match(taskCardHtml({ title: 'x' }), /^<div class="card">/);
+  });
+
+  it('survives an empty body and empty actions', () => {
+    const html = taskCardHtml({ title: 'Leeg' });
+    assert.match(html, /<div class="card"><div class="t-label">Leeg<\/div><\/div>/);
+  });
+});
+
+describe('taskCardHtml: text and markup do not swap places', () => {
+  it('escapes the title', () => {
+    const html = taskCardHtml({ title: '<img src=x onerror=alert(1)>', body: '' });
+    assert.doesNotMatch(html, /<img/, 'the title is text and never markup');
+    assert.match(html, /&lt;img/);
+  });
+
+  it('escapes a quote in the title as well', () => {
+    const html = taskCardHtml({ title: 'Say "hi"', body: '' });
+    assert.doesNotMatch(html, /"hi"/);
+    assert.match(html, /&quot;hi&quot;/);
+  });
+
+  it('does NOT escape actions and body', () => {
+    const html = taskCardHtml({
+      title: 'x', actions: '<button id="go">Go</button>', body: '<div class="rec-item">rij</div>',
+    });
+    assert.match(html, /<button id="go">Go<\/button>/);
+    assert.match(html, /<div class="rec-item">rij<\/div>/);
+  });
+});
+
+describe('nothingPendingHtml', () => {
+  it('is a check icon in its own block', () => {
+    const html = nothingPendingHtml();
+    assert.match(html, /class="task-card-empty"/);
+    assert.match(html, /class="task-card-empty-icon"/);
+    assert.match(html, /<svg/);
+  });
+
+  it('keeps its icon, because it is not the same thing as an empty page', () => {
+    assert.match(nothingPendingHtml(), /<svg/);
+  });
+});