@afixt/test-utils 1.1.2 → 1.1.4

package/test/testOrder.test.js

@@ -1,52 +1,787 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { testOrder, sortByVisualOrder } from '../src/testOrder.js';
 
-// Note: Mocking CommonJS modules from ES6 test files in Vitest has compatibility issues
-// The actual implementation works correctly, but these tests are skipped due to mock limitations
+// Use manual mock without vi.mock for simplicity
+const mockedGetFocusableElements = vi.fn(() => []);
 
-describe('testOrder', () => {
+// Manually replace the import
+vi.doMock('../src/getFocusableElements.js', () => ({
+  getFocusableElements: mockedGetFocusableElements
+}));
+
+describe('sortByVisualOrder', () => {
   beforeEach(() => {
-    document.body.innerHTML = '';
-    document.head.innerHTML = '';
     vi.clearAllMocks();
   });
 
-  it('should sort elements by visual order (top to bottom, left to right)', () => {
-    // Arrange: Create elements with different positions
+  it('should sort elements by top position first', () => {
+    // Arrange: Create elements with different top positions
     const el1 = document.createElement('button');
     Object.defineProperty(el1, 'getBoundingClientRect', {
-      value: () => ({ top: 10, left: 10 })
+      value: () => ({ top: 100, left: 10 })
     });
     
     const el2 = document.createElement('button');
     Object.defineProperty(el2, 'getBoundingClientRect', {
+      value: () => ({ top: 50, left: 10 })
+    });
+    
+    const el3 = document.createElement('button');
+    Object.defineProperty(el3, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 })
+    });
+    
+    // Act: Sort the elements
+    const result = [el1, el2, el3].sort(sortByVisualOrder);
+    
+    // Assert: Elements should be sorted by top position (ascending)
+    expect(result[0]).toBe(el3); // top: 10
+    expect(result[1]).toBe(el2); // top: 50
+    expect(result[2]).toBe(el1); // top: 100
+  });
+
+  it('should sort elements by left position when top positions are equal', () => {
+    // Arrange: Create elements with same top but different left positions
+    const el1 = document.createElement('button');
+    Object.defineProperty(el1, 'getBoundingClientRect', {
       value: () => ({ top: 10, left: 100 })
     });
     
+    const el2 = document.createElement('button');
+    Object.defineProperty(el2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 50 })
+    });
+    
     const el3 = document.createElement('button');
     Object.defineProperty(el3, 'getBoundingClientRect', {
-      value: () => ({ top: 100, left: 10 })
+      value: () => ({ top: 10, left: 10 })
     });
     
     // Act: Sort the elements
     const result = [el1, el2, el3].sort(sortByVisualOrder);
     
-    // Assert: The elements should be sorted by visual order
-    expect(result[0]).toBe(el1); // Top left
-    expect(result[1]).toBe(el2); // Top right
-    expect(result[2]).toBe(el3); // Bottom
+    // Assert: Elements should be sorted by left position (ascending)
+    expect(result[0]).toBe(el3); // left: 10
+    expect(result[1]).toBe(el2); // left: 50
+    expect(result[2]).toBe(el1); // left: 100
+  });
+
+  it('should handle mixed top and left positioning correctly', () => {
+    // Arrange: Create a realistic grid layout
+    const el1 = document.createElement('button');
+    Object.defineProperty(el1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 }) // top row, right
+    });
+    
+    const el2 = document.createElement('button');
+    Object.defineProperty(el2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 }) // top row, left
+    });
+    
+    const el3 = document.createElement('button');
+    Object.defineProperty(el3, 'getBoundingClientRect', {
+      value: () => ({ top: 50, left: 10 }) // bottom row, left
+    });
+    
+    const el4 = document.createElement('button');
+    Object.defineProperty(el4, 'getBoundingClientRect', {
+      value: () => ({ top: 50, left: 100 }) // bottom row, right
+    });
+    
+    // Act: Sort the elements
+    const result = [el1, el2, el3, el4].sort(sortByVisualOrder);
+    
+    // Assert: Should be sorted by visual reading order (top-left to bottom-right)
+    expect(result[0]).toBe(el2); // top row, left
+    expect(result[1]).toBe(el1); // top row, right
+    expect(result[2]).toBe(el3); // bottom row, left
+    expect(result[3]).toBe(el4); // bottom row, right
+  });
+
+  it('should handle elements with negative positions', () => {
+    // Arrange: Create elements with negative positions
+    const el1 = document.createElement('button');
+    Object.defineProperty(el1, 'getBoundingClientRect', {
+      value: () => ({ top: -10, left: 10 })
+    });
+    
+    const el2 = document.createElement('button');
+    Object.defineProperty(el2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: -10 })
+    });
+    
+    const el3 = document.createElement('button');
+    Object.defineProperty(el3, 'getBoundingClientRect', {
+      value: () => ({ top: 0, left: 0 })
+    });
+    
+    // Act: Sort the elements
+    const result = [el1, el2, el3].sort(sortByVisualOrder);
+    
+    // Assert: Should handle negative positions correctly
+    expect(result[0]).toBe(el1); // top: -10
+    expect(result[1]).toBe(el3); // top: 0
+    expect(result[2]).toBe(el2); // top: 10
+  });
+});
+
+describe('testOrder', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    document.head.innerHTML = '';
+    vi.clearAllMocks();
+  });
+
+  it('should return true when focus order matches visual order', () => {
+    // Arrange: Create elements in proper visual order
+    const container = document.createElement('div');
+    const button1 = document.createElement('button');
+    const button2 = document.createElement('button');
+    const button3 = document.createElement('button');
+    
+    // Mock getBoundingClientRect for visual ordering
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 })
+    });
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 })
+    });
+    Object.defineProperty(button3, 'getBoundingClientRect', {
+      value: () => ({ top: 100, left: 10 })
+    });
+    
+    // Mock getFocusableElements to return elements in DOM order (which matches visual order)
+    mockedGetFocusableElements.mockReturnValue([button1, button2, button3]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
+    // Note: We can't easily test the mock call due to CommonJS/ES6 mocking complexity
+    // Instead we verify the function behavior through the result
+  });
+
+
+  it('should handle elements with positive tabindex correctly', () => {
+    // Arrange: Create elements with different tabindex values
+    const container = document.createElement('div');
+    const button1 = document.createElement('button');
+    const button2 = document.createElement('button');
+    const button3 = document.createElement('button');
+    
+    button1.setAttribute('tabindex', '3');
+    button2.setAttribute('tabindex', '1');
+    button3.setAttribute('tabindex', '2');
+    
+    // Mock getBoundingClientRect to match expected tabindex order
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 }) // tabindex 1, should be first
+    });
+    Object.defineProperty(button3, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 }) // tabindex 2, should be second
+    });
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 100, left: 10 }) // tabindex 3, should be third
+    });
+    
+    // Mock getFocusableElements to return elements in DOM order
+    mockedGetFocusableElements.mockReturnValue([button1, button2, button3]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it('should handle elements with mixed tabindex values (positive and default)', () => {
+    // Arrange: Create elements with mixed tabindex
+    const container = document.createElement('div');
+    const button1 = document.createElement('button'); // no tabindex (default 0)
+    const button2 = document.createElement('button');
+    const button3 = document.createElement('button'); // no tabindex (default 0)
+    
+    button2.setAttribute('tabindex', '1'); // positive tabindex should come first
+    
+    // Mock getBoundingClientRect - positive tabindex should come first in visual order
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 }) // tabindex 1, should be first
+    });
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 }) // default tabindex, should be second
+    });
+    Object.defineProperty(button3, 'getBoundingClientRect', {
+      value: () => ({ top: 100, left: 10 }) // default tabindex, should be third
+    });
+    
+    // Mock getFocusableElements to return elements in DOM order
+    mockedGetFocusableElements.mockReturnValue([button1, button2, button3]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it('should handle elements with zero tabindex correctly', () => {
+    // Arrange: Create elements with explicit tabindex="0"
+    const container = document.createElement('div');
+    const button1 = document.createElement('button');
+    const button2 = document.createElement('button');
+    
+    button1.setAttribute('tabindex', '0');
+    button2.setAttribute('tabindex', '0');
+    
+    // Mock getBoundingClientRect for visual ordering
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 })
+    });
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 })
+    });
+    
+    // Mock getFocusableElements to return elements in DOM order
+    mockedGetFocusableElements.mockReturnValue([button1, button2]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it('should prioritize positive tabindex over default tabindex', () => {
+    // Arrange: Create mixed scenario where positive tabindex should come first
+    const container = document.createElement('div');
+    const button1 = document.createElement('button'); // default tabindex
+    const button2 = document.createElement('button');
+    
+    button2.setAttribute('tabindex', '1'); // positive tabindex
+    
+    // Mock getBoundingClientRect where element with positive tabindex is visually first
+    // AND focus order matches visual order (positive tabindex first, then default)
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 }) // visually first AND focus first (tabindex=1)
+    });
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 }) // visually second AND focus second (default)
+    });
+    
+    // Mock getFocusableElements
+    mockedGetFocusableElements.mockReturnValue([button1, button2]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert: Should return true because visual order matches focus order
+    // Focus order: [button2 (tabindex=1), button1 (default)]
+    // Visual order: [button2, button1] (same)
+    expect(result).toBe(true);
+  });
+
+  it('should handle CSS style removal and restoration', () => {
+    // Arrange: Setup document with CSS styles
+    const container = document.createElement('div');
+    const button1 = document.createElement('button');
+    const button2 = document.createElement('button');
+    
+    // Add CSS styles to document
+    const styleElement = document.createElement('style');
+    styleElement.textContent = 'button { position: absolute; }';
+    document.head.appendChild(styleElement);
+    
+    const linkElement = document.createElement('link');
+    linkElement.rel = 'stylesheet';
+    linkElement.href = 'data:text/css,button%20%7B%20position%3A%20absolute%3B%20%7D';
+    document.head.appendChild(linkElement);
+    
+    // Add inline styles
+    button1.setAttribute('style', 'top: 20px; left: 20px;');
+    button2.setAttribute('style', 'top: 10px; left: 10px;');
+    
+    // Mock getBoundingClientRect to be consistent regardless of styles
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 })
+    });
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 })
+    });
+    
+    // Mock getFocusableElements
+    mockedGetFocusableElements.mockReturnValue([button1, button2]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert: CSS should be restored after test
+    expect(document.head.querySelector('style')).toBeTruthy();
+    expect(document.head.querySelector('link[rel="stylesheet"]')).toBeTruthy();
+    expect(button1.getAttribute('style')).toBe('top: 20px; left: 20px;');
+    expect(button2.getAttribute('style')).toBe('top: 10px; left: 10px;');
+    expect(result).toBe(true);
+  });
+
+  it('should handle elements without inline styles during CSS restoration', () => {
+    // Arrange: Create elements without inline styles
+    const container = document.createElement('div');
+    const button1 = document.createElement('button');
+    const button2 = document.createElement('button');
+    
+    // Ensure no inline styles initially
+    expect(button1.getAttribute('style')).toBeNull();
+    expect(button2.getAttribute('style')).toBeNull();
+    
+    // Mock getBoundingClientRect
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 })
+    });
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 })
+    });
+    
+    // Mock getFocusableElements
+    mockedGetFocusableElements.mockReturnValue([button1, button2]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert: Elements should not have style attribute after restoration
+    expect(button1.hasAttribute('style')).toBe(false);
+    expect(button2.hasAttribute('style')).toBe(false);
+    expect(result).toBe(true);
+  });
+
+  it('should return true when no focusable elements exist', () => {
+    // Arrange: Empty container
+    const container = document.createElement('div');
+    
+    // Mock getFocusableElements to return empty array
+    mockedGetFocusableElements.mockReturnValue([]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it('should return true for single focusable element', () => {
+    // Arrange: Container with single element
+    const container = document.createElement('div');
+    const button = document.createElement('button');
+    
+    Object.defineProperty(button, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 })
+    });
+    
+    // Mock getFocusableElements
+    mockedGetFocusableElements.mockReturnValue([button]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it('should handle complex tabindex ordering with multiple positive values', () => {
+    // Arrange: Create elements with various tabindex values
+    const container = document.createElement('div');
+    const button1 = document.createElement('button');
+    const button2 = document.createElement('button');
+    const button3 = document.createElement('button');
+    const button4 = document.createElement('button');
+    
+    button1.setAttribute('tabindex', '5');
+    button2.setAttribute('tabindex', '2');
+    button3.setAttribute('tabindex', '10');
+    // button4 has no tabindex (default 0)
+    
+    // Mock getBoundingClientRect to match expected tabindex order
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 }) // tabindex 2, should be first
+    });
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 }) // tabindex 5, should be second
+    });
+    Object.defineProperty(button3, 'getBoundingClientRect', {
+      value: () => ({ top: 20, left: 10 }) // tabindex 10, should be third
+    });
+    Object.defineProperty(button4, 'getBoundingClientRect', {
+      value: () => ({ top: 20, left: 100 }) // default, should be last
+    });
+    
+    // Mock getFocusableElements
+    mockedGetFocusableElements.mockReturnValue([button1, button2, button3, button4]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it('should handle elements with empty tabindex attributes', () => {
+    // Arrange: Create elements with empty tabindex
+    const container = document.createElement('div');
+    const button1 = document.createElement('button');
+    const button2 = document.createElement('button');
+    
+    button1.setAttribute('tabindex', ''); // empty tabindex
+    button2.setAttribute('tabindex', '1'); // valid positive
+    
+    // Mock getBoundingClientRect - positive tabindex should come first visually
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 }) // tabindex 1, should be first
+    });
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 }) // empty tabindex, should be last
+    });
+    
+    // Mock getFocusableElements
+    mockedGetFocusableElements.mockReturnValue([button1, button2]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it('should handle elements with negative tabindex', () => {
+    // Arrange: Create elements with negative tabindex (should be treated as 0)
+    const container = document.createElement('div');
+    const button1 = document.createElement('button');
+    const button2 = document.createElement('button');
+    
+    button1.setAttribute('tabindex', '-1'); // negative tabindex
+    button2.setAttribute('tabindex', '1');   // positive tabindex
+    
+    // Mock getBoundingClientRect - positive tabindex should come first visually
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 }) // tabindex 1, should be first
+    });
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 }) // tabindex -1, should be last
+    });
+    
+    // Mock getFocusableElements
+    mockedGetFocusableElements.mockReturnValue([button1, button2]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it('should handle elements with non-numeric tabindex values', () => {
+    // Arrange: Create elements with invalid tabindex values
+    const container = document.createElement('div');
+    const button1 = document.createElement('button');
+    const button2 = document.createElement('button');
+    
+    button1.setAttribute('tabindex', 'invalid'); // non-numeric
+    button2.setAttribute('tabindex', '1');       // valid positive
+    
+    // Mock getBoundingClientRect
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 }) // valid tabindex first
+    });
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 }) // invalid tabindex treated as 0
+    });
+    
+    // Mock getFocusableElements
+    mockedGetFocusableElements.mockReturnValue([button1, button2]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
+  });
+
+  it('should handle elements where some have null style attributes', () => {
+    // Arrange: Create elements with mixed style situations
+    const container = document.createElement('div');
+    const button1 = document.createElement('button');
+    const button2 = document.createElement('button');
+    
+    // One element has inline style, other doesn't
+    button1.setAttribute('style', 'color: red;');
+    // button2 has no style attribute
+    
+    // Mock getBoundingClientRect
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 })
+    });
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 })
+    });
+    
+    // Mock getFocusableElements
+    mockedGetFocusableElements.mockReturnValue([button1, button2]);
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert: Should handle mixed style attributes correctly
+    expect(result).toBe(true);
+    // Verify original styles are preserved
+    expect(button1.getAttribute('style')).toBe('color: red;');
+    expect(button2.getAttribute('style')).toBeNull();
+  });
+
+});
+
+describe('testOrder - Integration Tests', () => {
+  beforeEach(() => {
+    // Clear all mocks to use real getFocusableElements
+    vi.clearAllMocks();
+    vi.resetModules();
+    document.body.innerHTML = '';
+    document.head.innerHTML = '';
+  });
+
+  it('should test with real getFocusableElements - visual order matches focus order', async () => {
+    // Restore real implementation
+    vi.unmock('../src/getFocusableElements.js');
+    const { testOrder } = await import('../src/testOrder.js');
+    
+    // Create focusable elements in proper 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);
+    
+    const button3 = document.createElement('button');
+    button3.textContent = 'Button 3';
+    container.appendChild(button3);
+    
+    // Mock getBoundingClientRect to simulate proper visual order
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 })
+    });
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 })
+    });
+    Object.defineProperty(button3, 'getBoundingClientRect', {
+      value: () => ({ top: 100, left: 10 })
+    });
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
   });
 
