@capillarytech/creatives-library 8.0.271 → 8.0.272

package/v2Components/HtmlEditor/hooks/__tests__/useValidation.test.js

@@ -5,7 +5,9 @@
  */
 
 import React from 'react';
-import { render, screen, act, waitFor } from '@testing-library/react';
+import {
+  render, screen, act, waitFor,
+} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { useValidation } from '../useValidation';
 
@@ -21,8 +23,8 @@ jest.mock('../../utils/htmlValidator', () => ({
         column: 1,
         rule: 'html-error',
         severity: 'error',
-        source: 'htmlhint'
-      }
+        source: 'htmlhint',
+      },
     ] : [],
     warnings: content.includes('warning') ? [
       {
@@ -32,10 +34,10 @@ jest.mock('../../utils/htmlValidator', () => ({
         column: 1,
         rule: 'html-warning',
         severity: 'warning',
-        source: 'htmlhint'
-      }
+        source: 'htmlhint',
+      },
     ] : [],
-    info: []
+    info: [],
   })),
   extractAndValidateCSS: jest.fn((content, formatMessage) => ({
     isValid: !content.includes('css-error'),
@@ -47,27 +49,27 @@ jest.mock('../../utils/htmlValidator', () => ({
         column: 1,
         rule: 'css-error',
         severity: 'error',
-        source: 'css-validator'
-      }
+        source: 'css-validator',
+      },
     ] : [],
     warnings: [],
-    info: []
-  }))
+    info: [],
+  })),
 }));
 
 jest.mock('../../utils/contentSanitizer', () => ({
   sanitizeHTML: jest.fn((content, variant, level, formatMessage) => ({
     sanitized: content,
-    warnings: content.includes('unsafe') ? ['Unsafe content detected'] : []
+    warnings: content.includes('unsafe') ? ['Unsafe content detected'] : [],
   })),
   isContentSafe: jest.fn((content) => !content.includes('unsafe')),
-  findUnsafeContent: jest.fn((content) =>
-    content.includes('unsafe') ? [{ type: 'xss', location: 'script tag' }] : []
-  )
+  findUnsafeContent: jest.fn((content) => content.includes('unsafe') ? [{ type: 'xss', location: 'script tag' }] : []),
 }));
 
 // Test wrapper component
