Versie 0.2.0

tests/ui/shared-setup.test.mjs

@@ -0,0 +1,88 @@
+// Generated, do not edit. sha256:bd286c1811389fc704e1fb7d0c5403e1bc83b9a7d21ab777de72f7aae17ec2e2
+import { describe, it, mock } from 'node:test';
+import assert from 'node:assert/strict';
+import { installDom } from '../helpers/mini-dom.mjs';
+
+const dom = installDom();
+
+const INSTELLING = { blur: 1, auto_blur_min: 999999 };
+const geschreven = [];
+mock.module('../../client/app-settings.js', {
+  namedExports: {
+    appSetting: k => INSTELLING[k],
+    setAppSetting: async (k, v) => { INSTELLING[k] = v; geschreven.push([k, v]); },
+    baseCurrency: () => 'EUR',
+  },
+});
+
+const { configureSharedUi } = await import('../../client/ui/shared-setup.js');
+const dlg = await import('../../client/ui/dialog.js');
+const { setLocale } = await import('../../client/i18n/index.js');
+const { create } = await import('../../client/ui/tabs.js');
+
+const boven = () => dom.document.querySelectorAll('.dialog-overlay').at(-1);
+const escape = () => dom.key(dom.document.body, 'Escape');
+
+describe('shared-setup: de dialogen', () => {
+  it('de knoppen staan in het Nederlands', async () => {
+    const p = dlg.confirm({ message: 'x' });
+    assert.equal(boven().querySelector('[data-dlg="ok"]').textContent, 'OK');
+    assert.equal(boven().querySelector('[data-dlg="cancel"]').textContent, 'Annuleren');
+    escape();
+    await p;
+    const d = dlg.detail({ title: 'x', html: '' });
+    assert.equal(boven().querySelector('.dialog-close').getAttribute('aria-label'), 'Sluiten');
+    escape();
+    await d;
+  });
+
+  it('volgt de taal: opnieuw zetten na setLocale geeft de knoppen in die taal', async () => {
+    setLocale('en');
+    try {
+      configureSharedUi();
+      const p = dlg.stepper({ steps: [{ html: () => '' }] });
+      assert.equal(boven().querySelector('[data-step="skip"]').textContent, 'Skip');
+      escape();
+      await p;
+    } finally {
+      setLocale('nl');
+      configureSharedUi();
+    }
+  });
+
+  it('een detailpaneel krijgt het oog als de bedragen vervaagd zijn; een klik haalt de vervaging weg en het oog met haar', async () => {
+    INSTELLING.blur = 1;
+    const p = dlg.detail({ title: 'Asset', html: '' });
+    const oog = boven().querySelector('.dialog-title .dialog-eye');
+    assert.ok(oog);
+    assert.equal(oog.getAttribute('aria-label'), 'Bedragen tonen');
+    dom.click(oog);
+    await new Promise(r => setImmediate(r));
+    assert.deepEqual(geschreven.at(-1), ['blur', 0]);
+    assert.equal(boven().querySelector('.dialog-eye'), null);
+    escape();
+    await p;
+  });
+
+  it('zonder vervaging geen oog, en het verschijnt als de vervaging intussen invalt', async () => {
+    INSTELLING.blur = 0;
+    const p = dlg.detail({ title: 'Asset', html: '' });
+    assert.equal(boven().querySelector('.dialog-eye'), null);
+    dom.document.dispatchEvent(new CustomEvent('blur-changed', { detail: { on: true } }));
+    assert.ok(boven().querySelector('.dialog-eye'));
+    escape();
+    await p;
+  });
+});
+
+describe('shared-setup: de tabbladen', () => {
+  it('een paneel dat faalt toont de foutkaart van de app, met de melding', () => {
+    const e = console.error;
+    console.error = () => {};
+    try {
+      const t = create(dom.host(), { items: [{ id: 'a', label: 'A' }], render: () => { throw new Error('kapot'); } });
+      assert.match(t.panel.textContent, /Er ging iets mis bij het laden van deze sectie/);
+      assert.match(t.panel.textContent, /kapot/);
+    } finally { console.error = e; }
+  });
+});