-  // Skip tests that require mocking due to CommonJS/ES6 module incompatibility in test environment
-  it.skip('should return true when focus order matches visual order', () => {
-    // Test implementation requires mocking getFocusableElements which has issues with CommonJS modules
+  it('should return false when focus order does not match visual order', async () => {
+    // Restore real implementation
+    vi.unmock('../src/getFocusableElements.js');
+    const { testOrder } = await import('../src/testOrder.js');
+    
+    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 to simulate mismatched visual order
+    // Visual order will be button3, button1, button2 (not matching DOM order)
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 50, left: 10 })
+    });
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 100, left: 10 })
+    });
+    Object.defineProperty(button3, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 })
+    });
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(false);
   });
 
-  it.skip('should return false when focus order does not match visual order', () => {
-    // Test implementation requires mocking getFocusableElements which has issues with CommonJS modules
+  it('should handle positive tabindex with real getFocusableElements', async () => {
+    // Restore real implementation
+    vi.unmock('../src/getFocusableElements.js');
+    const { testOrder } = await import('../src/testOrder.js');
+    
+    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';
+    // no tabindex (default)
+    container.appendChild(button3);
+    
+    // Mock getBoundingClientRect to match expected focus order
+    // Focus order: button2 (tabindex 1), button1 (tabindex 2), button3 (default)
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 })
+    });
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 })
+    });
+    Object.defineProperty(button3, 'getBoundingClientRect', {
+      value: () => ({ top: 100, left: 10 })
+    });
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
   });
 
