Versie 0.2.0

tests/ui/loading.test.mjs

@@ -0,0 +1,98 @@
+// Generated, do not edit. sha256:6eb57396047a29d93c920e8603271aba5ed6b08a4da1cf79b7fe590db222f6fc
+import { describe, it, afterEach } from 'node:test';
+import assert from 'node:assert/strict';
+import { installDom } from '../helpers/mini-dom.mjs';
+
+const dom = installDom();
+const loading = await import('../../client/ui/loading.js');
+
+describe('loading: CSP-strict', () => {
+  it('no primitive writes a style attribute', () => {
+    const all = [loading.block(), loading.line('40%'), loading.circle(), loading.card(), loading.table(), loading.cards(), loading.skeleton([loading.line()])].join('');
+    assert.doesNotMatch(all, /style=/);
+  });
+
+  it('show() sets the sizes through the CSSOM', () => {
+    const host = dom.host();
+    loading.show(host, 'card');
+    const circle = host.querySelector('.skel-row-l .skel-block');
+    assert.equal(circle.style.getPropertyValue('width'), '1.6rem');
+    assert.equal(circle.style.getPropertyValue('height'), '1.6rem');
+    assert.equal(circle.style.getPropertyValue('border-radius'), '50%');
+    assert.equal(circle.style.getPropertyValue('flex'), 'none');
+    assert.equal(host.querySelector('.skel-card-body .skel-line').style.getPropertyValue('width'), '55%');
+  });
+
+  it('markup put in by the caller gets its sizes from sizeSkeleton', () => {
+    const host = dom.host();
+    host.innerHTML = loading.block('3rem', '1.1rem');
+    const b = host.querySelector('.skel-block');
+    assert.equal(b.style.getPropertyValue('width'), '');
+    loading.sizeSkeleton(host);
+    assert.equal(b.style.getPropertyValue('width'), '3rem');
+    assert.equal(b.style.getPropertyValue('height'), '1.1rem');
+    assert.equal(b.style.getPropertyValue('border-radius'), 'var(--radius-sm)');
+  });
+
+  it('a size is escaped into its attribute', () => {
+    const host = dom.host();
+    host.innerHTML = loading.line('10%" onmouseover="x');
+    assert.equal(host.querySelector('.skel-line').getAttribute('onmouseover'), null);
+  });
+});
+
+describe('loading: the shapes', () => {
+  it('table: a header row plus the asked rows, each with the asked columns', () => {
+    const host = dom.host();
+    loading.show(host, 'table', { rows: 2, cols: 3 });
+    const rows = host.querySelectorAll('.skel-trow');
+    assert.equal(rows.length, 3);
+    assert.ok(rows.every(r => r.querySelectorAll('.skel-td').length === 3));
+  });
+
+  it('cards: the asked number; lines: three by default', () => {
+    const host = dom.host();
+    loading.show(host, 'cards', { count: 4 });
+    assert.equal(host.querySelectorAll('.skel-card').length, 4);
+    loading.show(host);
+    assert.equal(host.querySelectorAll('.skel-line').length, 3);
+  });
+
+  it('the waiting state is heard: aria-busy and a screen-reader label, the blocks hidden', () => {
+    const host = dom.host();
+    loading.show(host, 'card');
+    assert.equal(host.querySelector('.skel-wrap').getAttribute('aria-busy'), 'true');
+    assert.equal(host.querySelector('.skel-wrap .sr-only').textContent, 'Loading…');
+    assert.equal(host.querySelector('.skel-wrap > [aria-hidden="true"] .skel-card') !== null, true);
+  });
+
+  it('no host: nothing happens', () => {
+    loading.show(null);
+    loading.spinner(null);
+    loading.error(null, 'x');
+  });
+});
+
+describe('loading: the texts', () => {
+  afterEach(() => loading.configureLoading());
+
+  it('spinner and error escape their text at the sink', () => {
+    const host = dom.host();
+    loading.spinner(host, '<b>wacht</b>');
+    assert.equal(host.querySelector('.t-muted').textContent, '<b>wacht</b>');
+    loading.error(host, 'no such column: <script>');
+    assert.match(host.querySelector('[role="alert"]').textContent, /no such column: <script>/);
+    assert.equal(host.querySelector('script'), null);
+  });
+
+  it('configureLoading sets the default texts', () => {
+    loading.configureLoading({ labels: { loading: 'Laden…', loadError: 'Laden mislukt.' } });
+    const host = dom.host();
+    loading.spinner(host);
+    assert.equal(host.querySelector('.t-muted').textContent, 'Laden…');
+    loading.error(host);
+    assert.match(host.textContent, /Laden mislukt\./);
+    loading.show(host);
+    assert.equal(host.querySelector('.sr-only').textContent, 'Laden…');
+  });
+});