@afixt/test-utils 1.2.0 → 1.2.1

package/test/domUtils.test.js

@@ -1,95 +1,109 @@
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
 import domUtils from '../src/domUtils.js';
 
+// Polyfill CSS.escape for JSDOM
+if (typeof globalThis.CSS === 'undefined') {
+    globalThis.CSS = {};
+}
+if (typeof globalThis.CSS.escape !== 'function') {
+    globalThis.CSS.escape = function (value) {
+        return String(value).replace(/([^\w-])/g, '\\$1');
+    };
+}
+
 describe('domUtils', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  describe('hasAttr', () => {
-    it('should return true if element has the attribute', () => {
-      document.body.innerHTML = `<div id="test" data-test="value"></div>`;
-      const element = document.getElementById('test');
-      
-      expect(domUtils.hasAttr(element, 'data-test')).toBe(true);
+    beforeEach(() => {
+        document.body.innerHTML = '';
     });
 
-    it('should return false if element does not have the attribute', () => {
-      document.body.innerHTML = `<div id="test"></div>`;
-      const element = document.getElementById('test');
-      
-      expect(domUtils.hasAttr(element, 'data-test')).toBe(false);
+    describe('hasAttr', () => {
+        it('should return true if element has the attribute', () => {
+            document.body.innerHTML = '<div id="test" data-test="value"></div>';
+            const element = document.getElementById('test');
+
+            expect(domUtils.hasAttr(element, 'data-test')).toBe(true);
+        });
+
+        it('should return false if element does not have the attribute', () => {
+            document.body.innerHTML = '<div id="test"></div>';
+            const element = document.getElementById('test');
+
+            expect(domUtils.hasAttr(element, 'data-test')).toBe(false);
+        });
     });
-  });
 
-  describe('attrBegins', () => {
-    it('should filter elements with attributes that begin with prefix', () => {
-      document.body.innerHTML = `
+    describe('attrBegins', () => {
+        it('should filter elements with attributes that begin with prefix', () => {
+            document.body.innerHTML = `
         <div id="div1" data-test="value"></div>
         <div id="div2" data-other="value"></div>
         <div id="div3" aria-label="value"></div>
       `;
-      
-      const elements = document.querySelectorAll('div');
-      
-      // Filter for data- attributes
-      const dataElements = domUtils.attrBegins(elements, 'data-');
-      expect(dataElements.length).toBe(2);
-      expect(dataElements[0].id).toBe('div1');
-      expect(dataElements[1].id).toBe('div2');
-      
-      // Filter for aria- attributes
-      const ariaElements = domUtils.attrBegins(elements, 'aria-');
-      expect(ariaElements.length).toBe(1);
-      expect(ariaElements[0].id).toBe('div3');
-    });
-  });
-
-  describe('containsNoCase', () => {
-    it('should find text case-insensitively', () => {
-      document.body.innerHTML = `<div id="test">This is a Test</div>`;
-      const element = document.getElementById('test');
-      
-      expect(domUtils.containsNoCase(element, 'this')).toBe(true);
-      expect(domUtils.containsNoCase(element, 'TEST')).toBe(true);
-      expect(domUtils.containsNoCase(element, 'not found')).toBe(false);
+
+            const elements = document.querySelectorAll('div');
+
+            // Filter for data- attributes
+            const dataElements = domUtils.attrBegins(elements, 'data-');
+            expect(dataElements.length).toBe(2);
+            expect(dataElements[0].id).toBe('div1');
+            expect(dataElements[1].id).toBe('div2');
+
+            // Filter for aria- attributes
+            const ariaElements = domUtils.attrBegins(elements, 'aria-');
+            expect(ariaElements.length).toBe(1);
+            expect(ariaElements[0].id).toBe('div3');
+        });
     });
-  });
-
-  describe('getAttributes', () => {
-    it('should return all attributes as an object', () => {
-      document.body.innerHTML = `<div id="test" class="container" data-value="123"></div>`;
-      const element = document.getElementById('test');
-      
-      const attrs = domUtils.getAttributes(element);
-      expect(attrs.id).toBe('test');
-      expect(attrs.class).toBe('container');
-      expect(attrs['data-value']).toBe('123');
+
+    describe('containsNoCase', () => {
+        it('should find text case-insensitively', () => {
+            document.body.innerHTML = '<div id="test">This is a Test</div>';
+            const element = document.getElementById('test');
+
+            expect(domUtils.containsNoCase(element, 'this')).toBe(true);
+            expect(domUtils.containsNoCase(element, 'TEST')).toBe(true);
+            expect(domUtils.containsNoCase(element, 'not found')).toBe(false);
+        });
     });
 
-    it('should return empty object for null or undefined', () => {
-      expect(domUtils.getAttributes(null)).toEqual({});
-      expect(domUtils.getAttributes(undefined)).toEqual({});
+    describe('getAttributes', () => {
+        it('should return all attributes as an object', () => {
+            document.body.innerHTML = '<div id="test" class="container" data-value="123"></div>';
+            const element = document.getElementById('test');
+
+            const attrs = domUtils.getAttributes(element);
+            expect(attrs.id).toBe('test');
+            expect(attrs.class).toBe('container');
+            expect(attrs['data-value']).toBe('123');
+        });
+
+        it('should return empty object for null or undefined', () => {
+            expect(domUtils.getAttributes(null)).toEqual({});
+            expect(domUtils.getAttributes(undefined)).toEqual({});
+        });
     });
-  });
 
-  describe('getConstructor', () => {
-    it('should return the constructor name of an element', () => {
-      document.body.innerHTML = `
+    describe('getConstructor', () => {
+        it('should return the constructor name of an element', () => {
+            document.body.innerHTML = `
         <div id="div"></div>
         <button id="button"></button>
         <input id="input" type="text">
       `;
-      
-      expect(domUtils.getConstructor(document.getElementById('div'))).toBe('HTMLDivElement');
-      expect(domUtils.getConstructor(document.getElementById('button'))).toBe('HTMLButtonElement');
-      expect(domUtils.getConstructor(document.getElementById('input'))).toBe('HTMLInputElement');
+
+            expect(domUtils.getConstructor(document.getElementById('div'))).toBe('HTMLDivElement');
+            expect(domUtils.getConstructor(document.getElementById('button'))).toBe(
+                'HTMLButtonElement'
+            );
+            expect(domUtils.getConstructor(document.getElementById('input'))).toBe(
+                'HTMLInputElement'
+            );
+        });
     });
-  });
 
-  describe('getXPath', () => {
-    it('should generate correct XPath for elements', () => {
-      document.body.innerHTML = `
+    describe('getXPath', () => {
+        it('should generate correct XPath for elements', () => {
+            document.body.innerHTML = `
         <div>
           <section>
             <article id="target">
@@ -99,232 +113,234 @@ describe('domUtils', () => {
           </section>
         </div>
       `;
-      
-      const element = document.getElementById('target');
-      // The exact XPath depends on document structure but should contain the correct path components
-      const xpath = domUtils.getXPath(element);
-      
-      expect(xpath).toContain('/html');
-      expect(xpath).toContain('/body');
-      expect(xpath).toContain('/div');
-      expect(xpath).toContain('/section');
-      expect(xpath).toContain('/article[1]');
-    });
 
-    it('should return empty string for null or undefined', () => {
-      expect(domUtils.getXPath(null)).toBe('');
-      expect(domUtils.getXPath(undefined)).toBe('');
-    });
-  });
-
-  describe('hasFocus', () => {
-    it('should return true if element has focus', () => {
-      document.body.innerHTML = `<input id="test" type="text">`;
-      const element = document.getElementById('test');
-      
-      // Focus the element
-      element.focus();
-      
-      expect(domUtils.hasFocus(element)).toBe(true);
+            const element = document.getElementById('target');
+            // The exact XPath depends on document structure but should contain the correct path components
+            const xpath = domUtils.getXPath(element);
+
+            expect(xpath).toContain('/html');
+            expect(xpath).toContain('/body');
+            expect(xpath).toContain('/div');
+            expect(xpath).toContain('/section');
+            expect(xpath).toContain('/article[1]');
+        });
+
+        it('should return empty string for null or undefined', () => {
+            expect(domUtils.getXPath(null)).toBe('');
+            expect(domUtils.getXPath(undefined)).toBe('');
+        });
     });
 
-    it('should return false if element does not have focus', () => {
-      document.body.innerHTML = `
+    describe('hasFocus', () => {
+        it('should return true if element has focus', () => {
+            document.body.innerHTML = '<input id="test" type="text">';
+            const element = document.getElementById('test');
+
+            // Focus the element
+            element.focus();
+
+            expect(domUtils.hasFocus(element)).toBe(true);
+        });
+
+        it('should return false if element does not have focus', () => {
+            document.body.innerHTML = `
         <input id="test1" type="text">
         <input id="test2" type="text">
       `;
-      
-      const element1 = document.getElementById('test1');
-      const element2 = document.getElementById('test2');
-      
-      // Focus element1
-      element1.focus();
-      
-      expect(domUtils.hasFocus(element1)).toBe(true);
-      expect(domUtils.hasFocus(element2)).toBe(false);
-    });
-  });
-
-  describe('getAttributesAsString', () => {
-    it('should return attributes as JSON string when element has attributes', () => {
-      document.body.innerHTML = `<div id="test" class="container" data-value="123"></div>`;
-      const element = document.getElementById('test');
-      
-      const attrsString = domUtils.getAttributesAsString(element);
-      const parsed = JSON.parse(attrsString);
-      
-      expect(parsed.id).toBe('test');
-      expect(parsed.class).toBe('container');
-      expect(parsed['data-value']).toBe('123');
+
+            const element1 = document.getElementById('test1');
+            const element2 = document.getElementById('test2');
+
+            // Focus element1
+            element1.focus();
+
+            expect(domUtils.hasFocus(element1)).toBe(true);
+            expect(domUtils.hasFocus(element2)).toBe(false);
+        });
     });
 
-    it('should return false for elements with no attributes', () => {
-      const element = document.createElement('div');
-      expect(domUtils.getAttributesAsString(element)).toBe(false);
+    describe('getAttributesAsString', () => {
+        it('should return attributes as JSON string when element has attributes', () => {
+            document.body.innerHTML = '<div id="test" class="container" data-value="123"></div>';
+            const element = document.getElementById('test');
+
+            const attrsString = domUtils.getAttributesAsString(element);
+            const parsed = JSON.parse(attrsString);
+
+            expect(parsed.id).toBe('test');
+            expect(parsed.class).toBe('container');
+            expect(parsed['data-value']).toBe('123');
+        });
+
+        it('should return false for elements with no attributes', () => {
+            const element = document.createElement('div');
+            expect(domUtils.getAttributesAsString(element)).toBe(false);
+        });
     });
-  });
 
-  describe('getDocumentSize', () => {
-    it('should return the size of the document HTML', () => {
-      const size = domUtils.getDocumentSize();
-      expect(typeof size).toBe('number');
-      expect(size).toBeGreaterThan(0);
+    describe('getDocumentSize', () => {
+        it('should return the size of the document HTML', () => {
+            const size = domUtils.getDocumentSize();
+            expect(typeof size).toBe('number');
+            expect(size).toBeGreaterThan(0);
+        });
     });
-  });
 
-  describe('getElementsWithDuplicateIds', () => {
-    it('should find elements with duplicate IDs', () => {
-      document.body.innerHTML = `
+    describe('getElementsWithDuplicateIds', () => {
+        it('should find elements with duplicate IDs', () => {
+            document.body.innerHTML = `
         <div id="duplicate">First</div>
         <span id="duplicate">Second</span>
         <p id="unique">Unique</p>
       `;
-      
-      const duplicates = domUtils.getElementsWithDuplicateIds();
-      expect(duplicates.length).toBeGreaterThan(0);
-      expect(duplicates[0].id).toBe('duplicate');
-    });
 
-    it('should return empty array when no duplicate IDs exist', () => {
-      document.body.innerHTML = `
+            const duplicates = domUtils.getElementsWithDuplicateIds();
+            expect(duplicates.length).toBeGreaterThan(0);
+            expect(duplicates[0].id).toBe('duplicate');
+        });
+
+        it('should return empty array when no duplicate IDs exist', () => {
+            document.body.innerHTML = `
         <div id="first">First</div>
         <span id="second">Second</span>
         <p id="third">Third</p>
       `;
-      
-      const duplicates = domUtils.getElementsWithDuplicateIds();
-      expect(duplicates.length).toBe(0);
-    });
-  });
-
-  describe('getOuterHTML', () => {
-    it('should return the outer HTML of an element', () => {
-      document.body.innerHTML = `<div id="test" class="container">Content</div>`;
-      const element = document.getElementById('test');
-      
-      const outerHTML = domUtils.getOuterHTML(element);
-      expect(outerHTML).toBe('<div id="test" class="container">Content</div>');
-    });
-  });
-
-  describe('isFullyVisible', () => {
-    it('should check if element is fully visible in viewport', () => {
-      document.body.innerHTML = `<div id="test" style="width: 100px; height: 100px;">Test</div>`;
-      const element = document.getElementById('test');
-      
-      // Mock getBoundingClientRect to simulate visible element
-      element.getBoundingClientRect = () => ({
-        top: 10,
-        left: 10,
-        bottom: 110,
-        right: 110
-      });
-      
-      // Mock window dimensions
-      Object.defineProperty(window, 'innerHeight', {
-        writable: true,
-        configurable: true,
-        value: 800
-      });
-      Object.defineProperty(window, 'innerWidth', {
-        writable: true,
-        configurable: true,
-        value: 1200
-      });
-      
-      expect(domUtils.isFullyVisible(element)).toBe(true);
-    });
 
-    it('should return false if element is not fully visible', () => {
-      document.body.innerHTML = `<div id="test" style="width: 100px; height: 100px;">Test</div>`;
-      const element = document.getElementById('test');
-      
-      // Mock getBoundingClientRect to simulate partially visible element
-      element.getBoundingClientRect = () => ({
-        top: -50,
-        left: 10,
-        bottom: 50,
-        right: 110
-      });
-      
-      Object.defineProperty(window, 'innerHeight', {
-        writable: true,
-        configurable: true,
-        value: 800
-      });
-      Object.defineProperty(window, 'innerWidth', {
-        writable: true,
-        configurable: true,
-        value: 1200
-      });
-      
-      expect(domUtils.isFullyVisible(element)).toBe(false);
+            const duplicates = domUtils.getElementsWithDuplicateIds();
+            expect(duplicates.length).toBe(0);
+        });
     });
 
-    it('should return false when element extends beyond left edge', () => {
-      const element = document.createElement('div');
-      document.body.appendChild(element);
-
-      element.getBoundingClientRect = vi.fn().mockReturnValue({
-        top: 100,
-        left: -10, // Beyond left edge
-        bottom: 200,
-        right: 300
-      });
+    describe('getOuterHTML', () => {
+        it('should return the outer HTML of an element', () => {
+            document.body.innerHTML = '<div id="test" class="container">Content</div>';
+            const element = document.getElementById('test');
 
-      expect(domUtils.isFullyVisible(element)).toBe(false);
+            const outerHTML = domUtils.getOuterHTML(element);
+            expect(outerHTML).toBe('<div id="test" class="container">Content</div>');
+        });
     });
 
-    it('should return false when element extends beyond bottom edge', () => {
-      const element = document.createElement('div');
-      document.body.appendChild(element);
-
-      vi.stubGlobal('innerHeight', 768);
-
-      element.getBoundingClientRect = vi.fn().mockReturnValue({
-        top: 700,
-        left: 100,
-        bottom: 800, // Beyond bottom edge (768)
-        right: 300
-      });
-
-      expect(domUtils.isFullyVisible(element)).toBe(false);
+    describe('isFullyVisible', () => {
+        it('should check if element is fully visible in viewport', () => {
+            document.body.innerHTML =
+                '<div id="test" style="width: 100px; height: 100px;">Test</div>';
+            const element = document.getElementById('test');
+
+            // Mock getBoundingClientRect to simulate visible element
+            element.getBoundingClientRect = () => ({
+                top: 10,
+                left: 10,
+                bottom: 110,
+                right: 110,
+            });
+
+            // Mock window dimensions
+            Object.defineProperty(window, 'innerHeight', {
+                writable: true,
+                configurable: true,
+                value: 800,
+            });
+            Object.defineProperty(window, 'innerWidth', {
+                writable: true,
+                configurable: true,
+                value: 1200,
+            });
+
+            expect(domUtils.isFullyVisible(element)).toBe(true);
+        });
+
+        it('should return false if element is not fully visible', () => {
+            document.body.innerHTML =
+                '<div id="test" style="width: 100px; height: 100px;">Test</div>';
+            const element = document.getElementById('test');
+
+            // Mock getBoundingClientRect to simulate partially visible element
+            element.getBoundingClientRect = () => ({
+                top: -50,
+                left: 10,
+                bottom: 50,
+                right: 110,
+            });
+
+            Object.defineProperty(window, 'innerHeight', {
+                writable: true,
+                configurable: true,
+                value: 800,
+            });
+            Object.defineProperty(window, 'innerWidth', {
+                writable: true,
+                configurable: true,
+                value: 1200,
+            });
+
+            expect(domUtils.isFullyVisible(element)).toBe(false);
+        });
+
+        it('should return false when element extends beyond left edge', () => {
+            const element = document.createElement('div');
+            document.body.appendChild(element);
+
+            element.getBoundingClientRect = vi.fn().mockReturnValue({
+                top: 100,
+                left: -10, // Beyond left edge
+                bottom: 200,
+                right: 300,
+            });
+
+            expect(domUtils.isFullyVisible(element)).toBe(false);
+        });
+
+        it('should return false when element extends beyond bottom edge', () => {
+            const element = document.createElement('div');
+            document.body.appendChild(element);
+
+            vi.stubGlobal('innerHeight', 768);
+
+            element.getBoundingClientRect = vi.fn().mockReturnValue({
+                top: 700,
+                left: 100,
+                bottom: 800, // Beyond bottom edge (768)
+                right: 300,
+            });
+
+            expect(domUtils.isFullyVisible(element)).toBe(false);
+        });
+
+        it('should return false when element extends beyond right edge', () => {
+            const element = document.createElement('div');
+            document.body.appendChild(element);
+
+            vi.stubGlobal('innerWidth', 1024);
+
+            element.getBoundingClientRect = vi.fn().mockReturnValue({
+                top: 100,
+                left: 900,
+                bottom: 200,
+                right: 1100, // Beyond right edge (1024)
+            });
+
+            expect(domUtils.isFullyVisible(element)).toBe(false);
+        });
     });
 
-    it('should return false when element extends beyond right edge', () => {
-      const element = document.createElement('div');
-      document.body.appendChild(element);
-
-      vi.stubGlobal('innerWidth', 1024);
-
-      element.getBoundingClientRect = vi.fn().mockReturnValue({
-        top: 100,
-        left: 900,
-        bottom: 200,
-        right: 1100 // Beyond right edge (1024)
-      });
-
-      expect(domUtils.isFullyVisible(element)).toBe(false);
-    });
-  });
-
-  describe('getXPath edge cases', () => {
-    it('should handle elements with multiple siblings of same type', () => {
-      document.body.innerHTML = `
+    describe('getXPath edge cases', () => {
+        it('should handle elements with multiple siblings of same type', () => {
+            document.body.innerHTML = `
         <div>
           <span></span>
           <span></span>
           <span id="target"></span>
         </div>
       `;
-      const element = document.getElementById('target');
-      const xpath = domUtils.getXPath(element);
+            const element = document.getElementById('target');
+            const xpath = domUtils.getXPath(element);
 
-      expect(xpath).toContain('span[3]');
-    });
+            expect(xpath).toContain('span[3]');
+        });
 
-    it('should handle deeply nested elements', () => {
-      document.body.innerHTML = `
+        it('should handle deeply nested elements', () => {
+            document.body.innerHTML = `
         <div>
           <section>
             <article>
@@ -333,56 +349,558 @@ describe('domUtils', () => {
           </section>
         </div>
       `;
-      const element = document.getElementById('deep');
-      const xpath = domUtils.getXPath(element);
-
-      expect(xpath).toContain('/div');
-      expect(xpath).toContain('/section');
-      expect(xpath).toContain('/article');
-      expect(xpath).toContain('/p');
+            const element = document.getElementById('deep');
+            const xpath = domUtils.getXPath(element);
+
+            expect(xpath).toContain('/div');
+            expect(xpath).toContain('/section');
+            expect(xpath).toContain('/article');
+            expect(xpath).toContain('/p');
+        });
     });
-  });
 
-  describe('hasFocus edge cases', () => {
-    it('should return false when no element has focus', () => {
-      const element = document.createElement('div');
-      document.body.appendChild(element);
+    describe('hasFocus edge cases', () => {
+        it('should return false when no element has focus', () => {
+            const element = document.createElement('div');
+            document.body.appendChild(element);
 
-      // Ensure nothing has focus
-      if (document.activeElement) {
-        document.activeElement.blur?.();
-      }
+            // Ensure nothing has focus
+            if (document.activeElement) {
+                document.activeElement.blur?.();
+            }
 
-      expect(domUtils.hasFocus(element)).toBe(false);
+            expect(domUtils.hasFocus(element)).toBe(false);
+        });
     });
-  });
 
-  describe('getXPath - non-element nodes', () => {
-    it('should handle non-element nodes properly', () => {
-      // Test with text node (nodeType 3)
-      const textNode = document.createTextNode('test text');
-      const xpath = domUtils.getXPath(textNode);
+    describe('getXPath - non-element nodes', () => {
+        it('should handle non-element nodes properly', () => {
+            // Test with text node (nodeType 3)
+            const textNode = document.createTextNode('test text');
+            const xpath = domUtils.getXPath(textNode);
 
-      expect(xpath).toBe('');
+            expect(xpath).toBe('');
+        });
     });
-  });
 
-  describe('attrBegins - array input', () => {
-    it('should handle array input correctly', () => {
-      document.body.innerHTML = `
+    describe('attrBegins - array input', () => {
+        it('should handle array input correctly', () => {
+            document.body.innerHTML = `
         <div id="div1" data-test="value"></div>
         <div id="div2" aria-label="value"></div>
       `;
 
-      // Test with array instead of NodeList
-      const elementsArray = [
-        document.getElementById('div1'),
-        document.getElementById('div2')
-      ];
+            // Test with array instead of NodeList
+            const elementsArray = [
+                document.getElementById('div1'),
+                document.getElementById('div2'),
+            ];
+
+            const dataElements = domUtils.attrBegins(elementsArray, 'data-');
+            expect(dataElements.length).toBe(1);
+            expect(dataElements[0].id).toBe('div1');
+        });
+    });
+
+    describe('isIdReferenced', () => {
+        it('should return false for null/empty id', () => {
+            expect(domUtils.isIdReferenced(null)).toBe(false);
+            expect(domUtils.isIdReferenced('')).toBe(false);
+            expect(domUtils.isIdReferenced(undefined)).toBe(false);
+        });
+
+        it('should return true when id is referenced by label[for]', () => {
+            document.body.innerHTML = `
+        <label for="myInput">Name</label>
+        <input id="myInput" type="text">
+      `;
+            expect(domUtils.isIdReferenced('myInput')).toBe(true);
+        });
+
+        it('should return true when id is referenced by aria-labelledby', () => {
+            document.body.innerHTML = `
+        <span id="lbl">Label text</span>
+        <div aria-labelledby="lbl"></div>
+      `;
+            expect(domUtils.isIdReferenced('lbl')).toBe(true);
+        });
+
+        it('should return true when id is in multi-value aria-labelledby', () => {
+            document.body.innerHTML = `
+        <span id="lbl1">First</span>
+        <span id="lbl2">Second</span>
+        <div aria-labelledby="lbl1 lbl2"></div>
+      `;
+            expect(domUtils.isIdReferenced('lbl2')).toBe(true);
+        });
+
+        it('should return true when id is referenced by aria-describedby', () => {
+            document.body.innerHTML = `
+        <span id="desc">Description</span>
+        <input aria-describedby="desc">
+      `;
+            expect(domUtils.isIdReferenced('desc')).toBe(true);
+        });
+
+        it('should return true when id is referenced by aria-controls', () => {
+            document.body.innerHTML = `
+        <div id="panel">Panel content</div>
+        <button aria-controls="panel">Toggle</button>
+      `;
+            expect(domUtils.isIdReferenced('panel')).toBe(true);
+        });
+
+        it('should return true when id is referenced by aria-owns', () => {
+            document.body.innerHTML = `
+        <div id="owned">Owned element</div>
+        <div aria-owns="owned"></div>
+      `;
+            expect(domUtils.isIdReferenced('owned')).toBe(true);
+        });
+
+        it('should return true when id is referenced by aria-activedescendant', () => {
+            document.body.innerHTML = `
+        <div id="item1">Item 1</div>
+        <div aria-activedescendant="item1"></div>
+      `;
+            expect(domUtils.isIdReferenced('item1')).toBe(true);
+        });
+
+        it('should return true when id is referenced by aria-errormessage', () => {
+            document.body.innerHTML = `
+        <span id="err">Error message</span>
+        <input aria-errormessage="err">
+      `;
+            expect(domUtils.isIdReferenced('err')).toBe(true);
+        });
+
+        it('should return true when id is referenced by href fragment', () => {
+            document.body.innerHTML = `
+        <div id="section1">Section 1</div>
+        <a href="#section1">Go to section</a>
+      `;
+            expect(domUtils.isIdReferenced('section1')).toBe(true);
+        });
+
+        it('should return true when id is referenced by headers attribute', () => {
+            document.body.innerHTML = `
+        <table>
+          <tr><th id="h1">Header 1</th></tr>
+          <tr><td headers="h1">Data</td></tr>
+        </table>
+      `;
+            expect(domUtils.isIdReferenced('h1')).toBe(true);
+        });
+
+        it('should return true when id is referenced by input list attribute', () => {
+            document.body.innerHTML = `
+        <datalist id="opts"><option value="A"></option></datalist>
+        <input list="opts">
+      `;
+            expect(domUtils.isIdReferenced('opts')).toBe(true);
+        });
+
+        it('should return false when id is not referenced', () => {
+            document.body.innerHTML = `
+        <div id="lonely">Not referenced</div>
+      `;
+            expect(domUtils.isIdReferenced('lonely')).toBe(false);
+        });
+
+        it('should return true when id is referenced by aria-flowto', () => {
+            document.body.innerHTML = `
+        <div id="next">Next section</div>
+        <div aria-flowto="next">Current</div>
+      `;
+            expect(domUtils.isIdReferenced('next')).toBe(true);
+        });
+    });
+
+    describe('isHiddenFromAT', () => {
+        it('should return false for null/undefined', () => {
+            expect(domUtils.isHiddenFromAT(null)).toBe(false);
+            expect(domUtils.isHiddenFromAT(undefined)).toBe(false);
+        });
+
+        it('should return true when element has aria-hidden="true"', () => {
+            const el = document.createElement('div');
+            el.setAttribute('aria-hidden', 'true');
+            expect(domUtils.isHiddenFromAT(el)).toBe(true);
+        });
+
+        it('should return false when element has aria-hidden="false"', () => {
+            const el = document.createElement('div');
+            el.setAttribute('aria-hidden', 'false');
+            document.body.appendChild(el);
+            expect(domUtils.isHiddenFromAT(el)).toBe(false);
+        });
+
+        it('should return true when ancestor has aria-hidden="true"', () => {
+            document.body.innerHTML = `
+        <div aria-hidden="true">
+          <span id="child">Hidden child</span>
+        </div>
+      `;
+            const child = document.getElementById('child');
+            expect(domUtils.isHiddenFromAT(child)).toBe(true);
+        });
+
+        it('should return false when no aria-hidden in tree', () => {
+            document.body.innerHTML = `
+        <div><span id="child">Visible</span></div>
+      `;
+            const child = document.getElementById('child');
+            expect(domUtils.isHiddenFromAT(child)).toBe(false);
+        });
+    });
+
+    describe('isEffectivelyInteractive', () => {
+        it('should return false when element is disabled', () => {
+            const el = document.createElement('button');
+            el.disabled = true;
+            expect(domUtils.isEffectivelyInteractive(el)).toBe(false);
+        });
+
+        it('should return false when aria-disabled="true"', () => {
+            const el = document.createElement('div');
+            el.setAttribute('aria-disabled', 'true');
+            expect(domUtils.isEffectivelyInteractive(el)).toBe(false);
+        });
+
+        it('should return false when aria-hidden="true"', () => {
+            const el = document.createElement('button');
+            el.setAttribute('aria-hidden', 'true');
+            expect(domUtils.isEffectivelyInteractive(el)).toBe(false);
+        });
+
+        it('should return false when role is "presentation"', () => {
+            const el = document.createElement('div');
+            el.setAttribute('role', 'presentation');
+            expect(domUtils.isEffectivelyInteractive(el)).toBe(false);
+        });
+
+        it('should return false when role is "none"', () => {
+            const el = document.createElement('div');
+            el.setAttribute('role', 'none');
+            expect(domUtils.isEffectivelyInteractive(el)).toBe(false);
+        });
+
+        it('should return true for enabled interactive element', () => {
+            const el = document.createElement('button');
+            expect(domUtils.isEffectivelyInteractive(el)).toBe(true);
+        });
+
+        it('should return true for element with role="button"', () => {
+            const el = document.createElement('div');
+            el.setAttribute('role', 'button');
+            expect(domUtils.isEffectivelyInteractive(el)).toBe(true);
+        });
+    });
+
+    describe('isValidAriaNesting', () => {
+        it('should return true for listbox > option', () => {
+            const parent = document.createElement('div');
+            parent.setAttribute('role', 'listbox');
+            const child = document.createElement('div');
+            child.setAttribute('role', 'option');
+            parent.appendChild(child);
+            expect(domUtils.isValidAriaNesting(parent, child)).toBe(true);
+        });
+
+        it('should return true for menu > menuitem', () => {
+            const parent = document.createElement('div');
+            parent.setAttribute('role', 'menu');
+            const child = document.createElement('div');
+            child.setAttribute('role', 'menuitem');
+            parent.appendChild(child);
+            expect(domUtils.isValidAriaNesting(parent, child)).toBe(true);
+        });
+
+        it('should return true for tablist > tab', () => {
+            const parent = document.createElement('div');
+            parent.setAttribute('role', 'tablist');
+            const child = document.createElement('div');
+            child.setAttribute('role', 'tab');
+            parent.appendChild(child);
+            expect(domUtils.isValidAriaNesting(parent, child)).toBe(true);
+        });
+
+        it('should return true for radiogroup > radio', () => {
+            const parent = document.createElement('div');
+            parent.setAttribute('role', 'radiogroup');
+            const child = document.createElement('div');
+            child.setAttribute('role', 'radio');
+            parent.appendChild(child);
+            expect(domUtils.isValidAriaNesting(parent, child)).toBe(true);
+        });
+
+        it('should return false for invalid nesting', () => {
+            const parent = document.createElement('div');
+            parent.setAttribute('role', 'listbox');
+            const child = document.createElement('div');
+            child.setAttribute('role', 'button');
+            parent.appendChild(child);
+            expect(domUtils.isValidAriaNesting(parent, child)).toBe(false);
+        });
+
+        it('should return true for label wrapping input', () => {
+            const label = document.createElement('label');
+            const input = document.createElement('input');
+            label.appendChild(input);
+            expect(domUtils.isValidAriaNesting(label, input)).toBe(true);
+        });
+
+        it('should return false when parent has no role', () => {
+            const parent = document.createElement('div');
+            const child = document.createElement('div');
+            child.setAttribute('role', 'option');
+            parent.appendChild(child);
+            expect(domUtils.isValidAriaNesting(parent, child)).toBe(false);
+        });
+
+        it('should return true for combobox > listbox', () => {
+            const parent = document.createElement('div');
+            parent.setAttribute('role', 'combobox');
+            const child = document.createElement('div');
+            child.setAttribute('role', 'listbox');
+            parent.appendChild(child);
+            expect(domUtils.isValidAriaNesting(parent, child)).toBe(true);
+        });
+    });
+
+    describe('hasInteractiveHandler', () => {
+        it('should return true for element with onclick', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onclick', 'doSomething()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with onmousedown', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onmousedown', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with onkeydown', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onkeydown', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with ontouchstart', () => {
+            const el = document.createElement('div');
+            el.setAttribute('ontouchstart', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with onmouseup', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onmouseup', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return true for element with onkeyup', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onkeyup', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(true);
+        });
+
+        it('should return false for element with no handlers', () => {
+            const el = document.createElement('div');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(false);
+        });
+
+        it('should return false for element with non-interactive event handlers', () => {
+            const el = document.createElement('div');
+            el.setAttribute('onload', 'handle()');
+            expect(domUtils.hasInteractiveHandler(el)).toBe(false);
+        });
+    });
+
+    describe('isWithinNavContext', () => {
+        it('should return true when inside nav element', () => {
+            document.body.innerHTML = `
+        <nav><a id="link" href="#">Link</a></nav>
+      `;
+            expect(domUtils.isWithinNavContext(document.getElementById('link'))).toBe(true);
+        });
+
+        it('should return true when inside role="navigation"', () => {
+            document.body.innerHTML = `
+        <div role="navigation"><a id="link" href="#">Link</a></div>
+      `;
+            expect(domUtils.isWithinNavContext(document.getElementById('link'))).toBe(true);
+        });
+
+        it('should return true when inside role="menu"', () => {
+            document.body.innerHTML = `
+        <div role="menu"><div role="menuitem" id="item">Item</div></div>
+      `;
+            expect(domUtils.isWithinNavContext(document.getElementById('item'))).toBe(true);
+        });
+
+        it('should return true when inside role="menubar"', () => {
+            document.body.innerHTML = `
+        <div role="menubar"><div role="menuitem" id="item">Item</div></div>
+      `;
+            expect(domUtils.isWithinNavContext(document.getElementById('item'))).toBe(true);
+        });
+
+        it('should return false when not in nav context', () => {
+            document.body.innerHTML = `
+        <div><a id="link" href="#">Link</a></div>
+      `;
+            expect(domUtils.isWithinNavContext(document.getElementById('link'))).toBe(false);
+        });
+    });
+
+    describe('isLandmark', () => {
+        it('should return true for native landmark elements', () => {
+            const tags = ['nav', 'main', 'header', 'footer', 'aside', 'section'];
+            tags.forEach(tag => {
+                const el = document.createElement(tag);
+                expect(domUtils.isLandmark(el)).toBe(true);
+            });
+        });
+
+        it('should return true for elements with landmark roles', () => {
+            const roles = [
+                'navigation',
+                'main',
+                'banner',
+                'contentinfo',
+                'complementary',
+                'region',
+                'search',
+                'form',
+            ];
+            roles.forEach(role => {
+                const el = document.createElement('div');
+                el.setAttribute('role', role);
+                expect(domUtils.isLandmark(el)).toBe(true);
+            });
+        });
+
+        it('should return false for non-landmark elements', () => {
+            const el = document.createElement('div');
+            expect(domUtils.isLandmark(el)).toBe(false);
+        });
+
+        it('should return false for elements with non-landmark roles', () => {
+            const el = document.createElement('div');
+            el.setAttribute('role', 'button');
+            expect(domUtils.isLandmark(el)).toBe(false);
+        });
+    });
+
+    describe('getSemanticContainer', () => {
+        it('should return article ancestor', () => {
+            document.body.innerHTML = `
+        <article><p id="child">Content</p></article>
+      `;
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('ARTICLE');
+        });
+
+        it('should return section ancestor', () => {
+            document.body.innerHTML = `
+        <section><p id="child">Content</p></section>
+      `;
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('SECTION');
+        });
+
+        it('should return li ancestor', () => {
+            document.body.innerHTML = `
+        <ul><li><span id="child">Item</span></li></ul>
+      `;
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('LI');
+        });
+
+        it('should return td ancestor', () => {
+            document.body.innerHTML = `
+        <table><tr><td><span id="child">Cell</span></td></tr></table>
+      `;
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('TD');
+        });
+
+        it('should return element with role attribute', () => {
+            document.body.innerHTML = `
+        <div role="region"><p id="child">Content</p></div>
+      `;
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.getAttribute('role')).toBe('region');
+        });
+
+        it('should return null when no semantic container found', () => {
+            document.body.innerHTML = `
+        <div><p id="child">Content</p></div>
+      `;
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result).toBeNull();
+        });
+
+        it('should return nearest semantic container', () => {
+            document.body.innerHTML = `
+        <article><section><p id="child">Content</p></section></article>
+      `;
+            const result = domUtils.getSemanticContainer(document.getElementById('child'));
+            expect(result.tagName).toBe('SECTION');
+        });
+    });
 
-      const dataElements = domUtils.attrBegins(elementsArray, 'data-');
-      expect(dataElements.length).toBe(1);
-      expect(dataElements[0].id).toBe('div1');
+    describe('getHeadingLevel', () => {
+        it('should return level for native heading elements', () => {
+            for (let i = 1; i <= 6; i++) {
+                const el = document.createElement('h' + i);
+                expect(domUtils.getHeadingLevel(el)).toBe(i);
+            }
+        });
+
+        it('should return level from aria-level on role="heading"', () => {
+            const el = document.createElement('div');
+            el.setAttribute('role', 'heading');
+            el.setAttribute('aria-level', '3');
+            expect(domUtils.getHeadingLevel(el)).toBe(3);
+        });
+
+        it('should return null for role="heading" without aria-level', () => {
+            const el = document.createElement('div');
+            el.setAttribute('role', 'heading');
+            expect(domUtils.getHeadingLevel(el)).toBeNull();
+        });
+
+        it('should return null for role="heading" with invalid aria-level', () => {
+            const el = document.createElement('div');
+            el.setAttribute('role', 'heading');
+            el.setAttribute('aria-level', 'abc');
+            expect(domUtils.getHeadingLevel(el)).toBeNull();
+        });
+
+        it('should return null for role="heading" with level 0', () => {
+            const el = document.createElement('div');
+            el.setAttribute('role', 'heading');
+            el.setAttribute('aria-level', '0');
+            expect(domUtils.getHeadingLevel(el)).toBeNull();
+        });
+
+        it('should override native heading level with aria-level', () => {
+            const el = document.createElement('h2');
+            el.setAttribute('aria-level', '4');
+            expect(domUtils.getHeadingLevel(el)).toBe(4);
+        });
+
+        it('should return null for non-heading elements', () => {
+            const el = document.createElement('div');
+            expect(domUtils.getHeadingLevel(el)).toBeNull();
+        });
+
+        it('should return null for non-heading with aria-level', () => {
+            const el = document.createElement('p');
+            el.setAttribute('aria-level', '2');
+            expect(domUtils.getHeadingLevel(el)).toBeNull();
+        });
     });
-  });
-});
+});