mobile-nav.test.mjs (1524B)
1 import assert from 'node:assert/strict'; 2 import test from 'node:test'; 3 import { Window } from 'happy-dom'; 4 5 test('mobile navigation follows accessible open and close state transitions', async () => { 6 const window = new Window({ url: 'https://example.test/internal' }); 7 globalThis.window = window; 8 globalThis.document = window.document; 9 globalThis.localStorage = window.localStorage; 10 11 document.body.innerHTML = ` 12 <header class="site-header"> 13 <button 14 type="button" 15 data-mobile-nav-toggle 16 aria-controls="mobile-primary-nav" 17 aria-expanded="false" 18 >Menu</button> 19 <nav id="mobile-primary-nav" data-mobile-nav hidden> 20 <a href="/payloads">Payloads</a> 21 <a href="/internal" aria-current="page">Internal</a> 22 </nav> 23 </header> 24 `; 25 26 await import('../src/scripts/app.ts'); 27 28 const trigger = document.querySelector('[data-mobile-nav-toggle]'); 29 const menu = document.querySelector('[data-mobile-nav]'); 30 trigger.click(); 31 32 assert.equal(trigger.getAttribute('aria-expanded'), 'true'); 33 assert.equal(menu.hidden, false); 34 35 menu.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Escape', bubbles: true })); 36 37 assert.equal(trigger.getAttribute('aria-expanded'), 'false'); 38 assert.equal(menu.hidden, true); 39 assert.equal(document.activeElement, trigger); 40 41 trigger.click(); 42 menu.querySelector('a[aria-current="page"]').click(); 43 44 assert.equal(trigger.getAttribute('aria-expanded'), 'false'); 45 assert.equal(menu.hidden, true); 46 });