@afixt/test-utils 1.1.2 → 1.1.4

package/test/domUtils.test.js

@@ -144,4 +144,245 @@ describe('domUtils', () => {
       expect(domUtils.hasFocus(element2)).toBe(false);
     });
   });
+
+  describe('getAttributesAsString', () => {
+    it('should return attributes as JSON string when element has attributes', () => {
+      document.body.innerHTML = `<div id="test" class="container" data-value="123"></div>`;
+      const element = document.getElementById('test');
+      
+      const attrsString = domUtils.getAttributesAsString(element);
+      const parsed = JSON.parse(attrsString);
+      
+      expect(parsed.id).toBe('test');
+      expect(parsed.class).toBe('container');
+      expect(parsed['data-value']).toBe('123');
+    });
+
+    it('should return false for elements with no attributes', () => {
+      const element = document.createElement('div');
+      expect(domUtils.getAttributesAsString(element)).toBe(false);
+    });
+  });
+
+  describe('getDocumentSize', () => {
+    it('should return the size of the document HTML', () => {
+      const size = domUtils.getDocumentSize();
+      expect(typeof size).toBe('number');
+      expect(size).toBeGreaterThan(0);
+    });
+  });
+
+  describe('getElementsWithDuplicateIds', () => {
+    it('should find elements with duplicate IDs', () => {
+      document.body.innerHTML = `
+        <div id="duplicate">First</div>
+        <span id="duplicate">Second</span>
+        <p id="unique">Unique</p>
+      `;
+      
+      const duplicates = domUtils.getElementsWithDuplicateIds();
+      expect(duplicates.length).toBeGreaterThan(0);
+      expect(duplicates[0].id).toBe('duplicate');
+    });
+
+    it('should return empty array when no duplicate IDs exist', () => {
+      document.body.innerHTML = `
+        <div id="first">First</div>
+        <span id="second">Second</span>
+        <p id="third">Third</p>
+      `;
+      
+      const duplicates = domUtils.getElementsWithDuplicateIds();
+      expect(duplicates.length).toBe(0);
+    });
+  });
+
+  describe('getOuterHTML', () => {
+    it('should return the outer HTML of an element', () => {
+      document.body.innerHTML = `<div id="test" class="container">Content</div>`;
+      const element = document.getElementById('test');
+      
+      const outerHTML = domUtils.getOuterHTML(element);
+      expect(outerHTML).toBe('<div id="test" class="container">Content</div>');
+    });
+  });
+
+  describe('isFullyVisible', () => {
+    it('should check if element is fully visible in viewport', () => {
+      document.body.innerHTML = `<div id="test" style="width: 100px; height: 100px;">Test</div>`;
+      const element = document.getElementById('test');
+      
+      // Mock getBoundingClientRect to simulate visible element
+      element.getBoundingClientRect = () => ({
+        top: 10,
+        left: 10,
+        bottom: 110,
+        right: 110
+      });
+      
+      // Mock window dimensions
+      Object.defineProperty(window, 'innerHeight', {
+        writable: true,
+        configurable: true,
+        value: 800
+      });
+      Object.defineProperty(window, 'innerWidth', {
+        writable: true,
+        configurable: true,
+        value: 1200
+      });
+      
+      expect(domUtils.isFullyVisible(element)).toBe(true);
+    });
+
+    it('should return false if element is not fully visible', () => {
+      document.body.innerHTML = `<div id="test" style="width: 100px; height: 100px;">Test</div>`;
+      const element = document.getElementById('test');
+      
+      // Mock getBoundingClientRect to simulate partially visible element
+      element.getBoundingClientRect = () => ({
+        top: -50,
+        left: 10,
+        bottom: 50,
+        right: 110
+      });
+      
+      Object.defineProperty(window, 'innerHeight', {
+        writable: true,
+        configurable: true,
+        value: 800
+      });
+      Object.defineProperty(window, 'innerWidth', {
+        writable: true,
+        configurable: true,
+        value: 1200
+      });
+      
+      expect(domUtils.isFullyVisible(element)).toBe(false);
+    });
+
+    it('should return false when element extends beyond left edge', () => {
+      const element = document.createElement('div');
+      document.body.appendChild(element);
+
+      element.getBoundingClientRect = vi.fn().mockReturnValue({
+        top: 100,
+        left: -10, // Beyond left edge
+        bottom: 200,
+        right: 300
+      });
+
+      expect(domUtils.isFullyVisible(element)).toBe(false);
+    });
+
+    it('should return false when element extends beyond bottom edge', () => {
+      const element = document.createElement('div');
+      document.body.appendChild(element);
+
+      vi.stubGlobal('innerHeight', 768);
+
+      element.getBoundingClientRect = vi.fn().mockReturnValue({
+        top: 700,
+        left: 100,
+        bottom: 800, // Beyond bottom edge (768)
+        right: 300
+      });
+
+      expect(domUtils.isFullyVisible(element)).toBe(false);
+    });
+
+    it('should return false when element extends beyond right edge', () => {
+      const element = document.createElement('div');
+      document.body.appendChild(element);
+
+      vi.stubGlobal('innerWidth', 1024);
+
+      element.getBoundingClientRect = vi.fn().mockReturnValue({
+        top: 100,
+        left: 900,
+        bottom: 200,
+        right: 1100 // Beyond right edge (1024)
+      });
+
+      expect(domUtils.isFullyVisible(element)).toBe(false);
+    });
+  });
+
+  describe('getXPath edge cases', () => {
+    it('should handle elements with multiple siblings of same type', () => {
+      document.body.innerHTML = `
+        <div>
+          <span></span>
+          <span></span>
+          <span id="target"></span>
+        </div>
+      `;
+      const element = document.getElementById('target');
+      const xpath = domUtils.getXPath(element);
+
+      expect(xpath).toContain('span[3]');
+    });
+
+    it('should handle deeply nested elements', () => {
+      document.body.innerHTML = `
+        <div>
+          <section>
+            <article>
+              <p id="deep">Deep content</p>
+            </article>
+          </section>
+        </div>
+      `;
+      const element = document.getElementById('deep');
+      const xpath = domUtils.getXPath(element);
+
+      expect(xpath).toContain('/div');
+      expect(xpath).toContain('/section');
+      expect(xpath).toContain('/article');
+      expect(xpath).toContain('/p');
+    });
+  });
+
+  describe('hasFocus edge cases', () => {
+    it('should return false when no element has focus', () => {
+      const element = document.createElement('div');
+      document.body.appendChild(element);
+
+      // Ensure nothing has focus
+      if (document.activeElement) {
+        document.activeElement.blur?.();
+      }
+
+      expect(domUtils.hasFocus(element)).toBe(false);
+    });
+  });
+
+  describe('getXPath - non-element nodes', () => {
+    it('should handle non-element nodes properly', () => {
+      // Test with text node (nodeType 3)
+      const textNode = document.createTextNode('test text');
+      const xpath = domUtils.getXPath(textNode);
+
+      expect(xpath).toBe('');
+    });
+  });
+
+  describe('attrBegins - array input', () => {
+    it('should handle array input correctly', () => {
+      document.body.innerHTML = `
+        <div id="div1" data-test="value"></div>
+        <div id="div2" aria-label="value"></div>
+      `;
+
+      // Test with array instead of NodeList
+      const elementsArray = [
+        document.getElementById('div1'),
+        document.getElementById('div2')
+      ];
+
+      const dataElements = domUtils.attrBegins(elementsArray, 'data-');
+      expect(dataElements.length).toBe(1);
+      expect(dataElements[0].id).toBe('div1');
+    });
+  });
 });

