@afixt/test-utils 1.1.2 → 1.1.4

package/test/getAccessibleText.test.js

@@ -1,94 +1,365 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { getAccessibleText } from '../src/getAccessibleText.js';
 
-// Mock the isEmpty function since it's not imported
-const originalGetAccessibleText = getAccessibleText;
-vi.mock('../src/getAccessibleText.js', () => ({
-  getAccessibleText: (el) => {
-    if (!el) return "";
-    
-    let text = [];
-    
-    // Get text from aria-label attributes
-    const elementsWithAriaLabel = el.querySelectorAll('[aria-label]');
-    elementsWithAriaLabel.forEach(element => {
-      text.push(element.getAttribute('aria-label'));
-    });
-    
-    // Get text from alt attributes on img elements
-    const imgElements = el.querySelectorAll('img[alt]');
-    imgElements.forEach(img => {
-      text.push(img.getAttribute('alt').trim());
-    });
-    
-    // Also check the element itself for aria-label or alt
-    if (el.hasAttribute && el.hasAttribute('aria-label')) {
-      text.push(el.getAttribute('aria-label'));
-    } else if (el.tagName && el.tagName.toLowerCase() === 'img' && el.hasAttribute('alt')) {
-      text.push(el.getAttribute('alt').trim());
-    }
-    
-    return text.join(' ').trim();
-  }
-}));
-
 describe('getAccessibleText', () => {
   beforeEach(() => {
     document.body.innerHTML = '';
   });
 
-  it('should return empty string when no element is provided', () => {
-    expect(getAccessibleText(null)).toBe('');
-    expect(getAccessibleText(undefined)).toBe('');
+  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('');
+    });
+
+    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 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');
+    });
+
+    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 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('');
+    });
+  });
+
+  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 get text from aria-label attribute', () => {
-    // Arrange
-    const div = document.createElement('div');
-    div.setAttribute('aria-label', 'Accessible Label');
-    document.body.appendChild(div);
-    
-    // Act
-    const result = getAccessibleText(div);
-    
-    // Assert
-    expect(result).toBe('Accessible 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 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');
+    });
+
+    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');
+    });
   });
 
-  it('should get alt text from img elements', () => {
-    // Arrange
-    const parent = document.createElement('div');
-    const img = document.createElement('img');
-    img.setAttribute('alt', 'Image description');
-    parent.appendChild(img);
-    document.body.appendChild(parent);
-    
-    // Act
-    const result = getAccessibleText(parent);
-    
-    // Assert
-    expect(result).toBe('Image description');
+  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>
+            <a href="#">Link 1</a>
+            <a href="#">Link 2</a>
+          </nav>
+        </header>
+        <main>
+          <p>Paragraph text</p>
+          <ul>
+            <li>Item 1</li>
+            <li>Item 2</li>
+          </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');
+    });
   });
 
-  it('should concatenate multiple text nodes', () => {
-    // Arrange
-    const container = document.createElement('div');
-    
-    const span1 = document.createElement('span');
-    span1.setAttribute('aria-label', 'First label');
-    
-    const img = document.createElement('img');
-    img.setAttribute('alt', 'Image alt');
-    
-    container.appendChild(span1);
-    container.appendChild(img);
-    document.body.appendChild(container);
-    
-    // Act
-    const result = getAccessibleText(container);
-    
-    // Assert
-    expect(result).toContain('First label');
-    expect(result).toContain('Image alt');
+  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');
+    });
   });
 });

