@afixt/test-utils 1.1.2 → 1.1.4

package/test/isVisible.test.js

@@ -84,10 +84,10 @@ describe('isVisible', () => {
       <div id="label" style="display:none">Hidden Label</div>
       <button aria-labelledby="label">Button</button>
     `;
-    
+
     const label = document.getElementById('label');
     const button = document.querySelector('button');
-    
+
     window.getComputedStyle.mockImplementation((el) => {
       if (el === label) {
         return { display: 'none' };
@@ -97,8 +97,126 @@ describe('isVisible', () => {
       }
       return { display: 'block' };
     });
-    
+
     // The label is hidden but should be considered visible because it's referenced
     expect(isVisible(label)).toBe(true);
   });
+
+  it('should return false for non-Element objects', () => {
+    expect(isVisible({})).toBe(false);
+    expect(isVisible('string')).toBe(false);
+    expect(isVisible(123)).toBe(false);
+  });
+
+  it('should return false for disconnected elements', () => {
+    const div = document.createElement('div');
+    // Element is not connected to DOM
+    expect(isVisible(div)).toBe(false);
+  });
+
+  it('should return true for visible elements', () => {
+    document.body.innerHTML = `<div id="test">Visible</div>`;
+    const element = document.getElementById('test');
+    expect(isVisible(element)).toBe(true);
+  });
+
+  it('should handle elements referenced by aria-describedby', () => {
+    document.body.innerHTML = `
+      <div id="desc" style="display:none">Description</div>
+      <input aria-describedby="desc" />
+    `;
+
+    const desc = document.getElementById('desc');
+    const input = document.querySelector('input');
+
+    window.getComputedStyle.mockImplementation((el) => {
+      if (el === desc) {
+        return { display: 'none' };
+      }
+      if (el === input) {
+        return { display: 'block' };
+      }
+      return { display: 'block' };
+    });
+
+    // Description is hidden but should be considered visible because it's referenced
+    expect(isVisible(desc)).toBe(true);
+  });
+
+  it('should handle multiple ancestors with display:none', () => {
+    document.body.innerHTML = `
+      <div style="display:none">
+        <div>
+          <div>
+            <span id="deeply-hidden">Hidden</span>
+          </div>
+        </div>
+      </div>
+    `;
+    const element = document.getElementById('deeply-hidden');
+    expect(isVisible(element)).toBe(false);
+  });
+
+  it('should handle aria-hidden="false"', () => {
+    document.body.innerHTML = `<div id="test" aria-hidden="false">Visible</div>`;
+    const element = document.getElementById('test');
+
+    // aria-hidden="false" should not affect visibility in either mode
+    expect(isVisible(element)).toBe(true);
+    expect(isVisible(element, true)).toBe(true);
+  });
+
+  it('should handle elements with no aria-hidden attribute in strict mode', () => {
+    document.body.innerHTML = `<div id="test">No aria-hidden</div>`;
+    const element = document.getElementById('test');
+
+    expect(isVisible(element, true)).toBe(true);
+  });
+
+  it('should handle multiple levels of parent aria-hidden in strict mode', () => {
+    document.body.innerHTML = `
+      <div aria-hidden="true">
+        <div>
+          <span id="child">Child</span>
+        </div>
+      </div>
+    `;
+    const element = document.getElementById('child');
+
+    expect(isVisible(element, true)).toBe(false);
+  });
+
+  it('should check specific inherently non-visible elements', () => {
+    const testCases = [
+      { tag: 'script', html: '<script id="test">alert("test")</script>' },
+      { tag: 'style', html: '<style id="test">body {}</style>' },
+      { tag: 'input[type="hidden"]', html: '<input type="hidden" id="test" />' }
+    ];
+
+    testCases.forEach(({ tag, html }) => {
+      document.body.innerHTML = html;
+      const element = document.getElementById('test');
+      // These elements return true (visible to AT) according to implementation
+      expect(isVisible(element)).toBe(true);
+    });
+  });
+
+  it('should handle element with no id referenced by aria-labelledby', () => {
+    document.body.innerHTML = `
+      <div style="display:none">No ID</div>
+      <button aria-labelledby="nonexistent">Button</button>
+    `;
+
+    const div = document.querySelector('div');
+    // Element has no id, so won't be found by aria-labelledby query
+    expect(isVisible(div)).toBe(false);
+  });
+
+  it('should handle aria-hidden with different values in strict mode', () => {
+    document.body.innerHTML = `<div id="test" aria-hidden="invalid">Text</div>`;
+    const element = document.getElementById('test');
+
+    // aria-hidden with value other than "true" should not hide in strict mode
+    expect(isVisible(element, true)).toBe(true);
+  });
 });

package/test/playwright/css-pseudo-elements.spec.js

@@ -0,0 +1,155 @@
+/**
+ * Standalone Playwright tests for CSS pseudo-element functionality
+ * These tests were skipped in JSDOM due to lack of ::before and ::after support
+ *
+ * Run with: npm run test:playwright:css
+ */
+
+const { test, expect } = require('@playwright/test');
+const path = require('path');
+
+test.describe('CSS Pseudo-element Support', () => {
+  test.beforeEach(async ({ page }) => {
+    // Load the test fixture HTML
+    const fixturePath = path.join(__dirname, 'fixtures', 'css-pseudo-elements.html');
+    await page.goto(`file://${fixturePath}`);
+
+    // Inject the functions into the page
+    await page.addScriptTag({
+      content: `
+        // Fix getComputedStyle usage and make it work in browser
+        function getGeneratedContent(el) {
+          if (!el) return false;
+
+          // Get pseudo-element content properly
+          const beforeStyle = window.getComputedStyle(el, '::before');
+          const afterStyle = window.getComputedStyle(el, '::after');
+
+          let before = beforeStyle.getPropertyValue('content') || '';
+          let after = afterStyle.getPropertyValue('content') || '';
+          const inner = el.textContent || '';
+
+          // Remove quotes from CSS content values
+          before = before.replace(/^["']|["']$/g, '');
+          after = after.replace(/^["']|["']$/g, '');
+
+          // Filter out 'none' values
+          if (before === 'none') before = '';
+          if (after === 'none') after = '';
+
+          const result = [before, inner, after].filter(Boolean).join(' ').trim();
+          return result || false;
+        }
+
+        function hasCSSGeneratedContent(el) {
+          if (!el) return false;
+          const content = getGeneratedContent(el);
+          return content !== false;
+        }
+
+        // Make functions globally available
+        window.getGeneratedContent = getGeneratedContent;
+        window.hasCSSGeneratedContent = hasCSSGeneratedContent;
+      `
+    });
+  });
+
+  test.describe('getGeneratedContent', () => {
+    test('should return ::before content when present', async ({ page }) => {
+      const result = await page.evaluate(() => {
+        const element = document.getElementById('with-before');
+        return window.getGeneratedContent(element);
+      });
+
+      expect(result).toContain('Before Content');
+    });
+
+    test('should return ::after content when present', async ({ page }) => {
+      const result = await page.evaluate(() => {
+        const element = document.getElementById('with-after');
+        return window.getGeneratedContent(element);
+      });
+
+      expect(result).toContain('After Content');
+    });
+
+    test('should combine ::before, text content, and ::after', async ({ page }) => {
+      const result = await page.evaluate(() => {
+        const element = document.getElementById('with-both');
+        return window.getGeneratedContent(element);
+      });
+
+      expect(result).toContain('Before');
+      expect(result).toContain('Text Content');
+      expect(result).toContain('After');
+    });
+
+    test('should handle quoted content values in CSS', async ({ page }) => {
+      const result = await page.evaluate(() => {
+        const element = document.getElementById('with-quotes');
+        return window.getGeneratedContent(element);
+      });
+
+      expect(result).toBeTruthy();
+      expect(result).toContain('Quoted');
+    });
+
+    test('should handle CSS content with special characters', async ({ page }) => {
+      const result = await page.evaluate(() => {
+        const element = document.getElementById('with-special-chars');
+        return window.getGeneratedContent(element);
+      });
+
+      expect(result).toBeTruthy();
+    });
+
+    test('should trim whitespace from the combined result', async ({ page }) => {
+      const result = await page.evaluate(() => {
+        const element = document.getElementById('with-whitespace');
+        return window.getGeneratedContent(element);
+      });
+
+      expect(result).toBeTruthy();
+      expect(result.startsWith(' ')).toBe(false);
+      expect(result.endsWith(' ')).toBe(false);
+    });
+
+    test('should handle nested elements with generated content', async ({ page }) => {
+      const result = await page.evaluate(() => {
+        const element = document.getElementById('nested-content');
+        return window.getGeneratedContent(element);
+      });
+
+      expect(result).toBeTruthy();
+    });
+
+    test('should handle content with HTML entities in CSS', async ({ page }) => {
+      const result = await page.evaluate(() => {
+        const element = document.getElementById('with-entities');
+        return window.getGeneratedContent(element);
+      });
+
+      expect(result).toBeTruthy();
+    });
+  });
+
+  test.describe('hasCSSGeneratedContent', () => {
+    test('should correctly identify elements with ::before content', async ({ page }) => {
+      const result = await page.evaluate(() => {
+        const element = document.getElementById('with-before');
+        return window.hasCSSGeneratedContent(element);
+      });
+
+      expect(result).toBe(true);
+    });
+
+    test('should correctly identify elements with ::after content', async ({ page }) => {
+      const result = await page.evaluate(() => {
+        const element = document.getElementById('with-after');
+        return window.hasCSSGeneratedContent(element);
+      });
+
+      expect(result).toBe(true);
+    });
+  });
+});

