@afixt/test-utils 1.3.0 → 2.0.1

package/test/isFocusable.test.js

@@ -1,275 +1,268 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { describe, it, expect, beforeEach } from 'vitest';
 import { isFocusable } from '../src/isFocusable.js';
 
 describe('isFocusable', () => {
-  // Setup common mocking for all tests
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    
-    // Mock the closest method for all tests since JSDOM doesn't support :hidden
-    const originalClosest = Element.prototype.closest;
-    Element.prototype.closest = vi.fn().mockImplementation(function(selector) {
-      if (selector === ':hidden') return null; // By default, elements are not hidden
-      return originalClosest.call(this, selector);
-    });
-  });
-  
-  // Clean up after each test
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('should return false for null or undefined elements', () => {
-    // Assert
-    expect(isFocusable(null)).toBe(false);
-    expect(isFocusable(undefined)).toBe(false);
-  });
-
-  it('should return true for focusable input elements', () => {
-    // Arrange
-    const input = document.createElement('input');
-    input.type = 'text';
-    document.body.appendChild(input);
-
-    // Act & Assert
-    expect(isFocusable(input)).toBe(true);
-  });
-
-  it('should return false for disabled input elements', () => {
-    // Arrange
-    const input = document.createElement('input');
-    input.type = 'text';
-    input.disabled = true;
-    document.body.appendChild(input);
-
-    // Act & Assert
-    expect(isFocusable(input)).toBe(false);
-  });
-
-  it('should return true for focusable button elements', () => {
-    // Arrange
-    const button = document.createElement('button');
-    document.body.appendChild(button);
-
-    // Act & Assert
-    expect(isFocusable(button)).toBe(true);
-  });
-
-  it('should return false for disabled button elements', () => {
-    // Arrange
-    const button = document.createElement('button');
-    button.disabled = true;
-    document.body.appendChild(button);
-
-    // Act & Assert
-    expect(isFocusable(button)).toBe(false);
-  });
-
-  it('should return true for select elements', () => {
-    // Arrange
-    const select = document.createElement('select');
-    document.body.appendChild(select);
-
-    // Act & Assert
-    expect(isFocusable(select)).toBe(true);
-  });
-
-  it('should return true for textarea elements', () => {
-    // Arrange
-    const textarea = document.createElement('textarea');
-    document.body.appendChild(textarea);
-
-    // Act & Assert
-    expect(isFocusable(textarea)).toBe(true);
-  });
-
-  it('should return true for anchors with href attribute', () => {
-    // Arrange
-    const anchor = document.createElement('a');
-    anchor.setAttribute('href', '#');
-    document.body.appendChild(anchor);
-
-    // Act & Assert
-    expect(isFocusable(anchor)).toBe(true);
-  });
-
-  it('should return false for anchors without href attribute', () => {
-    // Arrange
-    const anchor = document.createElement('a');
-    document.body.appendChild(anchor);
-
-    // Act & Assert
-    expect(isFocusable(anchor)).toBe(false);
-  });
-
-  it('should return true for area elements with href attribute', () => {
-    // Arrange
-    const map = document.createElement('map');
-    const area = document.createElement('area');
-    area.setAttribute('href', '#');
-    map.appendChild(area);
-    document.body.appendChild(map);
-
-    // Act & Assert
-    expect(isFocusable(area)).toBe(true);
-  });
-
-  it('should return false for area elements without href attribute', () => {
-    // Arrange
-    const map = document.createElement('map');
-    const area = document.createElement('area');
-    map.appendChild(area);
-    document.body.appendChild(map);
-
-    // Act & Assert
-    expect(isFocusable(area)).toBe(false);
-  });
-
-  it('should return false for non-form elements with tabindex >= 0', () => {
-    // Arrange
-    const div = document.createElement('div');
-    div.setAttribute('tabindex', '0');
-    document.body.appendChild(div);
-
-    // Act & Assert
-    // According to the implementation, non-form elements with tabindex 
-    // are not considered focusable in this utility
-    expect(isFocusable(div)).toBe(false);
-  });
-
-  it('should return false for elements with tabindex < 0', () => {
-    // Arrange
-    const div = document.createElement('div');
-    div.setAttribute('tabindex', '-1');
-    document.body.appendChild(div);
-
-    // Act & Assert
-    expect(isFocusable(div)).toBe(false);
-  });
-
-  it('should return false for regular divs without tabindex', () => {
-    // Arrange
-    const div = document.createElement('div');
-    document.body.appendChild(div);
-
-    // Act & Assert
-    expect(isFocusable(div)).toBe(false);
-  });
-
-  it('should return false for hidden elements', () => {
-    // Arrange
-    const input = document.createElement('input');
-    document.body.appendChild(input);
-
-    // Override the mock to simulate a hidden element
-    Element.prototype.closest = vi.fn().mockImplementation(function(selector) {
-      if (selector === ':hidden') return this; // Element is hidden
-      return null;
-    });
-
-    // Act & Assert
-    expect(isFocusable(input)).toBe(false);
-  });
-
-  it('should return true for object elements', () => {
-    // Arrange
-    const object = document.createElement('object');
-    document.body.appendChild(object);
-
-    // Act & Assert
-    expect(isFocusable(object)).toBe(true);
-  });
-
-  it('should return false for disabled object elements', () => {
-    // Arrange
-    const object = document.createElement('object');
-    object.disabled = true;
-    document.body.appendChild(object);
-
-    // Act & Assert
-    expect(isFocusable(object)).toBe(false);
-  });
-
-  it('should handle elements with tabindex="0" on form controls', () => {
-    // Arrange
-    const input = document.createElement('input');
-    input.setAttribute('tabindex', '0');
-    document.body.appendChild(input);
-
-    // Act & Assert
-    expect(isFocusable(input)).toBe(true);
-  });
-
-  it('should handle elements with positive tabindex on form controls', () => {
-    // Arrange
-    const button = document.createElement('button');
-    button.setAttribute('tabindex', '1');
-    document.body.appendChild(button);
-
-    // Act & Assert
-    expect(isFocusable(button)).toBe(true);
-  });
-
-  it('should return false for form controls with negative tabindex', () => {
-    // Arrange
-    const input = document.createElement('input');
-    input.setAttribute('tabindex', '-1');
-    document.body.appendChild(input);
-
-    // Act & Assert
-    expect(isFocusable(input)).toBe(false);
-  });
-
-  it('should return false for disabled select elements', () => {
-    // Arrange
-    const select = document.createElement('select');
-    select.disabled = true;
-    document.body.appendChild(select);
-
-    // Act & Assert
-    expect(isFocusable(select)).toBe(false);
-  });
-
-  it('should return false for disabled textarea elements', () => {
-    // Arrange
-    const textarea = document.createElement('textarea');
-    textarea.disabled = true;
-    document.body.appendChild(textarea);
-
-    // Act & Assert
-    expect(isFocusable(textarea)).toBe(false);
-  });
-
-  it('should handle anchors with tabindex >= 0 and href', () => {
-    // Arrange
-    const anchor = document.createElement('a');
-    anchor.setAttribute('href', 'https://example.com');
-    anchor.setAttribute('tabindex', '0');
-    document.body.appendChild(anchor);
-
-    // Act & Assert
-    expect(isFocusable(anchor)).toBe(true);
-  });
-
-  it('should return false for anchors with negative tabindex even with href', () => {
-    // Arrange
-    const anchor = document.createElement('a');
-    anchor.setAttribute('href', 'https://example.com');
-    anchor.setAttribute('tabindex', '-1');
-    document.body.appendChild(anchor);
-
-    // Act & Assert
-    expect(isFocusable(anchor)).toBe(false);
-  });
-
-  it('should return false for area with negative tabindex even with href', () => {
-    // Arrange
-    const area = document.createElement('area');
-    area.setAttribute('href', '#map');
-    area.setAttribute('tabindex', '-1');
-    document.body.appendChild(area);
-
-    // Act & Assert
-    expect(isFocusable(area)).toBe(false);
-  });
-});
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('should return false for null or undefined elements', () => {
+        expect(isFocusable(null)).toBe(false);
+        expect(isFocusable(undefined)).toBe(false);
+    });
+
+    it('should return true for focusable input elements', () => {
+        const input = document.createElement('input');
+        input.type = 'text';
+        document.body.appendChild(input);
+
+        expect(isFocusable(input)).toBe(true);
+    });
+
+    it('should return false for disabled input elements', () => {
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.disabled = true;
+        document.body.appendChild(input);
+
+        expect(isFocusable(input)).toBe(false);
+    });
+
+    it('should return true for focusable button elements', () => {
+        const button = document.createElement('button');
+        document.body.appendChild(button);
+
+        expect(isFocusable(button)).toBe(true);
+    });
+
+    it('should return false for disabled button elements', () => {
+        const button = document.createElement('button');
+        button.disabled = true;
+        document.body.appendChild(button);
+
+        expect(isFocusable(button)).toBe(false);
+    });
+
+    it('should return true for select elements', () => {
+        const select = document.createElement('select');
+        document.body.appendChild(select);
+
+        expect(isFocusable(select)).toBe(true);
+    });
+
+    it('should return true for textarea elements', () => {
+        const textarea = document.createElement('textarea');
+        document.body.appendChild(textarea);
+
+        expect(isFocusable(textarea)).toBe(true);
+    });
+
+    it('should return true for anchors with href attribute', () => {
+        const anchor = document.createElement('a');
+        anchor.setAttribute('href', '#');
+        document.body.appendChild(anchor);
+
+        expect(isFocusable(anchor)).toBe(true);
+    });
+
+    it('should return false for anchors without href attribute', () => {
+        const anchor = document.createElement('a');
+        document.body.appendChild(anchor);
+
+        expect(isFocusable(anchor)).toBe(false);
+    });
+
+    it('should return true for area elements with href attribute', () => {
+        const map = document.createElement('map');
+        const area = document.createElement('area');
+        area.setAttribute('href', '#');
+        map.appendChild(area);
+        document.body.appendChild(map);
+
+        expect(isFocusable(area)).toBe(true);
+    });
+
+    it('should return false for area elements without href attribute', () => {
+        const map = document.createElement('map');
+        const area = document.createElement('area');
+        map.appendChild(area);
+        document.body.appendChild(map);
+
+        expect(isFocusable(area)).toBe(false);
+    });
+
+    it('should return true for non-form elements with tabindex >= 0', () => {
+        const div = document.createElement('div');
+        div.setAttribute('tabindex', '0');
+        document.body.appendChild(div);
+
+        expect(isFocusable(div)).toBe(true);
+    });
+
+    it('should return true for span with tabindex="0"', () => {
+        const span = document.createElement('span');
+        span.setAttribute('tabindex', '0');
+        document.body.appendChild(span);
+
+        expect(isFocusable(span)).toBe(true);
+    });
+
+    it('should return false for elements with tabindex < 0 (not in tab order)', () => {
+        const div = document.createElement('div');
+        div.setAttribute('tabindex', '-1');
+        document.body.appendChild(div);
+
+        expect(isFocusable(div)).toBe(false);
+    });
+
+    it('should return false for regular divs without tabindex', () => {
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+
+        expect(isFocusable(div)).toBe(false);
+    });
+
+    it('should return false for elements with hidden attribute', () => {
+        const input = document.createElement('input');
+        input.setAttribute('hidden', '');
+        document.body.appendChild(input);
+
+        expect(isFocusable(input)).toBe(false);
+    });
+
+    it('should return false for elements with display:none', () => {
+        const input = document.createElement('input');
+        input.style.display = 'none';
+        document.body.appendChild(input);
+
+        expect(isFocusable(input)).toBe(false);
+    });
+
+    it('should return false for elements inside a hidden ancestor', () => {
+        const wrapper = document.createElement('div');
+        wrapper.setAttribute('hidden', '');
+        const input = document.createElement('input');
+        wrapper.appendChild(input);
+        document.body.appendChild(wrapper);
+
+        expect(isFocusable(input)).toBe(false);
+    });
+
+    it('should return true for object elements', () => {
+        const object = document.createElement('object');
+        document.body.appendChild(object);
+
+        expect(isFocusable(object)).toBe(true);
+    });
+
+    it('should return false for disabled object elements', () => {
+        const object = document.createElement('object');
+        object.disabled = true;
+        document.body.appendChild(object);
+
+        expect(isFocusable(object)).toBe(false);
+    });
+
+    it('should handle elements with tabindex="0" on form controls', () => {
+        const input = document.createElement('input');
+        input.setAttribute('tabindex', '0');
+        document.body.appendChild(input);
+
+        expect(isFocusable(input)).toBe(true);
+    });
+
+    it('should handle elements with positive tabindex on form controls', () => {
+        const button = document.createElement('button');
+        button.setAttribute('tabindex', '1');
+        document.body.appendChild(button);
+
+        expect(isFocusable(button)).toBe(true);
+    });
+
+    it('should return false for form controls with negative tabindex', () => {
+        const input = document.createElement('input');
+        input.setAttribute('tabindex', '-1');
+        document.body.appendChild(input);
+
+        expect(isFocusable(input)).toBe(false);
+    });
+
+    it('should return false for disabled select elements', () => {
+        const select = document.createElement('select');
+        select.disabled = true;
+        document.body.appendChild(select);
+
+        expect(isFocusable(select)).toBe(false);
+    });
+
+    it('should return false for disabled textarea elements', () => {
+        const textarea = document.createElement('textarea');
+        textarea.disabled = true;
+        document.body.appendChild(textarea);
+
+        expect(isFocusable(textarea)).toBe(false);
+    });
+
+    it('should handle anchors with tabindex >= 0 and href', () => {
+        const anchor = document.createElement('a');
+        anchor.setAttribute('href', 'https://example.com');
+        anchor.setAttribute('tabindex', '0');
+        document.body.appendChild(anchor);
+
+        expect(isFocusable(anchor)).toBe(true);
+    });
+
+    it('should return false for anchors with negative tabindex even with href', () => {
+        const anchor = document.createElement('a');
+        anchor.setAttribute('href', 'https://example.com');
+        anchor.setAttribute('tabindex', '-1');
+        document.body.appendChild(anchor);
+
+        expect(isFocusable(anchor)).toBe(false);
+    });
+
+    it('should return false for area with negative tabindex even with href', () => {
+        const area = document.createElement('area');
+        area.setAttribute('href', '#map');
+        area.setAttribute('tabindex', '-1');
+        document.body.appendChild(area);
+
+        expect(isFocusable(area)).toBe(false);
+    });
+
+    it('should return true for contenteditable="true" elements', () => {
+        const div = document.createElement('div');
+        div.setAttribute('contenteditable', 'true');
+        document.body.appendChild(div);
+
+        expect(isFocusable(div)).toBe(true);
+    });
+
+    it('should return true for contenteditable="" elements', () => {
+        const div = document.createElement('div');
+        div.setAttribute('contenteditable', '');
+        document.body.appendChild(div);
+
+        expect(isFocusable(div)).toBe(true);
+    });
+
+    it('should return false for hidden contenteditable elements', () => {
+        const div = document.createElement('div');
+        div.setAttribute('contenteditable', 'true');
+        div.setAttribute('hidden', '');
+        document.body.appendChild(div);
+
+        expect(isFocusable(div)).toBe(false);
+    });
+
+    it('should return false for contenteditable inside hidden ancestor', () => {
+        const wrapper = document.createElement('div');
+        wrapper.style.display = 'none';
+        const div = document.createElement('div');
+        div.setAttribute('contenteditable', 'true');
+        wrapper.appendChild(div);
+        document.body.appendChild(wrapper);
+
+        expect(isFocusable(div)).toBe(false);
+    });
+});