@afixt/test-utils 1.2.3 → 2.0.0

package/test/stringUtils.test.js

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, afterEach } from 'vitest';
 import stringUtils from '../src/stringUtils.js';
 
 describe('stringUtils', () => {
@@ -152,151 +152,27 @@ describe('stringUtils', () => {
         });
     });
 
-    describe('getAllText', () => {
-        it('should extract text from simple text nodes', () => {
-            const div = document.createElement('div');
-            div.textContent = 'Hello World';
-
-            expect(stringUtils.getAllText(div)).toBe('Hello World');
-        });
-
-        it('should extract text from nested elements', () => {
-            const div = document.createElement('div');
-            const span = document.createElement('span');
-            span.textContent = 'Hello';
-            const text = document.createTextNode(' World');
-
-            div.appendChild(span);
-            div.appendChild(text);
-
-            expect(stringUtils.getAllText(div)).toBe('Hello World');
-        });
-
-        it('should extract aria-label attributes', () => {
-            const div = document.createElement('div');
-            const button = document.createElement('button');
-            button.setAttribute('aria-label', 'Close dialog');
-            button.textContent = 'X';
-
-            div.appendChild(button);
-
-            const result = stringUtils.getAllText(div);
-            expect(result).toContain('Close dialog');
-            expect(result).toContain('X');
-        });
-
-        it('should extract alt attributes from images', () => {
-            const div = document.createElement('div');
-            const img = document.createElement('img');
-            img.setAttribute('alt', 'Profile picture');
-            img.setAttribute('src', 'profile.jpg');
-
-            div.appendChild(img);
-
-            expect(stringUtils.getAllText(div)).toBe('Profile picture');
-        });
-
-        it('should handle mixed content with text, aria-labels, and alt text', () => {
-            const div = document.createElement('div');
-
-            // Add some text
-            const textNode = document.createTextNode('Welcome ');
-            div.appendChild(textNode);
-
-            // Add element with aria-label
-            const button = document.createElement('button');
-            button.setAttribute('aria-label', 'Help');
-            button.textContent = '?';
-            div.appendChild(button);
-
-            // Add some more text
-            const moreText = document.createTextNode(' to our site ');
-            div.appendChild(moreText);
-
-            // Add image with alt text
-            const img = document.createElement('img');
-            img.setAttribute('alt', 'Company logo');
-            div.appendChild(img);
-
-            const result = stringUtils.getAllText(div);
-            expect(result).toContain('Welcome');
-            expect(result).toContain('Help');
-            expect(result).toContain('?');
-            expect(result).toContain('to our site');
-            expect(result).toContain('Company logo');
-        });
-
-        it('should handle empty elements', () => {
-            const div = document.createElement('div');
-            expect(stringUtils.getAllText(div)).toBe('');
-        });
-
-        it('should trim whitespace from text nodes', () => {
-            const div = document.createElement('div');
-            const textNode = document.createTextNode('   Hello World   ');
-            div.appendChild(textNode);
-
-            expect(stringUtils.getAllText(div)).toBe('Hello World');
-        });
-
-        it('should handle elements with only whitespace', () => {
-            const div = document.createElement('div');
-            const textNode = document.createTextNode('   ');
-            div.appendChild(textNode);
-
-            // Should use textContent.trim() as fallback for empty text
-            expect(stringUtils.getAllText(div)).toBe('');
-        });
-
-        it('should handle deeply nested structures', () => {
-            const div = document.createElement('div');
-            const section = document.createElement('section');
-            const article = document.createElement('article');
-            const p = document.createElement('p');
-
-            p.textContent = 'Deep content';
-            article.appendChild(p);
-            section.appendChild(article);
-            div.appendChild(section);
-
-            expect(stringUtils.getAllText(div)).toBe('Deep content');
-        });
-
-        it('should handle images without alt attributes', () => {
-            const div = document.createElement('div');
-            const img = document.createElement('img');
-            img.setAttribute('src', 'image.jpg');
-            // No alt attribute
-
-            const text = document.createTextNode('Some text');
-            div.appendChild(text);
-            div.appendChild(img);
-
-            expect(stringUtils.getAllText(div)).toBe('Some text');
+    describe('hasText', () => {
+        afterEach(() => {
+            document.body.innerHTML = '';
         });
 
-        it('should handle elements without aria-label', () => {
-            const div = document.createElement('div');
-            const button = document.createElement('button');
-            button.textContent = 'Click me';
-            // No aria-label attribute
-
-            div.appendChild(button);
-
-            expect(stringUtils.getAllText(div)).toBe('Click me');
+        it('should return false for null or undefined', () => {
+            expect(stringUtils.hasText(null)).toBe(false);
+            expect(stringUtils.hasText(undefined)).toBe(false);
         });
-    });
 
-    describe('hasText', () => {
         it('should return true for elements with text content', () => {
             const div = document.createElement('div');
             div.textContent = 'Hello World';
+            document.body.appendChild(div);
 
             expect(stringUtils.hasText(div)).toBe(true);
         });
 
         it('should return false for empty elements', () => {
             const div = document.createElement('div');
+            document.body.appendChild(div);
 
             expect(stringUtils.hasText(div)).toBe(false);
         });
@@ -304,16 +180,15 @@ describe('stringUtils', () => {
         it('should return false for elements with only whitespace', () => {
             const div = document.createElement('div');
             div.textContent = '   \n\t   ';
+            document.body.appendChild(div);
 
             expect(stringUtils.hasText(div)).toBe(false);
         });
 
         it('should return true for elements with aria-label', () => {
             const div = document.createElement('div');
-            const button = document.createElement('button');
-            button.setAttribute('aria-label', 'Close');
-
-            div.appendChild(button);
+            div.setAttribute('aria-label', 'Close');
+            document.body.appendChild(div);
 
             expect(stringUtils.hasText(div)).toBe(true);
         });
@@ -322,8 +197,8 @@ describe('stringUtils', () => {
             const div = document.createElement('div');
             const img = document.createElement('img');
             img.setAttribute('alt', 'Profile picture');
-
             div.appendChild(img);
+            document.body.appendChild(div);
 
             expect(stringUtils.hasText(div)).toBe(true);
         });
@@ -332,8 +207,8 @@ describe('stringUtils', () => {
             const div = document.createElement('div');
             const span = document.createElement('span');
             span.textContent = 'Nested text';
-
             div.appendChild(span);
+            document.body.appendChild(div);
 
             expect(stringUtils.hasText(div)).toBe(true);
         });
@@ -342,9 +217,9 @@ describe('stringUtils', () => {
             const div = document.createElement('div');
             const span = document.createElement('span');
             const p = document.createElement('p');
-
             div.appendChild(span);
             span.appendChild(p);
+            document.body.appendChild(div);
 
             expect(stringUtils.hasText(div)).toBe(false);
         });
@@ -361,6 +236,7 @@ describe('stringUtils', () => {
             const input = document.createElement('input');
             input.type = 'text';
             input.value = '';
+            document.body.appendChild(input);
 
             expect(stringUtils.hasText(input)).toBe(false);
         });
@@ -382,48 +258,6 @@ describe('stringUtils', () => {
         });
     });
 
-    describe('getAllText edge cases', () => {
-        it('should handle text nodes with empty nodeValue but non-empty textContent', () => {
-            const div = document.createElement('div');
-            const textNode = document.createTextNode('   ');
-            div.appendChild(textNode);
-
-            // This tests the else branch where nodeValue.trim() is empty
-            const result = stringUtils.getAllText(div);
-            expect(typeof result).toBe('string');
-        });
-
-        it('should handle mixed content with whitespace text nodes', () => {
-            const div = document.createElement('div');
-            div.innerHTML = '  <span>Text</span>  ';
-
-            const result = stringUtils.getAllText(div);
-            expect(result).toContain('Text');
-        });
-
-        it('should handle elements with both aria-label and text content', () => {
-            const div = document.createElement('div');
-            const button = document.createElement('button');
-            button.textContent = 'Visual Text';
-            button.setAttribute('aria-label', 'Accessible Label');
-            div.appendChild(button);
-
-            const result = stringUtils.getAllText(div);
-            expect(result).toContain('Accessible Label');
-            expect(result).toContain('Visual Text');
-        });
-
-        it('should handle img without alt attribute', () => {
-            const div = document.createElement('div');
-            const img = document.createElement('img');
-            // No alt attribute
-            div.appendChild(img);
-
-            const result = stringUtils.getAllText(div);
-            expect(typeof result).toBe('string');
-        });
-    });
-
     describe('isEmptyOrWhitespace', () => {
         it('should return true for null/undefined/empty', () => {
             expect(stringUtils.isEmptyOrWhitespace(null)).toBe(true);
@@ -493,6 +327,45 @@ describe('stringUtils', () => {
         it('should trim whitespace', () => {
             expect(stringUtils.isGenericTitle('  iframe  ')).toBe(true);
         });
+
+        it('should detect browser/authoring tool default titles', () => {
+            expect(stringUtils.isGenericTitle('untitled document')).toBe(true);
+            expect(stringUtils.isGenericTitle('new page')).toBe(true);
+            expect(stringUtils.isGenericTitle('blank')).toBe(true);
+            expect(stringUtils.isGenericTitle('no title')).toBe(true);
+            expect(stringUtils.isGenericTitle('default')).toBe(true);
+        });
+
+        it('should detect CMS and structural generic titles', () => {
+            expect(stringUtils.isGenericTitle('placeholder')).toBe(true);
+            expect(stringUtils.isGenericTitle('sample page')).toBe(true);
+            expect(stringUtils.isGenericTitle('banner')).toBe(true);
+            expect(stringUtils.isGenericTitle('navigation')).toBe(true);
+            expect(stringUtils.isGenericTitle('advertisement')).toBe(true);
+        });
+
+        it('should match numbered variants with spaces', () => {
+            expect(stringUtils.isGenericTitle('untitled 1')).toBe(true);
+            expect(stringUtils.isGenericTitle('frame 2')).toBe(true);
+            expect(stringUtils.isGenericTitle('page 3')).toBe(true);
+            expect(stringUtils.isGenericTitle('section 42')).toBe(true);
+            expect(stringUtils.isGenericTitle('document 5')).toBe(true);
+            expect(stringUtils.isGenericTitle('tab 1')).toBe(true);
+        });
+
+        it('should match expanded numbered pattern base words', () => {
+            expect(stringUtils.isGenericTitle('slide1')).toBe(true);
+            expect(stringUtils.isGenericTitle('sheet2')).toBe(true);
+            expect(stringUtils.isGenericTitle('panel 3')).toBe(true);
+            expect(stringUtils.isGenericTitle('window4')).toBe(true);
+        });
+
+        it('should still return false for descriptive titles', () => {
+            expect(stringUtils.isGenericTitle('Contact Us Form')).toBe(false);
+            expect(stringUtils.isGenericTitle('Product Catalog')).toBe(false);
+            expect(stringUtils.isGenericTitle('John Smith Profile')).toBe(false);
+            expect(stringUtils.isGenericTitle('Q4 Sales Report')).toBe(false);
+        });
     });
 
     describe('isGenericLinkText', () => {
@@ -599,50 +472,4 @@ describe('stringUtils', () => {
             expect(stringUtils.hasNewWindowWarning(undefined)).toBe(false);
         });
     });
-
-    describe('textIncludingImgAlt', () => {
-        it('should return text content from text nodes', () => {
-            const el = document.createElement('div');
-            el.textContent = 'Hello World';
-            expect(stringUtils.textIncludingImgAlt(el).trim()).toBe('Hello World');
-        });
-
-        it('should include img alt text', () => {
-            const el = document.createElement('div');
-            el.innerHTML = 'Text <img alt="photo"> more text';
-            const result = stringUtils.textIncludingImgAlt(el);
-            expect(result).toContain('Text');
-            expect(result).toContain('photo');
-            expect(result).toContain('more text');
-        });
-
-        it('should handle img without alt', () => {
-            const el = document.createElement('div');
-            el.innerHTML = 'Text <img src="img.png"> more';
-            const result = stringUtils.textIncludingImgAlt(el);
-            expect(result).toContain('Text');
-            expect(result).toContain('more');
-        });
-
-        it('should not include aria-label text', () => {
-            const el = document.createElement('div');
-            el.innerHTML = '<button aria-label="Close">X</button>';
-            const result = stringUtils.textIncludingImgAlt(el);
-            expect(result).toContain('X');
-            expect(result).not.toContain('Close');
-        });
-
-        it('should handle empty element', () => {
-            const el = document.createElement('div');
-            expect(stringUtils.textIncludingImgAlt(el)).toBe('');
-        });
-
-        it('should concatenate text from nested elements', () => {
-            const el = document.createElement('div');
-            el.innerHTML = '<span>First</span> <span>Second</span>';
-            const result = stringUtils.textIncludingImgAlt(el);
-            expect(result).toContain('First');
-            expect(result).toContain('Second');
-        });
-    });
 });

package/test/testContrast.test.js

@@ -1,6 +1,7 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import {
     testContrast,
+    hasBackgroundImage,
     getComputedBackgroundColor,
     luminance,
     parseRGB,
@@ -94,17 +95,49 @@ describe('testContrast', () => {
         expect(testContrast(div)).toBe(true);
     });
 
-    it('should handle elements with background images', () => {
+    it('should skip elements with a background image', () => {
         const div = document.createElement('div');
         div.textContent = 'Text with background image';
         div.style.color = 'rgb(0, 0, 0)';
         div.style.backgroundImage = 'url(image.jpg)';
         document.body.appendChild(div);
 
-        // Should return true because background color can't be determined
+        // Should skip because contrast can't be reliably tested against background images
         expect(testContrast(div)).toBe(true);
     });
 
+    it('should skip elements whose ancestor has a background image', () => {
+        const parent = document.createElement('div');
+        parent.style.backgroundImage = 'url(bg.jpg)';
+
+        const child = document.createElement('div');
+        child.textContent = 'Text over parent background image';
+        child.style.color = 'rgb(0, 0, 0)';
+        child.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+
+        parent.appendChild(child);
+        document.body.appendChild(parent);
+
+        expect(testContrast(child)).toBe(true);
+    });
+
+    it('should not skip elements with opaque background over ancestor background image', () => {
+        const parent = document.createElement('div');
+        parent.style.backgroundImage = 'url(bg.jpg)';
+
+        const child = document.createElement('div');
+        child.textContent = 'Text with opaque background';
+        child.style.color = 'rgb(0, 0, 0)';
+        child.style.backgroundColor = 'rgb(255, 255, 255)';
+
+        parent.appendChild(child);
+        document.body.appendChild(parent);
+
+        // The child has an opaque background, so the parent's background image
+        // is not visible through it. Contrast should be tested normally.
+        expect(testContrast(child)).toBe(true);
+    });
+
     it('should handle invisible elements', () => {
         const div = document.createElement('div');
         div.textContent = 'Hidden text';
@@ -499,6 +532,75 @@ describe('getComputedBackgroundColor', () => {
     });
 });
 
+describe('hasBackgroundImage', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('should return false for null element', () => {
+        expect(hasBackgroundImage(null)).toBe(false);
+    });
+
+    it('should return false for document node', () => {
+        expect(hasBackgroundImage(document)).toBe(false);
+    });
+
+    it('should return true for element with background-image', () => {
+        const div = document.createElement('div');
+        div.style.backgroundImage = 'url(test.jpg)';
+        document.body.appendChild(div);
+
+        expect(hasBackgroundImage(div)).toBe(true);
+    });
+
+    it('should return false for element without background-image', () => {
+        const div = document.createElement('div');
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        document.body.appendChild(div);
+
+        expect(hasBackgroundImage(div)).toBe(false);
+    });
+
+    it('should return true when ancestor has a background image and element is transparent', () => {
+        const parent = document.createElement('div');
+        parent.style.backgroundImage = 'url(bg.jpg)';
+
+        const child = document.createElement('div');
+        child.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+
+        parent.appendChild(child);
+        document.body.appendChild(parent);
+
+        expect(hasBackgroundImage(child)).toBe(true);
+    });
+
+    it('should return false when ancestor has background image but element has opaque background', () => {
+        const parent = document.createElement('div');
+        parent.style.backgroundImage = 'url(bg.jpg)';
+
+        const child = document.createElement('div');
+        child.style.backgroundColor = 'rgb(255, 255, 255)';
+
+        parent.appendChild(child);
+        document.body.appendChild(parent);
+
+        expect(hasBackgroundImage(child)).toBe(false);
+    });
+
+    it('should return false if getComputedStyle is not available', () => {
+        const div = document.createElement('div');
+        div.style.backgroundImage = 'url(test.jpg)';
+        document.body.appendChild(div);
+
+        const originalGetComputedStyle = window.getComputedStyle;
+        window.getComputedStyle = null;
+
+        expect(hasBackgroundImage(div)).toBe(false);
+
+        window.getComputedStyle = originalGetComputedStyle;
+    });
+});
+
 describe('luminance', () => {
     it('should calculate luminance for pure black (0, 0, 0)', () => {
         const result = luminance(0, 0, 0);

package/todo.md

@@ -6,6 +6,6 @@ _No pending tasks_
 
 ## Completed
 
-- ✅ Test coverage improvements (76.4% line coverage, 87.53% branch coverage)
+- ✅ Test coverage improvements (87.69% line coverage, 82.11% branch coverage)
 - ✅ Playwright integration for CSS pseudo-element tests
-- ✅ 666 total tests passing (656 JSDOM + 10 Playwright)
+- ✅ 963 total tests passing (943 JSDOM + 20 Playwright)

package/src/isVisible.js

@@ -1,103 +0,0 @@
-/**
- * Checks if the selected item is visible to assistive technologies.
- * @param {Element} element - The element to check.
- * @param {boolean} strict - Option to be more strict about visibility of aria-hidden="true" in addition to CSS display: none.
- * @returns {boolean}
- */
-function isVisible(element, strict = false) {
-    // Add null check at the beginning
-    if (!element || !(element instanceof Element)) {
-        return false;
-    }
-
-    // Check if element is still connected to the DOM
-    if (!element.isConnected) {
-        return false;
-    }
-
-    const id = element.id;
-    let visible = true;
-
-    // These elements are inherently not visible
-    const nonVisibleSelectors = [
-        'base',
-        'head',
-        'meta',
-        'title',
-        'link',
-        'style',
-        'script',
-        'br',
-        'nobr',
-        'col',
-        'embed',
-        'input[type="hidden"]',
-        'keygen',
-        'source',
-        'track',
-        'wbr',
-        'datalist',
-        'area',
-        'param',
-        'noframes',
-        'ruby > rp',
-    ];
-
-    if (nonVisibleSelectors.some(selector => element.matches(selector))) {
-        return true;
-    }
-
-    const optionalAriaHidden = (el, strictCheck) =>
-        strictCheck && el.getAttribute('aria-hidden') === 'true';
-
-    const isElemHiddenByCSS = el => {
-        const style = window.getComputedStyle(el);
-        return style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0';
-    };
-
-    const isHidden = () => {
-        if (isElemHiddenByCSS(element)) {
-            return true;
-        }
-
-        let parent = element.parentElement;
-        while (parent) {
-            if (isElemHiddenByCSS(parent)) {
-                return true;
-            }
-            parent = parent.parentElement;
-        }
-        return optionalAriaHidden(element, strict);
-    };
-
-    if (isHidden()) {
-        visible = false;
-    }
-
-    // Check if element is referenced by aria-labelledby or aria-describedby
-    document
-        .querySelectorAll(`*[aria-labelledby~="${id}"], *[aria-describedby~="${id}"]`)
-        .forEach(referencingElement => {
-            if (window.getComputedStyle(referencingElement).display !== 'none') {
-                visible = true;
-            }
-        });
-
-    // Check if any parent has aria-hidden="true" when strict mode is on
-    if (visible && strict) {
-        let parent = element.parentElement;
-        while (parent) {
-            if (optionalAriaHidden(parent, strict)) {
-                visible = false;
-                break;
-            }
-            parent = parent.parentElement;
-        }
-    }
-
-    return visible;
-}
-
-module.exports = {
-    isVisible,
-};