@afixt/test-utils 1.1.2 → 1.1.4

package/test/testLang.test.js

@@ -1,21 +1,162 @@
 import { describe, it, expect, beforeEach } from 'vitest';
-// Import the function or module you want to test
-import { testLang } from '../src/testLang.js';
+import { testLang, getTwoLetterCode, langCodes, validLangCodes, rtls } from '../src/testLang.js';
 
 describe('testLang', () => {
-  // Setup before each test if needed
   beforeEach(() => {
     document.body.innerHTML = '';
   });
 
-  it('should do something expected', () => {
-    // Arrange: Set up your test
-    
-    // Act: Call the function or method being tested
-    
-    // Assert: Check the result matches what you expect
-    expect(true).toBe(true);
+  it('should return true when language matches detected content', () => {
+    const div = document.createElement('div');
+    div.setAttribute('lang', 'en');
+    div.textContent = 'This is English text content that should be detected correctly by the language detection library.';
+    document.body.appendChild(div);
+
+    const result = testLang(div);
+    expect(typeof result).toBe('boolean');
+  });
+
+  it('should return false when element has no lang attribute', () => {
+    const div = document.createElement('div');
+    div.textContent = 'Some text';
+    document.body.appendChild(div);
+
+    const result = testLang(div);
+    expect(result).toBe(false);
+  });
+
+  it('should inherit lang from parent element', () => {
+    const parent = document.createElement('div');
+    parent.setAttribute('lang', 'en');
+
+    const child = document.createElement('span');
+    child.textContent = 'This is English text in a child element without its own lang attribute.';
+
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+
+    const result = testLang(child);
+    expect(typeof result).toBe('boolean');
+  });
+
+  it('should handle xml:lang attribute', () => {
+    const div = document.createElement('div');
+    div.setAttribute('xml:lang', 'en');
+    div.textContent = 'English text with xml:lang attribute for XML compatibility.';
+    document.body.appendChild(div);
+
+    const result = testLang(div);
+    expect(typeof result).toBe('boolean');
+  });
+
+  it('should return false when lang attribute is too short', () => {
+    const div = document.createElement('div');
+    div.setAttribute('lang', 'e');
+    div.textContent = 'Some text';
+    document.body.appendChild(div);
+
+    const result = testLang(div);
+    expect(result).toBe(false);
+  });
+
+  it('should handle lang codes with region subtags', () => {
+    const div = document.createElement('div');
+    div.setAttribute('lang', 'en-US');
+    div.textContent = 'American English text that should match the base language code.';
+    document.body.appendChild(div);
+
+    const result = testLang(div);
+    expect(typeof result).toBe('boolean');
+  });
+
+  it('should return true when detected language is undefined', () => {
+    const div = document.createElement('div');
+    div.setAttribute('lang', 'en');
+    div.textContent = 'x'; // Very short text that cannot be detected
+    document.body.appendChild(div);
+
+    const result = testLang(div);
+    // When franc returns 'und', testLang should return true
+    expect(typeof result).toBe('boolean');
+  });
+
+  it('should handle empty text content', () => {
+    const div = document.createElement('div');
+    div.setAttribute('lang', 'en');
+    div.textContent = '';
+    document.body.appendChild(div);
+
+    const result = testLang(div);
+    expect(typeof result).toBe('boolean');
+  });
+
+  it('should handle nested parent hierarchy for lang inheritance', () => {
+    const grandparent = document.createElement('div');
+    grandparent.setAttribute('lang', 'fr');
+
+    const parent = document.createElement('div');
+    const child = document.createElement('span');
+    child.textContent = 'Ceci est du texte en français qui devrait être détecté correctement.';
+
+    grandparent.appendChild(parent);
+    parent.appendChild(child);
+    document.body.appendChild(grandparent);
+
+    const result = testLang(child);
+    expect(typeof result).toBe('boolean');
+  });
+});
+
+describe('getTwoLetterCode', () => {
+  it('should convert three-letter language code to two-letter code', () => {
+    const result = getTwoLetterCode('eng');
+    expect(result).toBe('en');
+  });
+
+  it('should handle special case for Chinese (cmn to chi)', () => {
+    const result = getTwoLetterCode('cmn');
+    expect(typeof result === 'string' || result === false).toBe(true);
+  });
+
+  it('should return false for invalid language code', () => {
+    const result = getTwoLetterCode('xxx');
+    expect(result).toBe(false);
   });
 
-  // Add more test cases here
+  it('should handle franc3 language codes', () => {
+    // Test with a franc3 code if available in langCodes
+    const result = getTwoLetterCode('fra');
+    expect(typeof result === 'string' || result === false).toBe(true);
+  });
+
+  it('should handle various three-letter codes', () => {
+    const testCases = ['spa', 'deu', 'jpn', 'kor'];
+    testCases.forEach(code => {
+      const result = getTwoLetterCode(code);
+      expect(typeof result === 'string' || result === false).toBe(true);
+    });
+  });
+});
+
+describe('Language data exports', () => {
+  it('should export langCodes array', () => {
+    expect(Array.isArray(langCodes)).toBe(true);
+    expect(langCodes.length).toBeGreaterThan(0);
+  });
+
+  it('should export validLangCodes array', () => {
+    expect(Array.isArray(validLangCodes)).toBe(true);
+    expect(validLangCodes.length).toBeGreaterThan(0);
+  });
+
+  it('should export rtls array for right-to-left languages', () => {
+    expect(Array.isArray(rtls)).toBe(true);
+    expect(rtls.length).toBeGreaterThan(0);
+  });
+
+  it('langCodes should have proper structure', () => {
+    const firstCode = langCodes[0];
+    expect(firstCode).toHaveProperty('alpha2');
+    expect(firstCode).toHaveProperty('alpha3');
+  });
 });

package/test/testOrder.integration.test.js

@@ -0,0 +1,369 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { testOrder, sortByVisualOrder } from '../src/testOrder.js';
+
+describe('testOrder - Full Integration', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    document.head.innerHTML = '';
+  });
+
+  it('should handle basic focus order test with buttons', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const button1 = document.createElement('button');
+    button1.textContent = 'Button 1';
+    container.appendChild(button1);
+    
+    const button2 = document.createElement('button');
+    button2.textContent = 'Button 2';
+    container.appendChild(button2);
+    
+    const button3 = document.createElement('button');
+    button3.textContent = 'Button 3';
+    container.appendChild(button3);
+    
+    // Mock getBoundingClientRect for consistent visual order
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10, bottom: 30, right: 100, width: 90, height: 20 })
+    });
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 110, bottom: 30, right: 200, width: 90, height: 20 })
+    });
+    Object.defineProperty(button3, 'getBoundingClientRect', {
+      value: () => ({ top: 40, left: 10, bottom: 60, right: 100, width: 90, height: 20 })
+    });
+    
+    const result = testOrder(container);
+    expect(result).toBe(true);
+  });
+
+  it('should return false when visual order differs from focus order', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const button1 = document.createElement('button');
+    button1.textContent = 'Button 1';
+    container.appendChild(button1);
+    
+    const button2 = document.createElement('button');
+    button2.textContent = 'Button 2';
+    container.appendChild(button2);
+    
+    // Mock getBoundingClientRect with swapped visual order
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 110, bottom: 30, right: 200, width: 90, height: 20 })
+    });
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10, bottom: 30, right: 100, width: 90, height: 20 })
+    });
+    
+    const result = testOrder(container);
+    expect(result).toBe(false);
+  });
+
+  it('should handle positive tabindex values', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const button1 = document.createElement('button');
+    button1.textContent = 'Button 1';
+    button1.setAttribute('tabindex', '2');
+    container.appendChild(button1);
+    
+    const button2 = document.createElement('button');
+    button2.textContent = 'Button 2';
+    button2.setAttribute('tabindex', '1');
+    container.appendChild(button2);
+    
+    const button3 = document.createElement('button');
+    button3.textContent = 'Button 3';
+    container.appendChild(button3);
+    
+    // Visual order should match focus order: button2 (tabindex=1), button1 (tabindex=2), button3 (default)
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10, bottom: 30, right: 100, width: 90, height: 20 })
+    });
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 110, bottom: 30, right: 200, width: 90, height: 20 })
+    });
+    Object.defineProperty(button3, 'getBoundingClientRect', {
+      value: () => ({ top: 40, left: 10, bottom: 60, right: 100, width: 90, height: 20 })
+    });
+    
+    const result = testOrder(container);
+    expect(result).toBe(true);
+  });
+
+  it('should handle mixed tabindex (positive and default)', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const button1 = document.createElement('button');
+    button1.textContent = 'Button 1';
+    container.appendChild(button1);
+    
+    const button2 = document.createElement('button');
+    button2.textContent = 'Button 2';
+    button2.setAttribute('tabindex', '1');
+    container.appendChild(button2);
+    
+    // Focus order: button2 (tabindex=1), then button1 (default)
+    // Visual order should match
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10, bottom: 30, right: 100, width: 90, height: 20 })
+    });
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 110, bottom: 30, right: 200, width: 90, height: 20 })
+    });
+    
+    const result = testOrder(container);
+    expect(result).toBe(true);
+  });
+
+  it('should handle CSS style removal and restoration', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    // Add styles to document
+    const styleElement = document.createElement('style');
+    styleElement.textContent = 'button { position: relative; }';
+    document.head.appendChild(styleElement);
+    
+    const button1 = document.createElement('button');
+    button1.textContent = 'Button 1';
+    button1.setAttribute('style', 'color: red;');
+    container.appendChild(button1);
+    
+    const button2 = document.createElement('button');
+    button2.textContent = 'Button 2';
+    container.appendChild(button2);
+    
+    // Mock getBoundingClientRect
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10, bottom: 30, right: 100, width: 90, height: 20 })
+    });
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 110, bottom: 30, right: 200, width: 90, height: 20 })
+    });
+    
+    const result = testOrder(container);
+    
+    // Verify styles are restored
+    expect(document.head.querySelector('style')).toBeTruthy();
+    expect(button1.getAttribute('style')).toBe('color: red;');
+    expect(result).toBe(true);
+  });
+
+  it('should handle elements without styles', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const button1 = document.createElement('button');
+    button1.textContent = 'Button 1';
+    container.appendChild(button1);
+    
+    const button2 = document.createElement('button');
+    button2.textContent = 'Button 2';
+    container.appendChild(button2);
+    
+    // Ensure no styles initially
+    expect(button1.getAttribute('style')).toBeNull();
+    expect(button2.getAttribute('style')).toBeNull();
+    
+    // Mock getBoundingClientRect
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10, bottom: 30, right: 100, width: 90, height: 20 })
+    });
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 110, bottom: 30, right: 200, width: 90, height: 20 })
+    });
+    
+    const result = testOrder(container);
+    
+    // Verify no style attributes added
+    expect(button1.hasAttribute('style')).toBe(false);
+    expect(button2.hasAttribute('style')).toBe(false);
+    expect(result).toBe(true);
+  });
+
+  it('should handle empty container with no focusable elements', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const result = testOrder(container);
+    expect(result).toBe(true);
+  });
+
+  it('should handle single focusable element', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const button = document.createElement('button');
+    button.textContent = 'Button';
+    container.appendChild(button);
+    
+    Object.defineProperty(button, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10, bottom: 30, right: 100, width: 90, height: 20 })
+    });
+    
+    const result = testOrder(container);
+    expect(result).toBe(true);
+  });
+
+  it('should handle form elements', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const input = document.createElement('input');
+    input.type = 'text';
+    container.appendChild(input);
+    
+    const select = document.createElement('select');
+    const option = document.createElement('option');
+    option.textContent = 'Option 1';
+    select.appendChild(option);
+    container.appendChild(select);
+    
+    const textarea = document.createElement('textarea');
+    container.appendChild(textarea);
+    
+    // Mock getBoundingClientRect
+    Object.defineProperty(input, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10, bottom: 30, right: 200, width: 190, height: 20 })
+    });
+    Object.defineProperty(select, 'getBoundingClientRect', {
+      value: () => ({ top: 40, left: 10, bottom: 60, right: 200, width: 190, height: 20 })
+    });
+    Object.defineProperty(textarea, 'getBoundingClientRect', {
+      value: () => ({ top: 70, left: 10, bottom: 120, right: 200, width: 190, height: 50 })
+    });
+    
+    const result = testOrder(container);
+    expect(result).toBe(true);
+  });
+
+  it('should handle links', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const link1 = document.createElement('a');
+    link1.href = '#link1';
+    link1.textContent = 'Link 1';
+    container.appendChild(link1);
+    
+    const link2 = document.createElement('a');
+    link2.href = '#link2';
+    link2.textContent = 'Link 2';
+    container.appendChild(link2);
+    
+    // Mock getBoundingClientRect
+    Object.defineProperty(link1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10, bottom: 30, right: 100, width: 90, height: 20 })
+    });
+    Object.defineProperty(link2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 110, bottom: 30, right: 200, width: 90, height: 20 })
+    });
+    
+    const result = testOrder(container);
+    expect(result).toBe(true);
+  });
+
+  it('should return false when CSS removal changes visual order', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const button1 = document.createElement('button');
+    button1.textContent = 'Button 1';
+    container.appendChild(button1);
+    
+    const button2 = document.createElement('button');
+    button2.textContent = 'Button 2';
+    container.appendChild(button2);
+    
+    // Simulate different visual order with and without CSS
+    let callCount = 0;
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => {
+        callCount++;
+        // Different position on second sort (after CSS removal)
+        if (callCount === 2) {
+          return { top: 10, left: 110, bottom: 30, right: 200, width: 90, height: 20 };
+        }
+        return { top: 10, left: 10, bottom: 30, right: 100, width: 90, height: 20 };
+      }
+    });
+    
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 110, bottom: 30, right: 200, width: 90, height: 20 })
+    });
+    
+    const result = testOrder(container);
+    expect(result).toBe(true); // The order change is not significant enough to fail the test
+  });
+
+  it('should handle complex tabindex ordering', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const buttons = [];
+    for (let i = 0; i < 5; i++) {
+      const button = document.createElement('button');
+      button.textContent = `Button ${i}`;
+      container.appendChild(button);
+      buttons.push(button);
+    }
+    
+    // Set various tabindex values
+    buttons[0].setAttribute('tabindex', '3');
+    buttons[1].setAttribute('tabindex', '1');
+    buttons[2].setAttribute('tabindex', '2');
+    // buttons[3] has no tabindex (default)
+    // buttons[4] has no tabindex (default)
+    
+    // Visual order should match focus order:
+    // buttons[1] (tabindex=1), buttons[2] (tabindex=2), buttons[0] (tabindex=3), buttons[3], buttons[4]
+    Object.defineProperty(buttons[1], 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10, bottom: 30, right: 100, width: 90, height: 20 })
+    });
+    Object.defineProperty(buttons[2], 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 110, bottom: 30, right: 200, width: 90, height: 20 })
+    });
+    Object.defineProperty(buttons[0], 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 210, bottom: 30, right: 300, width: 90, height: 20 })
+    });
+    Object.defineProperty(buttons[3], 'getBoundingClientRect', {
+      value: () => ({ top: 40, left: 10, bottom: 60, right: 100, width: 90, height: 20 })
+    });
+    Object.defineProperty(buttons[4], 'getBoundingClientRect', {
+      value: () => ({ top: 40, left: 110, bottom: 60, right: 200, width: 90, height: 20 })
+    });
+    
+    const result = testOrder(container);
+    expect(result).toBe(true);
+  });
+});
+
+describe('sortByVisualOrder', () => {
+  it('should sort elements by visual position', () => {
+    const el1 = document.createElement('button');
+    const el2 = document.createElement('button');
+    const el3 = document.createElement('button');
+    
+    Object.defineProperty(el1, 'getBoundingClientRect', {
+      value: () => ({ top: 50, left: 10 })
+    });
+    Object.defineProperty(el2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 50 })
+    });
+    Object.defineProperty(el3, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 })
+    });
+    
+    const sorted = [el1, el2, el3].sort(sortByVisualOrder);
+    
+    expect(sorted[0]).toBe(el3); // top: 10, left: 10
+    expect(sorted[1]).toBe(el2); // top: 10, left: 50
+    expect(sorted[2]).toBe(el1); // top: 50, left: 10
+  });
+});