@afixt/test-utils 1.1.8 → 1.2.1

package/test/formUtils.test.js

@@ -0,0 +1,389 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import formUtils from '../src/formUtils.js';
+
+describe('formUtils', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    describe('isLabellable', () => {
+        it('should return false for null/undefined', () => {
+            expect(formUtils.isLabellable(null)).toBe(false);
+            expect(formUtils.isLabellable(undefined)).toBe(false);
+        });
+
+        it('should return true for labellable form controls', () => {
+            const tags = ['input', 'select', 'textarea', 'button', 'meter', 'output', 'progress'];
+            tags.forEach(tag => {
+                const el = document.createElement(tag);
+                expect(formUtils.isLabellable(el)).toBe(true);
+            });
+        });
+
+        it('should return false for non-labellable elements', () => {
+            const tags = ['div', 'span', 'p', 'a', 'section', 'label', 'fieldset', 'form'];
+            tags.forEach(tag => {
+                const el = document.createElement(tag);
+                expect(formUtils.isLabellable(el)).toBe(false);
+            });
+        });
+    });
+
+    describe('isHiddenInput', () => {
+        it('should return false for null/undefined', () => {
+            expect(formUtils.isHiddenInput(null)).toBe(false);
+            expect(formUtils.isHiddenInput(undefined)).toBe(false);
+        });
+
+        it('should return true for input type="hidden"', () => {
+            const el = document.createElement('input');
+            el.setAttribute('type', 'hidden');
+            expect(formUtils.isHiddenInput(el)).toBe(true);
+        });
+
+        it('should be case-insensitive for type attribute', () => {
+            const el = document.createElement('input');
+            el.setAttribute('type', 'HIDDEN');
+            expect(formUtils.isHiddenInput(el)).toBe(true);
+        });
+
+        it('should return false for other input types', () => {
+            const el = document.createElement('input');
+            el.setAttribute('type', 'text');
+            expect(formUtils.isHiddenInput(el)).toBe(false);
+        });
+
+        it('should return false for non-input elements', () => {
+            const el = document.createElement('div');
+            expect(formUtils.isHiddenInput(el)).toBe(false);
+        });
+
+        it('should return false for input without type attribute', () => {
+            const el = document.createElement('input');
+            expect(formUtils.isHiddenInput(el)).toBe(false);
+        });
+    });
+
+    describe('hasExplicitAccessibleName', () => {
+        it('should return true when aria-labelledby points to element with text', () => {
+            document.body.innerHTML = `
+                <span id="lbl">Group Label</span>
+                <div id="target" aria-labelledby="lbl"></div>
+            `;
+            const target = document.getElementById('target');
+            expect(formUtils.hasExplicitAccessibleName(target)).toBe(true);
+        });
+
+        it('should return false when aria-labelledby points to empty element', () => {
+            document.body.innerHTML = `
+                <span id="lbl">   </span>
+                <div id="target" aria-labelledby="lbl"></div>
+            `;
+            const target = document.getElementById('target');
+            expect(formUtils.hasExplicitAccessibleName(target)).toBe(false);
+        });
+
+        it('should return false when aria-labelledby points to non-existent id', () => {
+            document.body.innerHTML = `
+                <div id="target" aria-labelledby="nonexistent"></div>
+            `;
+            const target = document.getElementById('target');
+            expect(formUtils.hasExplicitAccessibleName(target)).toBe(false);
+        });
+
+        it('should return true when aria-label has non-empty value', () => {
+            const el = document.createElement('div');
+            el.setAttribute('aria-label', 'My label');
+            expect(formUtils.hasExplicitAccessibleName(el)).toBe(true);
+        });
+
+        it('should return false when aria-label is empty', () => {
+            const el = document.createElement('div');
+            el.setAttribute('aria-label', '   ');
+            expect(formUtils.hasExplicitAccessibleName(el)).toBe(false);
+        });
+
+        it('should return true when title has non-empty value', () => {
+            const el = document.createElement('div');
+            el.setAttribute('title', 'Tooltip text');
+            expect(formUtils.hasExplicitAccessibleName(el)).toBe(true);
+        });
+
+        it('should return false when title is empty', () => {
+            const el = document.createElement('div');
+            el.setAttribute('title', '   ');
+            expect(formUtils.hasExplicitAccessibleName(el)).toBe(false);
+        });
+
+        it('should return false when element has no naming attributes', () => {
+            const el = document.createElement('div');
+            expect(formUtils.hasExplicitAccessibleName(el)).toBe(false);
+        });
+
+        it('should handle multiple ids in aria-labelledby', () => {
+            document.body.innerHTML = `
+                <span id="lbl1"></span>
+                <span id="lbl2">Second label</span>
+                <div id="target" aria-labelledby="lbl1 lbl2"></div>
+            `;
+            const target = document.getElementById('target');
+            expect(formUtils.hasExplicitAccessibleName(target)).toBe(true);
+        });
+    });
+
+    describe('isProperlyGrouped', () => {
+        it('should return true when in fieldset with legend', () => {
+            document.body.innerHTML = `
+                <fieldset>
+                    <legend>Color options</legend>
+                    <input type="radio" id="r1" name="color" value="red">
+                </fieldset>
+            `;
+            const control = document.getElementById('r1');
+            expect(formUtils.isProperlyGrouped(control)).toBe(true);
+        });
+
+        it('should return false when in fieldset without legend', () => {
+            document.body.innerHTML = `
+                <fieldset>
+                    <input type="radio" id="r1" name="color" value="red">
+                </fieldset>
+            `;
+            const control = document.getElementById('r1');
+            expect(formUtils.isProperlyGrouped(control)).toBe(false);
+        });
+
+        it('should return false when in fieldset with empty legend', () => {
+            document.body.innerHTML = `
+                <fieldset>
+                    <legend>   </legend>
+                    <input type="radio" id="r1" name="color" value="red">
+                </fieldset>
+            `;
+            const control = document.getElementById('r1');
+            expect(formUtils.isProperlyGrouped(control)).toBe(false);
+        });
+
+        it('should return true when in role="radiogroup" with aria-label', () => {
+            document.body.innerHTML = `
+                <div role="radiogroup" aria-label="Color selection">
+                    <input type="radio" id="r1" name="color" value="red">
+                </div>
+            `;
+            const control = document.getElementById('r1');
+            expect(formUtils.isProperlyGrouped(control)).toBe(true);
+        });
+
+        it('should return false when in role="radiogroup" without label', () => {
+            document.body.innerHTML = `
+                <div role="radiogroup">
+                    <input type="radio" id="r1" name="color" value="red">
+                </div>
+            `;
+            const control = document.getElementById('r1');
+            expect(formUtils.isProperlyGrouped(control)).toBe(false);
+        });
+
+        it('should support custom group role', () => {
+            document.body.innerHTML = `
+                <div role="group" aria-label="Options">
+                    <input type="checkbox" id="c1">
+                </div>
+            `;
+            const control = document.getElementById('c1');
+            expect(formUtils.isProperlyGrouped(control, 'group')).toBe(true);
+        });
+
+        it('should return false when not inside any grouping', () => {
+            document.body.innerHTML = `
+                <div>
+                    <input type="radio" id="r1" name="color" value="red">
+                </div>
+            `;
+            const control = document.getElementById('r1');
+            expect(formUtils.isProperlyGrouped(control)).toBe(false);
+        });
+    });
+
+    describe('findGroupingAncestor', () => {
+        it('should find fieldset ancestor', () => {
+            document.body.innerHTML = `
+                <fieldset id="fs">
+                    <div><input type="text" id="input1"></div>
+                </fieldset>
+            `;
+            const input = document.getElementById('input1');
+            const result = formUtils.findGroupingAncestor(input);
+            expect(result.tagName).toBe('FIELDSET');
+        });
+
+        it('should find form ancestor', () => {
+            document.body.innerHTML = `
+                <form id="myform">
+                    <div><input type="text" id="input1"></div>
+                </form>
+            `;
+            const input = document.getElementById('input1');
+            const result = formUtils.findGroupingAncestor(input);
+            expect(result.tagName).toBe('FORM');
+        });
+
+        it('should find role="radiogroup" ancestor', () => {
+            document.body.innerHTML = `
+                <div role="radiogroup" id="rg">
+                    <input type="radio" id="r1">
+                </div>
+            `;
+            const input = document.getElementById('r1');
+            const result = formUtils.findGroupingAncestor(input);
+            expect(result.getAttribute('role')).toBe('radiogroup');
+        });
+
+        it('should find role="group" ancestor', () => {
+            document.body.innerHTML = `
+                <div role="group" id="grp">
+                    <input type="checkbox" id="c1">
+                </div>
+            `;
+            const input = document.getElementById('c1');
+            const result = formUtils.findGroupingAncestor(input);
+            expect(result.getAttribute('role')).toBe('group');
+        });
+
+        it('should return document.body when no grouping ancestor found', () => {
+            document.body.innerHTML = `
+                <div><input type="text" id="input1"></div>
+            `;
+            const input = document.getElementById('input1');
+            const result = formUtils.findGroupingAncestor(input);
+            expect(result).toBe(document.body);
+        });
+
+        it('should find nearest grouping ancestor', () => {
+            document.body.innerHTML = `
+                <form>
+                    <fieldset id="fs">
+                        <input type="text" id="input1">
+                    </fieldset>
+                </form>
+            `;
+            const input = document.getElementById('input1');
+            const result = formUtils.findGroupingAncestor(input);
+            expect(result.tagName).toBe('FIELDSET');
+        });
+    });
+
+    describe('hasAssociatedLabel', () => {
+        it('should return true when label[for] matches element id', () => {
+            document.body.innerHTML = `
+                <label for="name">Name</label>
+                <input type="text" id="name">
+            `;
+            const input = document.getElementById('name');
+            expect(formUtils.hasAssociatedLabel(input)).toBe(true);
+        });
+
+        it('should return false when label[for] matches but label is empty', () => {
+            document.body.innerHTML = `
+                <label for="name">   </label>
+                <input type="text" id="name">
+            `;
+            const input = document.getElementById('name');
+            expect(formUtils.hasAssociatedLabel(input)).toBe(false);
+        });
+
+        it('should return true when element is wrapped in label with text', () => {
+            document.body.innerHTML = `
+                <label>
+                    Username
+                    <input type="text" id="user">
+                </label>
+            `;
+            const input = document.getElementById('user');
+            expect(formUtils.hasAssociatedLabel(input)).toBe(true);
+        });
+
+        it('should return false when element has no label association', () => {
+            document.body.innerHTML = `
+                <input type="text" id="orphan">
+            `;
+            const input = document.getElementById('orphan');
+            expect(formUtils.hasAssociatedLabel(input)).toBe(false);
+        });
+
+        it('should return false when element has no id and no wrapping label', () => {
+            document.body.innerHTML = `
+                <div><input type="text" id="nolabel"></div>
+            `;
+            const input = document.getElementById('nolabel');
+            expect(formUtils.hasAssociatedLabel(input)).toBe(false);
+        });
+    });
+
+    describe('getTextContentExcludingControls', () => {
+        it('should return text excluding input elements', () => {
+            document.body.innerHTML = `
+                <label id="lbl"><input type="checkbox"> Remember me</label>
+            `;
+            const label = document.getElementById('lbl');
+            const text = formUtils.getTextContentExcludingControls(label);
+            expect(text.trim()).toBe('Remember me');
+        });
+
+        it('should exclude select elements', () => {
+            document.body.innerHTML = `
+                <div id="container">
+                    Choose option: <select><option>A</option></select> then continue
+                </div>
+            `;
+            const container = document.getElementById('container');
+            const text = formUtils.getTextContentExcludingControls(container);
+            expect(text).toContain('Choose option:');
+            expect(text).toContain('then continue');
+            expect(text).not.toContain('A');
+        });
+
+        it('should exclude textarea elements', () => {
+            document.body.innerHTML = `
+                <div id="container">
+                    Enter text: <textarea>existing text</textarea>
+                </div>
+            `;
+            const container = document.getElementById('container');
+            const text = formUtils.getTextContentExcludingControls(container);
+            expect(text).toContain('Enter text:');
+        });
+
+        it('should exclude button elements', () => {
+            document.body.innerHTML = `
+                <div id="container">
+                    Click <button>Submit</button> to continue
+                </div>
+            `;
+            const container = document.getElementById('container');
+            const text = formUtils.getTextContentExcludingControls(container);
+            expect(text).toContain('Click');
+            expect(text).toContain('to continue');
+            expect(text).not.toContain('Submit');
+        });
+
+        it('should include text from non-control child elements', () => {
+            document.body.innerHTML = `
+                <label id="lbl"><input type="checkbox"> <span>Accept</span> terms</label>
+            `;
+            const label = document.getElementById('lbl');
+            const text = formUtils.getTextContentExcludingControls(label);
+            expect(text).toContain('Accept');
+            expect(text).toContain('terms');
+        });
+
+        it('should return empty string when element has only controls', () => {
+            document.body.innerHTML = `
+                <div id="container"><input type="text"><button>Go</button></div>
+            `;
+            const container = document.getElementById('container');
+            const text = formUtils.getTextContentExcludingControls(container);
+            expect(text.trim()).toBe('');
+        });
+    });
+});