AtreidesAssetsFree/tests/ui/loading.test.mjs

// 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…');
  });
});