package/test/playwright/fixtures/css-pseudo-elements.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CSS Pseudo-element Test Fixtures</title>
+  <style>
+    #with-before::before {
+      content: "Before Content";
+    }
+
+    #with-after::after {
+      content: "After Content";
+    }
+
+    #with-both::before {
+      content: "Before ";
+    }
+
+    #with-both::after {
+      content: " After";
+    }
+
+    #with-quotes::before {
+      content: "'Quoted Content'";
+    }
+
+    #with-special-chars::before {
+      content: "★ Special → Chars ©";
+    }
+
+    #with-whitespace::before {
+      content: "   Content with spaces   ";
+    }
+
+    #nested-content::before {
+      content: "Outer Before";
+    }
+
+    #nested-content .inner::before {
+      content: "Inner Before";
+    }
+
+    #with-entities::before {
+      content: "\00A9 \2022 \2713";
+    }
+
+    #empty-content::before {
+      content: "";
+    }
+
+    #no-content::before {
+      content: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="with-before">Element with before content</div>
+  <div id="with-after">Element with after content</div>
+  <div id="with-both">Text Content</div>
+  <div id="with-quotes">Quoted</div>
+  <div id="with-special-chars">Special</div>
+  <div id="with-whitespace">Whitespace</div>
+  <div id="nested-content">
+    <span class="inner">Inner text</span>
+  </div>
+  <div id="with-entities">Entities</div>
+  <div id="empty-content">Empty</div>
+  <div id="no-content">None</div>
+
+  <!-- Load the functions we need directly in the page -->
+  <script type="module">
+    // We'll inject the test functions via Playwright
+    window.testReady = true;
+  </script>
+</body>
+</html>

