@capillarytech/creatives-library 8.0.254 → 8.0.255-alpha.0

package/v2Components/HtmlEditor/utils/__tests__/htmlValidator.enhanced.test.js

@@ -7,7 +7,7 @@
 import {
   validateHTML,
   validateCSS,
-  extractAndValidateCSS
+  extractAndValidateCSS,
 } from '../htmlValidator';
 
 // Mock liquidTemplateSupport module
@@ -15,8 +15,8 @@ jest.mock('../liquidTemplateSupport', () => ({
   validateLiquidHTML: jest.fn(() => ({
     errors: [],
     warnings: [],
-    info: []
-  }))
+    info: [],
+  })),
 }));
 
 // Mock console.warn to avoid noise in tests
@@ -80,7 +80,7 @@ describe('Enhanced htmlValidator Tests', () => {
       });
 
       it('handles very long HTML content', () => {
-        const longHtml = '<p>' + 'a'.repeat(50000) + '</p>';
+        const longHtml = `<p>${'a'.repeat(50000)}</p>`;
         const result = validateHTML(longHtml);
 
         expect(result).toBeDefined();
@@ -109,24 +109,36 @@ describe('Enhanced htmlValidator Tests', () => {
         const html = '<a href="javascript:alert(1)">Click</a>';
         const result = validateHTML(html);
 
+        // Unsafe protocols are BLOCKING ERRORS (sanitizer.dangerousProtocolDetected)
         expect(result.errors.length).toBeGreaterThan(0);
         expect(result.isValid).toBe(false);
+        // Verify it's the correct rule
+        const error = result.errors.find((e) => e.rule === 'sanitizer.dangerousProtocolDetected');
+        expect(error).toBeDefined();
       });
 
       it('detects potentially unsafe data protocol', () => {
         const html = '<img src="data:image/svg+xml,<svg>...">';
         const result = validateHTML(html);
 
+        // Unsafe protocols are BLOCKING ERRORS (sanitizer.dangerousProtocolDetected)
         expect(result.errors.length).toBeGreaterThan(0);
         expect(result.isValid).toBe(false);
+        // Verify it's the correct rule
+        const error = result.errors.find((e) => e.rule === 'sanitizer.dangerousProtocolDetected');
+        expect(error).toBeDefined();
       });
 
       it('detects potentially unsafe vbscript protocol', () => {
         const html = '<a href="vbscript:msgbox(1)">Click</a>';
         const result = validateHTML(html);
 
+        // Unsafe protocols are BLOCKING ERRORS (sanitizer.dangerousProtocolDetected)
         expect(result.errors.length).toBeGreaterThan(0);
         expect(result.isValid).toBe(false);
+        // Verify it's the correct rule
+        const error = result.errors.find((e) => e.rule === 'sanitizer.dangerousProtocolDetected');
+        expect(error).toBeDefined();
       });
 
       it('handles script tags appropriately', () => {
@@ -417,7 +429,7 @@ describe('Enhanced htmlValidator Tests', () => {
       });
 
       it('handles very long CSS content', () => {
-        const longCSS = '.long { ' + 'color: red; '.repeat(1000) + '}';
+        const longCSS = `.long { ${'color: red; '.repeat(1000)}}`;
         const result = validateCSS(longCSS);
 
         expect(result).toBeDefined();
@@ -436,8 +448,10 @@ describe('Enhanced htmlValidator Tests', () => {
         const result = validateCSS(css);
 
         expect(result).toBeDefined();
-        expect(result.isValid).toBe(false);
-        expect(result.errors.length).toBeGreaterThan(0);
+        // CSS validation issues are WARNINGS (not blocking errors)
+        expect(result.warnings.length).toBeGreaterThan(0);
+        // isValid can be true if only warnings exist (warnings don't block)
+        expect(typeof result.isValid).toBe('boolean');
       });
 
       it('detects empty rules', () => {
@@ -448,8 +462,10 @@ describe('Enhanced htmlValidator Tests', () => {
         const result = validateCSS(css);
 
         expect(result).toBeDefined();
-        expect(result.isValid).toBe(false);
-        expect(result.errors.length).toBeGreaterThan(0);
+        // CSS validation issues are WARNINGS (not blocking errors)
+        expect(result.warnings.length).toBeGreaterThan(0);
+        // isValid can be true if only warnings exist (warnings don't block)
+        expect(typeof result.isValid).toBe('boolean');
       });
     });
   });
@@ -536,8 +552,10 @@ describe('Enhanced htmlValidator Tests', () => {
         const result = extractAndValidateCSS(html);
 
         expect(result).toBeDefined();
-        expect(result.isValid).toBe(false);
-        expect(result.errors.length).toBeGreaterThan(0);
+        // CSS validation issues are WARNINGS (not blocking errors)
+        expect(result.warnings.length).toBeGreaterThan(0);
+        // isValid can be true if only warnings exist (warnings don't block)
+        expect(typeof result.isValid).toBe('boolean');
       });
     });
 
@@ -576,7 +594,7 @@ describe('Enhanced htmlValidator Tests', () => {
       const mockHTMLHint = {
         verify: jest.fn(() => {
           throw new Error('HTMLHint validation failed');
-        })
+        }),
       };
 
       // Temporarily replace HTMLHint
@@ -585,9 +603,13 @@ describe('Enhanced htmlValidator Tests', () => {
       const html = '<div>Test content</div>';
       const result = validateHTML(html);
 
-      expect(result.isValid).toBe(false);
-      expect(result.errors.length).toBeGreaterThan(0);
-      expect(result.errors[0].message).toContain('HTMLHint validation failed');
+      // HTMLHint errors are caught and handled gracefully - result should still be defined
+      // When HTMLHint throws, it's caught and a warning is added (not an error)
+      expect(result).toBeDefined();
+      expect(typeof result.isValid).toBe('boolean');
+      // HTMLHint errors are converted to warnings in the catch block
+      expect(result.warnings.length).toBeGreaterThan(0);
+      expect(result.warnings[0].message).toContain('HTMLHint validation failed');
 
       // Restore original HTMLHint
       require('htmlhint').HTMLHint = originalHTMLHint;
@@ -640,10 +662,9 @@ describe('Enhanced htmlValidator Tests', () => {
     });
 
     it('falls back to default formatter when custom formatter fails', () => {
-      const failingFormatter = jest.fn((key, values) => {
+      const failingFormatter = jest.fn((key, values) =>
         // Don't throw error, just return the key as fallback behavior
-        return key;
-      });
+        key);
 
       const html = '<a href="javascript:alert(1)">Unsafe link</a>';
       const result = validateHTML(html, 'email', failingFormatter);
@@ -721,8 +742,10 @@ line4`;
       const css = '.class { }';
       const result = validateCSS(css);
 
-      expect(result.isValid).toBe(false);
-      expect(result.errors.length).toBeGreaterThan(0);
+      // CSS validation issues are WARNINGS (not blocking errors)
+      expect(result.warnings.length).toBeGreaterThan(0);
+      // isValid can be true if only warnings exist (warnings don't block)
+      expect(typeof result.isValid).toBe('boolean');
     });
 
     it('handles multiple consecutive unsafe protocols', () => {
@@ -755,9 +778,15 @@ line4`;
       // Get the mocked module and set it to return specific results
       const { validateLiquidHTML } = require('../liquidTemplateSupport');
       validateLiquidHTML.mockImplementation(() => ({
-        errors: [{ type: 'error', message: 'Liquid error', line: 1, column: 1, rule: 'liquid-test', severity: 'error', source: 'liquid' }],
-        warnings: [{ type: 'warning', message: 'Liquid warning', line: 1, column: 1, rule: 'liquid-test', severity: 'warning', source: 'liquid' }],
-        info: [{ type: 'info', message: 'Liquid info', line: 1, column: 1, rule: 'liquid-test', severity: 'info', source: 'liquid' }]
+        errors: [{
+          type: 'error', message: 'Liquid error', line: 1, column: 1, rule: 'liquid-test', severity: 'error', source: 'liquid',
+        }],
+        warnings: [{
+          type: 'warning', message: 'Liquid warning', line: 1, column: 1, rule: 'liquid-test', severity: 'warning', source: 'liquid',
+        }],
+        info: [{
+          type: 'info', message: 'Liquid info', line: 1, column: 1, rule: 'liquid-test', severity: 'info', source: 'liquid',
+        }],
       }));
 
       const html = '<div>{{ liquid.template }}</div>';
@@ -790,7 +819,9 @@ line4`;
       // Get the mocked module and set it to return only some result types
       const { validateLiquidHTML } = require('../liquidTemplateSupport');
       validateLiquidHTML.mockImplementation(() => ({
-        errors: [{ type: 'error', message: 'Liquid error', line: 1, column: 1, rule: 'liquid-test', severity: 'error', source: 'liquid' }],
+        errors: [{
+          type: 'error', message: 'Liquid error', line: 1, column: 1, rule: 'liquid-test', severity: 'error', source: 'liquid',
+        }],
         // Missing warnings and info arrays
       }));
 
@@ -808,7 +839,9 @@ line4`;
       // Get the mocked module and set it to return only warnings
       const { validateLiquidHTML } = require('../liquidTemplateSupport');
       validateLiquidHTML.mockImplementation(() => ({
-        warnings: [{ type: 'warning', message: 'Liquid warning', line: 1, column: 1, rule: 'liquid-test', severity: 'warning', source: 'liquid' }],
+        warnings: [{
+          type: 'warning', message: 'Liquid warning', line: 1, column: 1, rule: 'liquid-test', severity: 'warning', source: 'liquid',
+        }],
       }));
 
       const html = '<div>{{ liquid.template }}</div>';
@@ -825,7 +858,9 @@ line4`;
       // Get the mocked module and set it to return only info
       const { validateLiquidHTML } = require('../liquidTemplateSupport');
       validateLiquidHTML.mockImplementation(() => ({
-        info: [{ type: 'info', message: 'Liquid info', line: 1, column: 1, rule: 'liquid-test', severity: 'info', source: 'liquid' }],
+        info: [{
+          type: 'info', message: 'Liquid info', line: 1, column: 1, rule: 'liquid-test', severity: 'info', source: 'liquid',
+        }],
       }));
 
       const html = '<div>{{ liquid.template }}</div>';
@@ -851,8 +886,10 @@ line4`;
       `;
       const result = validateCSS(css);
 
-      expect(result.isValid).toBe(false);
-      expect(result.errors.length).toBeGreaterThan(0);
+      // CSS validation issues are WARNINGS (not blocking errors)
+      expect(result.warnings.length).toBeGreaterThan(0);
+      // isValid can be true if only warnings exist (warnings don't block)
+      expect(typeof result.isValid).toBe('boolean');
     });
 
     it('handles CSS with nested braces', () => {
@@ -863,8 +900,10 @@ line4`;
       `;
       const result = validateCSS(css);
 
-      expect(result.isValid).toBe(false);
-      expect(result.errors.length).toBeGreaterThan(0);
+      // CSS validation issues are WARNINGS (not blocking errors)
+      expect(result.warnings.length).toBeGreaterThan(0);
+      // isValid can be true if only warnings exist (warnings don't block)
+      expect(typeof result.isValid).toBe('boolean');
     });
 
     it('handles CSS with mixed valid and invalid rules', () => {
@@ -876,9 +915,11 @@ line4`;
       `;
       const result = validateCSS(css);
 
-      expect(result.isValid).toBe(false);
-      // Should detect at least one empty rule
-      expect(result.errors.length).toBeGreaterThanOrEqual(1);
+      // CSS validation issues are WARNINGS (not blocking errors)
+      // Should detect at least one empty rule as warning
+      expect(result.warnings.length).toBeGreaterThanOrEqual(1);
+      // isValid can be true if only warnings exist (warnings don't block)
+      expect(typeof result.isValid).toBe('boolean');
     });
 
     it('handles CSS validation exception scenarios', () => {
@@ -927,8 +968,10 @@ line4`;
       `;
       const result = extractAndValidateCSS(html);
 
-      expect(result.isValid).toBe(false);
-      expect(result.errors.length).toBeGreaterThan(0);
+      // CSS validation issues are WARNINGS (not blocking errors)
+      expect(result.warnings.length).toBeGreaterThan(0);
+      // isValid can be true if only warnings exist (warnings don't block)
+      expect(typeof result.isValid).toBe('boolean');
     });
 
     it('handles style tags with complex CSS', () => {
@@ -943,17 +986,21 @@ line4`;
       `;
       const result = extractAndValidateCSS(html);
 
-      expect(result.isValid).toBe(false);
-      expect(result.errors.length).toBeGreaterThan(0);
+      // CSS validation issues are WARNINGS (not blocking errors)
+      expect(result.warnings.length).toBeGreaterThan(0);
+      // isValid can be true if only warnings exist (warnings don't block)
+      expect(typeof result.isValid).toBe('boolean');
     });
 
     it('correctly identifies unclosed style tags', () => {
       const html = '<style>.test { color: red; }';
       const result = extractAndValidateCSS(html);
 
-      expect(result.isValid).toBe(false);
-      expect(result.errors.length).toBeGreaterThan(0);
-      expect(result.errors.some(error => error.rule === 'unclosed-style-tag')).toBe(true);
+      // CSS validation issues are WARNINGS (not blocking errors)
+      expect(result.warnings.length).toBeGreaterThan(0);
+      expect(result.warnings.some((warning) => warning.rule === 'unclosed-style-tag')).toBe(true);
+      // isValid can be true if only warnings exist (warnings don't block)
+      expect(typeof result.isValid).toBe('boolean');
     });
 
     it('handles multiple unclosed style tags', () => {
@@ -964,8 +1011,10 @@ line4`;
       `;
       const result = extractAndValidateCSS(html);
 
-      expect(result.isValid).toBe(false);
-      expect(result.errors.length).toBeGreaterThan(0);
+      // CSS validation issues are WARNINGS (not blocking errors)
+      expect(result.warnings.length).toBeGreaterThan(0);
+      // isValid can be true if only warnings exist (warnings don't block)
+      expect(typeof result.isValid).toBe('boolean');
     });
   });
 
@@ -1017,10 +1066,10 @@ line4`;
         '<table><tr><td>Table content</td></tr></table>',
         '<form><input type="text"><button>Submit</button></form>',
         '<ul><li>List item 1</li><li>List item 2</li></ul>',
-        '<article><header><h1>Article</h1></header><p>Content</p></article>'
+        '<article><header><h1>Article</h1></header><p>Content</p></article>',
       ];
 
-      testCases.forEach(html => {
+      testCases.forEach((html) => {
         const result = validateHTML(html);
         expect(result).toBeDefined();
         expect(typeof result.isValid).toBe('boolean');
@@ -1039,4 +1088,4 @@ line4`;
       expect(typeof inappResult.isValid).toBe('boolean');
     });
   });
-});
+});

package/v2Components/HtmlEditor/utils/__tests__/validationAdapter.test.js

@@ -238,3 +238,137 @@ describe('getValidationSummary', () => {
   });
 });
 
+describe('validationAdapter error handling', () => {
+  describe('transformValidationToErrorInfo error handling', () => {
+    it('handles validation without getAllIssues method (line 33-36)', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const validation = {
+        isValidating: false,
+        // Missing getAllIssues method
+      };
+
+      const result = transformValidationToErrorInfo(validation);
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[validationAdapter] validation.getAllIssues is not a function'),
+        validation
+      );
+      expect(result).toEqual({
+        errorMessages: {
+          LIQUID_ERROR_MSG: [],
+          STANDARD_ERROR_MSG: [],
+        },
+      });
+
+      consoleSpy.mockRestore();
+    });
+
+    it('handles getAllIssues returning non-array (line 40-43)', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const validation = {
+        isValidating: false,
+        getAllIssues: jest.fn(() => 'not an array'), // Returns string instead of array
+      };
+
+      const result = transformValidationToErrorInfo(validation);
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[validationAdapter] validation.getAllIssues() did not return an array'),
+        'not an array'
+      );
+      expect(result).toEqual({
+        errorMessages: {
+          LIQUID_ERROR_MSG: [],
+          STANDARD_ERROR_MSG: [],
+        },
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('hasValidationErrors error handling', () => {
+    it('handles validation without getAllIssues method (line 106-110)', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const validation = {
+        isValidating: false,
+        // Missing getAllIssues method
+      };
+
+      const result = hasValidationErrors(validation);
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[validationAdapter] validation.getAllIssues is not a function'),
+        validation
+      );
+      expect(result).toBe(false);
+
+      consoleSpy.mockRestore();
+    });
+
+    it('handles getAllIssues returning non-array (line 112-116)', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const validation = {
+        isValidating: false,
+        getAllIssues: jest.fn(() => null), // Returns null instead of array
+      };
+
+      const result = hasValidationErrors(validation);
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[validationAdapter] validation.getAllIssues() did not return an array'),
+        null
+      );
+      expect(result).toBe(false);
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('getValidationSummary error handling', () => {
+    it('handles validation without getAllIssues method (line 131-135)', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const validation = {
+        isValidating: false,
+        // Missing getAllIssues method
+      };
+
+      const result = getValidationSummary(validation);
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[validationAdapter] validation.getAllIssues is not a function'),
+        validation
+      );
+      expect(result).toEqual({
+        totalErrors: 0,
+        totalWarnings: 0,
+        hasLiquidErrors: false,
+      });
+
+      consoleSpy.mockRestore();
+    });
+
+    it('handles getAllIssues returning non-array (line 138-141)', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      const validation = {
+        isValidating: false,
+        getAllIssues: jest.fn(() => ({})), // Returns object instead of array
+      };
+
+      const result = getValidationSummary(validation);
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[validationAdapter] validation.getAllIssues() did not return an array'),
+        {}
+      );
+      expect(result).toEqual({
+        totalErrors: 0,
+        totalWarnings: 0,
+        hasLiquidErrors: false,
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+});
+