-const TestComponent = ({ content, variant, options, onStateChange }) => {
+const TestComponent = ({
+  content, variant, options, onStateChange,
+}) => {
   const validationState = useValidation(content, variant, options);
 
   React.useEffect(() => {
@@ -84,6 +86,7 @@ const TestComponent = ({ content, variant, options, onStateChange }) => {
       <div data-testid="is-clean">{String(validationState.isClean())}</div>
       <div data-testid="has-errors">{String(validationState.hasErrors)}</div>
       <div data-testid="has-warnings">{String(validationState.hasWarnings)}</div>
+      <div data-testid="has-blocking-errors">{String(validationState.hasBlockingErrors)}</div>
       <div data-testid="total-errors">{validationState.summary.totalErrors}</div>
       <div data-testid="total-warnings">{validationState.summary.totalWarnings}</div>
       <div data-testid="all-issues-count">{validationState.getAllIssues().length}</div>
@@ -523,6 +526,60 @@ describe('useValidation', () => {
     });
   });
 
+  describe('API validation errors and line detection', () => {
+    it('maps api errors into issues with line from message', async () => {
+      let validationState;
+      const apiValidationErrors = {
+        liquidErrors: ['Line 5: Liquid error'],
+        standardErrors: ['line: 3 Standard error'],
+      };
+
+      render(
+        <TestComponent
+          content="<div>\n{{ tag }}\n</div>"
+          options={{ apiValidationErrors }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      const issues = validationState.getAllIssues();
+      const liquidIssue = issues.find((issue) => issue.source === 'liquid-validator');
+      const standardIssue = issues.find((issue) => issue.source === 'api-validator');
+
+      expect(liquidIssue.line).toBe(5);
+      expect(standardIssue.line).toBe(3);
+    });
+
+    it('extracts line number from tag lookup', async () => {
+      let validationState;
+      const apiValidationErrors = {
+        liquidErrors: [],
+        standardErrors: ['Unsupported tags: missing_tag'],
+      };
+
+      render(
+        <TestComponent
+          content="{{ missing_tag }}\n<div></div>"
+          options={{ apiValidationErrors }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      const issues = validationState.getAllIssues();
+      const standardIssue = issues.find((issue) => issue.source === 'api-validator');
+
+      expect(standardIssue.line).toBe(1);
+    });
+  });
+
   // Helper Methods tests removed due to async timing issues with fake timers and React state updates
   // The functionality is verified through integration tests and other passing tests
 
@@ -586,5 +643,283 @@ describe('useValidation', () => {
     // hasWarnings and hasSecurityIssues tests removed due to async timing issues
     // The functionality is verified through integration tests and the hasErrors test above
   });
-});
 
+  describe('Blocking errors', () => {
+    it('treats protocol security issues as blocking errors', async () => {
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      let validationState;
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: true,
+        errors: [],
+        warnings: [],
+        info: [],
+      }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({
+        isValid: true,
+        errors: [],
+        warnings: [],
+        info: [],
+      }));
+      isContentSafe.mockImplementationOnce(() => false);
+      findUnsafeContent.mockImplementationOnce(() => [{ type: 'JavaScript Protocol' }]);
+
+      render(
+        <TestComponent
+          content="<a href='javascript:alert(1)'>x</a>"
+          options={{ enableRealTime: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      await act(async () => {
+        validationState.forceValidation();
+        await Promise.resolve();
+      });
+
+      await waitFor(() => {
+        expect(validationState.getAllIssues().length).toBe(1);
+      });
+
+      const [issue] = validationState.getAllIssues();
+      expect(issue.rule).toBe('sanitizer.dangerousProtocolDetected');
+      expect(issue.severity).toBe('error');
+      expect(issue.source).toBe('security');
+    });
+  });
+
+  describe('Sanitization warnings mapping (lines 368-378)', () => {
+    it('maps sanitization warnings to issues with correct severity for blocking rules', async () => {
+      const { sanitizeHTML } = require('../../utils/contentSanitizer');
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      let validationState;
+
+      // Mock sanitizeHTML to return sanitization warnings with blocking rule
+      sanitizeHTML.mockImplementationOnce(() => ({
+        sanitized: '<p>Clean</p>',
+        warnings: [
+          {
+            message: 'Sanitization warning for blocking rule',
+            rule: 'sanitizer.dangerousProtocolDetected', // This is a blocking rule
+            line: 5,
+            column: 10,
+            source: 'sanitizer',
+          },
+        ],
+      }));
+
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: true,
+        errors: [],
+        warnings: [],
+        info: [],
+      }));
+
+      extractAndValidateCSS.mockImplementationOnce(() => ({
+        isValid: true,
+        errors: [],
+        warnings: [],
+        info: [],
+      }));
+
+      render(
+        <TestComponent
+          content="<p>Test content</p>"
+          options={{ enableRealTime: false, enableSanitization: true }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      await act(async () => {
+        validationState.forceValidation();
+        await Promise.resolve();
+      });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        // Sanitization warnings should be mapped to issues
+        const sanitizerIssue = issues.find((i) => i.source === 'sanitizer');
+        if (sanitizerIssue) {
+          expect(sanitizerIssue.severity).toBe('error'); // Blocking rule should be error
+          expect(sanitizerIssue.line).toBe(5);
+          expect(sanitizerIssue.column).toBe(10);
+        }
+      });
+    });
+
+    it('maps sanitization warnings with non-blocking rules as warnings', async () => {
+      const { sanitizeHTML } = require('../../utils/contentSanitizer');
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      let validationState;
+
+      // Mock sanitizeHTML to return sanitization warnings with non-blocking rule
+      sanitizeHTML.mockImplementationOnce(() => ({
+        sanitized: '<p>Clean</p>',
+        warnings: [
+          {
+            message: 'Non-blocking sanitization warning',
+            rule: 'some.non.blocking.rule', // Not a blocking rule
+            line: 3,
+            column: 1,
+            source: 'sanitizer',
+          },
+        ],
+      }));
+
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: true,
+        errors: [],
+        warnings: [],
+        info: [],
+      }));
+
+      extractAndValidateCSS.mockImplementationOnce(() => ({
+        isValid: true,
+        errors: [],
+        warnings: [],
+        info: [],
+      }));
+
+      render(
+        <TestComponent
+          content="<p>Test content</p>"
+          options={{ enableRealTime: false, enableSanitization: true }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      await act(async () => {
+        validationState.forceValidation();
+        await Promise.resolve();
+      });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        const sanitizerIssue = issues.find((i) => i.source === 'sanitizer');
+        if (sanitizerIssue) {
+          expect(sanitizerIssue.severity).toBe('warning'); // Non-blocking should be warning
+        }
+      });
+    });
+
+    it('handles sanitization warnings with missing optional fields (line 373-376)', async () => {
+      const { sanitizeHTML } = require('../../utils/contentSanitizer');
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      let validationState;
+
+      // Mock sanitizeHTML to return warnings without optional fields
+      sanitizeHTML.mockImplementationOnce(() => ({
+        sanitized: '<p>Clean</p>',
+        warnings: [
+          {
+            message: 'Warning without line/column/rule/source',
+            // Missing: rule, line, column, source
+          },
+        ],
+      }));
+
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: true,
+        errors: [],
+        warnings: [],
+        info: [],
+      }));
+
+      extractAndValidateCSS.mockImplementationOnce(() => ({
+        isValid: true,
+        errors: [],
+        warnings: [],
+        info: [],
+      }));
+
+      render(
+        <TestComponent
+          content="<p>Test content</p>"
+          options={{ enableRealTime: false, enableSanitization: true }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      await act(async () => {
+        validationState.forceValidation();
+        await Promise.resolve();
+      });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        const sanitizerIssue = issues.find((i) => i.source === 'sanitizer');
+        if (sanitizerIssue) {
+          // Should use defaults for missing fields
+          expect(sanitizerIssue.rule).toBe('sanitizer.unknown'); // Default rule
+          expect(sanitizerIssue.line).toBe(1); // Default line
+          expect(sanitizerIssue.column).toBe(1); // Default column
+          expect(sanitizerIssue.source).toBe('sanitizer'); // Default source
+        }
+      });
+    });
+
+    it('handles empty sanitization warnings array', async () => {
+      const { sanitizeHTML } = require('../../utils/contentSanitizer');
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      let validationState;
+
+      // Mock sanitizeHTML to return empty warnings array
+      sanitizeHTML.mockImplementationOnce(() => ({
+        sanitized: '<p>Clean</p>',
+        warnings: [],
+      }));
+
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: true,
+        errors: [],
+        warnings: [],
+        info: [],
+      }));
+
+      extractAndValidateCSS.mockImplementationOnce(() => ({
+        isValid: true,
+        errors: [],
+        warnings: [],
+        info: [],
+      }));
+
+      render(
+        <TestComponent
+          content="<p>Test content</p>"
+          options={{ enableRealTime: false, enableSanitization: true }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => {
+        expect(validationState).toBeDefined();
+      });
+
+      await act(async () => {
+        validationState.forceValidation();
+        await Promise.resolve();
+      });
+
+      await waitFor(() => {
+        // Should handle empty sanitization warnings gracefully
+        expect(validationState).toBeDefined();
+      });
+    });
+  });
+});