package/test/setup.js

@@ -1,13 +1,21 @@
 // Test setup for Vitest
 import { afterEach, vi } from 'vitest';
 
+// Mock Tesseract.js to avoid worker initialization errors in test environment
+vi.mock('tesseract.js', () => ({
+  default: {
+    recognize: vi.fn(() => Promise.reject(new Error('Mocked tesseract error'))),
+  },
+  recognize: vi.fn(() => Promise.reject(new Error('Mocked tesseract error'))),
+}));
+
 // Cleanup DOM after each test
 afterEach(() => {
   // Clean up the DOM
   if (typeof document !== 'undefined' && document.body) {
     document.body.innerHTML = '';
   }
-  
+
   // Reset any mocked functions
   vi.restoreAllMocks();
 });

package/test/stringUtils.test.js

@@ -94,13 +94,289 @@ describe('stringUtils', () => {
     });
   });
 
+  describe('isAlphaNumeric', () => {
+    it('should return true for strings containing only alphanumeric characters', () => {
+      expect(stringUtils.isAlphaNumeric('abc123')).toBe(true);
+      expect(stringUtils.isAlphaNumeric('ABC')).toBe(true);
+      expect(stringUtils.isAlphaNumeric('123')).toBe(true);
+      expect(stringUtils.isAlphaNumeric('Test123')).toBe(true);
+      expect(stringUtils.isAlphaNumeric('a')).toBe(true);
+      expect(stringUtils.isAlphaNumeric('1')).toBe(true);
+    });
+
+    it('should return false for strings containing non-alphanumeric characters', () => {
+      expect(stringUtils.isAlphaNumeric('abc 123')).toBe(false); // space
+      expect(stringUtils.isAlphaNumeric('abc-123')).toBe(false); // hyphen
+      expect(stringUtils.isAlphaNumeric('abc_123')).toBe(false); // underscore
+      expect(stringUtils.isAlphaNumeric('abc@123')).toBe(false); // special character
+      expect(stringUtils.isAlphaNumeric('abc.123')).toBe(false); // period
+      expect(stringUtils.isAlphaNumeric('abc!123')).toBe(false); // exclamation
+      expect(stringUtils.isAlphaNumeric('')).toBe(false); // empty string
+    });
+
+    it('should return false for special edge cases', () => {
+      expect(stringUtils.isAlphaNumeric('\n')).toBe(false); // newline
+      expect(stringUtils.isAlphaNumeric('\t')).toBe(false); // tab
+      expect(stringUtils.isAlphaNumeric('   ')).toBe(false); // whitespace
+    });
+  });
+
   describe('getPathFromUrl', () => {
     it('should extract the pathname correctly', () => {
       expect(stringUtils.getPathFromUrl('https://example.com/path/to/resource')).toBe('/path/to/resource');
       expect(stringUtils.getPathFromUrl('https://example.com/')).toBe('/');
       expect(stringUtils.getPathFromUrl('https://example.com/path?query=string')).toBe('/path');
     });
+
+    it('should handle complex URLs', () => {
+      expect(stringUtils.getPathFromUrl('https://subdomain.example.com/path/to/resource')).toBe('/path/to/resource');
+      expect(stringUtils.getPathFromUrl('http://example.com/path/to/resource#hash')).toBe('/path/to/resource');
+      expect(stringUtils.getPathFromUrl('https://example.com:8080/path')).toBe('/path');
+    });
+
+    it('should handle URLs with encoded characters', () => {
+      expect(stringUtils.getPathFromUrl('https://example.com/path%20with%20spaces')).toBe('/path%20with%20spaces');
+      expect(stringUtils.getPathFromUrl('https://example.com/path/with/special%20chars')).toBe('/path/with/special%20chars');
+    });
   });
 