-  it.skip('should handle elements with tabindex correctly', () => {
-    // Test implementation requires mocking getFocusableElements which has issues with CommonJS modules
+  it('should handle CSS removal and restoration with real implementation', async () => {
+    // Restore real implementation
+    vi.unmock('../src/getFocusableElements.js');
+    const { testOrder } = await import('../src/testOrder.js');
+    
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    // Add CSS styles
+    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', 'top: 0px;');
+    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 })
+    });
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 })
+    });
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert: Styles should be preserved
+    expect(document.head.querySelector('style')).toBeTruthy();
+    expect(button1.getAttribute('style')).toBe('top: 0px;');
+    expect(result).toBe(true);
+  });
+
+  it('should return false when visual order after CSS removal differs', async () => {
+    // Restore real implementation
+    vi.unmock('../src/getFocusableElements.js');
+    const { testOrder } = await import('../src/testOrder.js');
+    
+    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);
+    
+    // Create a mock where visual order changes after CSS removal
+    let callCount = 0;
+    Object.defineProperty(button1, 'getBoundingClientRect', {
+      value: () => {
+        callCount++;
+        // First call: normal order
+        // Second call: after CSS removal, different order
+        // Third call: after restoration, back to normal
+        if (callCount === 2 || callCount === 4) {
+          return { top: 100, left: 10 }; // different position without CSS
+        }
+        return { top: 10, left: 10 };
+      }
+    });
+    
+    Object.defineProperty(button2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 })
+    });
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(false);
+  });
+
+  it('should handle input elements with real getFocusableElements', async () => {
+    // Restore real implementation
+    vi.unmock('../src/getFocusableElements.js');
+    const { testOrder } = await import('../src/testOrder.js');
+    
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const input1 = document.createElement('input');
+    input1.type = 'text';
+    container.appendChild(input1);
+    
+    const input2 = document.createElement('input');
+    input2.type = 'checkbox';
+    container.appendChild(input2);
+    
+    const textarea = document.createElement('textarea');
+    container.appendChild(textarea);
+    
+    // Mock getBoundingClientRect
+    Object.defineProperty(input1, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 10 })
+    });
+    Object.defineProperty(input2, 'getBoundingClientRect', {
+      value: () => ({ top: 10, left: 100 })
+    });
+    Object.defineProperty(textarea, 'getBoundingClientRect', {
+      value: () => ({ top: 50, left: 10 })
+    });
+    
+    // Act
+    const result = testOrder(container);
+    
+    // Assert
+    expect(result).toBe(true);
   });
+
 });