| 1 | import assert from "node:assert/strict"; |
| 2 | import { JSDOM } from "jsdom"; |
| 3 | import React, { act } from "react"; |
| 4 | const dom = new JSDOM('<div id="root"></div>'); |
| 5 | Object.assign(globalThis, { window: dom.window, document: dom.window.document, HTMLElement: dom.window.HTMLElement, IS_REACT_ACT_ENVIRONMENT: true }); |
| 6 | const { createRoot } = await import("react-dom/client"); |
| 7 | const { SettingsOptions } = await import("../components/SettingsOptions"); |
| 8 | const root = createRoot(document.getElementById("root")!); |
| 9 | const saved: number[] = []; |
| 10 | await act(async () => root.render(<form><SettingsOptions layout="field" aria-label="Language"> |
| 11 | {[0, 1, 2].map(value => <button key={value} disabled={value === 1} className={value === 0 ? "set-seg__btn--on" : ""} onClick={() => saved.push(value)}>{value}</button>)} |
| 12 | </SettingsOptions></form>)); |
| 13 | const buttons = Array.from(document.querySelectorAll('button')); |
| 14 | assert.equal(buttons[0].getAttribute('aria-pressed'), 'true'); |
| 15 | assert.ok(document.querySelector('.settings-options--field'), 'standard settings choices opt into the shared field width'); |
| 16 | assert.equal(buttons[2].getAttribute('aria-pressed'), 'false'); |
| 17 | assert.equal(buttons[0].type, 'button', 'choices must not accidentally submit settings forms'); |
| 18 | async function key(button: HTMLButtonElement, value: string) { |
| 19 | await act(async () => button.dispatchEvent(new dom.window.KeyboardEvent('keydown', {key:value,bubbles:true,cancelable:true}))); |
| 20 | } |
| 21 | buttons[0].focus(); |
| 22 | await key(buttons[0], 'ArrowRight'); |
| 23 | assert.equal(document.activeElement, buttons[2]); |
| 24 | assert.deepEqual(saved, [2], 'skip disabled choice and save exactly once'); |
| 25 | await key(buttons[2], 'ArrowRight'); |
| 26 | assert.equal(document.activeElement, buttons[0], 'wrap at end'); |
| 27 | await key(buttons[0], 'End'); |
| 28 | assert.equal(document.activeElement, buttons[2]); |
| 29 | await key(buttons[2], 'Home'); |
| 30 | assert.equal(document.activeElement, buttons[0]); |
| 31 | await act(async () => root.unmount()); |
| 32 | console.log('SettingsOptions keyboard, disabled state, selection semantics and form behavior passed'); |
| 33 |