@afixt/test-utils 1.2.0 → 1.2.1

package/test/getCSSGeneratedContent.test.js

@@ -2,12 +2,12 @@ import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { getCSSGeneratedContent } from '../src/getCSSGeneratedContent';
 
 describe('getCSSGeneratedContent', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    
-    // Create a style element for pseudo-elements
-    const style = document.createElement('style');
-    style.innerHTML = `
+    beforeEach(() => {
+        document.body.innerHTML = '';
+
+        // Create a style element for pseudo-elements
+        const style = document.createElement('style');
+        style.innerHTML = `
       .with-before::before {
         content: "Before Content";
       }
@@ -30,247 +30,202 @@ describe('getCSSGeneratedContent', () => {
         content: none;
       }
     `;
-    document.head.appendChild(style);
-  });
-
-  it('should return false for null element', () => {
-    expect(getCSSGeneratedContent(null)).toBe(false);
-  });
-
-  it('should return false for elements with no generated content', () => {
-    const div = document.createElement('div');
-    document.body.appendChild(div);
-    
-    // Mock getComputedStyle for this test since JSDOM doesn't support it
-    const originalGetComputedStyle = window.getComputedStyle;
-    window.getComputedStyle = () => ({
-      getPropertyValue: () => 'none'
-    });
-    
-    expect(getCSSGeneratedContent(div)).toBe(false);
-    
-    // Restore original
-    window.getComputedStyle = originalGetComputedStyle;
-  });
-
-  it('should get ::before content', () => {
-    const div = document.createElement('div');
-    div.className = 'with-before';
-    document.body.appendChild(div);
-    
-    expect(getCSSGeneratedContent(div, 'before')).toBe('Before Content');
-  });
-
-  it('should get ::after content', () => {
-    const div = document.createElement('div');
-    div.className = 'with-after';
-    document.body.appendChild(div);
-    
-    expect(getCSSGeneratedContent(div, 'after')).toBe('After Content');
-  });
-
-  it('should get both ::before and ::after content', () => {
-    const div = document.createElement('div');
-    div.className = 'with-both';
-    document.body.appendChild(div);
-    
-    expect(getCSSGeneratedContent(div)).toBe('Before Text After Text');
-  });
-
-  it('should get both content by default', () => {
-    const div = document.createElement('div');
-    div.className = 'with-both';
-    document.body.appendChild(div);
-    
-    expect(getCSSGeneratedContent(div)).toBe(getCSSGeneratedContent(div, 'both'));
-  });
-
-  it('should handle quoted content', () => {
-    const div = document.createElement('div');
-    div.className = 'with-quotes';
-    document.body.appendChild(div);
-    
-    expect(getCSSGeneratedContent(div, 'before')).toBe('Quoted Text');
-  });
-
-  it('should return false for empty content', () => {
-    const div = document.createElement('div');
-    div.className = 'empty-content';
-    document.body.appendChild(div);
-    
-    // Mock getComputedStyle to return empty quoted content
-    const originalGetComputedStyle = window.getComputedStyle;
-    window.getComputedStyle = () => ({
-      getPropertyValue: () => '""'
+        document.head.appendChild(style);
     });
-    
-    expect(getCSSGeneratedContent(div)).toBe(false);
-    
-    // Restore original
-    window.getComputedStyle = originalGetComputedStyle;
-  });
-
-  it('should return false for content: none', () => {
-    const div = document.createElement('div');
-    div.className = 'no-content';
-    document.body.appendChild(div);
-    
-    expect(getCSSGeneratedContent(div)).toBe(false);
-  });
-
-  it('should handle url content', () => {
-    const div = document.createElement('div');
-    div.className = 'url-content';
-    document.body.appendChild(div);
-    
-    expect(getCSSGeneratedContent(div, 'before')).toBe('url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")');
-  });
-
-  it('should handle undefined and non-string pseudoElement parameter', () => {
-    const div = document.createElement('div');
-    div.className = 'with-before';
-    document.body.appendChild(div);
-    
-    // Should default to 'both' when no pseudoElement specified
-    expect(getCSSGeneratedContent(div, undefined)).toBe('Before Content');
-  });
-
-  describe('Browser implementation paths', () => {
-    let originalGetComputedStyle;
 
-    beforeEach(() => {
-      // Mock getComputedStyle to simulate real browser behavior
-      originalGetComputedStyle = window.getComputedStyle;
+    it('should return false for null element', () => {
+        expect(getCSSGeneratedContent(null)).toBe(false);
     });
 
-    afterEach(() => {
-      // Restore original getComputedStyle
-      window.getComputedStyle = originalGetComputedStyle;
-    });
+    it('should return false for elements with no generated content', () => {
+        const div = document.createElement('div');
+        document.body.appendChild(div);
 
-    it('should handle quote removal in browser implementation', () => {
-      // Mock getComputedStyle to return quoted content
-      window.getComputedStyle = (el, pseudo) => ({
-        getPropertyValue: (prop) => {
-          if (prop === 'content' && pseudo === '::before') {
-            return '"Quoted Content"';
-          }
-          return 'none';
-        }
-      });
-
-      const div = document.createElement('div');
-      // Remove classList to bypass JSDOM check
-      Object.defineProperty(div, 'classList', { value: undefined });
-      document.body.appendChild(div);
-      
-      expect(getCSSGeneratedContent(div, 'before')).toBe('Quoted Content');
-    });
+        // Mock getComputedStyle for this test since JSDOM doesn't support it
+        const originalGetComputedStyle = window.getComputedStyle;
+        window.getComputedStyle = () => ({
+            getPropertyValue: () => 'none',
+        });
 
-    it('should handle single quote removal in browser implementation', () => {
-      window.getComputedStyle = (el, pseudo) => ({
-        getPropertyValue: (prop) => {
-          if (prop === 'content' && pseudo === '::before') {
-            return "'Single Quoted'";
-          }
-          return 'none';
-        }
-      });
-
-      const div = document.createElement('div');
-      Object.defineProperty(div, 'classList', { value: undefined });
-      document.body.appendChild(div);
-      
-      expect(getCSSGeneratedContent(div, 'before')).toBe('Single Quoted');
-    });
+        expect(getCSSGeneratedContent(div)).toBe(false);
 
-    it('should handle both before and after content with quotes', () => {
-      window.getComputedStyle = (el, pseudo) => ({
-        getPropertyValue: (prop) => {
-          if (prop === 'content') {
-            if (pseudo === '::before') return '"Before"';
-            if (pseudo === '::after') return '"After"';
-          }
-          return 'none';
-        }
-      });
-
-      const div = document.createElement('div');
-      Object.defineProperty(div, 'classList', { value: undefined });
-      document.body.appendChild(div);
-      
-      expect(getCSSGeneratedContent(div, 'both')).toBe('Before After');
+        // Restore original
+        window.getComputedStyle = originalGetComputedStyle;
     });
 
-    it('should handle after content with quotes', () => {
-      window.getComputedStyle = (el, pseudo) => ({
-        getPropertyValue: (prop) => {
-          if (prop === 'content' && pseudo === '::after') {
-            return '"After Content"';
-          }
-          return 'none';
-        }
-      });
-
-      const div = document.createElement('div');
-      Object.defineProperty(div, 'classList', { value: undefined });
-      document.body.appendChild(div);
-      
-      expect(getCSSGeneratedContent(div, 'after')).toBe('After Content');
-    });
+    // Tests for ::before, ::after, both, and quoted content require real browser
+    // CSS pseudo-element support. They run in Playwright: npm run test:playwright:css
 
-    it('should handle content: none in browser implementation', () => {
-      window.getComputedStyle = (el, pseudo) => ({
-        getPropertyValue: (prop) => 'none'
-      });
+    it('should return false for empty content', () => {
+        const div = document.createElement('div');
+        div.className = 'empty-content';
+        document.body.appendChild(div);
 
-      const div = document.createElement('div');
-      Object.defineProperty(div, 'classList', { value: undefined });
-      document.body.appendChild(div);
-      
-      expect(getCSSGeneratedContent(div)).toBe(false);
-    });
+        // Mock getComputedStyle to return empty quoted content
+        const originalGetComputedStyle = window.getComputedStyle;
+        window.getComputedStyle = () => ({
+            getPropertyValue: () => '""',
+        });
 
-    it('should handle content: normal in browser implementation', () => {
-      window.getComputedStyle = (el, pseudo) => ({
-        getPropertyValue: (prop) => 'normal'
-      });
+        expect(getCSSGeneratedContent(div)).toBe(false);
 
-      const div = document.createElement('div');
-      Object.defineProperty(div, 'classList', { value: undefined });
-      document.body.appendChild(div);
-      
-      expect(getCSSGeneratedContent(div)).toBe(false);
+        // Restore original
+        window.getComputedStyle = originalGetComputedStyle;
     });
 
-    it('should handle empty quoted content', () => {
-      window.getComputedStyle = (el, pseudo) => ({
-        getPropertyValue: (prop) => {
-          if (prop === 'content') {
-            if (pseudo === '::before') return '""';
-          }
-          return 'none';
-        }
-      });
-
-      const div = document.createElement('div');
-      Object.defineProperty(div, 'classList', { value: undefined });
-      document.body.appendChild(div);
-      
-      expect(getCSSGeneratedContent(div, 'before')).toBe(false);
+    it('should return false for content: none', () => {
+        const div = document.createElement('div');
+        div.className = 'no-content';
+        document.body.appendChild(div);
+
+        expect(getCSSGeneratedContent(div)).toBe(false);
     });
 
-    it('should handle getComputedStyle error', () => {
-      // Mock getComputedStyle to throw an error
-      window.getComputedStyle = () => {
-        throw new Error('getComputedStyle not supported');
-      };
-
-      const div = document.createElement('div');
-      Object.defineProperty(div, 'classList', { value: undefined });
-      document.body.appendChild(div);
-      
-      expect(getCSSGeneratedContent(div)).toBe(false);
+    // URL content and undefined pseudoElement tests require real browser
+    // CSS pseudo-element support. They run in Playwright: npm run test:playwright:css
+
+    describe('Browser implementation paths', () => {
+        let originalGetComputedStyle;
+
+        beforeEach(() => {
+            // Mock getComputedStyle to simulate real browser behavior
+            originalGetComputedStyle = window.getComputedStyle;
+        });
+
+        afterEach(() => {
+            // Restore original getComputedStyle
+            window.getComputedStyle = originalGetComputedStyle;
+        });
+
+        it('should handle quote removal in browser implementation', () => {
+            // Mock getComputedStyle to return quoted content
+            window.getComputedStyle = (el, pseudo) => ({
+                getPropertyValue: prop => {
+                    if (prop === 'content' && pseudo === '::before') {
+                        return '"Quoted Content"';
+                    }
+                    return 'none';
+                },
+            });
+
+            const div = document.createElement('div');
+            // Remove classList to bypass JSDOM check
+            Object.defineProperty(div, 'classList', { value: undefined });
+            document.body.appendChild(div);
+
+            expect(getCSSGeneratedContent(div, 'before')).toBe('Quoted Content');
+        });
+
+        it('should handle single quote removal in browser implementation', () => {
+            window.getComputedStyle = (el, pseudo) => ({
+                getPropertyValue: prop => {
+                    if (prop === 'content' && pseudo === '::before') {
+                        return "'Single Quoted'";
+                    }
+                    return 'none';
+                },
+            });
+
+            const div = document.createElement('div');
+            Object.defineProperty(div, 'classList', { value: undefined });
+            document.body.appendChild(div);
+
+            expect(getCSSGeneratedContent(div, 'before')).toBe('Single Quoted');
+        });
+
+        it('should handle both before and after content with quotes', () => {
+            window.getComputedStyle = (el, pseudo) => ({
+                getPropertyValue: prop => {
+                    if (prop === 'content') {
+                        if (pseudo === '::before') {
+                            return '"Before"';
+                        }
+                        if (pseudo === '::after') {
+                            return '"After"';
+                        }
+                    }
+                    return 'none';
+                },
+            });
+
+            const div = document.createElement('div');
+            Object.defineProperty(div, 'classList', { value: undefined });
+            document.body.appendChild(div);
+
+            expect(getCSSGeneratedContent(div, 'both')).toBe('Before After');
+        });
+
+        it('should handle after content with quotes', () => {
+            window.getComputedStyle = (el, pseudo) => ({
+                getPropertyValue: prop => {
+                    if (prop === 'content' && pseudo === '::after') {
+                        return '"After Content"';
+                    }
+                    return 'none';
+                },
+            });
+
+            const div = document.createElement('div');
+            Object.defineProperty(div, 'classList', { value: undefined });
+            document.body.appendChild(div);
+
+            expect(getCSSGeneratedContent(div, 'after')).toBe('After Content');
+        });
+
+        it('should handle content: none in browser implementation', () => {
+            window.getComputedStyle = (_el, _pseudo) => ({
+                getPropertyValue: _prop => 'none',
+            });
+
+            const div = document.createElement('div');
+            Object.defineProperty(div, 'classList', { value: undefined });
+            document.body.appendChild(div);
+
+            expect(getCSSGeneratedContent(div)).toBe(false);
+        });
+
+        it('should handle content: normal in browser implementation', () => {
+            window.getComputedStyle = (_el, _pseudo) => ({
+                getPropertyValue: _prop => 'normal',
+            });
+
+            const div = document.createElement('div');
+            Object.defineProperty(div, 'classList', { value: undefined });
+            document.body.appendChild(div);
+
+            expect(getCSSGeneratedContent(div)).toBe(false);
+        });
+
+        it('should handle empty quoted content', () => {
+            window.getComputedStyle = (el, pseudo) => ({
+                getPropertyValue: prop => {
+                    if (prop === 'content') {
+                        if (pseudo === '::before') {
+                            return '""';
+                        }
+                    }
+                    return 'none';
+                },
+            });
+
+            const div = document.createElement('div');
+            Object.defineProperty(div, 'classList', { value: undefined });
+            document.body.appendChild(div);
+
+            expect(getCSSGeneratedContent(div, 'before')).toBe(false);
+        });
+
+        it('should handle getComputedStyle error', () => {
+            // Mock getComputedStyle to throw an error
+            window.getComputedStyle = () => {
+                throw new Error('getComputedStyle not supported');
+            };
+
+            const div = document.createElement('div');
+            Object.defineProperty(div, 'classList', { value: undefined });
+            document.body.appendChild(div);
+
+            expect(getCSSGeneratedContent(div)).toBe(false);
+        });
     });
-  });
-});
+});

package/test/hasCSSGeneratedContent.test.js

@@ -1,150 +1,40 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { describe, it, expect, beforeEach } from 'vitest';
 import { hasCSSGeneratedContent } from '../src/hasCSSGeneratedContent.js';
-import * as getGeneratedContentModule 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('hasCSSGeneratedContent', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    // Remove any added stylesheets
-    const styleElements = document.querySelectorAll('style');
-    styleElements.forEach(style => style.remove());
-    vi.clearAllMocks();
-  });
-
-  // Helper function to create a stylesheet with CSS rules
-  const addStyleToDocument = (cssRules) => {
-    const styleElement = document.createElement('style');
-    styleElement.textContent = cssRules;
-    document.head.appendChild(styleElement);
-  };
-
-  it('should return true for elements with text content', () => {
-    // Arrange
-    const element = document.createElement('div');
-    element.textContent = 'Text content';
-    document.body.appendChild(element);
-    
-    // Act
-    const result = hasCSSGeneratedContent(element);
-    
-    // Assert
-    expect(result).toBe(true);
-  });
-
-  it('should return false for elements with no content', () => {
-    // Arrange
-    const element = document.createElement('div');
-    document.body.appendChild(element);
-    
-    // Act
-    const result = hasCSSGeneratedContent(element);
-    
-    // Assert
-    expect(result).toBe(false);
-  });
-
-  it('should return false for null or undefined elements', () => {
-    // Act & Assert
-    expect(hasCSSGeneratedContent(null)).toBe(false);
-    expect(hasCSSGeneratedContent(undefined)).toBe(false);
-  });
-
-  it('should return true for elements with whitespace-only text content', () => {
-    // Arrange
-    const element = document.createElement('div');
-    element.textContent = '   ';
-    document.body.appendChild(element);
-    
-    // Act
-    const result = hasCSSGeneratedContent(element);
-    
-    // Assert
-    expect(result).toBe(true);
-  });
-
-  // The following tests rely on proper implementation of getGeneratedContent
-  // and may need to be run in a real browser environment for CSS pseudo-elements
-  // Skip these tests in JSDOM environment as it doesn't support getComputedStyle for pseudo-elements
-
-  (isJsdom ? it.skip : it)('should correctly identify elements with ::before content', () => {
-    // Arrange
-    const element = document.createElement('div');
-    element.id = 'with-before';
-    document.body.appendChild(element);
-    
-    // Mock getGeneratedContent to simulate browser behavior
-    const spy = vi.spyOn(getGeneratedContentModule, 'getGeneratedContent');
-    spy.mockImplementation(() => 'Before content');
-    
-    // Act
-    const result = hasCSSGeneratedContent(element);
-    
-    // Assert
-    expect(result).toBe(true);
-    
-    // Clean up
-    spy.mockRestore();
-  });
-
-  (isJsdom ? it.skip : it)('should correctly identify elements with ::after content', () => {
-    // Arrange
-    const element = document.createElement('div');
-    element.id = 'with-after';
-    document.body.appendChild(element);
-    
-    // Mock getGeneratedContent to simulate browser behavior
-    const spy = vi.spyOn(getGeneratedContentModule, 'getGeneratedContent');
-    spy.mockImplementation(() => 'After content');
-    
-    // Act
-    const result = hasCSSGeneratedContent(element);
-    
-    // Assert
-    expect(result).toBe(true);
-    
-    // Clean up
-    spy.mockRestore();
-  });
-
-  it('should return false when getGeneratedContent returns false', () => {
-    // Arrange
-    const element = document.createElement('div');
-    
-    // Mock getGeneratedContent to simulate no content
-    const spy = vi.spyOn(getGeneratedContentModule, 'getGeneratedContent');
-    spy.mockImplementation(() => false);
-    
-    // Act
-    const result = hasCSSGeneratedContent(element);
-    
-    // Assert
-    expect(result).toBe(false);
-    
-    // Clean up
-    spy.mockRestore();
-  });
-
-  it('should handle complex cases with mixed content', () => {
-    // Arrange
-    const element = document.createElement('div');
-    element.textContent = 'Text';
-    
-    // Mock getGeneratedContent to simulate mixed content
-    const spy = vi.spyOn(getGeneratedContentModule, 'getGeneratedContent');
-    spy.mockImplementation(() => 'Before Text After');
-    
-    // Act
-    const result = hasCSSGeneratedContent(element);
-    
-    // Assert
-    expect(result).toBe(true);
-    
-    // Clean up
-    spy.mockRestore();
-  });
-});
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('should return false for null or undefined elements', () => {
+        expect(hasCSSGeneratedContent(null)).toBe(false);
+        expect(hasCSSGeneratedContent(undefined)).toBe(false);
+    });
+
+    it('should return false for elements with no content', () => {
+        const element = document.createElement('div');
+        document.body.appendChild(element);
+
+        expect(hasCSSGeneratedContent(element)).toBe(false);
+    });
+
+    it('should return false for elements with only text content (no CSS generated content)', () => {
+        const element = document.createElement('div');
+        element.textContent = 'Text content';
+        document.body.appendChild(element);
+
+        // hasCSSGeneratedContent only checks CSS pseudo-elements, not textContent
+        expect(hasCSSGeneratedContent(element)).toBe(false);
+    });
+
+    it('should return false for elements with whitespace-only text content', () => {
+        const element = document.createElement('div');
+        element.textContent = '   ';
+        document.body.appendChild(element);
+
+        expect(hasCSSGeneratedContent(element)).toBe(false);
+    });
+
+    // Tests for actual CSS pseudo-element detection require a real browser.
+    // They run in Playwright: npm run test:playwright:css
+});