@jmruthers/pace-core 0.5.180 → 0.5.182

package/src/components/Dialog/utils/__tests__/safeHtml.unit.test.ts

@@ -1,611 +0,0 @@
-/**
- * @file Safe HTML Utilities Unit Tests
- * @package @jmruthers/pace-core
- * @module Components/Dialog/Utils/Tests
- * @since 0.4.36
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { sanitizeHtml, validateHtml, renderSafeHtml } from '../safeHtml';
-
-// Mock console methods to avoid noise in test output
-const originalConsoleLog = console.log;
-const originalConsoleWarn = console.warn;
-
-describe('Safe HTML Utilities', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    // Mock console methods
-    console.log = vi.fn();
-    console.warn = vi.fn();
-  });
-
-  afterEach(() => {
-    // Restore console methods
-    console.log = originalConsoleLog;
-    console.warn = originalConsoleWarn;
-  });
-
-  describe('sanitizeHtml', () => {
-    describe('Input validation', () => {
-      it('should return empty string for null input', () => {
-        const result = sanitizeHtml(null as any);
-        expect(result).toBe('');
-      });
-
-      it('should return empty string for undefined input', () => {
-        const result = sanitizeHtml(undefined as any);
-        expect(result).toBe('');
-      });
-
-      it('should return empty string for non-string input', () => {
-        const result = sanitizeHtml(123 as any);
-        expect(result).toBe('');
-      });
-
-      it('should return empty string for empty string', () => {
-        const result = sanitizeHtml('');
-        expect(result).toBe('');
-      });
-
-      it('should handle whitespace-only strings', () => {
-        const result = sanitizeHtml('   \n\t  ');
-        expect(result).toBe('   \n\t  ');
-      });
-    });
-
-    describe('Basic HTML sanitization', () => {
-      it('should preserve safe HTML tags', () => {
-        const html = '<p>Hello <strong>world</strong>!</p>';
-        const result = sanitizeHtml(html);
-        expect(result).toBe(html);
-      });
-
-      it('should preserve safe HTML with attributes', () => {
-        const html = '<div class="container" id="main">Content</div>';
-        const result = sanitizeHtml(html);
-        expect(result).toBe(html);
-      });
-
-      it('should preserve complex safe HTML structures', () => {
-        const html = `
-          <section>
-            <h1>Title</h1>
-            <p>Paragraph with <em>emphasis</em> and <a href="/link">link</a></p>
-            <ul>
-              <li>Item 1</li>
-              <li>Item 2</li>
-            </ul>
-          </section>
-        `;
-        const result = sanitizeHtml(html);
-        expect(result).toBe(html);
-      });
-
-      it('should preserve table structures', () => {
-        const html = `
-          <table>
-            <thead>
-              <tr>
-                <th>Header 1</th>
-                <th>Header 2</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>Data 1</td>
-                <td>Data 2</td>
-              </tr>
-            </tbody>
-          </table>
-        `;
-        const result = sanitizeHtml(html);
-        expect(result).toBe(html);
-      });
-    });
-
-    describe('Dangerous content removal', () => {
-      it('should remove script tags', () => {
-        const html = '<p>Safe content</p><script>alert("xss")</script><p>More content</p>';
-        const result = sanitizeHtml(html);
-        expect(result).toBe('<p>Safe content</p><p>More content</p>');
-      });
-
-      it('should remove script tags with attributes', () => {
-        const html = '<p>Safe</p><script type="text/javascript" src="malicious.js">alert("xss")</script><p>Content</p>';
-        const result = sanitizeHtml(html);
-        expect(result).toBe('<p>Safe</p><p>Content</p>');
-      });
-
-      it('should remove iframe tags', () => {
-        const html = '<p>Safe content</p><iframe src="malicious.com"></iframe><p>More content</p>';
-        const result = sanitizeHtml(html);
-        expect(result).toBe('<p>Safe content</p><p>More content</p>');
-      });
-
-      it('should remove iframe tags with attributes', () => {
-        const html = '<p>Safe</p><iframe width="100" height="100" src="evil.com"></iframe><p>Content</p>';
-        const result = sanitizeHtml(html);
-        expect(result).toBe('<p>Safe</p><p>Content</p>');
-      });
-
-      it('should partially remove event handlers (basic implementation)', () => {
-        const html = '<p onclick="alert(\'xss\')">Click me</p>';
-        const result = sanitizeHtml(html);
-        // The basic implementation may not fully remove event handlers with nested quotes
-        expect(result).toContain('<p');
-        expect(result).toContain('Click me</p>');
-        expect(result).not.toContain('<script>');
-      });
-
-      it('should partially remove multiple event handlers (basic implementation)', () => {
-        const html = '<div onmouseover="evil()" onload="bad()" onclick="alert(\'xss\')">Content</div>';
-        const result = sanitizeHtml(html);
-        // The basic implementation may not fully remove event handlers with nested quotes
-        expect(result).toContain('<div');
-        expect(result).toContain('Content</div>');
-        expect(result).not.toContain('<script>');
-      });
-
-      it('should partially remove javascript: protocols (basic implementation)', () => {
-        const html = '<a href="javascript:alert(\'xss\')">Link</a>';
-        const result = sanitizeHtml(html);
-        // The basic implementation may not fully remove protocols with nested quotes
-        expect(result).toContain('<a href=');
-        expect(result).toContain('Link</a>');
-        expect(result).not.toContain('<script>');
-      });
-
-      it('should partially remove data: protocols (basic implementation)', () => {
-        const html = '<img src="data:text/html,<script>alert(\'xss\')</script>">';
-        const result = sanitizeHtml(html);
-        // The basic implementation may not fully remove protocols with nested quotes
-        expect(result).toContain('<img src=');
-        expect(result).not.toContain('<script>');
-      });
-
-      it('should handle case-insensitive dangerous content', () => {
-        const html = '<SCRIPT>alert("xss")</SCRIPT><IFRAME src="evil.com"></IFRAME>';
-        const result = sanitizeHtml(html);
-        expect(result).toBe('');
-      });
-
-      it('should partially handle mixed case event handlers (basic implementation)', () => {
-        const html = '<div OnClick="alert(\'xss\')" ONMOUSEOVER="evil()">Content</div>';
-        const result = sanitizeHtml(html);
-        // The basic implementation may not fully remove event handlers with nested quotes
-        expect(result).toContain('<div');
-        expect(result).toContain('Content</div>');
-        expect(result).not.toContain('<script>');
-      });
-    });
-
-    describe('Edge cases and complex scenarios', () => {
-      it('should handle nested dangerous content', () => {
-        const html = '<div><script>alert("outer")</script><p>Safe</p><script>alert("inner")</script></div>';
-        const result = sanitizeHtml(html);
-        expect(result).toBe('<div><p>Safe</p></div>');
-      });
-
-      it('should handle malformed script tags', () => {
-        const html = '<p>Safe</p><script>alert("xss")<script>alert("more")</script><p>Content</p>';
-        const result = sanitizeHtml(html);
-        expect(result).toBe('<p>Safe</p><p>Content</p>');
-      });
-
-      it('should handle script tags with no content', () => {
-        const html = '<p>Safe</p><script></script><p>Content</p>';
-        const result = sanitizeHtml(html);
-        expect(result).toBe('<p>Safe</p><p>Content</p>');
-      });
-
-      it('should handle self-closing script tags', () => {
-        const html = '<p>Safe</p><script src="evil.js" /><p>Content</p>';
-        const result = sanitizeHtml(html);
-        expect(result).toBe('<p>Safe</p><p>Content</p>');
-      });
-
-      it('should preserve safe content while partially removing dangerous content (basic implementation)', () => {
-        const html = `
-          <div>
-            <h1>Title</h1>
-            <script>alert("xss")</script>
-            <p>This is <strong>safe</strong> content</p>
-            <iframe src="evil.com"></iframe>
-            <ul>
-              <li>Safe item</li>
-              <li onclick="alert('xss')">Dangerous item</li>
-            </ul>
-          </div>
-        `;
-        const result = sanitizeHtml(html);
-        expect(result).toContain('<h1>Title</h1>');
-        expect(result).toContain('<p>This is <strong>safe</strong> content</p>');
-        expect(result).toContain('<li>Safe item</li>');
-        expect(result).toContain('<li'); // May have partial event handler removal
-        expect(result).not.toContain('<script>');
-        expect(result).not.toContain('<iframe>');
-      });
-    });
-
-    describe('Console logging', () => {
-      it('should log input and output for debugging', () => {
-        const html = '<p>Test content</p>';
-        sanitizeHtml(html);
-        
-        expect(console.log).toHaveBeenCalledWith('🔍 sanitizeHtml input:', html);
-        expect(console.log).toHaveBeenCalledWith('🔍 sanitizeHtml output:', html);
-      });
-    });
-  });
-
-  describe('validateHtml', () => {
-    describe('Input validation', () => {
-      it('should return invalid for null input', () => {
-        const result = validateHtml(null as any);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('HTML content must be a non-empty string');
-      });
-
-      it('should return invalid for undefined input', () => {
-        const result = validateHtml(undefined as any);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('HTML content must be a non-empty string');
-      });
-
-      it('should return invalid for non-string input', () => {
-        const result = validateHtml(123 as any);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('HTML content must be a non-empty string');
-      });
-
-      it('should return invalid for empty string', () => {
-        const result = validateHtml('');
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('HTML content must be a non-empty string');
-      });
-
-      it('should return valid for whitespace-only strings', () => {
-        const result = validateHtml('   \n\t  ');
-        expect(result.isValid).toBe(true);
-        expect(result.warnings).toEqual([]);
-      });
-    });
-
-    describe('Safe content validation', () => {
-      it('should validate safe HTML content', () => {
-        const html = '<p>Hello <strong>world</strong>!</p>';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(true);
-        expect(result.warnings).toEqual([]);
-      });
-
-      it('should validate complex safe HTML structures', () => {
-        const html = `
-          <section>
-            <h1>Title</h1>
-            <p>Paragraph with <em>emphasis</em> and <a href="/link">link</a></p>
-            <ul>
-              <li>Item 1</li>
-              <li>Item 2</li>
-            </ul>
-          </section>
-        `;
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(true);
-        expect(result.warnings).toEqual([]);
-      });
-
-      it('should validate table structures', () => {
-        const html = `
-          <table>
-            <thead>
-              <tr>
-                <th>Header 1</th>
-                <th>Header 2</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>Data 1</td>
-                <td>Data 2</td>
-              </tr>
-            </tbody>
-          </table>
-        `;
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(true);
-        expect(result.warnings).toEqual([]);
-      });
-    });
-
-    describe('Dangerous content detection', () => {
-      it('should detect script tags', () => {
-        const html = '<p>Safe content</p><script>alert("xss")</script>';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Script tags are not allowed');
-      });
-
-      it('should detect iframe tags', () => {
-        const html = '<p>Safe content</p><iframe src="malicious.com"></iframe>';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Iframe tags are not allowed');
-      });
-
-      it('should detect object tags', () => {
-        const html = '<p>Safe content</p><object data="malicious.swf"></object>';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Object tags are not allowed');
-      });
-
-      it('should detect embed tags', () => {
-        const html = '<p>Safe content</p><embed src="malicious.swf">';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Embed tags are not allowed');
-      });
-
-      it('should detect form tags', () => {
-        const html = '<p>Safe content</p><form action="/submit"><input type="text"></form>';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Form tags are not allowed');
-      });
-
-      it('should detect input tags', () => {
-        const html = '<p>Safe content</p><input type="text" value="test">';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Input tags are not allowed');
-      });
-
-      it('should detect button tags', () => {
-        const html = '<p>Safe content</p><button onclick="alert(\'xss\')">Click me</button>';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Button tags are not allowed');
-      });
-
-      it('should detect event handlers', () => {
-        const html = '<p onclick="alert(\'xss\')">Click me</p>';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Event handlers are not allowed');
-      });
-
-      it('should detect javascript protocols', () => {
-        const html = '<a href="javascript:alert(\'xss\')">Link</a>';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('JavaScript protocols are not allowed');
-      });
-
-      it('should detect data protocols', () => {
-        const html = '<img src="data:text/html,<script>alert(\'xss\')</script>">';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Data protocols are not allowed');
-      });
-    });
-
-    describe('Multiple warnings', () => {
-      it('should collect multiple warnings', () => {
-        const html = '<script>alert("xss")</script><iframe src="evil.com"></iframe><p onclick="alert(\'xss\')">Click</p>';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toHaveLength(3);
-        expect(result.warnings).toContain('Script tags are not allowed');
-        expect(result.warnings).toContain('Iframe tags are not allowed');
-        expect(result.warnings).toContain('Event handlers are not allowed');
-      });
-
-      it('should handle case-insensitive detection', () => {
-        const html = '<SCRIPT>alert("xss")</SCRIPT><IFRAME src="evil.com"></IFRAME><P ONCLICK="alert(\'xss\')">Click</P>';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toHaveLength(3);
-        expect(result.warnings).toContain('Script tags are not allowed');
-        expect(result.warnings).toContain('Iframe tags are not allowed');
-        expect(result.warnings).toContain('Event handlers are not allowed');
-      });
-    });
-
-    describe('Edge cases', () => {
-      it('should handle malformed dangerous tags', () => {
-        const html = '<script>alert("xss")<script>alert("more")</script>';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Script tags are not allowed');
-      });
-
-      it('should handle self-closing dangerous tags', () => {
-        const html = '<script src="evil.js" /><iframe src="evil.com" />';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Script tags are not allowed');
-        expect(result.warnings).toContain('Iframe tags are not allowed');
-      });
-
-      it('should handle dangerous content in attributes', () => {
-        const html = '<p title="javascript:alert(\'xss\')">Content</p>';
-        const result = validateHtml(html);
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('JavaScript protocols are not allowed');
-      });
-    });
-  });
-
-  describe('renderSafeHtml', () => {
-    describe('Basic functionality', () => {
-      it('should return sanitized HTML and validation info', () => {
-        const html = '<p>Hello <strong>world</strong>!</p>';
-        const result = renderSafeHtml(html);
-        
-        expect(result.html).toBe(html);
-        expect(result.isValid).toBe(true);
-        expect(result.warnings).toEqual([]);
-      });
-
-      it('should handle dangerous content', () => {
-        const html = '<p>Safe content</p><script>alert("xss")</script><p>More content</p>';
-        const result = renderSafeHtml(html);
-        
-        expect(result.html).toBe('<p>Safe content</p><p>More content</p>');
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Script tags are not allowed');
-      });
-    });
-
-    describe('Options handling', () => {
-      it('should use default options when none provided', () => {
-        const html = '<p>Safe content</p><script>alert("xss")</script>';
-        const result = renderSafeHtml(html);
-        
-        expect(result.html).toBe('<p>Safe content</p>');
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Script tags are not allowed');
-      });
-
-      it('should respect strict option (default true)', () => {
-        const html = '<p>Safe content</p><script>alert("xss")</script>';
-        const result = renderSafeHtml(html, { strict: true });
-        
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Script tags are not allowed');
-      });
-
-      it('should respect logWarnings option (default false)', () => {
-        const html = '<p>Safe content</p><script>alert("xss")</script>';
-        renderSafeHtml(html, { logWarnings: false });
-        
-        expect(console.warn).not.toHaveBeenCalled();
-      });
-
-      it('should log warnings when logWarnings is true', () => {
-        const html = '<p>Safe content</p><script>alert("xss")</script>';
-        renderSafeHtml(html, { logWarnings: true });
-        
-        expect(console.warn).toHaveBeenCalledWith('Dialog HTML content warnings:', ['Script tags are not allowed']);
-      });
-
-      it('should handle both options together', () => {
-        const html = '<p>Safe content</p><script>alert("xss")</script><iframe src="evil.com"></iframe>';
-        const result = renderSafeHtml(html, { strict: true, logWarnings: true });
-        
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toHaveLength(2);
-        expect(console.warn).toHaveBeenCalledWith('Dialog HTML content warnings:', expect.arrayContaining(['Script tags are not allowed', 'Iframe tags are not allowed']));
-      });
-    });
-
-    describe('Edge cases', () => {
-      it('should handle null input', () => {
-        const result = renderSafeHtml(null as any);
-        
-        expect(result.html).toBe('');
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('HTML content must be a non-empty string');
-      });
-
-      it('should handle undefined input', () => {
-        const result = renderSafeHtml(undefined as any);
-        
-        expect(result.html).toBe('');
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('HTML content must be a non-empty string');
-      });
-
-      it('should handle empty string', () => {
-        const result = renderSafeHtml('');
-        
-        expect(result.html).toBe('');
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('HTML content must be a non-empty string');
-      });
-
-      it('should handle non-string input', () => {
-        const result = renderSafeHtml(123 as any);
-        
-        expect(result.html).toBe('');
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('HTML content must be a non-empty string');
-      });
-
-      it('should handle whitespace-only input', () => {
-        const result = renderSafeHtml('   \n\t  ');
-        
-        expect(result.html).toBe('   \n\t  ');
-        expect(result.isValid).toBe(true);
-        expect(result.warnings).toEqual([]);
-      });
-    });
-
-    describe('Integration scenarios', () => {
-      it('should handle complex mixed content (basic implementation)', () => {
-        const html = `
-          <div>
-            <h1>Title</h1>
-            <script>alert("xss")</script>
-            <p>This is <strong>safe</strong> content</p>
-            <iframe src="evil.com"></iframe>
-            <ul>
-              <li>Safe item</li>
-              <li onclick="alert('xss')">Dangerous item</li>
-            </ul>
-            <a href="javascript:alert('xss')">Dangerous link</a>
-          </div>
-        `;
-        const result = renderSafeHtml(html, { logWarnings: true });
-        
-        expect(result.html).toContain('<h1>Title</h1>');
-        expect(result.html).toContain('<p>This is <strong>safe</strong> content</p>');
-        expect(result.html).toContain('<li>Safe item</li>');
-        expect(result.html).toContain('<li'); // May have partial event handler removal
-        expect(result.html).not.toContain('<script>');
-        expect(result.html).not.toContain('<iframe>');
-        expect(result.html).toContain('<a href='); // May have partial protocol removal
-        
-        expect(result.isValid).toBe(false);
-        expect(result.warnings.length).toBeGreaterThan(0);
-        expect(console.warn).toHaveBeenCalled();
-      });
-
-      it('should preserve safe content while removing all dangerous elements', () => {
-        const html = `
-          <article>
-            <header>
-              <h1>Article Title</h1>
-              <p class="meta">Published on <time datetime="2023-01-01">January 1, 2023</time></p>
-            </header>
-            <main>
-              <p>This is a <em>safe</em> article with <a href="/safe-link">safe links</a>.</p>
-              <blockquote>
-                <p>This is a <strong>safe</strong> quote.</p>
-              </blockquote>
-              <script>alert("xss")</script>
-              <pre><code>console.log("safe code");</code></pre>
-            </main>
-            <footer>
-              <p>Safe footer content</p>
-            </footer>
-          </article>
-        `;
-        const result = renderSafeHtml(html);
-        
-        expect(result.html).toContain('<h1>Article Title</h1>');
-        expect(result.html).toContain('<p class="meta">Published on <time datetime="2023-01-01">January 1, 2023</time></p>');
-        expect(result.html).toContain('<p>This is a <em>safe</em> article with <a href="/safe-link">safe links</a>.</p>');
-        expect(result.html).toContain('<blockquote>');
-        expect(result.html).toContain('<pre><code>console.log("safe code");</code></pre>');
-        expect(result.html).toContain('<p>Safe footer content</p>');
-        expect(result.html).not.toContain('<script>');
-        
-        expect(result.isValid).toBe(false);
-        expect(result.warnings).toContain('Script tags are not allowed');
-      });
-    });
-  });
-});