@afixt/test-utils 1.3.0 → 2.0.1

package/test/getGeneratedContent.test.js

@@ -1,97 +1,98 @@
 /**
  * Tests for getGeneratedContent - designed for Vitest browser mode
- * 
- * These tests are designed to work with the '--browser' flag, which uses a real browser 
+ *
+ * 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 { describe, it, expect, beforeEach, vi } 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);
+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);
+    beforeEach(() => {
+        document.body.innerHTML = '';
+        // Remove any added stylesheets
+        const styleElements = document.querySelectorAll('style');
+        styleElements.forEach(style => style.remove());
     });
 
-    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');
-    });
+    // 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 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);
-    });
+    // 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);
 
-    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(`
+            // 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(`
+
+            // 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: "";
         }
@@ -99,68 +100,131 @@ describe('getGeneratedContent', () => {
           content: "";
         }
       `);
-      
-      // Act
-      const result = getGeneratedContent(element);
-      
-      // Assert
-      expect(result).toBe('Main 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(`
+
+    describe('Delegation to getCSSGeneratedContent', () => {
+        // Mock window.getComputedStyle to support pseudo-element arguments in JSDOM
+        const mockGetComputedStyle = pseudoContentMap => {
+            const original = window.getComputedStyle;
+            window.getComputedStyle = vi.fn((el, pseudoElt) => {
+                if (pseudoElt) {
+                    const key = pseudoElt.replace('::', '');
+                    return {
+                        getPropertyValue: prop => {
+                            if (prop === 'content' && pseudoContentMap[key]) {
+                                return `"${pseudoContentMap[key]}"`;
+                            }
+                            return '';
+                        },
+                    };
+                }
+                return original(el);
+            });
+            return () => {
+                window.getComputedStyle = original;
+            };
+        };
+
+        it('should include pseudo-element content from getCSSGeneratedContent', () => {
+            const element = document.createElement('div');
+            element.textContent = 'Inner text';
+            document.body.appendChild(element);
+
+            const restore = mockGetComputedStyle({ before: 'Before', after: 'After' });
+
+            const result = getGeneratedContent(element);
+            expect(result).toBe('Before Inner text After');
+
+            restore();
+        });
+
+        it('should handle only ::before content from getCSSGeneratedContent', () => {
+            const element = document.createElement('div');
+            element.textContent = 'Content';
+            document.body.appendChild(element);
+
+            const restore = mockGetComputedStyle({ before: 'Prefix' });
+
+            const result = getGeneratedContent(element);
+            expect(result).toBe('Prefix Content');
+
+            restore();
+        });
+
+        it('should handle only ::after content from getCSSGeneratedContent', () => {
+            const element = document.createElement('div');
+            element.textContent = 'Content';
+            document.body.appendChild(element);
+
+            const restore = mockGetComputedStyle({ after: 'Suffix' });
+
+            const result = getGeneratedContent(element);
+            expect(result).toBe('Content Suffix');
+
+            restore();
+        });
+    });
+
+    // 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(`
+            // 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(`
+            // 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";
         }
@@ -168,72 +232,72 @@ describe('getGeneratedContent', () => {
           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(`
+            // 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(`
+            // 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(`
+            // 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  ";
         }
@@ -241,33 +305,33 @@ describe('getGeneratedContent', () => {
           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(`
+
+            // 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";
         }
@@ -281,41 +345,41 @@ describe('getGeneratedContent', () => {
           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(`
+
+            // 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/);
+
+            // 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/);
+        });
     });
-  });
-});
+});