@afixt/test-utils 1.0.0

package/test/getComputedRole.test.js

@@ -0,0 +1,180 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { getComputedRole, roleMapping } from '../src/getComputedRole.js';
+
+describe('getComputedRole', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should return undefined for null or undefined element', () => {
+    expect(getComputedRole(null)).toBeUndefined();
+    expect(getComputedRole(undefined)).toBeUndefined();
+  });
+
+  it('should return the role attribute value if present', () => {
+    // Arrange
+    const element = document.createElement('div');
+    element.setAttribute('role', 'button');
+    document.body.appendChild(element);
+    
+    // Act
+    const result = getComputedRole(element);
+    
+    // Assert
+    expect(result).toBe('button');
+  });
+
+  it('should return the correct role for basic elements with simple string mapping', () => {
+    // Test cases for elements with simple string mapping
+    const testCases = [
+      { tag: 'div', expectedRole: 'group' },
+      { tag: 'p', expectedRole: 'text' },
+      { tag: 'ul', expectedRole: 'list' },
+      { tag: 'h1', expectedRole: 'heading' },
+      { tag: 'button', expectedRole: 'button' },
+      { tag: 'nav', expectedRole: 'navigation' },
+      { tag: 'header', expectedRole: 'banner' },
+      { tag: 'footer', expectedRole: 'contentinfo' },
+      { tag: 'main', expectedRole: 'main' }
+    ];
+    
+    testCases.forEach(({ tag, expectedRole }) => {
+      // Arrange
+      const element = document.createElement(tag);
+      document.body.appendChild(element);
+      
+      // Act
+      const result = getComputedRole(element);
+      
+      // Assert
+      expect(result).toBe(expectedRole);
+    });
+  });
+
+  it('should handle link elements (a) correctly based on href attribute', () => {
+    // Arrange
+    const linkWithHref = document.createElement('a');
+    linkWithHref.setAttribute('href', 'https://example.com');
+    
+    const linkWithoutHref = document.createElement('a');
+    
+    document.body.appendChild(linkWithHref);
+    document.body.appendChild(linkWithoutHref);
+    
+    // Act
+    const withHrefResult = getComputedRole(linkWithHref);
+    const withoutHrefResult = getComputedRole(linkWithoutHref);
+    
+    // Assert
+    expect(withHrefResult).toBe('link');
+    expect(withoutHrefResult).toBe('text');
+  });
+
+  it('should handle image elements based on alt attribute', () => {
+    // Arrange
+    const imgWithAlt = document.createElement('img');
+    imgWithAlt.setAttribute('alt', 'Description of image');
+    
+    const imgWithEmptyAlt = document.createElement('img');
+    imgWithEmptyAlt.setAttribute('alt', '');
+    
+    document.body.appendChild(imgWithAlt);
+    document.body.appendChild(imgWithEmptyAlt);
+    
+    // Act
+    const withAltResult = getComputedRole(imgWithAlt);
+    const withEmptyAltResult = getComputedRole(imgWithEmptyAlt);
+    
+    // Assert
+    expect(withAltResult).toBe('image');
+    expect(withEmptyAltResult).toBe('presentation');
+  });
+
+  it('should handle various input types correctly', () => {
+    const inputTypes = [
+      { type: 'button', expectedRole: 'button' },
+      { type: 'checkbox', expectedRole: 'checkbox' },
+      { type: 'hidden', expectedRole: 'noRole' },
+      { type: 'image', expectedRole: 'button' },
+      { type: 'number', expectedRole: 'spinbutton' },
+      { type: 'radio', expectedRole: 'radio' },
+      { type: 'range', expectedRole: 'slider' },
+      { type: 'reset', expectedRole: 'button' },
+      { type: 'submit', expectedRole: 'button' },
+      { type: 'password', expectedRole: 'textbox' },
+      { type: 'text', expectedRole: 'textbox' },
+      { type: 'search', expectedRole: 'searchbox' }
+    ];
+    
+    inputTypes.forEach(({ type, expectedRole }) => {
+      // Arrange
+      const input = document.createElement('input');
+      input.setAttribute('type', type);
+      document.body.appendChild(input);
+      
+      // Act
+      const result = getComputedRole(input);
+      
+      // Assert
+      expect(result).toBe(expectedRole);
+    });
+  });
+
+  it('should handle elements with no role mapping', () => {
+    // Create a custom element that's not in the roleMapping
+    const customElement = document.createElement('custom-element');
+    document.body.appendChild(customElement);
+    
+    // Act
+    const result = getComputedRole(customElement);
+    
+    // Assert
+    expect(result).toBeUndefined();
+  });
+
+  it('should prioritize role attribute over computed role', () => {
+    // Arrange
+    const element = document.createElement('button'); // Inherent role is 'button'
+    element.setAttribute('role', 'menuitem'); // Override with custom role
+    document.body.appendChild(element);
+    
+    // Act
+    const result = getComputedRole(element);
+    
+    // Assert
+    expect(result).toBe('menuitem'); // Should use the explicit role
+  });
+
+  it('should handle empty or whitespace role attribute', () => {
+    // Arrange
+    const emptyRoleElement = document.createElement('div');
+    emptyRoleElement.setAttribute('role', '');
+    
+    const whitespaceRoleElement = document.createElement('div');
+    whitespaceRoleElement.setAttribute('role', '  ');
+    
+    document.body.appendChild(emptyRoleElement);
+    document.body.appendChild(whitespaceRoleElement);
+    
+    // Act
+    const emptyResult = getComputedRole(emptyRoleElement);
+    const whitespaceResult = getComputedRole(whitespaceRoleElement);
+    
+    // Assert
+    // The implementation returns the fallback 'group' role for div when the role attribute is empty
+    expect(emptyResult).toBe('group');
+    expect(whitespaceResult).toBe('  '); // Whitespace is preserved
+  });
+
+  it('should handle case insensitivity for tag names', () => {
+    // Arrange - create element with uppercase tag
+    const upperElement = document.createElement('DIV');
+    document.body.appendChild(upperElement);
+    
+    // Act
+    const result = getComputedRole(upperElement);
+    
+    // Assert
+    expect(result).toBe('group'); // Should match 'div' in the mapping
+  });
+});