-  // Add more tests for getAllText and hasText when running in a DOM environment
+  describe('getAllText', () => {
+    it('should extract text from simple text nodes', () => {
+      const div = document.createElement('div');
+      div.textContent = 'Hello World';
+      
+      expect(stringUtils.getAllText(div)).toBe('Hello World');
+    });
+
+    it('should extract text from nested elements', () => {
+      const div = document.createElement('div');
+      const span = document.createElement('span');
+      span.textContent = 'Hello';
+      const text = document.createTextNode(' World');
+      
+      div.appendChild(span);
+      div.appendChild(text);
+      
+      expect(stringUtils.getAllText(div)).toBe('Hello World');
+    });
+
+    it('should extract aria-label attributes', () => {
+      const div = document.createElement('div');
+      const button = document.createElement('button');
+      button.setAttribute('aria-label', 'Close dialog');
+      button.textContent = 'X';
+      
+      div.appendChild(button);
+      
+      const result = stringUtils.getAllText(div);
+      expect(result).toContain('Close dialog');
+      expect(result).toContain('X');
+    });
+
+    it('should extract alt attributes from images', () => {
+      const div = document.createElement('div');
+      const img = document.createElement('img');
+      img.setAttribute('alt', 'Profile picture');
+      img.setAttribute('src', 'profile.jpg');
+      
+      div.appendChild(img);
+      
+      expect(stringUtils.getAllText(div)).toBe('Profile picture');
+    });
+
+    it('should handle mixed content with text, aria-labels, and alt text', () => {
+      const div = document.createElement('div');
+      
+      // Add some text
+      const textNode = document.createTextNode('Welcome ');
+      div.appendChild(textNode);
+      
+      // Add element with aria-label
+      const button = document.createElement('button');
+      button.setAttribute('aria-label', 'Help');
+      button.textContent = '?';
+      div.appendChild(button);
+      
+      // Add some more text
+      const moreText = document.createTextNode(' to our site ');
+      div.appendChild(moreText);
+      
+      // Add image with alt text
+      const img = document.createElement('img');
+      img.setAttribute('alt', 'Company logo');
+      div.appendChild(img);
+      
+      const result = stringUtils.getAllText(div);
+      expect(result).toContain('Welcome');
+      expect(result).toContain('Help');
+      expect(result).toContain('?');
+      expect(result).toContain('to our site');
+      expect(result).toContain('Company logo');
+    });
+
+    it('should handle empty elements', () => {
+      const div = document.createElement('div');
+      expect(stringUtils.getAllText(div)).toBe('');
+    });
+
+    it('should trim whitespace from text nodes', () => {
+      const div = document.createElement('div');
+      const textNode = document.createTextNode('   Hello World   ');
+      div.appendChild(textNode);
+      
+      expect(stringUtils.getAllText(div)).toBe('Hello World');
+    });
+
+    it('should handle elements with only whitespace', () => {
+      const div = document.createElement('div');
+      const textNode = document.createTextNode('   ');
+      div.appendChild(textNode);
+      
+      // Should use textContent.trim() as fallback for empty text
+      expect(stringUtils.getAllText(div)).toBe('');
+    });
+
+    it('should handle deeply nested structures', () => {
+      const div = document.createElement('div');
+      const section = document.createElement('section');
+      const article = document.createElement('article');
+      const p = document.createElement('p');
+      
+      p.textContent = 'Deep content';
+      article.appendChild(p);
+      section.appendChild(article);
+      div.appendChild(section);
+      
+      expect(stringUtils.getAllText(div)).toBe('Deep content');
+    });
+
+    it('should handle images without alt attributes', () => {
+      const div = document.createElement('div');
+      const img = document.createElement('img');
+      img.setAttribute('src', 'image.jpg');
+      // No alt attribute
+      
+      const text = document.createTextNode('Some text');
+      div.appendChild(text);
+      div.appendChild(img);
+      
+      expect(stringUtils.getAllText(div)).toBe('Some text');
+    });
+
+    it('should handle elements without aria-label', () => {
+      const div = document.createElement('div');
+      const button = document.createElement('button');
+      button.textContent = 'Click me';
+      // No aria-label attribute
+      
+      div.appendChild(button);
+      
+      expect(stringUtils.getAllText(div)).toBe('Click me');
+    });
+  });
+
+  describe('hasText', () => {
+    it('should return true for elements with text content', () => {
+      const div = document.createElement('div');
+      div.textContent = 'Hello World';
+      
+      expect(stringUtils.hasText(div)).toBe(true);
+    });
+
+    it('should return false for empty elements', () => {
+      const div = document.createElement('div');
+      
+      expect(stringUtils.hasText(div)).toBe(false);
+    });
+
+    it('should return false for elements with only whitespace', () => {
+      const div = document.createElement('div');
+      div.textContent = '   \n\t   ';
+      
+      expect(stringUtils.hasText(div)).toBe(false);
+    });
+
+    it('should return true for elements with aria-label', () => {
+      const div = document.createElement('div');
+      const button = document.createElement('button');
+      button.setAttribute('aria-label', 'Close');
+      
+      div.appendChild(button);
+      
+      expect(stringUtils.hasText(div)).toBe(true);
+    });
+
+    it('should return true for elements with image alt text', () => {
+      const div = document.createElement('div');
+      const img = document.createElement('img');
+      img.setAttribute('alt', 'Profile picture');
+      
+      div.appendChild(img);
+      
+      expect(stringUtils.hasText(div)).toBe(true);
+    });
+
+    it('should return true for nested elements with text', () => {
+      const div = document.createElement('div');
+      const span = document.createElement('span');
+      span.textContent = 'Nested text';
+      
+      div.appendChild(span);
+      
+      expect(stringUtils.hasText(div)).toBe(true);
+    });
+
+    it('should return false for elements with empty nested structure', () => {
+      const div = document.createElement('div');
+      const span = document.createElement('span');
+      const p = document.createElement('p');
+
+      div.appendChild(span);
+      span.appendChild(p);
+
+      expect(stringUtils.hasText(div)).toBe(false);
+    });
+  });
+
+  describe('getAllText edge cases', () => {
+    it('should handle text nodes with empty nodeValue but non-empty textContent', () => {
+      const div = document.createElement('div');
+      const textNode = document.createTextNode('   ');
+      div.appendChild(textNode);
+
+      // This tests the else branch where nodeValue.trim() is empty
+      const result = stringUtils.getAllText(div);
+      expect(typeof result).toBe('string');
+    });
+
+    it('should handle mixed content with whitespace text nodes', () => {
+      const div = document.createElement('div');
+      div.innerHTML = '  <span>Text</span>  ';
+
+      const result = stringUtils.getAllText(div);
+      expect(result).toContain('Text');
+    });
+
+    it('should handle elements with both aria-label and text content', () => {
+      const div = document.createElement('div');
+      const button = document.createElement('button');
+      button.textContent = 'Visual Text';
+      button.setAttribute('aria-label', 'Accessible Label');
+      div.appendChild(button);
+
+      const result = stringUtils.getAllText(div);
+      expect(result).toContain('Accessible Label');
+      expect(result).toContain('Visual Text');
+    });
+
+    it('should handle img without alt attribute', () => {
+      const div = document.createElement('div');
+      const img = document.createElement('img');
+      // No alt attribute
+      div.appendChild(img);
+
+      const result = stringUtils.getAllText(div);
+      expect(typeof result).toBe('string');
+    });
+  });
 });