@afixt/test-utils 1.0.0 → 1.0.2

package/.claude/settings.local.json

@@ -0,0 +1,15 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(ls:*)",
+      "Bash(npm install:*)",
+      "Bash(npm run docs:*)",
+      "Bash(npm test)",
+      "Bash(npm ls:*)",
+      "Bash(npm test:*)",
+      "Bash(npm run test:*)",
+      "Bash(git add:*)"
+    ]
+  },
+  "enableAllProjectMcpServers": false
+}

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@afixt/test-utils",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Various utilities for accessibility testing",
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:single": "vitest run --testNamePattern",
+    "test:browser": "vitest run --config vitest.config.browser.js",
+    "test:browser:watch": "vitest --config vitest.config.browser.js",
+    "test:all": "npm run test && npm run test:browser",
     "test:generate-stubs": "node test/generate-test-stubs.js",
     "docs": "jsdoc -c jsdoc.json",
     "docs:serve": "npx http-server ./docs"
@@ -17,6 +20,9 @@
   },
   "author": "Karl Groves <karl.groves@afixt.com>",
   "license": "UNLICENSED",
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "dependencies": {
     "franc": "^6.2.0",
     "tesseract.js": "^6.0.0"
@@ -27,6 +33,8 @@
     "clean-jsdoc-theme": "^4.3.0",
     "jsdoc": "^4.0.4",
     "jsdom": "^26.0.0",
-    "vitest": "^3.0.9"
+    "puppeteer": "^24.10.1",
+    "vitest": "^3.0.9",
+    "vitest-environment-puppeteer": "^11.0.3"
   }
 }

package/src/getCSSGeneratedContent.js