package/test/getCSSGeneratedContent.test.js

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { getCSSGeneratedContent } from '../src/getCSSGeneratedContent';
 
 describe('getCSSGeneratedContent', () => {
@@ -41,7 +41,16 @@ describe('getCSSGeneratedContent', () => {
     const div = document.createElement('div');
     document.body.appendChild(div);
     
+    // Mock getComputedStyle for this test since JSDOM doesn't support it
+    const originalGetComputedStyle = window.getComputedStyle;
+    window.getComputedStyle = () => ({
+      getPropertyValue: () => 'none'
+    });
+    
     expect(getCSSGeneratedContent(div)).toBe(false);
+    
+    // Restore original
+    window.getComputedStyle = originalGetComputedStyle;
   });
 
   it('should get ::before content', () => {
@@ -89,7 +98,16 @@ describe('getCSSGeneratedContent', () => {
     div.className = 'empty-content';
     document.body.appendChild(div);
     
+    // Mock getComputedStyle to return empty quoted content
+    const originalGetComputedStyle = window.getComputedStyle;
+    window.getComputedStyle = () => ({
+      getPropertyValue: () => '""'
+    });
+    
     expect(getCSSGeneratedContent(div)).toBe(false);
+    
+    // Restore original
+    window.getComputedStyle = originalGetComputedStyle;
   });
 
   it('should return false for content: none', () => {
@@ -99,4 +117,160 @@ describe('getCSSGeneratedContent', () => {
     
     expect(getCSSGeneratedContent(div)).toBe(false);
   });
+
+  it('should handle url content', () => {
+    const div = document.createElement('div');
+    div.className = 'url-content';
+    document.body.appendChild(div);
+    
+    expect(getCSSGeneratedContent(div, 'before')).toBe('url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")');
+  });
+
+  it('should handle undefined and non-string pseudoElement parameter', () => {
+    const div = document.createElement('div');
+    div.className = 'with-before';
+    document.body.appendChild(div);
+    
+    // Should default to 'both' when no pseudoElement specified
+    expect(getCSSGeneratedContent(div, undefined)).toBe('Before Content');
+  });
+
+  describe('Browser implementation paths', () => {
+    let originalGetComputedStyle;
+
+    beforeEach(() => {
+      // Mock getComputedStyle to simulate real browser behavior
+      originalGetComputedStyle = window.getComputedStyle;
+    });
+
+    afterEach(() => {
+      // Restore original getComputedStyle
+      window.getComputedStyle = originalGetComputedStyle;
+    });
+
+    it('should handle quote removal in browser implementation', () => {
+      // Mock getComputedStyle to return quoted content
+      window.getComputedStyle = (el, pseudo) => ({
+        getPropertyValue: (prop) => {
+          if (prop === 'content' && pseudo === '::before') {
+            return '"Quoted Content"';
+          }
+          return 'none';
+        }
+      });
+
+      const div = document.createElement('div');
+      // Remove classList to bypass JSDOM check
+      Object.defineProperty(div, 'classList', { value: undefined });
+      document.body.appendChild(div);
+      
+      expect(getCSSGeneratedContent(div, 'before')).toBe('Quoted Content');
+    });
+
+    it('should handle single quote removal in browser implementation', () => {
+      window.getComputedStyle = (el, pseudo) => ({
+        getPropertyValue: (prop) => {
+          if (prop === 'content' && pseudo === '::before') {
+            return "'Single Quoted'";
+          }
+          return 'none';
+        }
+      });
+
+      const div = document.createElement('div');
+      Object.defineProperty(div, 'classList', { value: undefined });
+      document.body.appendChild(div);
+      
+      expect(getCSSGeneratedContent(div, 'before')).toBe('Single Quoted');
+    });
+
+    it('should handle both before and after content with quotes', () => {
+      window.getComputedStyle = (el, pseudo) => ({
+        getPropertyValue: (prop) => {
+          if (prop === 'content') {
+            if (pseudo === '::before') return '"Before"';
+            if (pseudo === '::after') return '"After"';
+          }
+          return 'none';
+        }
+      });
+
+      const div = document.createElement('div');
+      Object.defineProperty(div, 'classList', { value: undefined });
+      document.body.appendChild(div);
+      
+      expect(getCSSGeneratedContent(div, 'both')).toBe('Before After');
+    });
+
+    it('should handle after content with quotes', () => {
+      window.getComputedStyle = (el, pseudo) => ({
+        getPropertyValue: (prop) => {
+          if (prop === 'content' && pseudo === '::after') {
+            return '"After Content"';
+          }
+          return 'none';
+        }
+      });
+
+      const div = document.createElement('div');
+      Object.defineProperty(div, 'classList', { value: undefined });
+      document.body.appendChild(div);
+      
+      expect(getCSSGeneratedContent(div, 'after')).toBe('After Content');
+    });
+
+    it('should handle content: none in browser implementation', () => {
+      window.getComputedStyle = (el, pseudo) => ({
+        getPropertyValue: (prop) => 'none'
+      });
+
+      const div = document.createElement('div');
+      Object.defineProperty(div, 'classList', { value: undefined });
+      document.body.appendChild(div);
+      
+      expect(getCSSGeneratedContent(div)).toBe(false);
+    });
+
+    it('should handle content: normal in browser implementation', () => {
+      window.getComputedStyle = (el, pseudo) => ({
+        getPropertyValue: (prop) => 'normal'
+      });
+
+      const div = document.createElement('div');
+      Object.defineProperty(div, 'classList', { value: undefined });
+      document.body.appendChild(div);
+      
+      expect(getCSSGeneratedContent(div)).toBe(false);
+    });
+
+    it('should handle empty quoted content', () => {
+      window.getComputedStyle = (el, pseudo) => ({
+        getPropertyValue: (prop) => {
+          if (prop === 'content') {
+            if (pseudo === '::before') return '""';
+          }
+          return 'none';
+        }
+      });
+
+      const div = document.createElement('div');
+      Object.defineProperty(div, 'classList', { value: undefined });
+      document.body.appendChild(div);
+      
+      expect(getCSSGeneratedContent(div, 'before')).toBe(false);
+    });
+
+    it('should handle getComputedStyle error', () => {
+      // Mock getComputedStyle to throw an error
+      window.getComputedStyle = () => {
+        throw new Error('getComputedStyle not supported');
+      };
+
+      const div = document.createElement('div');
+      Object.defineProperty(div, 'classList', { value: undefined });
+      document.body.appendChild(div);
+      
+      expect(getCSSGeneratedContent(div)).toBe(false);
+    });
+  });
 });