@afixt/test-utils 1.2.0 → 1.2.2

package/test/cssUtils.test.js

@@ -0,0 +1,248 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import cssUtils from '../src/cssUtils.js';
+
+describe('cssUtils', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    describe('hasTransparentBackground', () => {
+        it('should return true for rgba(0, 0, 0, 0)', () => {
+            const style = { backgroundColor: 'rgba(0, 0, 0, 0)', backgroundImage: 'none' };
+            expect(cssUtils.hasTransparentBackground(style)).toBe(true);
+        });
+
+        it('should return true for "transparent"', () => {
+            const style = { backgroundColor: 'transparent', backgroundImage: 'none' };
+            expect(cssUtils.hasTransparentBackground(style)).toBe(true);
+        });
+
+        it('should return true for empty string background', () => {
+            const style = { backgroundColor: '', backgroundImage: 'none' };
+            expect(cssUtils.hasTransparentBackground(style)).toBe(true);
+        });
+
+        it('should return false when background color is set', () => {
+            const style = { backgroundColor: 'rgb(255, 0, 0)', backgroundImage: 'none' };
+            expect(cssUtils.hasTransparentBackground(style)).toBe(false);
+        });
+
+        it('should return false when background image is set', () => {
+            const style = { backgroundColor: 'rgba(0, 0, 0, 0)', backgroundImage: 'url(bg.png)' };
+            expect(cssUtils.hasTransparentBackground(style)).toBe(false);
+        });
+
+        it('should return false when both background color and image are set', () => {
+            const style = { backgroundColor: 'rgb(255, 255, 255)', backgroundImage: 'url(bg.png)' };
+            expect(cssUtils.hasTransparentBackground(style)).toBe(false);
+        });
+    });
+
+    describe('hasNoBorder', () => {
+        it('should return true when borderStyle is "none"', () => {
+            const style = { borderStyle: 'none', borderWidth: '0px' };
+            expect(cssUtils.hasNoBorder(style)).toBe(true);
+        });
+
+        it('should return true when borderWidth is 0', () => {
+            const style = { borderStyle: 'solid', borderWidth: '0px' };
+            expect(cssUtils.hasNoBorder(style)).toBe(true);
+        });
+
+        it('should return false when border is visible', () => {
+            const style = { borderStyle: 'solid', borderWidth: '1px' };
+            expect(cssUtils.hasNoBorder(style)).toBe(false);
+        });
+
+        it('should return false for dashed border with width', () => {
+            const style = { borderStyle: 'dashed', borderWidth: '2px' };
+            expect(cssUtils.hasNoBorder(style)).toBe(false);
+        });
+    });
+
+    describe('looksLikeText', () => {
+        it('should return true for element with no visual indicators', () => {
+            const el = document.createElement('span');
+            document.body.appendChild(el);
+
+            const mockStyle = {
+                textDecoration: 'none',
+                backgroundColor: 'rgba(0, 0, 0, 0)',
+                backgroundImage: 'none',
+                borderStyle: 'none',
+                borderWidth: '0px',
+            };
+            vi.spyOn(window, 'getComputedStyle').mockReturnValue(mockStyle);
+
+            expect(cssUtils.looksLikeText(el)).toBe(true);
+            vi.restoreAllMocks();
+        });
+
+        it('should return false for element with underline', () => {
+            const el = document.createElement('a');
+            document.body.appendChild(el);
+
+            const mockStyle = {
+                textDecoration: 'underline',
+                backgroundColor: 'rgba(0, 0, 0, 0)',
+                backgroundImage: 'none',
+                borderStyle: 'none',
+                borderWidth: '0px',
+            };
+            vi.spyOn(window, 'getComputedStyle').mockReturnValue(mockStyle);
+
+            expect(cssUtils.looksLikeText(el)).toBe(false);
+            vi.restoreAllMocks();
+        });
+
+        it('should return false for element with background', () => {
+            const el = document.createElement('span');
+            document.body.appendChild(el);
+
+            const mockStyle = {
+                textDecoration: 'none',
+                backgroundColor: 'rgb(200, 200, 200)',
+                backgroundImage: 'none',
+                borderStyle: 'none',
+                borderWidth: '0px',
+            };
+            vi.spyOn(window, 'getComputedStyle').mockReturnValue(mockStyle);
+
+            expect(cssUtils.looksLikeText(el)).toBe(false);
+            vi.restoreAllMocks();
+        });
+
+        it('should return false for element with border', () => {
+            const el = document.createElement('span');
+            document.body.appendChild(el);
+
+            const mockStyle = {
+                textDecoration: 'none',
+                backgroundColor: 'rgba(0, 0, 0, 0)',
+                backgroundImage: 'none',
+                borderStyle: 'solid',
+                borderWidth: '1px',
+            };
+            vi.spyOn(window, 'getComputedStyle').mockReturnValue(mockStyle);
+
+            expect(cssUtils.looksLikeText(el)).toBe(false);
+            vi.restoreAllMocks();
+        });
+    });
+
+    describe('hasLinkStyling', () => {
+        it('should return true for element with underline text decoration', () => {
+            const el = document.createElement('a');
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+                textDecoration: 'underline',
+            });
+
+            expect(cssUtils.hasLinkStyling(el)).toBe(true);
+            vi.restoreAllMocks();
+        });
+
+        it('should return true when underline is part of multiple decorations', () => {
+            const el = document.createElement('a');
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+                textDecoration: 'underline solid rgb(0, 0, 238)',
+            });
+
+            expect(cssUtils.hasLinkStyling(el)).toBe(true);
+            vi.restoreAllMocks();
+        });
+
+        it('should return false for element without underline', () => {
+            const el = document.createElement('span');
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+                textDecoration: 'none',
+            });
+
+            expect(cssUtils.hasLinkStyling(el)).toBe(false);
+            vi.restoreAllMocks();
+        });
+    });
+
+    describe('hasButtonStyling', () => {
+        it('should return true for element with background and padding', () => {
+            const el = document.createElement('span');
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+                backgroundColor: 'rgb(0, 123, 255)',
+                backgroundImage: 'none',
+                borderStyle: 'none',
+                borderWidth: '0px',
+                paddingTop: '8px',
+                paddingBottom: '8px',
+                paddingLeft: '16px',
+                paddingRight: '16px',
+            });
+
+            expect(cssUtils.hasButtonStyling(el)).toBe(true);
+            vi.restoreAllMocks();
+        });
+
+        it('should return true for element with border and padding', () => {
+            const el = document.createElement('span');
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+                backgroundColor: 'rgba(0, 0, 0, 0)',
+                backgroundImage: 'none',
+                borderStyle: 'solid',
+                borderWidth: '1px',
+                paddingTop: '8px',
+                paddingBottom: '8px',
+                paddingLeft: '16px',
+                paddingRight: '16px',
+            });
+
+            expect(cssUtils.hasButtonStyling(el)).toBe(true);
+            vi.restoreAllMocks();
+        });
+
+        it('should return false for element without sufficient padding', () => {
+            const el = document.createElement('span');
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+                backgroundColor: 'rgb(0, 123, 255)',
+                backgroundImage: 'none',
+                borderStyle: 'none',
+                borderWidth: '0px',
+                paddingTop: '0px',
+                paddingBottom: '0px',
+                paddingLeft: '0px',
+                paddingRight: '0px',
+            });
+
+            expect(cssUtils.hasButtonStyling(el)).toBe(false);
+            vi.restoreAllMocks();
+        });
+
+        it('should return false for transparent element with no border', () => {
+            const el = document.createElement('span');
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+                backgroundColor: 'rgba(0, 0, 0, 0)',
+                backgroundImage: 'none',
+                borderStyle: 'none',
+                borderWidth: '0px',
+                paddingTop: '10px',
+                paddingBottom: '10px',
+                paddingLeft: '20px',
+                paddingRight: '20px',
+            });
+
+            expect(cssUtils.hasButtonStyling(el)).toBe(false);
+            vi.restoreAllMocks();
+        });
+    });
+});