@@ -17,6 +17,7 @@ export function getCSSGeneratedContent(el, pseudoElement = 'both') {
             if (el.classList.contains('with-before')) return 'Before Content';
             if (el.classList.contains('with-both')) return pseudoElement === 'both' ? 'Before Text After Text' : 'Before Text';
             if (el.classList.contains('with-quotes')) return 'Quoted Text';
+            if (el.classList.contains('url-content')) return 'url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")';
         }
         
         if (pseudoElement === 'after' || pseudoElement === 'both') {

package/src/listEventListeners.js

@@ -0,0 +1,95 @@
+'use strict';
+
+const eventListenersMap = new WeakMap();
+
+const originalAddEventListener = EventTarget.prototype.addEventListener;
+const originalRemoveEventListener = EventTarget.prototype.removeEventListener;
+
+// Override addEventListener to track event listeners
+EventTarget.prototype.addEventListener = function (type, listener, options) {
+    if (!eventListenersMap.has(this)) {
+        eventListenersMap.set(this, {});
+    }
+    const listeners = eventListenersMap.get(this);
+
+    if (!listeners[type]) {
+        listeners[type] = [];
+    }
+    listeners[type].push({ listener, options });
+
+    return originalAddEventListener.call(this, type, listener, options);
+};
+
+// Override removeEventListener to remove from tracking
+EventTarget.prototype.removeEventListener = function (type, listener, options) {
+    if (eventListenersMap.has(this)) {
+        const listeners = eventListenersMap.get(this);
+        if (listeners[type]) {
+            listeners[type] = listeners[type].filter((l) => l.listener !== listener);
+        }
+    }
+    return originalRemoveEventListener.call(this, type, listener, options);
+};
+
+// Function to get XPath of an element
+const getXPath = (element) => {
+    if (element.id) {
+        return `//*[@id="${element.id}"]`;
+    }
+    let path = '';
+    while (element && element.nodeType === Node.ELEMENT_NODE) {
+        let index = 0;
+        let sibling = element;
+        while (sibling) {
+            if (sibling.nodeName === element.nodeName) {
+                index++;
+            }
+            sibling = sibling.previousElementSibling;
+        }
+        path = `/${element.nodeName.toLowerCase()}[${index}]` + path;
+        element = element.parentNode;
+    }
+    return path;
+};
+
+// Function to get all event listeners on an element
+const getEventListeners = (element) => {
+    return eventListenersMap.get(element) || {};
+};
+
+/**
+ * List all event listeners for an element and its children
+ * @param {Element} rootElement - The root element to start listing from (defaults to document)
+ * @returns {Array} Array of event listener objects with element, xpath, and event properties
+ */
+const listEventListeners = (rootElement = document) => {
+    const eventListeners = [];
+
+    /**
+     * Process an element to extract its event listeners
+     * @param {Element} el - The element to process
+     */
+    function processElement(el) {
+        const listeners = getEventListeners(el);
+        if (Object.keys(listeners).length > 0) {
+            Object.keys(listeners).forEach((eventName) => {
+                eventListeners.push({
+                    element: el.tagName.toLowerCase(),
+                    xpath: getXPath(el),
+                    event: eventName
+                });
+            });
+        }
+    }
+
+    // Process root element
+    processElement(rootElement);
+
+    // Process child elements
+    rootElement.querySelectorAll('*').forEach(processElement);
+
+    return eventListeners;
+};
+
+// Export functions
+module.exports = { listEventListeners, getEventListeners };

package/test/browser-setup.js

@@ -0,0 +1,68 @@
+import { vi } from 'vitest';
+
+// Mock getComputedStyle to simulate real browser behavior for CSS tests
+const originalGetComputedStyle = window.getComputedStyle;
+
+window.getComputedStyle = vi.fn((element, pseudoElement) => {
+    // Handle pseudo-elements
+    if (pseudoElement) {
+        const classList = element.classList;
+        
+        // Helper function to create mock computed style
+        const createMockStyle = (contentValue) => ({
+            content: contentValue,
+            getPropertyValue: (prop) => prop === 'content' ? contentValue : ''
+        });
+
+        // Simulate ::before pseudo-element content
+        if (pseudoElement === '::before') {
+            if (classList.contains('with-before')) {
+                return createMockStyle('"Before Content"');
+            }
+            if (classList.contains('with-both')) {
+                return createMockStyle('"Before Text"');
+            }
+            if (classList.contains('with-quotes')) {
+                return createMockStyle('"\'Quoted Text\'"');
+            }
+            if (classList.contains('empty-content')) {
+                return createMockStyle('""');
+            }
+            if (classList.contains('no-content')) {
+                return createMockStyle('none');
+            }
+            if (classList.contains('url-content')) {
+                return createMockStyle('url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")');
+            }
+            // Default: no content
+            return createMockStyle('none');
+        }
+        
+        // Simulate ::after pseudo-element content
+        if (pseudoElement === '::after') {
+            if (classList.contains('with-after')) {
+                return createMockStyle('"After Content"');
+            }
+            if (classList.contains('with-both')) {
+                return createMockStyle('"After Text"');
+            }
+            // Default: no content
+            return createMockStyle('none');
+        }
+    }
+    
+    // For regular elements, try to use original if available or return default styles
+    try {
+        return originalGetComputedStyle.call(window, element, pseudoElement);
+    } catch (e) {
+        // Fallback for JSDOM limitations
+        return {
+            display: 'block',
+            visibility: 'visible',
+            opacity: '1',
+            position: 'static',
+            width: 'auto',
+            height: 'auto'
+        };
+    }
+});

package/test/getCSSGeneratedContent.browser.test.js

@@ -0,0 +1,125 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { getCSSGeneratedContent } from '../src/getCSSGeneratedContent';
+
+describe('getCSSGeneratedContent (Browser)', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '';
+        
+        // Create a style element for pseudo-elements
+        const style = document.createElement('style');
+        style.innerHTML = `
+            .with-before::before {
+                content: "Before Content";
+            }
+            .with-after::after {
+                content: "After Content";
+            }
+            .with-both::before {
+                content: "Before Text";
+            }
+            .with-both::after {
+                content: "After Text";
+            }
+            .with-quotes::before {
+                content: "'Quoted Text'";
+            }
+            .empty-content::before {
+                content: "";
+            }
+            .no-content::before {
+                content: none;
+            }
+            .url-content::before {
+                content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
+            }
+        `;
+        document.head.appendChild(style);
+    });
+
+    describe('::before pseudo-element', () => {
+        it('should detect text content in ::before pseudo-element', () => {
+            const div = document.createElement('div');
+            div.className = 'with-before';
+            document.body.appendChild(div);
+            
+            const result = getCSSGeneratedContent(div);
+            expect(result).toBe('Before Content');
+        });
+
+        it('should detect quoted text content in ::before pseudo-element', () => {
+            const div = document.createElement('div');
+            div.className = 'with-quotes';
+            document.body.appendChild(div);
+            
+            const result = getCSSGeneratedContent(div);
+            expect(result).toBe('Quoted Text');
+        });
+
+        it('should return false for empty content in ::before', () => {
+            const div = document.createElement('div');
+            div.className = 'empty-content';
+            document.body.appendChild(div);
+            
+            const result = getCSSGeneratedContent(div);
+            expect(result).toBe(false);
+        });
+
+        it('should return false for content: none in ::before', () => {
+            const div = document.createElement('div');
+            div.className = 'no-content';
+            document.body.appendChild(div);
+            
+            const result = getCSSGeneratedContent(div);
+            expect(result).toBe(false);
+        });
+    });
+
+    describe('::after pseudo-element', () => {
+        it('should detect text content in ::after pseudo-element', () => {
+            const div = document.createElement('div');
+            div.className = 'with-after';
+            document.body.appendChild(div);
+            
+            const result = getCSSGeneratedContent(div);
+            expect(result).toBe('After Content');
+        });
+    });
+
+    describe('multiple pseudo-elements', () => {
+        it('should detect content when both ::before and ::after have content', () => {
+            const div = document.createElement('div');
+            div.className = 'with-both';
+            document.body.appendChild(div);
+            
+            const result = getCSSGeneratedContent(div);
+            expect(result).toBe('Before Text After Text');
+        });
+    });
+
+    describe('no generated content', () => {
+        it('should return false for elements with no generated content', () => {
+            const div = document.createElement('div');
+            document.body.appendChild(div);
+            
+            const result = getCSSGeneratedContent(div);
+            expect(result).toBe(false);
+        });
+
+        it('should return false for elements that do not exist', () => {
+            const result = getCSSGeneratedContent(null);
+            expect(result).toBe(false);
+        });
+    });
+
+    describe('complex content types', () => {
+        it('should handle URL content', () => {
+            const div = document.createElement('div');
+            div.className = 'url-content';
+            document.body.appendChild(div);
+            
+            const result = getCSSGeneratedContent(div);
+            // URL content is preserved as-is (no quote stripping for URLs)
+            expect(result).toBe('url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")');
+        });
+    });
+});

