@capillarytech/creatives-library 8.0.250-alpha.2 → 8.0.251

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

@@ -1,795 +0,0 @@
-/**
- * useValidation Hook Tests - API Validation Errors Coverage
- *
- * Additional tests to cover API validation errors and other uncovered lines
- */
-
-import React from 'react';
-import { render, screen, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { useValidation } from '../useValidation';
-
-// Mock validation utilities
-jest.mock('../../utils/htmlValidator', () => ({
-  validateHTML: jest.fn((content, variant, formatMessage) => ({
-    isValid: true,
-    errors: [],
-    warnings: [],
-    info: [],
-  })),
-  extractAndValidateCSS: jest.fn((content, formatMessage) => ({
-    isValid: true,
-    errors: [],
-    warnings: [],
-    info: [],
-  })),
-}));
-
-jest.mock('../../utils/contentSanitizer', () => ({
-  sanitizeHTML: jest.fn((content, variant, level, formatMessage) => ({
-    sanitized: content,
-    warnings: [],
-  })),
-  isContentSafe: jest.fn((content) => true),
-  findUnsafeContent: jest.fn((content) => []),
-}));
-
-// Test wrapper component
-const TestComponent = ({ content, variant, options, onStateChange }) => {
-  const validationState = useValidation(content, variant, options);
-
-  React.useEffect(() => {
-    if (onStateChange) {
-      onStateChange(validationState);
-    }
-  });
-
-  return (
-    <div>
-      <div data-testid="is-validating">{String(validationState.isValidating)}</div>
-      <div data-testid="is-valid">{String(validationState.isValid)}</div>
-      <div data-testid="is-secure">{String(validationState.isSecure)}</div>
-      <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="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>
-      <div data-testid="liquid-errors-count">
-        {validationState.getAllIssues().filter(issue => issue.source === 'liquid-validator').length}
-      </div>
-      <div data-testid="standard-errors-count">
-        {validationState.getAllIssues().filter(issue => issue.source === 'api-validator').length}
-      </div>
-
-      <button onClick={() => validationState.forceValidation()} data-testid="force-validate">
-        Force Validate
-      </button>
-      <button onClick={() => validationState.clearValidation()} data-testid="clear">
-        Clear
-      </button>
-    </div>
-  );
-};
-
-describe('useValidation - API Validation Errors', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
-  });
-
-  describe('API Validation Errors Integration', () => {
-    it('includes liquid API errors in getAllIssues', async () => {
-      const apiValidationErrors = {
-        liquidErrors: ['Liquid error on line 5', 'Another liquid error'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // API errors should be included in getAllIssues
-      const liquidCount = parseInt(screen.getByTestId('liquid-errors-count').textContent, 10);
-      const allCount = parseInt(screen.getByTestId('all-issues-count').textContent, 10);
-      expect(liquidCount).toBeGreaterThanOrEqual(2);
-      expect(allCount).toBeGreaterThanOrEqual(2);
-    });
-
-    it('includes standard API errors in getAllIssues', async () => {
-      const apiValidationErrors = {
-        liquidErrors: [],
-        standardErrors: ['Standard error on line 3', 'Another standard error'],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // API errors should be included in getAllIssues
-      const standardCount = parseInt(screen.getByTestId('standard-errors-count').textContent, 10);
-      const allCount = parseInt(screen.getByTestId('all-issues-count').textContent, 10);
-      expect(standardCount).toBeGreaterThanOrEqual(2);
-      expect(allCount).toBeGreaterThanOrEqual(2);
-    });
-
-    it('includes both liquid and standard API errors', async () => {
-      const apiValidationErrors = {
-        liquidErrors: ['Liquid error'],
-        standardErrors: ['Standard error'],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // API errors should be included in getAllIssues
-      const liquidCount = parseInt(screen.getByTestId('liquid-errors-count').textContent, 10);
-      const standardCount = parseInt(screen.getByTestId('standard-errors-count').textContent, 10);
-      const allCount = parseInt(screen.getByTestId('all-issues-count').textContent, 10);
-      expect(liquidCount).toBeGreaterThanOrEqual(1);
-      expect(standardCount).toBeGreaterThanOrEqual(1);
-      expect(allCount).toBeGreaterThanOrEqual(2);
-    });
-
-    it('extracts line numbers from API error messages', async () => {
-      const apiValidationErrors = {
-        liquidErrors: ['Error at line 10: Invalid syntax'],
-        standardErrors: ['Error at line 5: Missing tag'],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      const allIssues = screen.getByTestId('all-issues-count');
-      expect(allIssues).toBeInTheDocument();
-    });
-
-    it('handles API errors with no line numbers', async () => {
-      const apiValidationErrors = {
-        liquidErrors: ['General liquid error'],
-        standardErrors: ['General standard error'],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // Should include at least the 2 API errors
-      const allCount = parseInt(screen.getByTestId('all-issues-count').textContent, 10);
-      expect(allCount).toBeGreaterThanOrEqual(2);
-    });
-
-    it('sets correct source for liquid API errors', async () => {
-      const apiValidationErrors = {
-        liquidErrors: ['Liquid error'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // Liquid errors should have source 'liquid-validator'
-      expect(screen.getByTestId('liquid-errors-count')).toHaveTextContent('1');
-    });
-
-    it('sets correct source for standard API errors', async () => {
-      const apiValidationErrors = {
-        liquidErrors: [],
-        standardErrors: ['Standard error'],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // Standard errors should have source 'api-validator'
-      expect(screen.getByTestId('standard-errors-count')).toHaveTextContent('1');
-    });
-  });
-
-  describe('API Errors with hasErrors', () => {
-    it('sets hasErrors to true when API errors exist', async () => {
-      const apiValidationErrors = {
-        liquidErrors: ['Liquid error'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // hasErrors should be true when API errors exist
-      expect(screen.getByTestId('has-errors')).toHaveTextContent('true');
-    });
-
-    it('sets hasErrors to false when no API errors and no validation errors', async () => {
-      const apiValidationErrors = {
-        liquidErrors: [],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // hasErrors should be false when no API errors and no validation errors
-      // Note: This might be true if validation finds errors, so we check the condition
-      const hasErrors = screen.getByTestId('has-errors').textContent === 'true';
-      const allIssuesCount = parseInt(screen.getByTestId('all-issues-count').textContent, 10);
-      // If there are no issues, hasErrors should be false
-      if (allIssuesCount === 0) {
-        expect(screen.getByTestId('has-errors')).toHaveTextContent('false');
-      }
-    });
-  });
-
-  describe('API Errors with isClean', () => {
-    it('returns false when API errors exist', async () => {
-      const apiValidationErrors = {
-        liquidErrors: ['Liquid error'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // isClean should be false when API errors exist
-      expect(screen.getByTestId('is-clean')).toHaveTextContent('false');
-    });
-
-    it('returns true when no API errors and no other issues', async () => {
-      const apiValidationErrors = {
-        liquidErrors: [],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // isClean should be true when no API errors and no validation issues
-      // Note: This might be false if validation finds issues, so we check the condition
-      const allIssuesCount = parseInt(screen.getByTestId('all-issues-count').textContent, 10);
-      if (allIssuesCount === 0) {
-        expect(screen.getByTestId('is-clean')).toHaveTextContent('true');
-      }
-    });
-  });
-
-  describe('API Errors Edge Cases', () => {
-    it('handles null apiValidationErrors', async () => {
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors: null }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // Should not include API errors when null
-      const liquidCount = parseInt(screen.getByTestId('liquid-errors-count').textContent, 10);
-      const standardCount = parseInt(screen.getByTestId('standard-errors-count').textContent, 10);
-      expect(liquidCount).toBe(0);
-      expect(standardCount).toBe(0);
-    });
-
-    it('handles undefined apiValidationErrors', async () => {
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors: undefined }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // Should not include API errors when undefined
-      const liquidCount = parseInt(screen.getByTestId('liquid-errors-count').textContent, 10);
-      const standardCount = parseInt(screen.getByTestId('standard-errors-count').textContent, 10);
-      expect(liquidCount).toBe(0);
-      expect(standardCount).toBe(0);
-    });
-
-    it('handles empty liquidErrors array', async () => {
-      const apiValidationErrors = {
-        liquidErrors: [],
-        standardErrors: ['Standard error'],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(screen.getByTestId('liquid-errors-count')).toHaveTextContent('0');
-      expect(screen.getByTestId('standard-errors-count')).toHaveTextContent('1');
-    });
-
-    it('handles empty standardErrors array', async () => {
-      const apiValidationErrors = {
-        liquidErrors: ['Liquid error'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(screen.getByTestId('liquid-errors-count')).toHaveTextContent('1');
-      expect(screen.getByTestId('standard-errors-count')).toHaveTextContent('0');
-    });
-
-    it('handles missing liquidErrors property', async () => {
-      const apiValidationErrors = {
-        standardErrors: ['Standard error'],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(screen.getByTestId('liquid-errors-count')).toHaveTextContent('0');
-      expect(screen.getByTestId('standard-errors-count')).toHaveTextContent('1');
-    });
-
-    it('handles missing standardErrors property', async () => {
-      const apiValidationErrors = {
-        liquidErrors: ['Liquid error'],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(screen.getByTestId('liquid-errors-count')).toHaveTextContent('1');
-      expect(screen.getByTestId('standard-errors-count')).toHaveTextContent('0');
-    });
-  });
-
-  describe('Line Number Extraction', () => {
-    it('extracts line number from error message with "Line X" pattern', async () => {
-      const apiValidationErrors = {
-        liquidErrors: ['Error message Line 15'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // Line number should be extracted
-      expect(screen.getByTestId('liquid-errors-count')).toHaveTextContent('1');
-    });
-
-    it('extracts line number from error message with "line X" pattern', async () => {
-      const apiValidationErrors = {
-        liquidErrors: ['Error message line 20'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(screen.getByTestId('liquid-errors-count')).toHaveTextContent('1');
-    });
-
-    it('handles error messages without line numbers', async () => {
-      const apiValidationErrors = {
-        liquidErrors: ['General error message'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content="<p>Test</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(screen.getByTestId('liquid-errors-count')).toHaveTextContent('1');
-    });
-  });
-
-  describe('API Errors Sorting', () => {
-    it('sorts API errors with other validation issues', async () => {
-      const { validateHTML } = require('../../utils/htmlValidator');
-      validateHTML.mockReturnValueOnce({
-        isValid: false,
-        errors: [{
-          type: 'error',
-          message: 'HTML error',
-          line: 1,
-          column: 1,
-          rule: 'html-error',
-          severity: 'error',
-          source: 'htmlhint',
-        }],
-        warnings: [],
-        info: [],
-      });
-
-      const apiValidationErrors = {
-        liquidErrors: ['Liquid error'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content="<p>error</p>"
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      await act(async () => {
-        jest.advanceTimersByTime(500);
-        await Promise.resolve();
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      // Should have both HTML error and API error
-      expect(screen.getByTestId('all-issues-count')).toHaveTextContent('2');
-    });
-  });
-
-  describe('getLineNumberForApiError helper functions', () => {
-    it('should extract line number from error message with "line X" pattern', () => {
-      const content = '<p>Line 1</p>\n<p>Line 2</p>\n<p>Line 3</p>';
-      const apiValidationErrors = {
-        liquidErrors: ['Error at line 2'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content={content}
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      // The getLineNumberForApiError should extract line 2 from the error message
-      // This is tested indirectly through the error processing
-      expect(screen.getByTestId('all-issues-count')).toBeInTheDocument();
-    });
-
-    it('should extract line number from error message with "Line: X" pattern', () => {
-      const content = '<p>Line 1</p>\n<p>Line 2</p>';
-      const apiValidationErrors = {
-        liquidErrors: ['Error at Line: 2'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content={content}
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      expect(screen.getByTestId('all-issues-count')).toBeInTheDocument();
-    });
-
-    it('should find tag in content using {{ tagName }} pattern', () => {
-      const content = '<p>Line 1</p>\n<p>{{ customer.name }}</p>\n<p>Line 3</p>';
-      const apiValidationErrors = {
-        liquidErrors: ['Unsupported tags: customer.name'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content={content}
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      // Should find the tag and extract line number
-      expect(screen.getByTestId('all-issues-count')).toBeInTheDocument();
-    });
-
-    it('should find tag in content using {% %} pattern', () => {
-      const content = '<p>Line 1</p>\n{% assign x = customer.name %}\n<p>Line 3</p>';
-      const apiValidationErrors = {
-        liquidErrors: ['Unsupported tags: customer.name'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content={content}
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      // Should find the tag in liquid syntax
-      expect(screen.getByTestId('all-issues-count')).toBeInTheDocument();
-    });
-
-    it('should handle tag name with special characters', () => {
-      const content = '<p>{{ customer.name.first }}</p>';
-      const apiValidationErrors = {
-        liquidErrors: ['Unsupported tags: customer.name.first'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content={content}
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      // Should escape special characters in tag name
-      expect(screen.getByTestId('all-issues-count')).toBeInTheDocument();
-    });
-
-    it('should return null when tag is not found in content', () => {
-      const content = '<p>No tags here</p>';
-      const apiValidationErrors = {
-        liquidErrors: ['Unsupported tags: missing.tag'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content={content}
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      // Should still process the error even if tag is not found
-      expect(screen.getByTestId('all-issues-count')).toBeInTheDocument();
-    });
-
-    it('should handle getLineNumberFromPosition edge cases', () => {
-      // Test that helper functions handle edge cases gracefully
-      // These are tested indirectly through error processing
-      const content = '<p>Content</p>';
-      const apiValidationErrors = {
-        liquidErrors: ['Error message'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content={content}
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      // Component should render and process errors without crashing
-      expect(screen.getByTestId('all-issues-count')).toBeInTheDocument();
-    });
-
-    it('should handle findLineNumberForTag with null content', () => {
-      const apiValidationErrors = {
-        liquidErrors: ['Unsupported tags: test.tag'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content=""
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      // Should handle gracefully when content is empty
-      expect(screen.getByTestId('all-issues-count')).toBeInTheDocument();
-    });
-
-    it('should handle findLineNumberForTag with null tagName', () => {
-      const content = '<p>Content</p>';
-      const apiValidationErrors = {
-        liquidErrors: ['Error without tag name'],
-        standardErrors: [],
-      };
-
-      render(
-        <TestComponent
-          content={content}
-          options={{ apiValidationErrors }}
-        />
-      );
-
-      // Should handle gracefully when tag name cannot be extracted
-      expect(screen.getByTestId('all-issues-count')).toBeInTheDocument();
-    });
-  });
-});