@afixt/test-utils 1.2.3 → 2.0.0

package/test/domUtils.test.js

@@ -710,6 +710,72 @@ describe('domUtils', () => {
             expect(domUtils.hasInteractiveHandler(el)).toBe(false);
         });
 
+        it('should return true for element with ondblclick', () => {
+            const el = document.createElement('div');
+            el.setAttribute('ondblclick', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with oncontextmenu', () => {
+            const el = document.createElement('div');
+            el.setAttribute('oncontextmenu', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with onkeypress', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onkeypress', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with onfocus', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onfocus', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with onblur', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onblur', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with oninput', () => {
+            const el = document.createElement('div');
+            el.setAttribute('oninput', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with onchange', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onchange', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with onsubmit', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onsubmit', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with ontouchend', () => {
+            const el = document.createElement('div');
+            el.setAttribute('ontouchend', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with onpointerdown', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onpointerdown', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with onpointerup', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onpointerup', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
         it('should return false for element with non-interactive event handlers', () => {
             const el = document.createElement('div');
             el.setAttribute('onload', 'handle()');
@@ -849,6 +915,96 @@ describe('domUtils', () => {
             const result = domUtils.getSemanticContainer(document.getElementById('child'));
             expect(result.tagName).toBe('SECTION');
         });
+
+        it('should return main ancestor', () => {
+            document.body.innerHTML = '<main><p id="child">Content</p></main>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('MAIN');
+        });
+
+        it('should return nav ancestor', () => {
+            document.body.innerHTML = '<nav><p id="child">Content</p></nav>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('NAV');
+        });
+
+        it('should return aside ancestor', () => {
+            document.body.innerHTML = '<aside><p id="child">Content</p></aside>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('ASIDE');
+        });
+
+        it('should return header ancestor', () => {
+            document.body.innerHTML = '<header><p id="child">Content</p></header>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('HEADER');
+        });
+
+        it('should return footer ancestor', () => {
+            document.body.innerHTML = '<footer><p id="child">Content</p></footer>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('FOOTER');
+        });
+
+        it('should return form ancestor', () => {
+            document.body.innerHTML = '<form><p id="child">Content</p></form>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('FORM');
+        });
+
+        it('should return fieldset ancestor', () => {
+            document.body.innerHTML = '<fieldset><p id="child">Content</p></fieldset>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('FIELDSET');
+        });
+
+        it('should return details ancestor', () => {
+            document.body.innerHTML = '<details><p id="child">Content</p></details>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('DETAILS');
+        });
+
+        it('should return dialog ancestor', () => {
+            document.body.innerHTML = '<dialog><p id="child">Content</p></dialog>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('DIALOG');
+        });
+
+        it('should return element with role="group"', () => {
+            document.body.innerHTML = '<div role="group"><p id="child">Content</p></div>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.getAttribute('role')).toBe('group');
+        });
+
+        it('should return element with role="tabpanel"', () => {
+            document.body.innerHTML = '<div role="tabpanel"><p id="child">Content</p></div>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.getAttribute('role')).toBe('tabpanel');
+        });
+
+        it('should return element with role="dialog"', () => {
+            document.body.innerHTML = '<div role="dialog"><p id="child">Content</p></div>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.getAttribute('role')).toBe('dialog');
+        });
+
+        it('should return element with role="navigation"', () => {
+            document.body.innerHTML = '<div role="navigation"><p id="child">Content</p></div>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.getAttribute('role')).toBe('navigation');
+        });
+
+        it('should return element with role="complementary"', () => {
+            document.body.innerHTML = '<div role="complementary"><p id="child">Content</p></div>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.getAttribute('role')).toBe('complementary');
+        });
+
+        it('should return null for non-structural role like presentation', () => {
+            document.body.innerHTML = '<div role="presentation"><p id="child">Content</p></div>';
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result).toBeNull();
+        });
     });
 
     describe('getHeadingLevel', () => {

package/test/formUtils.test.js

@@ -273,53 +273,6 @@ describe('formUtils', () => {
         });
     });
 
-    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 = `

package/test/getAccessibleName.test.js

@@ -428,4 +428,43 @@ describe('getAccessibleName', () => {
         const meter = document.querySelector('[role="meter"]');
         expect(getAccessibleName(meter)).toBe('Signal strength');
     });
+
+    describe('landmark elements should not get name from contents', () => {
+        const landmarkElements = [
+            { tag: 'nav', role: 'navigation' },
+            { tag: 'main', role: 'main' },
+            { tag: 'aside', role: 'complementary' },
+            { tag: 'header', role: 'banner' },
+            { tag: 'footer', role: 'contentinfo' },
+            { tag: 'section', role: 'region' },
+            { tag: 'form', role: 'form' },
+            { tag: 'search', role: 'search' },
+        ];
+
+        landmarkElements.forEach(({ tag, role }) => {
+            it(`should return false for <${tag}> without naming attributes`, () => {
+                document.body.innerHTML = `<${tag}><p>Some inner text content</p></${tag}>`;
+                const el = document.querySelector(tag);
+                expect(getAccessibleName(el)).toBe(false);
+            });
+
+            it(`should return title for <${tag}> with title attribute`, () => {
+                document.body.innerHTML = `<${tag} title="My ${tag} landmark"><p>Some inner text</p></${tag}>`;
+                const el = document.querySelector(tag);
+                expect(getAccessibleName(el)).toBe(`My ${tag} landmark`);
+            });
+
+            it(`should return false for div with role="${role}" without naming attributes`, () => {
+                document.body.innerHTML = `<div role="${role}"><p>Some inner text content</p></div>`;
+                const el = document.querySelector(`[role="${role}"]`);
+                expect(getAccessibleName(el)).toBe(false);
+            });
+
+            it(`should return title for div with role="${role}" and title attribute`, () => {
+                document.body.innerHTML = `<div role="${role}" title="My ${role} landmark"><p>Some inner text</p></div>`;
+                const el = document.querySelector(`[role="${role}"]`);
+                expect(getAccessibleName(el)).toBe(`My ${role} landmark`);
+            });
+        });
+    });
 });