package/test/getAccessibleName.test.js

@@ -110,4 +110,186 @@ describe('getAccessibleName', () => {
     const dialog = document.querySelector('[role="dialog"]');
     expect(getAccessibleName(dialog)).toBe('Confirmation Are you sure you want to continue?');
   });
+
+  it('should handle text-level elements with content', () => {
+    // Test various text-level elements
+    const textLevelElements = ['em', 'strong', 'small', 'cite', 'code', 'var', 'kbd', 'sub', 'sup', 'i', 'b', 'u', 'mark'];
+    
+    textLevelElements.forEach(tagName => {
+      document.body.innerHTML = `<${tagName}>Important text</${tagName}>`;
+      const element = document.querySelector(tagName);
+      expect(getAccessibleName(element)).toBe('Important text');
+    });
+  });
+
+  it('should handle text-level elements with title fallback', () => {
+    document.body.innerHTML = `<em title="Emphasis title"></em>`;
+    const em = document.querySelector('em');
+    expect(getAccessibleName(em)).toBe('Emphasis title');
+  });
+
+  it('should return false for text-level elements without content or title', () => {
+    document.body.innerHTML = `<strong></strong>`;
+    const strong = document.querySelector('strong');
+    expect(getAccessibleName(strong)).toBe(false);
+  });
+
+  it('should handle elements with role-based text content', () => {
+    const textRoles = ['button', 'checkbox', 'link', 'menuitem', 'option', 'tab'];
+    
+    textRoles.forEach(role => {
+      document.body.innerHTML = `<div role="${role}">Role content</div>`;
+      const element = document.querySelector('div');
+      expect(getAccessibleName(element)).toBe('Role content');
+    });
+  });
+
+  it('should return false for elements with roles but no text content', () => {
+    document.body.innerHTML = `<div role="button"></div>`;
+    const element = document.querySelector('div');
+    expect(getAccessibleName(element)).toBe(false);
+  });
+
+  it('should handle input type="button" with value', () => {
+    document.body.innerHTML = `<input type="button" value="Cancel">`;
+    const button = document.querySelector('input');
+    expect(getAccessibleName(button)).toBe('Cancel');
+  });
+
+  it('should handle input type="button" with title fallback', () => {
+    document.body.innerHTML = `<input type="button" title="Close Dialog">`;
+    const button = document.querySelector('input');
+    expect(getAccessibleName(button)).toBe('Close Dialog');
+  });
+
+  it('should return false for input type="button" without value or title', () => {
+    document.body.innerHTML = `<input type="button">`;
+    const button = document.querySelector('input');
+    expect(getAccessibleName(button)).toBe(false);
+  });
+
+  it('should handle input type="reset" with title', () => {
+    document.body.innerHTML = `<input type="reset" title="Clear Form">`;
+    const reset = document.querySelector('input');
+    expect(getAccessibleName(reset)).toBe('Clear Form');
+  });
+
+  it('should return default "Reset" for input type="reset" without title', () => {
+    document.body.innerHTML = `<input type="reset">`;
+    const reset = document.querySelector('input');
+    expect(getAccessibleName(reset)).toBe('Reset');
+  });
+
+  it('should handle input type="image" with alt attribute', () => {
+    document.body.innerHTML = `<input type="image" alt="Submit Button">`;
+    const image = document.querySelector('input');
+    expect(getAccessibleName(image)).toBe('Submit Button');
+  });
+
+  it('should handle input type="image" with value fallback', () => {
+    document.body.innerHTML = `<input type="image" value="Send Message">`;
+    const image = document.querySelector('input');
+    expect(getAccessibleName(image)).toBe('Send Message');
+  });
+
+  it('should handle input type="image" with title fallback', () => {
+    document.body.innerHTML = `<input type="image" title="Upload File">`;
+    const image = document.querySelector('input');
+    expect(getAccessibleName(image)).toBe('Upload File');
+  });
+
+  it('should return false for input type="image" without alt, value, or title', () => {
+    document.body.innerHTML = `<input type="image">`;
+    const image = document.querySelector('input');
+    expect(getAccessibleName(image)).toBe(false);
+  });
+
+  it('should handle button element with title fallback', () => {
+    document.body.innerHTML = `<button title="Submit Form"></button>`;
+    const button = document.querySelector('button');
+    expect(getAccessibleName(button)).toBe('Submit Form');
+  });
+
+  it('should return false for button element without content or title', () => {
+    document.body.innerHTML = `<button></button>`;
+    const button = document.querySelector('button');
+    expect(getAccessibleName(button)).toBe(false);
+  });
+
+  it('should handle empty aria-label gracefully', () => {
+    document.body.innerHTML = `<button aria-label="">Click Me</button>`;
+    const button = document.querySelector('button');
+    expect(getAccessibleName(button)).toBe('Click Me');
+  });
+
+  it('should return false for aria-labelledby with non-existent reference', () => {
+    document.body.innerHTML = `<button aria-labelledby="non-existent">Click Me</button>`;
+    const button = document.querySelector('button');
+    expect(getAccessibleName(button)).toBe(false);
+  });
+
+  it('should handle disconnected elements', () => {
+    const div = document.createElement('div');
+    div.textContent = 'Not connected';
+    expect(getAccessibleName(div)).toBe(false);
+  });
+
+  it('should handle invisible elements', () => {
+    document.body.innerHTML = `<div style="display: none;">Hidden content</div>`;
+    const div = document.querySelector('div');
+    expect(getAccessibleName(div)).toBe(false);
+  });
+
+  it('should handle elements with aria-hidden="true"', () => {
+    document.body.innerHTML = `<div aria-hidden="true">Hidden from AT</div>`;
+    const div = document.querySelector('div');
+    expect(getAccessibleName(div)).toBe(false);
+  });
+
+  it('should handle unlabellable elements', () => {
+    document.body.innerHTML = `<hr>`;
+    const hr = document.querySelector('hr');
+    expect(getAccessibleName(hr)).toBe(false);
+  });
+
+  it('should use fallback accessible text for general elements', () => {
+    document.body.innerHTML = `<span>Fallback text content</span>`;
+    const span = document.querySelector('span');
+    expect(getAccessibleName(span)).toBe('Fallback text content');
+  });
+
+  it('should return false when no accessible name can be determined', () => {
+    document.body.innerHTML = `<div></div>`;
+    const div = document.querySelector('div');
+    expect(getAccessibleName(div)).toBe(false);
+  });
+
+  it('should handle input element with empty title', () => {
+    document.body.innerHTML = `<input type="text" title="">`;
+    const input = document.querySelector('input');
+    expect(getAccessibleName(input)).toBe(false);
+  });
+
+  it('should handle form elements with label', () => {
+    document.body.innerHTML = `
+      <label for="select-id">Choose option</label>
+      <select id="select-id">
+        <option>Option 1</option>
+      </select>
+    `;
+    const select = document.querySelector('select');
+    expect(getAccessibleName(select)).toBe('Choose option');
+  });
+
+  it('should handle form elements without label but with title', () => {
+    document.body.innerHTML = `<select title="Dropdown menu"><option>Option 1</option></select>`;
+    const select = document.querySelector('select');
+    expect(getAccessibleName(select)).toBe('Dropdown menu');
+  });
+
+  it('should return false for form elements without label or title', () => {
+    document.body.innerHTML = `<select><option>Option 1</option></select>`;
+    const select = document.querySelector('select');
+    expect(getAccessibleName(select)).toBe(false);
+  });
 });