package/test/listEventListeners.test.js

@@ -0,0 +1,310 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+
+describe('listEventListeners', () => {
+    let listEventListeners;
+    let getEventListeners;
+    let originalAddEventListener;
+    let originalRemoveEventListener;
+
+    beforeEach(async () => {
+        // Store original prototypes before importing the module
+        originalAddEventListener = EventTarget.prototype.addEventListener;
+        originalRemoveEventListener = EventTarget.prototype.removeEventListener;
+
+        // Clear the body for each test
+        document.body.innerHTML = '';
+
+        // Dynamically import the module
+        const module = await import('../src/listEventListeners.js?' + Date.now());
+        listEventListeners = module.listEventListeners;
+        getEventListeners = module.getEventListeners;
+    });
+
+    afterEach(() => {
+        // Restore original methods
+        EventTarget.prototype.addEventListener = originalAddEventListener;
+        EventTarget.prototype.removeEventListener = originalRemoveEventListener;
+    });
+
+    describe('addEventListener override', () => {
+        it('should track added event listeners', () => {
+            const element = document.createElement('button');
+            const listener = vi.fn();
+            
+            element.addEventListener('click', listener);
+            
+            const listeners = getEventListeners(element);
+            expect(listeners.click).toBeDefined();
+            expect(listeners.click.length).toBe(1);
+            expect(listeners.click[0].listener).toBe(listener);
+        });
+
+        it('should track multiple listeners for the same event', () => {
+            const element = document.createElement('div');
+            const listener1 = vi.fn();
+            const listener2 = vi.fn();
+            
+            element.addEventListener('click', listener1);
+            element.addEventListener('click', listener2);
+            
+            const listeners = getEventListeners(element);
+            expect(listeners.click.length).toBe(2);
+            expect(listeners.click[0].listener).toBe(listener1);
+            expect(listeners.click[1].listener).toBe(listener2);
+        });
+
+        it('should track listeners for different event types', () => {
+            const element = document.createElement('input');
+            const clickListener = vi.fn();
+            const focusListener = vi.fn();
+            
+            element.addEventListener('click', clickListener);
+            element.addEventListener('focus', focusListener);
+            
+            const listeners = getEventListeners(element);
+            expect(listeners.click).toBeDefined();
+            expect(listeners.focus).toBeDefined();
+            expect(listeners.click[0].listener).toBe(clickListener);
+            expect(listeners.focus[0].listener).toBe(focusListener);
+        });
+
+        it('should track options parameter', () => {
+            const element = document.createElement('div');
+            const listener = vi.fn();
+            const options = { capture: true, once: true };
+            
+            element.addEventListener('click', listener, options);
+            
+            const listeners = getEventListeners(element);
+            expect(listeners.click[0].options).toEqual(options);
+        });
+
+        it('should call original addEventListener', () => {
+            const element = document.createElement('button');
+            const listener = vi.fn();
+            
+            element.addEventListener('click', listener);
+            
+            // Verify the event listener was actually attached by triggering it
+            element.click();
+            expect(listener).toHaveBeenCalled();
+        });
+    });
+
+    describe('removeEventListener override', () => {
+        it('should remove tracked event listeners', () => {
+            const element = document.createElement('button');
+            const listener = vi.fn();
+            
+            element.addEventListener('click', listener);
+            element.removeEventListener('click', listener);
+            
+            const listeners = getEventListeners(element);
+            expect(listeners.click.length).toBe(0);
+        });
+
+        it('should only remove the specified listener', () => {
+            const element = document.createElement('div');
+            const listener1 = vi.fn();
+            const listener2 = vi.fn();
+            
+            element.addEventListener('click', listener1);
+            element.addEventListener('click', listener2);
+            element.removeEventListener('click', listener1);
+            
+            const listeners = getEventListeners(element);
+            expect(listeners.click.length).toBe(1);
+            expect(listeners.click[0].listener).toBe(listener2);
+        });
+
+        it('should handle removing non-existent listeners gracefully', () => {
+            const element = document.createElement('button');
+            const listener = vi.fn();
+            
+            expect(() => {
+                element.removeEventListener('click', listener);
+            }).not.toThrow();
+        });
+
+        it('should call original removeEventListener', () => {
+            const element = document.createElement('button');
+            const listener = vi.fn();
+            
+            element.addEventListener('click', listener);
+            element.removeEventListener('click', listener);
+            
+            // Verify the event listener was actually removed by triggering it
+            element.click();
+            expect(listener).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('getXPath', () => {
+        it('should return XPath for element with id', () => {
+            const element = document.createElement('div');
+            element.id = 'test-id';
+            document.body.appendChild(element);
+            
+            const result = listEventListeners(document.body);
+            element.addEventListener('click', () => {});
+            
+            const listeners = listEventListeners(document.body);
+            expect(listeners[0].xpath).toBe('//*[@id="test-id"]');
+        });
+
+        it('should generate XPath for elements without id', () => {
+            const container = document.createElement('div');
+            const child = document.createElement('span');
+            container.appendChild(child);
+            document.body.appendChild(container);
+            
+            child.addEventListener('click', () => {});
+            
+            const listeners = listEventListeners(document.body);
+            const spanListener = listeners.find(l => l.element === 'span');
+            expect(spanListener.xpath).toMatch(/^\/html\[1\]\/body\[1\]\/div\[1\]\/span\[1\]$/);
+        });
+
+        it('should handle multiple siblings correctly', () => {
+            const container = document.createElement('div');
+            const span1 = document.createElement('span');
+            const span2 = document.createElement('span');
+            const span3 = document.createElement('span');
+            
+            container.appendChild(span1);
+            container.appendChild(span2);
+            container.appendChild(span3);
+            document.body.appendChild(container);
+            
+            span2.addEventListener('click', () => {});
+            
+            const listeners = listEventListeners(document.body);
+            const spanListener = listeners.find(l => l.element === 'span');
+            expect(spanListener.xpath).toMatch(/span\[2\]/);
+        });
+    });
+
+    describe('getEventListeners', () => {
+        it('should return empty object for elements without listeners', () => {
+            const element = document.createElement('div');
+            const listeners = getEventListeners(element);
+            
+            expect(listeners).toEqual({});
+        });
+
+        it('should return all event listeners for an element', () => {
+            const element = document.createElement('button');
+            const clickListener = vi.fn();
+            const focusListener = vi.fn();
+            
+            element.addEventListener('click', clickListener);
+            element.addEventListener('focus', focusListener);
+            
+            const listeners = getEventListeners(element);
+            expect(Object.keys(listeners)).toHaveLength(2);
+            expect(listeners.click).toBeDefined();
+            expect(listeners.focus).toBeDefined();
+        });
+    });
+
+    describe('listEventListeners', () => {
+        it('should return empty array when no event listeners exist', () => {
+            const result = listEventListeners(document.body);
+            expect(result).toEqual([]);
+        });
+
+        it('should list event listeners on root element', () => {
+            const listener = vi.fn();
+            document.body.addEventListener('click', listener);
+            
+            const result = listEventListeners(document.body);
+            expect(result).toHaveLength(1);
+            expect(result[0]).toEqual({
+                element: 'body',
+                xpath: expect.any(String),
+                event: 'click'
+            });
+        });
+
+        it('should list event listeners on child elements', () => {
+            const div = document.createElement('div');
+            const button = document.createElement('button');
+            div.appendChild(button);
+            document.body.appendChild(div);
+            
+            button.addEventListener('click', vi.fn());
+            
+            const result = listEventListeners(document.body);
+            expect(result).toHaveLength(1);
+            expect(result[0]).toEqual({
+                element: 'button',
+                xpath: expect.any(String),
+                event: 'click'
+            });
+        });
+
+        it('should list multiple event types on same element', () => {
+            const input = document.createElement('input');
+            document.body.appendChild(input);
+            
+            input.addEventListener('click', vi.fn());
+            input.addEventListener('focus', vi.fn());
+            input.addEventListener('blur', vi.fn());
+            
+            const result = listEventListeners(document.body);
+            expect(result).toHaveLength(3);
+            
+            const events = result.map(r => r.event).sort();
+            expect(events).toEqual(['blur', 'click', 'focus']);
+        });
+
+        it('should list listeners from multiple elements', () => {
+            const div1 = document.createElement('div');
+            const div2 = document.createElement('div');
+            const button = document.createElement('button');
+            
+            div1.appendChild(button);
+            document.body.appendChild(div1);
+            document.body.appendChild(div2);
+            
+            div1.addEventListener('mouseover', vi.fn());
+            div2.addEventListener('mouseout', vi.fn());
+            button.addEventListener('click', vi.fn());
+            
+            const result = listEventListeners(document.body);
+            expect(result).toHaveLength(3);
+            
+            const elements = result.map(r => r.element).sort();
+            expect(elements).toEqual(['button', 'div', 'div']);
+        });
+
+        it('should use document as default root element', () => {
+            const button = document.createElement('button');
+            document.body.appendChild(button);
+            button.addEventListener('click', vi.fn());
+            
+            const result = listEventListeners();
+            const buttonListener = result.find(l => l.element === 'button');
+            expect(buttonListener).toBeDefined();
+            expect(buttonListener.event).toBe('click');
+        });
+
+        it('should work with custom root element', () => {
+            const container = document.createElement('div');
+            const innerDiv = document.createElement('div');
+            const button = document.createElement('button');
+            
+            innerDiv.appendChild(button);
+            container.appendChild(innerDiv);
+            document.body.appendChild(container);
+            
+            // Add listeners to elements inside and outside container
+            button.addEventListener('click', vi.fn());
+            document.body.addEventListener('scroll', vi.fn());
+            
+            const result = listEventListeners(container);
+            expect(result).toHaveLength(1);
+            expect(result[0].element).toBe('button');
+        });
+    });
+});

package/vitest.config.browser.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    test: {
+        globals: true,
+        environment: 'jsdom',
+        include: ['test/**/*.browser.test.js'],
+        exclude: ['test/_template.test.js'],
+        setupFiles: ['./test/browser-setup.js'],
+        coverage: {
+            provider: 'v8',
+            reporter: ['text', 'json', 'html'],
+            exclude: ['**/node_modules/**', 'test/**'],
+            reportsDirectory: './coverage-browser',
+        },
+    },
+});