@afixt/test-utils 1.1.3 → 1.1.4

package/test/hasValidAriaRole.test.js

@@ -84,15 +84,77 @@ describe('hasValidAriaRole', () => {
   it('should recognize various valid roles', () => {
     // Test a sample of different valid roles
     const validRoles = ['alert', 'button', 'checkbox', 'dialog', 'navigation', 'main', 'region'];
-    
+
     validRoles.forEach(role => {
       // Arrange
       const element = document.createElement('div');
       element.setAttribute('role', role);
       document.body.appendChild(element);
-      
+
       // Act & Assert
       expect(hasValidAriaRole(element)).toBe(true);
     });
   });
+
+  it('should recognize all widget roles', () => {
+    const widgetRoles = [
+      'alertdialog', 'gridcell', 'link', 'log', 'marquee', 'menuitem',
+      'menuitemcheckbox', 'menuitemradio', 'option', 'progressbar', 'radio',
+      'scrollbar', 'searchbox', 'slider', 'spinbutton', 'status', 'switch',
+      'tab', 'tabpanel', 'textbox', 'tooltip', 'treeitem'
+    ];
+
+    widgetRoles.forEach(role => {
+      const element = document.createElement('div');
+      element.setAttribute('role', role);
+      expect(hasValidAriaRole(element)).toBe(true);
+    });
+  });
+
+  it('should recognize all composite widget roles', () => {
+    const compositeRoles = [
+      'combobox', 'grid', 'listbox', 'menu', 'menubar', 'radiogroup',
+      'tablist', 'tree', 'treegrid'
+    ];
+
+    compositeRoles.forEach(role => {
+      const element = document.createElement('div');
+      element.setAttribute('role', role);
+      expect(hasValidAriaRole(element)).toBe(true);
+    });
+  });
+
+  it('should recognize all document structure roles', () => {
+    const structureRoles = [
+      'article', 'cell', 'columnheader', 'definition', 'directory', 'document',
+      'feed', 'figure', 'group', 'heading', 'img', 'list', 'listitem', 'math',
+      'none', 'note', 'presentation', 'row', 'rowgroup', 'rowheader',
+      'separator', 'table', 'term', 'toolbar'
+    ];
+
+    structureRoles.forEach(role => {
+      const element = document.createElement('div');
+      element.setAttribute('role', role);
+      expect(hasValidAriaRole(element)).toBe(true);
+    });
+  });
+
+  it('should recognize all landmark roles', () => {
+    const landmarkRoles = [
+      'application', 'banner', 'complementary', 'contentinfo', 'form',
+      'search'
+    ];
+
+    landmarkRoles.forEach(role => {
+      const element = document.createElement('div');
+      element.setAttribute('role', role);
+      expect(hasValidAriaRole(element)).toBe(true);
+    });
+  });
+
+  it('should recognize timer role', () => {
+    const element = document.createElement('div');
+    element.setAttribute('role', 'timer');
+    expect(hasValidAriaRole(element)).toBe(true);
+  });
 });

package/test/isFocusable.test.js

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { isFocusable } from '../src/isFocusable.js';
 
 describe('isFocusable', () => {
@@ -179,4 +179,97 @@ describe('isFocusable', () => {
     // Act & Assert
     expect(isFocusable(object)).toBe(true);
   });
+
+  it('should return false for disabled object elements', () => {
+    // Arrange
+    const object = document.createElement('object');
+    object.disabled = true;
+    document.body.appendChild(object);
+
+    // Act & Assert
+    expect(isFocusable(object)).toBe(false);
+  });
+
+  it('should handle elements with tabindex="0" on form controls', () => {
+    // Arrange
+    const input = document.createElement('input');
+    input.setAttribute('tabindex', '0');
+    document.body.appendChild(input);
+
+    // Act & Assert
+    expect(isFocusable(input)).toBe(true);
+  });
+
+  it('should handle elements with positive tabindex on form controls', () => {
+    // Arrange
+    const button = document.createElement('button');
+    button.setAttribute('tabindex', '1');
+    document.body.appendChild(button);
+
+    // Act & Assert
+    expect(isFocusable(button)).toBe(true);
+  });
+
+  it('should return false for form controls with negative tabindex', () => {
+    // Arrange
+    const input = document.createElement('input');
+    input.setAttribute('tabindex', '-1');
+    document.body.appendChild(input);
+
+    // Act & Assert
+    expect(isFocusable(input)).toBe(false);
+  });
+
+  it('should return false for disabled select elements', () => {
+    // Arrange
+    const select = document.createElement('select');
+    select.disabled = true;
+    document.body.appendChild(select);
+
+    // Act & Assert
+    expect(isFocusable(select)).toBe(false);
+  });
+
+  it('should return false for disabled textarea elements', () => {
+    // Arrange
+    const textarea = document.createElement('textarea');
+    textarea.disabled = true;
+    document.body.appendChild(textarea);
+
+    // Act & Assert
+    expect(isFocusable(textarea)).toBe(false);
+  });
+
+  it('should handle anchors with tabindex >= 0 and href', () => {
+    // Arrange
+    const anchor = document.createElement('a');
+    anchor.setAttribute('href', 'https://example.com');
+    anchor.setAttribute('tabindex', '0');
+    document.body.appendChild(anchor);
+
+    // Act & Assert
+    expect(isFocusable(anchor)).toBe(true);
+  });
+
+  it('should return false for anchors with negative tabindex even with href', () => {
+    // Arrange
+    const anchor = document.createElement('a');
+    anchor.setAttribute('href', 'https://example.com');
+    anchor.setAttribute('tabindex', '-1');
+    document.body.appendChild(anchor);
+
+    // Act & Assert
+    expect(isFocusable(anchor)).toBe(false);
+  });
+
+  it('should return false for area with negative tabindex even with href', () => {
+    // Arrange
+    const area = document.createElement('area');
+    area.setAttribute('href', '#map');
+    area.setAttribute('tabindex', '-1');
+    document.body.appendChild(area);
+
+    // Act & Assert
+    expect(isFocusable(area)).toBe(false);
+  });
 });

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

@@ -330,11 +330,53 @@ describe('stringUtils', () => {
       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');
+    });
+  });
 });