@afixt/test-utils 1.1.7 → 1.1.8

package/test/getAccessibleText.test.js

@@ -2,214 +2,214 @@ import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { getAccessibleText } from '../src/getAccessibleText.js';
 
 describe('getAccessibleText', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  describe('input validation', () => {
-    it('should return empty string when no element is provided', () => {
-      expect(getAccessibleText(null)).toBe('');
-      expect(getAccessibleText(undefined)).toBe('');
+    beforeEach(() => {
+        document.body.innerHTML = '';
     });
 
-    it('should return empty string for non-Element objects', () => {
-      expect(getAccessibleText('string')).toBe('');
-      expect(getAccessibleText(123)).toBe('');
-      expect(getAccessibleText({})).toBe('');
-      expect(getAccessibleText([])).toBe('');
-      expect(getAccessibleText(document.createTextNode('text'))).toBe(''); // Text node, not Element
-      expect(getAccessibleText(document.createComment('comment'))).toBe(''); // Comment node
+    afterEach(() => {
+        document.body.innerHTML = '';
     });
 
-    it('should return empty string for disconnected elements', () => {
-      const div = document.createElement('div');
-      div.textContent = 'Test content';
-      // Element is not connected to DOM
-      expect(getAccessibleText(div)).toBe('');
-    });
-  });
-
-  describe('aria-label handling', () => {
-    it('should prioritize aria-label when present', () => {
-      const div = document.createElement('div');
-      div.setAttribute('aria-label', 'Accessible Label');
-      div.textContent = 'Visual Text';
-      document.body.appendChild(div);
-      
-      expect(getAccessibleText(div)).toBe('Accessible Label');
-    });
+    describe('input validation', () => {
+        it('should return empty string when no element is provided', () => {
+            expect(getAccessibleText(null)).toBe('');
+            expect(getAccessibleText(undefined)).toBe('');
+        });
 
-    it('should handle empty aria-label by falling back to text content', () => {
-      const div = document.createElement('div');
-      div.setAttribute('aria-label', '');
-      div.textContent = 'Visual Text';
-      document.body.appendChild(div);
-      
-      expect(getAccessibleText(div)).toBe('Visual Text');
-    });
+        it('should return empty string for non-Element objects', () => {
+            expect(getAccessibleText('string')).toBe('');
+            expect(getAccessibleText(123)).toBe('');
+            expect(getAccessibleText({})).toBe('');
+            expect(getAccessibleText([])).toBe('');
+            expect(getAccessibleText(document.createTextNode('text'))).toBe(''); // Text node, not Element
+            expect(getAccessibleText(document.createComment('comment'))).toBe(''); // Comment node
+        });
 
-    it('should handle aria-label with only whitespace', () => {
-      const div = document.createElement('div');
-      div.setAttribute('aria-label', '   ');
-      div.textContent = 'Visual Text';
-      document.body.appendChild(div);
-      
-      expect(getAccessibleText(div)).toBe('Visual Text');
+        it('should return empty string for disconnected elements', () => {
+            const div = document.createElement('div');
+            div.textContent = 'Test content';
+            // Element is not connected to DOM
+            expect(getAccessibleText(div)).toBe('');
+        });
     });
 
-    it('should return empty aria-label when it exists but is empty after trim', () => {
-      const div = document.createElement('div');
-      div.setAttribute('aria-label', '');
-      div.textContent = '';
-      document.body.appendChild(div);
-      
-      expect(getAccessibleText(div)).toBe('');
-    });
-  });
-
-  describe('img alt text handling', () => {
-    it('should get alt text from img elements', () => {
-      const img = document.createElement('img');
-      img.setAttribute('alt', 'Image description');
-      img.setAttribute('src', 'test.jpg');
-      document.body.appendChild(img);
-      
-      expect(getAccessibleText(img)).toBe('Image description');
-    });
+    describe('aria-label handling', () => {
+        it('should prioritize aria-label when present', () => {
+            const div = document.createElement('div');
+            div.setAttribute('aria-label', 'Accessible Label');
+            div.textContent = 'Visual Text';
+            document.body.appendChild(div);
 
-    it('should handle img with empty alt attribute', () => {
-      const img = document.createElement('img');
-      img.setAttribute('alt', '');
-      img.setAttribute('src', 'test.jpg');
-      document.body.appendChild(img);
-      
-      expect(getAccessibleText(img)).toBe('');
-    });
+            expect(getAccessibleText(div)).toBe('Accessible Label');
+        });
 
-    it('should handle img without alt attribute', () => {
-      const img = document.createElement('img');
-      img.setAttribute('src', 'test.jpg');
-      document.body.appendChild(img);
-      
-      expect(getAccessibleText(img)).toBe('');
-    });
+        it('should handle empty aria-label by falling back to text content', () => {
+            const div = document.createElement('div');
+            div.setAttribute('aria-label', '');
+            div.textContent = 'Visual Text';
+            document.body.appendChild(div);
 
-    it('should trim whitespace from img alt text', () => {
-      const img = document.createElement('img');
-      img.setAttribute('alt', '  Image description  ');
-      img.setAttribute('src', 'test.jpg');
-      document.body.appendChild(img);
-      
-      expect(getAccessibleText(img)).toBe('Image description');
-    });
+            expect(getAccessibleText(div)).toBe('Visual Text');
+        });
 
-    it('should prioritize aria-label over alt text on img', () => {
-      const img = document.createElement('img');
-      img.setAttribute('alt', 'Alt text');
-      img.setAttribute('aria-label', 'Aria label');
-      img.setAttribute('src', 'test.jpg');
-      document.body.appendChild(img);
-      
-      expect(getAccessibleText(img)).toBe('Aria label');
-    });
-  });
-
-  describe('text content extraction', () => {
-    it('should get text content from simple elements', () => {
-      const div = document.createElement('div');
-      div.textContent = 'Simple text content';
-      document.body.appendChild(div);
-      
-      expect(getAccessibleText(div)).toBe('Simple text content');
+        it('should handle aria-label with only whitespace', () => {
+            const div = document.createElement('div');
+            div.setAttribute('aria-label', '   ');
+            div.textContent = 'Visual Text';
+            document.body.appendChild(div);
+
+            expect(getAccessibleText(div)).toBe('Visual Text');
+        });
+
+        it('should return empty aria-label when it exists but is empty after trim', () => {
+            const div = document.createElement('div');
+            div.setAttribute('aria-label', '');
+            div.textContent = '';
+            document.body.appendChild(div);
+
+            expect(getAccessibleText(div)).toBe('');
+        });
     });
 
-    it('should trim whitespace from text content', () => {
-      const div = document.createElement('div');
-      div.textContent = '   Padded text   ';
-      document.body.appendChild(div);
-      
-      expect(getAccessibleText(div)).toBe('Padded text');
+    describe('img alt text handling', () => {
+        it('should get alt text from img elements', () => {
+            const img = document.createElement('img');
+            img.setAttribute('alt', 'Image description');
+            img.setAttribute('src', 'test.jpg');
+            document.body.appendChild(img);
+
+            expect(getAccessibleText(img)).toBe('Image description');
+        });
+
+        it('should handle img with empty alt attribute', () => {
+            const img = document.createElement('img');
+            img.setAttribute('alt', '');
+            img.setAttribute('src', 'test.jpg');
+            document.body.appendChild(img);
+
+            expect(getAccessibleText(img)).toBe('');
+        });
+
+        it('should handle img without alt attribute', () => {
+            const img = document.createElement('img');
+            img.setAttribute('src', 'test.jpg');
+            document.body.appendChild(img);
+
+            expect(getAccessibleText(img)).toBe('');
+        });
+
+        it('should trim whitespace from img alt text', () => {
+            const img = document.createElement('img');
+            img.setAttribute('alt', '  Image description  ');
+            img.setAttribute('src', 'test.jpg');
+            document.body.appendChild(img);
+
+            expect(getAccessibleText(img)).toBe('Image description');
+        });
+
+        it('should prioritize aria-label over alt text on img', () => {
+            const img = document.createElement('img');
+            img.setAttribute('alt', 'Alt text');
+            img.setAttribute('aria-label', 'Aria label');
+            img.setAttribute('src', 'test.jpg');
+            document.body.appendChild(img);
+
+            expect(getAccessibleText(img)).toBe('Aria label');
+        });
     });
 
-    it('should concatenate text from multiple child nodes', () => {
-      const container = document.createElement('div');
-      container.innerHTML = `
+    describe('text content extraction', () => {
+        it('should get text content from simple elements', () => {
+            const div = document.createElement('div');
+            div.textContent = 'Simple text content';
+            document.body.appendChild(div);
+
+            expect(getAccessibleText(div)).toBe('Simple text content');
+        });
+
+        it('should trim whitespace from text content', () => {
+            const div = document.createElement('div');
+            div.textContent = '   Padded text   ';
+            document.body.appendChild(div);
+
+            expect(getAccessibleText(div)).toBe('Padded text');
+        });
+
+        it('should concatenate text from multiple child nodes', () => {
+            const container = document.createElement('div');
+            container.innerHTML = `
         <span>First part</span>
         <span>Second part</span>
         <span>Third part</span>
       `;
-      document.body.appendChild(container);
-      
-      const result = getAccessibleText(container);
-      expect(result).toContain('First part');
-      expect(result).toContain('Second part');
-      expect(result).toContain('Third part');
-    });
+            document.body.appendChild(container);
 
-    it('should handle nested elements', () => {
-      const container = document.createElement('div');
-      container.innerHTML = `
+            const result = getAccessibleText(container);
+            expect(result).toContain('First part');
+            expect(result).toContain('Second part');
+            expect(result).toContain('Third part');
+        });
+
+        it('should handle nested elements', () => {
+            const container = document.createElement('div');
+            container.innerHTML = `
         <div>
           <span>Nested <strong>text</strong> content</span>
         </div>
       `;
-      document.body.appendChild(container);
-      
-      const result = getAccessibleText(container);
-      expect(result).toContain('Nested');
-      expect(result).toContain('text');
-      expect(result).toContain('content');
-    });
-  });
-
-  describe('TreeWalker edge cases', () => {
-    it('should handle elements with no initial text content using TreeWalker', () => {
-      const container = document.createElement('div');
-      // Create element with no textContent initially
-      container.textContent = '';
-      
-      const span1 = document.createElement('span');
-      const span2 = document.createElement('span');
-      
-      // Create text nodes directly
-      span1.appendChild(document.createTextNode('Text 1'));
-      span2.appendChild(document.createTextNode('Text 2'));
-      
-      container.appendChild(span1);
-      container.appendChild(document.createTextNode(' ')); // whitespace node
-      container.appendChild(span2);
-      
-      document.body.appendChild(container);
-      
-      const result = getAccessibleText(container);
-      expect(result).toContain('Text 1');
-      expect(result).toContain('Text 2');
-    });
+            document.body.appendChild(container);
 
-    it('should filter empty text nodes using TreeWalker', () => {
-      const container = document.createElement('div');
-      container.innerHTML = ''; // Start with empty container
-      
-      // Add mix of empty and non-empty text nodes
-      container.appendChild(document.createTextNode(''));
-      container.appendChild(document.createTextNode('Valid text'));
-      container.appendChild(document.createTextNode('   ')); // Only whitespace
-      container.appendChild(document.createTextNode('More text'));
-      
-      document.body.appendChild(container);
-      
-      const result = getAccessibleText(container);
-      expect(result).toContain('Valid text');
-      expect(result).toContain('More text');
+            const result = getAccessibleText(container);
+            expect(result).toContain('Nested');
+            expect(result).toContain('text');
+            expect(result).toContain('content');
+        });
     });
 
-    it('should handle complex DOM with mixed content', () => {
-      const container = document.createElement('div');
-      container.innerHTML = `
+    describe('TreeWalker edge cases', () => {
+        it('should handle elements with no initial text content using TreeWalker', () => {
+            const container = document.createElement('div');
+            // Create element with no textContent initially
+            container.textContent = '';
+
+            const span1 = document.createElement('span');
+            const span2 = document.createElement('span');
+
+            // Create text nodes directly
+            span1.appendChild(document.createTextNode('Text 1'));
+            span2.appendChild(document.createTextNode('Text 2'));
+
+            container.appendChild(span1);
+            container.appendChild(document.createTextNode(' ')); // whitespace node
+            container.appendChild(span2);
+
+            document.body.appendChild(container);
+
+            const result = getAccessibleText(container);
+            expect(result).toContain('Text 1');
+            expect(result).toContain('Text 2');
+        });
+
+        it('should filter empty text nodes using TreeWalker', () => {
+            const container = document.createElement('div');
+            container.innerHTML = ''; // Start with empty container
+
+            // Add mix of empty and non-empty text nodes
+            container.appendChild(document.createTextNode(''));
+            container.appendChild(document.createTextNode('Valid text'));
+            container.appendChild(document.createTextNode('   ')); // Only whitespace
+            container.appendChild(document.createTextNode('More text'));
+
+            document.body.appendChild(container);
+
+            const result = getAccessibleText(container);
+            expect(result).toContain('Valid text');
+            expect(result).toContain('More text');
+        });
+
+        it('should handle complex DOM with mixed content', () => {
+            const container = document.createElement('div');
+            container.innerHTML = `
         <header>
           <h1>Title</h1>
           <nav>
@@ -225,141 +225,208 @@ describe('getAccessibleText', () => {
           </ul>
         </main>
       `;
-      document.body.appendChild(container);
-      
-      const result = getAccessibleText(container);
-      expect(result).toContain('Title');
-      expect(result).toContain('Link 1');
-      expect(result).toContain('Link 2');
-      expect(result).toContain('Paragraph text');
-      expect(result).toContain('Item 1');
-      expect(result).toContain('Item 2');
-    });
-  });
-
-  describe('special cases', () => {
-    it('should handle elements with only child elements and no text', () => {
-      const container = document.createElement('div');
-      const child1 = document.createElement('div');
-      const child2 = document.createElement('div');
-      
-      container.appendChild(child1);
-      container.appendChild(child2);
-      document.body.appendChild(container);
-      
-      expect(getAccessibleText(container)).toBe('');
-    });
+            document.body.appendChild(container);
 
-    it('should use TreeWalker when textContent is empty but has text nodes', () => {
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-      
-      // Create a scenario where textContent initially appears empty
-      // but TreeWalker can find text nodes
-      Object.defineProperty(container, 'textContent', {
-        get: function() { return ''; },
-        configurable: true
-      });
-      
-      // Add actual text nodes that TreeWalker should find
-      const text1 = document.createTextNode('Hidden text 1');
-      const text2 = document.createTextNode('Hidden text 2');
-      container.appendChild(text1);
-      container.appendChild(text2);
-      
-      const result = getAccessibleText(container);
-      expect(result).toBe('Hidden text 1 Hidden text 2');
+            const result = getAccessibleText(container);
+            expect(result).toContain('Title');
+            expect(result).toContain('Link 1');
+            expect(result).toContain('Link 2');
+            expect(result).toContain('Paragraph text');
+            expect(result).toContain('Item 1');
+            expect(result).toContain('Item 2');
+        });
     });
 
-    it('should handle self-closing elements', () => {
-      const br = document.createElement('br');
-      document.body.appendChild(br);
-      
-      expect(getAccessibleText(br)).toBe('');
-    });
+    describe('child img alt text in subtree', () => {
+        it('should get alt text from child img elements', () => {
+            const container = document.createElement('div');
+            container.innerHTML = '<img src="icon.png" alt="Submit">';
+            document.body.appendChild(container);
 
-    it('should handle input elements with value', () => {
-      const input = document.createElement('input');
-      input.type = 'text';
-      input.value = 'Input value';
-      document.body.appendChild(input);
-      
-      // Input elements don't have textContent
-      expect(getAccessibleText(input)).toBe('');
-    });
+            expect(getAccessibleText(container)).toBe('Submit');
+        });
 
-    it('should handle elements with comment nodes', () => {
-      const container = document.createElement('div');
-      container.appendChild(document.createTextNode('Before'));
-      container.appendChild(document.createComment('This is a comment'));
-      container.appendChild(document.createTextNode('After'));
-      document.body.appendChild(container);
-      
-      const result = getAccessibleText(container);
-      expect(result).toContain('Before');
-      expect(result).toContain('After');
-      expect(result).not.toContain('comment');
-    });
+        it('should combine text nodes and child img alt text', () => {
+            const container = document.createElement('div');
+            container.innerHTML = 'Click <img src="icon.png" alt="here"> to continue';
+            document.body.appendChild(container);
 
-    it('should handle TreeWalker acceptNode with element nodes that should be rejected', () => {
-      const container = document.createElement('div');
-      container.textContent = ''; // Ensure no textContent initially
-      
-      // Create an element node (should be rejected by acceptNode)
-      const span = document.createElement('span');
-      span.appendChild(document.createTextNode('Text inside span'));
-      container.appendChild(span);
-      
-      // Create a direct text node (should be accepted)
-      container.appendChild(document.createTextNode('Direct text'));
-      
-      document.body.appendChild(container);
-      
-      const result = getAccessibleText(container);
-      expect(result).toContain('Text inside span');
-      expect(result).toContain('Direct text');
-    });
+            const result = getAccessibleText(container);
+            expect(result).toContain('Click');
+            expect(result).toContain('here');
+            expect(result).toContain('to continue');
+        });
+
+        it('should get alt text from deeply nested img elements', () => {
+            const container = document.createElement('div');
+            container.innerHTML = '<span><img src="icon.png" alt="Save"></span>';
+            document.body.appendChild(container);
+
+            expect(getAccessibleText(container)).toBe('Save');
+        });
+
+        it('should skip img elements with empty alt (decorative)', () => {
+            const container = document.createElement('div');
+            container.innerHTML = 'Label <img src="decorative.png" alt="">';
+            document.body.appendChild(container);
+
+            expect(getAccessibleText(container)).toBe('Label');
+        });
+
+        it('should skip img elements without alt attribute', () => {
+            const container = document.createElement('div');
+            container.innerHTML = 'Label <img src="decorative.png">';
+            document.body.appendChild(container);
+
+            expect(getAccessibleText(container)).toBe('Label');
+        });
 
-    it('should handle TreeWalker acceptNode filtering and text node collection', () => {
-      const container = document.createElement('div');
-      container.textContent = ''; // Force TreeWalker path
-      
-      // Create child elements with text nodes to test TreeWalker
-      const child1 = document.createElement('span');
-      child1.appendChild(document.createTextNode('First'));
-      
-      const child2 = document.createElement('span'); 
-      child2.appendChild(document.createTextNode('Second'));
-      
-      container.appendChild(child1);
-      container.appendChild(document.createTextNode(' ')); // space between
-      container.appendChild(child2);
-      
-      document.body.appendChild(container);
-      
-      const result = getAccessibleText(container);
-      expect(result).toBe('First Second');
+        it('should handle multiple img elements with alt text', () => {
+            const container = document.createElement('div');
+            container.innerHTML = '<img src="a.png" alt="First"> <img src="b.png" alt="Second">';
+            document.body.appendChild(container);
+
+            const result = getAccessibleText(container);
+            expect(result).toContain('First');
+            expect(result).toContain('Second');
+        });
+
+        it('should handle input type="image" with alt in subtree', () => {
+            const container = document.createElement('div');
+            container.innerHTML = '<input type="image" alt="Search">';
+            document.body.appendChild(container);
+
+            expect(getAccessibleText(container)).toBe('Search');
+        });
     });
 
-    it('should test TreeWalker acceptNode function with various node types', () => {
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-      
-      // Override textContent to force TreeWalker path
-      Object.defineProperty(container, 'textContent', {
-        get: function() { return ''; },
-        configurable: true
-      });
-      
-      // Add mix of empty and non-empty text nodes
-      container.appendChild(document.createTextNode('')); // Empty - should be rejected
-      container.appendChild(document.createTextNode('   ')); // Whitespace only - should be rejected  
-      container.appendChild(document.createTextNode('Valid')); // Valid - should be accepted
-      container.appendChild(document.createTextNode('\n\t')); // Whitespace - should be rejected
-      container.appendChild(document.createTextNode('Text')); // Valid - should be accepted
-      
-      const result = getAccessibleText(container);
-      expect(result).toBe('Valid Text');
+    describe('special cases', () => {
+        it('should handle elements with only child elements and no text', () => {
+            const container = document.createElement('div');
+            const child1 = document.createElement('div');
+            const child2 = document.createElement('div');
+
+            container.appendChild(child1);
+            container.appendChild(child2);
+            document.body.appendChild(container);
+
+            expect(getAccessibleText(container)).toBe('');
+        });
+
+        it('should use TreeWalker when textContent is empty but has text nodes', () => {
+            const container = document.createElement('div');
+            document.body.appendChild(container);
+
+            // Create a scenario where textContent initially appears empty
+            // but TreeWalker can find text nodes
+            Object.defineProperty(container, 'textContent', {
+                get: function () {
+                    return '';
+                },
+                configurable: true,
+            });
+
+            // Add actual text nodes that TreeWalker should find
+            const text1 = document.createTextNode('Hidden text 1');
+            const text2 = document.createTextNode('Hidden text 2');
+            container.appendChild(text1);
+            container.appendChild(text2);
+
+            const result = getAccessibleText(container);
+            expect(result).toBe('Hidden text 1 Hidden text 2');
+        });
+
+        it('should handle self-closing elements', () => {
+            const br = document.createElement('br');
+            document.body.appendChild(br);
+
+            expect(getAccessibleText(br)).toBe('');
+        });
+
+        it('should handle input elements with value', () => {
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.value = 'Input value';
+            document.body.appendChild(input);
+
+            // Input elements don't have textContent
+            expect(getAccessibleText(input)).toBe('');
+        });
+
+        it('should handle elements with comment nodes', () => {
+            const container = document.createElement('div');
+            container.appendChild(document.createTextNode('Before'));
+            container.appendChild(document.createComment('This is a comment'));
+            container.appendChild(document.createTextNode('After'));
+            document.body.appendChild(container);
+
+            const result = getAccessibleText(container);
+            expect(result).toContain('Before');
+            expect(result).toContain('After');
+            expect(result).not.toContain('comment');
+        });
+
+        it('should handle TreeWalker acceptNode with element nodes that should be rejected', () => {
+            const container = document.createElement('div');
+            container.textContent = ''; // Ensure no textContent initially
+
+            // Create an element node (should be rejected by acceptNode)
+            const span = document.createElement('span');
+            span.appendChild(document.createTextNode('Text inside span'));
+            container.appendChild(span);
+
+            // Create a direct text node (should be accepted)
+            container.appendChild(document.createTextNode('Direct text'));
+
+            document.body.appendChild(container);
+
+            const result = getAccessibleText(container);
+            expect(result).toContain('Text inside span');
+            expect(result).toContain('Direct text');
+        });
+
+        it('should handle TreeWalker acceptNode filtering and text node collection', () => {
+            const container = document.createElement('div');
+            container.textContent = ''; // Force TreeWalker path
+
+            // Create child elements with text nodes to test TreeWalker
+            const child1 = document.createElement('span');
+            child1.appendChild(document.createTextNode('First'));
+
+            const child2 = document.createElement('span');
+            child2.appendChild(document.createTextNode('Second'));
+
+            container.appendChild(child1);
+            container.appendChild(document.createTextNode(' ')); // space between
+            container.appendChild(child2);
+
+            document.body.appendChild(container);
+
+            const result = getAccessibleText(container);
+            expect(result).toBe('First Second');
+        });
+
+        it('should test TreeWalker acceptNode function with various node types', () => {
+            const container = document.createElement('div');
+            document.body.appendChild(container);
+
+            // Override textContent to force TreeWalker path
+            Object.defineProperty(container, 'textContent', {
+                get: function () {
+                    return '';
+                },
+                configurable: true,
+            });
+
+            // Add mix of empty and non-empty text nodes
+            container.appendChild(document.createTextNode('')); // Empty - should be rejected
+            container.appendChild(document.createTextNode('   ')); // Whitespace only - should be rejected
+            container.appendChild(document.createTextNode('Valid')); // Valid - should be accepted
+            container.appendChild(document.createTextNode('\n\t')); // Whitespace - should be rejected
+            container.appendChild(document.createTextNode('Text')); // Valid - should be accepted
+
+            const result = getAccessibleText(container);
+            expect(result).toBe('Valid Text');
+        });
     });
-  });
-});
+});