import { escapeCssClassName, escapeValue } from '../escapeUtil';

describe('escapeValue', () => {
  test('should escape special characters such as #', () => {
    expect(escapeValue('color-0-#000000')).toBe('color-0-\\#000000');
  });

  test('should escape special characters such as :', () => {
    expect(escapeValue(':r0:-listbox')).toBe('\\:r0\\:-listbox');
  });

  test('should not escape value without special character', () => {
    expect(escapeValue('abc')).toBe('abc');
  });

  test('should return consistent results for cached values', () => {
    // Call twice to ensure cache hit returns correct value
    const first = escapeValue('test:value#1');
    const second = escapeValue('test:value#1');
    expect(first).toBe(second);
    expect(first).toBe('test\\:value\\#1');
  });

  test('should handle many unique values without memory issues', () => {
    // This tests the LRU cache eviction - we call with more unique values
    // than the cache size to ensure old entries are evicted
    for (let i = 0; i < 1100; i++) {
      const result = escapeValue(`value-${i}:test`);
      expect(result).toBe(`value-${i}\\:test`);
    }
    // Verify that recent values still work correctly
    expect(escapeValue('value-1099:test')).toBe('value-1099\\:test');
  });
});

describe('escapeCssClassName', () => {
  test('should escape Tailwind-style class names with colons', () => {
    expect(escapeCssClassName('hover:bg-blue-500')).toBe('hover\\:bg-blue-500');
  });

  test('should escape class names with dots', () => {
    expect(escapeCssClassName('text-1.5')).toBe('text-1\\.5');
  });

  test('should escape class names with brackets', () => {
    expect(escapeCssClassName('w-[100px]')).toBe('w-\\[100px\\]');
  });

  test('should escape class names with slashes', () => {
    expect(escapeCssClassName('w-1/2')).toBe('w-1\\/2');
  });

  test('should not escape simple class names', () => {
    expect(escapeCssClassName('my-class')).toBe('my-class');
  });

  test('should escape multiple special characters', () => {
    expect(escapeCssClassName('hover:focus:bg-[#fff]')).toBe('hover\\:focus\\:bg-\\[\\#fff\\]');
  });
});