@capillarytech/creatives-library 8.0.255-alpha.1 → 8.0.255

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.255-alpha.1",
+  "version": "8.0.255",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/HtmlEditor/__tests__/HTMLEditor.test.js

@@ -2878,6 +2878,89 @@ describe('HTMLEditor', () => {
         expect(ref.current).toBeTruthy();
       });
     });
+    it('computes issue counts and validation state from ref', async () => {
+      const ref = React.createRef();
+      const WrappedHTMLEditor = HTMLEditor.WrappedComponent || HTMLEditor;
+      const intlProvider = new IntlProvider({ locale: 'en', messages: {} }, {});
+      const { intl } = intlProvider.getChildContext();
+
+      mockUseValidationImpl.mockReturnValue({
+        isValidating: false,
+        hasBlockingErrors: true,
+        getAllIssues: () => [
+          { source: 'liquid-validator', rule: 'liquid-syntax', message: 'Liquid issue' },
+          { source: 'htmlhint', rule: 'tag-pair', message: 'tag must be paired' },
+          { source: 'htmlhint', rule: 'html-error', message: 'HTML error' },
+        ],
+        isClean: () => false,
+        summary: { totalErrors: 2, totalWarnings: 0 },
+      });
+
+      render(
+        <TestWrapper>
+          <WrappedHTMLEditor {...defaultProps} intl={intl} ref={ref} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      });
+
+      const issueCounts = ref.current.getIssueCounts();
+      expect(issueCounts).toEqual({
+        html: 1,
+        label: 1,
+        liquid: 1,
+        total: 3,
+      });
+
+      const validationState = ref.current.getValidationState();
+      expect(validationState.hasErrors).toBe(true);
+      expect(validationState.issueCounts).toEqual({
+        html: 1,
+        label: 1,
+        liquid: 1,
+        total: 3,
+      });
+    });
+
+    it('returns empty counts when validation is missing getAllIssues', async () => {
+      const ref = React.createRef();
+      const WrappedHTMLEditor = HTMLEditor.WrappedComponent || HTMLEditor;
+      const intlProvider = new IntlProvider({ locale: 'en', messages: {} }, {});
+      const { intl } = intlProvider.getChildContext();
+
+      mockUseValidationImpl.mockReturnValue({
+        isValidating: false,
+        isClean: () => true,
+        summary: { totalErrors: 0, totalWarnings: 0 },
+      });
+
+      render(
+        <TestWrapper>
+          <WrappedHTMLEditor {...defaultProps} intl={intl} ref={ref} />
+        </TestWrapper>
+      );
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      await waitFor(() => {
+        expect(ref.current).toBeTruthy();
+      });
+
+      expect(ref.current.getIssueCounts()).toEqual({
+        html: 0, label: 0, liquid: 0, total: 0,
+      });
+      expect(ref.current.getValidationState().issueCounts).toEqual({
+        html: 0, label: 0, liquid: 0, total: 0,
+      });
+    });
   });
 
   describe('Props coverage (lines 54-84)', () => {

package/v2Components/HtmlEditor/components/CodeEditorPane/_codeEditorPane.scss

@@ -53,7 +53,7 @@
 
   &__validation {
     border-top: 0.0625rem solid $CAP_G04;
-    background: $CAP_G03;
+    background: $CAP_WHITE;
     max-height: 12.5rem;
     overflow-y: auto;
 
@@ -66,7 +66,7 @@
 
   // Add Label button visibility: 50% opacity while typing, 100% on hover
   .code-editor-pane__actions {
-    opacity: 0.5; // 50% transparent while typing
+    opacity: 0.7; // 70% transparent while typing
     pointer-events: auto; // Always clickable
     transition: opacity 0.2s ease;
     

package/v2Components/HtmlEditor/components/ValidationErrorDisplay/_validationErrorDisplay.scss

@@ -13,6 +13,7 @@
   // Ensure proper spacing when used in different contexts
   &:last-child {
     margin-bottom: 0;
+    padding-bottom: 0.25rem;
   }
 
   // Integration with ErrorInfoNote component

package/v2Components/HtmlEditor/components/ValidationTabs/_validationTabs.scss

@@ -7,9 +7,7 @@
 .validation-tabs {
   overflow-y: hidden;
   width: 100%;
-  background-color: $CAP_COLOR_05; // Light pink background
   border-radius: 0.25rem;
-  padding: 1rem 1rem;
   box-sizing: border-box;
 
   &__header {
@@ -24,20 +22,30 @@
     
     // Override CapTab styles for proper spacing
     .cap-tab-v2 {
+      .ant-tabs-bar {
+        padding: 0.5rem 0.5rem;
+        background-color: $CAP_COLOR_05;
+      }
       .ant-tabs-nav {
         margin-bottom: 0;
         
         &::before {
-          border-bottom: none;
+          border-bottom: none; // Remove bottom border
         }
       }
 
       .ant-tabs-tab {
         padding: 0.5rem 0.75rem; // Add horizontal padding for spacing
         margin-right: 0; // Remove margin, use padding instead
+        
         color: $CAP_G03;
         font-size: 0.875rem;
-        font-weight: 500;
+        font-weight: 400;
+        line-height: 1;
+        letter-spacing: 0;
+        background-color: $CAP_COLOR_05;
+        border-radius: 0.25rem;
+        border-bottom: none; // Remove bottom border
         
         & + .ant-tabs-tab {
           margin-left: 1.5rem; // Add space between tabs
@@ -45,7 +53,7 @@
         
         &:hover {
           color: $CAP_COLOR_05;
-          background: transparent;
+          background-color: $CAP_COLOR_05;
         }
 
         &.ant-tabs-tab-active {
@@ -57,8 +65,7 @@
       }
 
       .ant-tabs-ink-bar {
-        background-color: $CAP_COLOR_05;
-        height: 0.125rem;
+        display: none; // Hide the ink bar (bottom border indicator)
       }
 
       .ant-tabs-content-holder {
@@ -81,17 +88,17 @@
   &__actions {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
     flex-shrink: 0;
     padding-top: 0.5rem;
+    background-color: $CAP_COLOR_05;
   }
 
   &__close {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 1.9rem;
+    height: 2.3rem;
     padding: 0;
     background: transparent;
     border: none;
@@ -100,10 +107,10 @@
     color: $CAP_G03;
     transition: all 0.2s ease;
 
-    &:hover {
-      background-color: rgba($CAP_COLOR_05, 0.1);
-      color: $CAP_COLOR_05;
-    }
+    // &:hover {
+    //   background-color: rgba($CAP_COLOR_05, 0.1);
+    //   color: $CAP_COLOR_05;
+    // }
 
     .cap-icon-v2 {
       font-size: 0.875rem;
@@ -113,7 +120,6 @@
   &__content {
     max-height: 15rem; // Limit height for many errors
     overflow-y: auto;
-    padding-right: 0.25rem;
     padding-bottom: 0; // Remove bottom padding completely
 
     // Custom scrollbar
@@ -139,8 +145,8 @@
     display: flex;
     align-items: flex-start;
     gap: 0.5rem;
-    padding: 0.25rem 0; // Reduced from 0.375rem
-    border-bottom: 1px solid rgba($CAP_G06, 0.3);
+    padding: 0.5rem 0.5rem; // Reduced from 0.375rem
+    margin-bottom: 3px;
 
     &:last-child {
       border-bottom: none;
@@ -209,9 +215,8 @@
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    justify-content: center;
-    width: 1.25rem;
-    height: 1.25rem;
+    width: 1.7rem;
+    height: 1.7rem;
     padding: 0;
     background: transparent;
     border: none;
@@ -220,13 +225,8 @@
     color: $CAP_G04;
     transition: all 0.2s ease;
 
-    &:hover {
-      background-color: rgba($CAP_G01, 0.1);
-      color: $CAP_G01;
-    }
-
     .anticon {
-      font-size: 0.75rem;
+      font-size: 1rem; // Increased icon size
     }
   }
 }
@@ -240,6 +240,7 @@
       .ant-tabs-tab {
         margin-right: 1rem;
         font-size: 0.8125rem;
+        background-color: $CAP_COLOR_05;
       }
     }
 

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

@@ -84,6 +84,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 +524,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 +641,53 @@ 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');
+    });
+  });
 });
 

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -41,6 +41,7 @@ const CardContainer = styled.div`
   }
 `;
 
+
 // Mode selection component
 const ModeSelectionUI = ({
   isFullMode,
@@ -77,7 +78,7 @@ const ModeSelectionUI = ({
     </CardContainer>
     <>
       {emailCreateMode === EMAIL_CREATE_MODES.UPLOAD && (
-        <div style={{ marginLeft: '8px' }}>
+        <div>
           <CapUploader onChange={useFileUpload} accept=".zip, .html, .htm" showUploadList={false}>
             {(isFullMode && isTemplateNameEmpty) && (
               <CapError type="error">

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -435,6 +435,16 @@ describe('EmailHTMLEditor', () => {
   });
 
   describe('Component Rendering', () => {
+    it('uses default loading flags when undefined', () => {
+      renderWithIntl({
+        isReadOnly: undefined,
+        fetchingLiquidTags: undefined,
+        createTemplateInProgress: undefined,
+        fetchingCmsData: undefined,
+      });
+
+      expect(screen.getByTestId('html-editor')).toBeInTheDocument();
+    });
     it('renders without crashing', () => {
       renderWithIntl();
       expect(screen.getByTestId('html-editor')).toBeInTheDocument();

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

@@ -1,794 +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(() => ({
-    isValid: true,
-    errors: [],
-    warnings: [],
-    info: [],
-  })),
-  extractAndValidateCSS: jest.fn(() => ({
-    isValid: true,
-    errors: [],
-    warnings: [],
-    info: [],
-  })),
-}));
-
-jest.mock('../../utils/contentSanitizer', () => ({
-  sanitizeHTML: jest.fn((content) => ({
-    sanitized: content,
-    warnings: [],
-  })),
-  isContentSafe: jest.fn(() => true),
-  findUnsafeContent: jest.fn(() => []),
-}));
-
-// 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 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();
-    });
-  });
-});