Versie 0.3.3

tests/ui/hint.test.mjs

@@ -1,4 +1,4 @@
-// Generated, do not edit. sha256:f04b67a8f0dbd9eb295b842585345e76f56ef4fd377d5010897bcf893dbd0395
+// Generated, do not edit. sha256:0196b96345c180a741780bad0241a094640e956c6972ad08f5b4f400181c36c5
 import { describe, it, beforeEach } from 'node:test';
 import assert from 'node:assert/strict';
 import { installDom } from '../helpers/mini-dom.mjs';
@@ -98,6 +98,26 @@ describe('a panel that would scroll gets wider on opening', () => {
     assert.equal(panel.classList.contains('is-wide'), false);
   });
 
+  it('a click on the icon pins the panel, and a click outside, Escape or the icon again closes it', () => {
+    configureHint();
+    setPageHint(page, { title: 'x', rows: ['<a href="#">link</a>'] });
+    const hint = () => mount.querySelector('.hint');
+    const btn = () => mount.querySelector('.hint-btn');
+    dom.click(btn());
+    assert.ok(hint().classList.contains('is-open'));
+    assert.equal(btn().getAttribute('aria-expanded'), 'true');
+    dom.click(mount.querySelector('.hint-panel a'));
+    assert.ok(hint().classList.contains('is-open'), 'a click inside the panel keeps it open');
+    dom.click(page);
+    assert.equal(hint().classList.contains('is-open'), false);
+    dom.click(btn());
+    dom.key(dom.document.body, 'Escape');
+    assert.equal(hint().classList.contains('is-open'), false);
+    dom.click(btn());
+    dom.click(btn());
+    assert.equal(hint().classList.contains('is-open'), false);
+  });
+
   it('binds its listeners once per mount, however often a page announces', () => {
     const before = mount.listeners.length;
     setPageHint(page, { title: 'a', rows: [] });