@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

package/dist/styles/layers/validation.js

@@ -0,0 +1,275 @@
+/**
+ * CSS Layers Validation Tool
+ * Tests cascade order and specificity control in CSS layers
+ */
+/**
+ * Test if CSS layers are working correctly
+ * @returns {Object} Test results
+ */
+export function validateCSSLayers() {
+    const results = {
+        layerOrder: testLayerOrder(),
+        specificity: testSpecificity(),
+        inheritance: testInheritance(),
+        responsive: testResponsiveOrder(),
+        summary: null
+    };
+    // Calculate summary
+    const totalTests = Object.values(results).reduce((acc, testGroup) => {
+        if (testGroup && typeof testGroup === 'object' && testGroup.tests) {
+            return acc + testGroup.tests.length;
+        }
+        return acc;
+    }, 0);
+    const passedTests = Object.values(results).reduce((acc, testGroup) => {
+        if (testGroup && typeof testGroup === 'object' && testGroup.tests) {
+            return acc + testGroup.tests.filter(test => test.passed).length;
+        }
+        return acc;
+    }, 0);
+    results.summary = {
+        total: totalTests,
+        passed: passedTests,
+        failed: totalTests - passedTests,
+        percentage: totalTests > 0 ? Math.round((passedTests / totalTests) * 100) : 0
+    };
+    return results;
+}
+/**
+ * Test layer cascade order
+ */
+function testLayerOrder() {
+    const tests = [];
+    // Create test element
+    const testElement = document.createElement('div');
+    testElement.className = 'layer-test';
+    testElement.style.position = 'absolute';
+    testElement.style.visibility = 'hidden';
+    document.body.appendChild(testElement);
+    try {
+        const computedStyle = window.getComputedStyle(testElement);
+        const backgroundColor = computedStyle.backgroundColor;
+        const content = computedStyle.content;
+        // Test that overrides layer wins (purple background)
+        tests.push({
+            name: 'Layer order - overrides wins',
+            passed: backgroundColor === 'rgb(128, 0, 128)' || backgroundColor === 'purple',
+            expected: 'purple background from overrides layer',
+            actual: backgroundColor
+        });
+        tests.push({
+            name: 'Layer content property',
+            passed: content === '"overrides"',
+            expected: '"overrides"',
+            actual: content
+        });
+    }
+    catch (error) {
+        tests.push({
+            name: 'Layer order test',
+            passed: false,
+            expected: 'No errors',
+            actual: error.message
+        });
+    }
+    finally {
+        document.body.removeChild(testElement);
+    }
+    return {
+        category: 'Layer Order',
+        tests
+    };
+}
+/**
+ * Test specificity within layers
+ */
+function testSpecificity() {
+    const tests = [];
+    const testElement = document.createElement('div');
+    testElement.className = 'specificity-test';
+    testElement.style.position = 'absolute';
+    testElement.style.visibility = 'hidden';
+    document.body.appendChild(testElement);
+    try {
+        const computedStyle = window.getComputedStyle(testElement);
+        const backgroundColor = computedStyle.backgroundColor;
+        // Test that utilities layer wins over components layer
+        tests.push({
+            name: 'Specificity - utilities over components',
+            passed: backgroundColor === 'rgb(0, 0, 255)' || backgroundColor === 'blue',
+            expected: 'blue background from utilities layer',
+            actual: backgroundColor
+        });
+    }
+    catch (error) {
+        tests.push({
+            name: 'Specificity test',
+            passed: false,
+            expected: 'No errors',
+            actual: error.message
+        });
+    }
+    finally {
+        document.body.removeChild(testElement);
+    }
+    return {
+        category: 'Specificity',
+        tests
+    };
+}
+/**
+ * Test inheritance within layers
+ */
+function testInheritance() {
+    const tests = [];
+    const parentElement = document.createElement('div');
+    parentElement.className = 'inheritance-test';
+    const childElement = document.createElement('div');
+    childElement.className = 'child';
+    parentElement.appendChild(childElement);
+    parentElement.style.position = 'absolute';
+    parentElement.style.visibility = 'hidden';
+    document.body.appendChild(parentElement);
+    try {
+        const parentStyle = window.getComputedStyle(parentElement);
+        const childStyle = window.getComputedStyle(childElement);
+        // Test that utilities layer color overrides components layer
+        tests.push({
+            name: 'Layer inheritance - parent color',
+            passed: parentStyle.color === 'rgb(0, 0, 255)' || parentStyle.color === 'blue',
+            expected: 'blue color from utilities layer',
+            actual: parentStyle.color
+        });
+        // Test that child inherits the overridden color
+        tests.push({
+            name: 'Layer inheritance - child inherits',
+            passed: childStyle.color === 'rgb(0, 0, 255)' || childStyle.color === 'blue',
+            expected: 'inherited blue color',
+            actual: childStyle.color
+        });
+    }
+    catch (error) {
+        tests.push({
+            name: 'Inheritance test',
+            passed: false,
+            expected: 'No errors',
+            actual: error.message
+        });
+    }
+    finally {
+        document.body.removeChild(parentElement);
+    }
+    return {
+        category: 'Inheritance',
+        tests
+    };
+}
+/**
+ * Test responsive behavior within layers
+ */
+function testResponsiveOrder() {
+    const tests = [];
+    const testElement = document.createElement('div');
+    testElement.className = 'responsive-layer-test';
+    testElement.style.position = 'absolute';
+    testElement.style.visibility = 'hidden';
+    document.body.appendChild(testElement);
+    try {
+        const computedStyle = window.getComputedStyle(testElement);
+        const backgroundColor = computedStyle.backgroundColor;
+        // Test that utilities layer wins in responsive context
+        if (window.innerWidth <= 768) {
+            tests.push({
+                name: 'Responsive layers - mobile utilities win',
+                passed: backgroundColor === 'rgb(0, 128, 0)' || backgroundColor === 'green',
+                expected: 'green background from utilities layer',
+                actual: backgroundColor
+            });
+        }
+        else {
+            tests.push({
+                name: 'Responsive layers - desktop utilities win',
+                passed: backgroundColor === 'rgb(0, 0, 255)' || backgroundColor === 'blue',
+                expected: 'blue background from utilities layer',
+                actual: backgroundColor
+            });
+        }
+    }
+    catch (error) {
+        tests.push({
+            name: 'Responsive layer test',
+            passed: false,
+            expected: 'No errors',
+            actual: error.message
+        });
+    }
+    finally {
+        document.body.removeChild(testElement);
+    }
+    return {
+        category: 'Responsive',
+        tests
+    };
+}
+/**
+ * Generate a visual report of layer validation
+ * @param {Object} results - Validation results
+ * @returns {HTMLElement} Report element
+ */
+export function generateLayerReport(results) {
+    const reportElement = document.createElement('div');
+    reportElement.className = 'layer-diagnostic';
+    const title = document.createElement('h3');
+    title.textContent = `CSS Layers Validation (${results.summary.passed}/${results.summary.total} passed)`;
+    reportElement.appendChild(title);
+    // Add overall status
+    const overallStatus = document.createElement('div');
+    overallStatus.className = `test-result ${results.summary.percentage >= 80 ? 'pass' : 'fail'}`;
+    overallStatus.textContent = `Overall: ${results.summary.percentage}% passed`;
+    reportElement.appendChild(overallStatus);
+    // Add category results
+    Object.values(results).forEach(category => {
+        if (category && category.category && category.tests) {
+            const categoryDiv = document.createElement('div');
+            categoryDiv.style.marginTop = '10px';
+            categoryDiv.innerHTML = `<strong>${category.category}:</strong>`;
+            reportElement.appendChild(categoryDiv);
+            category.tests.forEach(test => {
+                const testDiv = document.createElement('div');
+                testDiv.className = `test-result ${test.passed ? 'pass' : 'fail'}`;
+                testDiv.textContent = `${test.passed ? '✓' : '✗'} ${test.name}`;
+                if (!test.passed) {
+                    testDiv.title = `Expected: ${test.expected}, Got: ${test.actual}`;
+                }
+                reportElement.appendChild(testDiv);
+            });
+        }
+    });
+    return reportElement;
+}
+/**
+ * Run validation and display results
+ */
+export function runLayerValidation() {
+    const results = validateCSSLayers();
+    const report = generateLayerReport(results);
+    // Remove existing report
+    const existingReport = document.querySelector('.layer-diagnostic');
+    if (existingReport) {
+        existingReport.remove();
+    }
+    // Add new report
+    document.body.appendChild(report);
+    // Auto-remove after 10 seconds
+    setTimeout(() => {
+        if (report.parentNode) {
+            report.parentNode.removeChild(report);
+        }
+    }, 10000);
+    return results;
+}
+// Auto-run validation if in development mode
+if (process.env.NODE_ENV === 'development') {
+    // Run validation after a short delay to ensure CSS is loaded
+    setTimeout(runLayerValidation, 1000);
+}