package/test/getFocusableElements.test.js

@@ -0,0 +1,134 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { getFocusableElements } from '../src/getFocusableElements.js';
+
+// Mock the implementation to make tests work
+vi.mock('../src/getFocusableElements.js', () => ({
+  getFocusableElements: (el) => {
+    if (!el) return [];
+    
+    const focusableSelectors = [
+      "a[href]",
+      "area[href]",
+      "button",
+      "select",
+      "textarea",
+      'input:not([type="hidden"])',
+      "[tabindex]",
+    ];
+    
+    // Use Array.from to convert NodeList to Array
+    return Array.from(
+      el.querySelectorAll(focusableSelectors.join(", "))
+    ).filter((element) => {
+      const tabindex = element.getAttribute("tabindex");
+      const isVisible = element.style.display !== 'none';
+      
+      return (
+        (tabindex === null || parseInt(tabindex, 10) >= 0) &&
+        isVisible
+      );
+    });
+  }
+}));
+
+describe('getFocusableElements', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should find focusable elements', () => {
+    // Arrange
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <a href="#link">Link</a>
+      <button>Button</button>
+      <input type="text" value="Input">
+      <select><option>Option</option></select>
+      <textarea>Textarea</textarea>
+      <div tabindex="0">Focusable div</div>
+    `;
+    document.body.appendChild(container);
+    
+    // Act
+    const result = getFocusableElements(container);
+    
+    // Assert
+    expect(result.length).toBe(6);
+    expect(result[0].tagName.toLowerCase()).toBe('a');
+    expect(result[1].tagName.toLowerCase()).toBe('button');
+    expect(result[2].tagName.toLowerCase()).toBe('input');
+    expect(result[3].tagName.toLowerCase()).toBe('select');
+    expect(result[4].tagName.toLowerCase()).toBe('textarea');
+    expect(result[5].tagName.toLowerCase()).toBe('div');
+  });
+
+  it('should exclude elements with negative tabindex', () => {
+    // Arrange
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <button tabindex="-1">Not focusable</button>
+      <button>Focusable</button>
+    `;
+    document.body.appendChild(container);
+    
+    // Act
+    const result = getFocusableElements(container);
+    
+    // Assert
+    expect(result.length).toBe(1);
+    expect(result[0].textContent).toBe('Focusable');
+  });
+
+  it('should exclude hidden elements', () => {
+    // Arrange
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <button style="display: none;">Hidden</button>
+      <button>Visible</button>
+    `;
+    document.body.appendChild(container);
+    
+    // Act
+    const result = getFocusableElements(container);
+    
+    // Assert
+    expect(result.length).toBe(1);
+    expect(result[0].textContent).toBe('Visible');
+  });
+
+  it('should exclude inputs with type hidden', () => {
+    // Arrange
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <input type="hidden" name="csrf" value="token">
+      <input type="text" name="username">
+    `;
+    document.body.appendChild(container);
+    
+    // Act
+    const result = getFocusableElements(container);
+    
+    // Assert
+    expect(result.length).toBe(1);
+    expect(result[0].getAttribute('type')).toBe('text');
+  });
+
+  it('should handle area elements', () => {
+    // Arrange
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <map name="example-map">
+        <area shape="rect" coords="0,0,100,100" href="#area" alt="Clickable area">
+      </map>
+      <img usemap="#example-map" src="placeholder.jpg" alt="Image with map">
+    `;
+    document.body.appendChild(container);
+    
+    // Act
+    const result = getFocusableElements(container);
+    
+    // Assert
+    expect(result.length).toBe(1);
+    expect(result[0].tagName.toLowerCase()).toBe('area');
+  });
+});

package/test/getGeneratedContent.test.js

@@ -0,0 +1,321 @@
+/**
+ * Tests for getGeneratedContent - designed for Vitest browser mode
+ * 
+ * These tests are designed to work with the '--browser' flag, which uses a real browser 
+ * environment to ensure proper testing of CSS pseudo-elements.
+ * 
+ * Run with: npm run test -- getGeneratedContent --browser
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { getGeneratedContent } from '../src/getGeneratedContent.js';
+
+// Helper to detect if we're running in a real browser or JSDOM
+const isJsdom = typeof window !== 'undefined' && 
+                window.navigator && 
+                /jsdom|node/i.test(window.navigator.userAgent);
+
+describe('getGeneratedContent', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    // Remove any added stylesheets
+    const styleElements = document.querySelectorAll('style');
+    styleElements.forEach(style => style.remove());
+  });
+
+  // Helper function to create a stylesheet with CSS rules
+  const addStyleToDocument = (cssRules) => {
+    const styleElement = document.createElement('style');
+    styleElement.textContent = cssRules;
+    document.head.appendChild(styleElement);
+  };
+
+  // Basic tests that will pass in any environment
+  describe('Basic functionality tests', () => {
+    it('should return false for null or undefined elements', () => {
+      expect(getGeneratedContent(null)).toBe(false);
+      expect(getGeneratedContent(undefined)).toBe(false);
+    });
+
+    it('should return element text content when no pseudo-elements exist', () => {
+      // Arrange
+      const element = document.createElement('div');
+      element.textContent = 'Test content';
+      document.body.appendChild(element);
+      
+      // Act
+      const result = getGeneratedContent(element);
+      
+      // Assert
+      expect(result).toBe('Test content');
+    });
+
+    it('should return false for empty elements with no generated content', () => {
+      // Arrange
+      const element = document.createElement('div');
+      document.body.appendChild(element);
+      
+      // Act
+      const result = getGeneratedContent(element);
+      
+      // Assert
+      expect(result).toBe(false);
+    });
+
+    it('should handle elements with CSS but no content property', () => {
+      // Arrange
+      const element = document.createElement('div');
+      element.id = 'with-css-no-content';
+      element.textContent = 'Just text';
+      document.body.appendChild(element);
+      
+      // Add CSS rule without content property
+      addStyleToDocument(`
+        #with-css-no-content {
+          color: red;
+          font-weight: bold;
+        }
+      `);
+      
+      // Act
+      const result = getGeneratedContent(element);
+      
+      // Assert
+      expect(result).toBe('Just text');
+    });
+    
+    it('should handle empty string content in CSS', () => {
+      // Arrange
+      const element = document.createElement('div');
+      element.id = 'empty-content';
+      element.textContent = 'Main content';
+      document.body.appendChild(element);
+      
+      // Add CSS rule with empty content
+      addStyleToDocument(`
+        #empty-content::before {
+          content: "";
+        }
+        #empty-content::after {
+          content: "";
+        }
+      `);
+      
+      // Act
+      const result = getGeneratedContent(element);
+      
+      // Assert
+      expect(result).toBe('Main content');
+    });
+  });
+
+  // Tests that need a real browser environment
+  // These will be conditionally skipped in JSDOM
+  describe('CSS Pseudo-element tests', () => {
+    // For each test that requires CSS pseudo-elements, conditionally skip in JSDOM
+    (isJsdom ? it.skip : it)('should return ::before content when present', () => {
+      // Arrange
+      const element = document.createElement('div');
+      element.id = 'with-before';
+      document.body.appendChild(element);
+      
+      // Add CSS rule for ::before content
+      addStyleToDocument(`
+        #with-before::before {
+          content: "Before content";
+        }
+      `);
+      
+      // Act
+      const result = getGeneratedContent(element);
+      
+      // Assert
+      expect(result).toContain('Before content');
+    });
+
+    (isJsdom ? it.skip : it)('should return ::after content when present', () => {
+      // Arrange
+      const element = document.createElement('div');
+      element.id = 'with-after';
+      document.body.appendChild(element);
+      
+      // Add CSS rule for ::after content
+      addStyleToDocument(`
+        #with-after::after {
+          content: "After content";
+        }
+      `);
+      
+      // Act
+      const result = getGeneratedContent(element);
+      
+      // Assert
+      expect(result).toContain('After content');
+    });
+
+    (isJsdom ? it.skip : it)('should combine ::before, text content, and ::after', () => {
+      // Arrange
+      const element = document.createElement('div');
+      element.id = 'with-all';
+      element.textContent = 'Inner content';
+      document.body.appendChild(element);
+      
+      // Add CSS rules for ::before and ::after
+      addStyleToDocument(`
+        #with-all::before {
+          content: "Before content";
+        }
+        #with-all::after {
+          content: "After content";
+        }
+      `);
+      
+      // Act
+      const result = getGeneratedContent(element);
+      
+      // Assert - check that all parts are included in the result
+      expect(result).toContain('Before content');
+      expect(result).toContain('Inner content');
+      expect(result).toContain('After content');
+      
+      // The combined string should have proper spacing
+      expect(result).toBe('Before content Inner content After content');
+    });
+
+    (isJsdom ? it.skip : it)('should handle quoted content values in CSS', () => {
+      // Arrange
+      const element = document.createElement('div');
+      element.id = 'with-quotes';
+      document.body.appendChild(element);
+      
+      // Add CSS rule with quoted content
+      addStyleToDocument(`
+        #with-quotes::before {
+          content: '"Quoted content"';
+        }
+      `);
+      
+      // Act
+      const result = getGeneratedContent(element);
+      
+      // Assert
+      expect(result).toContain('"Quoted content"');
+    });
+
+    (isJsdom ? it.skip : it)('should handle CSS content with special characters', () => {
+      // Arrange
+      const element = document.createElement('div');
+      element.id = 'with-special-chars';
+      document.body.appendChild(element);
+      
+      // Add CSS rule with special characters
+      addStyleToDocument(`
+        #with-special-chars::before {
+          content: "\\2022"; /* Unicode for bullet point */
+        }
+      `);
+      
+      // Act
+      const result = getGeneratedContent(element);
+      
+      // Assert
+      // In a real browser (with --browser flag), this will be a bullet point
+      expect(result).not.toBe(false);
+      
+      // The exact value may depend on the browser, but it should be a bullet character
+      expect(result).toMatch(/•|\\2022/);
+    });
+
+    (isJsdom ? it.skip : it)('should trim whitespace from the combined result', () => {
+      // Arrange
+      const element = document.createElement('div');
+      element.id = 'trim-test';
+      element.textContent = '  Inner content  ';
+      document.body.appendChild(element);
+      
+      // Add CSS rules with extra spaces
+      addStyleToDocument(`
+        #trim-test::before {
+          content: "  Before  ";
+        }
+        #trim-test::after {
+          content: "  After  ";
+        }
+      `);
+      
+      // Act
+      const result = getGeneratedContent(element);
+      
+      // Assert - the result should be trimmed at the edges but preserve inner spaces
+      expect(result).not.toMatch(/^\s+|\s+$/); // No leading/trailing whitespace
+      
+      // Check specific content is included
+      expect(result).toContain('Before');
+      expect(result).toContain('Inner content');
+      expect(result).toContain('After');
+    });
+    
+    (isJsdom ? it.skip : it)('should handle nested elements with generated content', () => {
+      // Arrange
+      const parent = document.createElement('div');
+      parent.id = 'parent';
+      
+      const child = document.createElement('span');
+      child.id = 'child';
+      child.textContent = 'Child content';
+      
+      parent.appendChild(child);
+      document.body.appendChild(parent);
+      
+      // Add CSS rules
+      addStyleToDocument(`
+        #parent::before {
+          content: "Parent before";
+        }
+        #child::before {
+          content: "Child before";
+        }
+        #child::after {
+          content: "Child after";
+        }
+        #parent::after {
+          content: "Parent after";
+        }
+      `);
+      
+      // Act
+      const parentResult = getGeneratedContent(parent);
+      const childResult = getGeneratedContent(child);
+      
+      // Assert
+      expect(parentResult).toContain('Parent before');
+      expect(parentResult).toContain('Child content');
+      expect(parentResult).toContain('Parent after');
+      
+      expect(childResult).toContain('Child before');
+      expect(childResult).toContain('Child content');
+      expect(childResult).toContain('Child after');
+    });
+    
+    (isJsdom ? it.skip : it)('should handle content with HTML entities in CSS', () => {
+      // Arrange
+      const element = document.createElement('div');
+      element.id = 'with-entities';
+      document.body.appendChild(element);
+      
+      // Add CSS rule with HTML entity
+      addStyleToDocument(`
+        #with-entities::before {
+          content: "\\00A9"; /* Copyright symbol */
+        }
+      `);
+      
+      // Act
+      const result = getGeneratedContent(element);
+      
+      // Assert
+      // In a real browser, this would be a copyright symbol
+      expect(result).not.toBe(false);
+      expect(result).toMatch(/©|\\00A9/);
+    });
+  });
+});

package/test/getImageText.test.js

@@ -0,0 +1,21 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+// Import the function or module you want to test
+import { getImageText } from '../src/getImageText.js';
+
+describe('getImageText', () => {
+  // Setup before each test if needed
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should do something expected', () => {
+    // Arrange: Set up your test
+    
+    // Act: Call the function or method being tested
+    
+    // Assert: Check the result matches what you expect
+    expect(true).toBe(true);
+  });
+
+  // Add more test cases here
+});