@afixt/test-utils 1.2.3 → 2.0.0

package/test/listEventListeners.test.js

@@ -30,9 +30,9 @@ describe('listEventListeners', () => {
         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);
@@ -43,10 +43,10 @@ describe('listEventListeners', () => {
             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);
@@ -57,10 +57,10 @@ describe('listEventListeners', () => {
             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();
@@ -72,9 +72,9 @@ describe('listEventListeners', () => {
             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);
         });
@@ -82,9 +82,9 @@ describe('listEventListeners', () => {
         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();
@@ -95,10 +95,10 @@ describe('listEventListeners', () => {
         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);
         });
@@ -107,11 +107,11 @@ describe('listEventListeners', () => {
             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);
@@ -120,7 +120,7 @@ describe('listEventListeners', () => {
         it('should handle removing non-existent listeners gracefully', () => {
             const element = document.createElement('button');
             const listener = vi.fn();
-            
+
             expect(() => {
                 element.removeEventListener('click', listener);
             }).not.toThrow();
@@ -129,10 +129,10 @@ describe('listEventListeners', () => {
         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();
@@ -144,10 +144,10 @@ describe('listEventListeners', () => {
             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"]');
         });
@@ -157,9 +157,9 @@ describe('listEventListeners', () => {
             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\]$/);
@@ -170,14 +170,14 @@ describe('listEventListeners', () => {
             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\]/);
@@ -188,7 +188,7 @@ describe('listEventListeners', () => {
         it('should return empty object for elements without listeners', () => {
             const element = document.createElement('div');
             const listeners = getEventListeners(element);
-            
+
             expect(listeners).toEqual({});
         });
 
@@ -196,10 +196,10 @@ describe('listEventListeners', () => {
             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();
@@ -216,13 +216,14 @@ describe('listEventListeners', () => {
         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'
+                event: 'click',
+                bindingType: 'addEventListener',
             });
         });
 
@@ -231,29 +232,30 @@ describe('listEventListeners', () => {
             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'
+                event: 'click',
+                bindingType: 'addEventListener',
             });
         });
 
         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']);
         });
@@ -262,18 +264,18 @@ describe('listEventListeners', () => {
             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']);
         });
@@ -282,7 +284,7 @@ describe('listEventListeners', () => {
             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();
@@ -293,18 +295,135 @@ describe('listEventListeners', () => {
             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');
         });
     });
-});
+
+    describe('inline attribute detection', () => {
+        it('should detect inline onclick attribute', () => {
+            const button = document.createElement('button');
+            button.setAttribute('onclick', 'alert("hi")');
+            document.body.appendChild(button);
+
+            const result = listEventListeners(document.body);
+            expect(result).toHaveLength(1);
+            expect(result[0]).toEqual({
+                element: 'button',
+                xpath: expect.any(String),
+                event: 'click',
+                bindingType: 'attribute',
+            });
+        });
+
+        it('should detect multiple inline attributes on same element', () => {
+            const div = document.createElement('div');
+            div.setAttribute('onclick', 'doClick()');
+            div.setAttribute('onmouseover', 'doHover()');
+            div.setAttribute('onfocus', 'doFocus()');
+            document.body.appendChild(div);
+
+            const result = listEventListeners(document.body);
+            expect(result).toHaveLength(3);
+
+            const events = result.map(r => r.event).sort();
+            expect(events).toEqual(['click', 'focus', 'mouseover']);
+            result.forEach(r => {
+                expect(r.bindingType).toBe('attribute');
+            });
+        });
+    });
+
+    describe('property-based handler detection', () => {
+        it('should detect el.onclick = fn property handler', () => {
+            const button = document.createElement('button');
+            button.onclick = () => {};
+            document.body.appendChild(button);
+
+            const result = listEventListeners(document.body);
+            expect(result).toHaveLength(1);
+            expect(result[0]).toEqual({
+                element: 'button',
+                xpath: expect.any(String),
+                event: 'click',
+                bindingType: 'property',
+            });
+        });
+    });
+
+    describe('bindingType field', () => {
+        it('should add bindingType addEventListener for tracked listeners', () => {
+            const button = document.createElement('button');
+            document.body.appendChild(button);
+            button.addEventListener('click', vi.fn());
+
+            const result = listEventListeners(document.body);
+            expect(result).toHaveLength(1);
+            expect(result[0].bindingType).toBe('addEventListener');
+        });
+
+        it('should not double-count attribute handler as property handler', () => {
+            const button = document.createElement('button');
+            button.setAttribute('onclick', 'doClick()');
+            document.body.appendChild(button);
+
+            const result = listEventListeners(document.body);
+            const clickEntries = result.filter(r => r.event === 'click');
+            expect(clickEntries).toHaveLength(1);
+            expect(clickEntries[0].bindingType).toBe('attribute');
+        });
+
+        it('should detect all three binding types on one element', () => {
+            const button = document.createElement('button');
+            button.setAttribute('onmouseover', 'doHover()');
+            button.onfocus = () => {};
+            document.body.appendChild(button);
+            button.addEventListener('click', vi.fn());
+
+            const result = listEventListeners(document.body);
+            expect(result).toHaveLength(3);
+
+            const byEvent = {};
+            result.forEach(r => {
+                byEvent[r.event] = r.bindingType;
+            });
+
+            expect(byEvent.click).toBe('addEventListener');
+            expect(byEvent.mouseover).toBe('attribute');
+            expect(byEvent.focus).toBe('property');
+        });
+    });
+
+    describe('getEventListeners with inline/property handlers', () => {
+        it('should include attribute handlers in getEventListeners result', () => {
+            const button = document.createElement('button');
+            button.setAttribute('onclick', 'doClick()');
+
+            const listeners = getEventListeners(button);
+            expect(listeners.click).toBeDefined();
+            expect(listeners.click.length).toBeGreaterThanOrEqual(1);
+            const attrEntry = listeners.click.find(l => l.bindingType === 'attribute');
+            expect(attrEntry).toBeDefined();
+        });
+
+        it('should include property handlers in getEventListeners result', () => {
+            const button = document.createElement('button');
+            button.onclick = () => {};
+
+            const listeners = getEventListeners(button);
+            expect(listeners.click).toBeDefined();
+            const propEntry = listeners.click.find(l => l.bindingType === 'property');
+            expect(propEntry).toBeDefined();
+        });
+    });
+});

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

@@ -18,22 +18,12 @@ test.describe('CSS Pseudo-element Support', () => {
         await page.addScriptTag({
             content: `
         // getGeneratedContent: includes textContent alongside pseudo-element content
+        // Delegates to getCSSGeneratedContent for pseudo-element retrieval
         function getGeneratedContent(el) {
           if (!el) return false;
-
-          const beforeStyle = window.getComputedStyle(el, '::before');
-          const afterStyle = window.getComputedStyle(el, '::after');
-
-          let before = beforeStyle.getPropertyValue('content') || '';
-          let after = afterStyle.getPropertyValue('content') || '';
+          const before = getCSSGeneratedContent(el, 'before') || '';
           const inner = el.textContent || '';
-
-          before = before.replace(/^["']|["']$/g, '');
-          after = after.replace(/^["']|["']$/g, '');
-
-          if (before === 'none') before = '';
-          if (after === 'none') after = '';
-
+          const after = getCSSGeneratedContent(el, 'after') || '';
           const result = [before, inner, after].filter(Boolean).join(' ').trim();
           return result || false;
         }