package/v2Components/HtmlEditor/hooks/useEditorContent.js

@@ -69,7 +69,10 @@ export const useEditorContent = (
   } = options;
 
   // Unified content state
-  const [content, setContent] = useState(initialContent || DEFAULT_CONTENT);
+  // Use DEFAULT_CONTENT only if initialContent is null or undefined (not empty string)
+  // This allows explicitly passing empty string for empty content
+  const initialContentValue = initialContent == null ? DEFAULT_CONTENT : initialContent;
+  const [content, setContent] = useState(initialContentValue);
   const [isDirty, setIsDirty] = useState(false);
   const [lastSaved, setLastSaved] = useState(null);
   const [isAutoSaveEnabled, setIsAutoSaveEnabled] = useState(autoSave);
@@ -79,7 +82,7 @@ export const useEditorContent = (
   const validationDebounceRef = useRef(null);
   const autoSaveRef = useRef(null);
   const validationCallbackRef = useRef(null);
-  const lastContentRef = useRef(initialContent || DEFAULT_CONTENT);
+  const lastContentRef = useRef(initialContentValue);
 
   // Smart debouncing hooks
   const debouncedOnChange = useSmartDebounce(onChange || (() => {}), PERFORMANCE.PREVIEW_UPDATE_DEBOUNCE);