tests.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Configurator Tests - Simple Test Runner</title>
    <style>
        body {
            font-family: 'Courier New', monospace;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background-color: #1e1e1e;
            color: #d4d4d4;
        }
        
        .header {
            background-color: #2d2d30;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
            border-left: 4px solid #007acc;
        }
        
        .header h1 {
            margin: 0 0 10px 0;
            color: #4ec9b0;
        }
        
        .header p {
            margin: 0;
            color: #858585;
        }
        
        .test-suite {
            background-color: #2d2d30;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
        }
        
        .test-suite h2 {
            margin: 0 0 15px 0;
            color: #4ec9b0;
            font-size: 18px;
            border-bottom: 1px solid #3e3e42;
            padding-bottom: 10px;
        }
        
        .test {
            padding: 10px;
            margin-bottom: 8px;
            border-radius: 3px;
            background-color: #252526;
            border-left: 3px solid #858585;
        }
        
        .test.pass {
            border-left-color: #4ec9b0;
            background-color: #1a3a2d;
        }
        
        .test.fail {
            border-left-color: #f48771;
            background-color: #3a1e1e;
        }
        
        .test-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .test.pass .test-name::before {
            content: "✓ ";
            color: #4ec9b0;
        }
        
        .test.fail .test-name::before {
            content: "✗ ";
            color: #f48771;
        }
        
        .test-message {
            font-size: 12px;
            color: #858585;
            margin-left: 20px;
        }
        
        .test.fail .test-message {
            color: #f48771;
        }
        
        .summary {
            background-color: #2d2d30;
            padding: 20px;
            border-radius: 5px;
            margin-top: 20px;
            text-align: center;
        }
        
        .summary h2 {
            margin: 0 0 15px 0;
            color: #4ec9b0;
        }
        
        .summary.all-pass {
            border: 2px solid #4ec9b0;
        }
        
        .summary.has-failures {
            border: 2px solid #f48771;
        }
        
        .stat {
            display: inline-block;
            margin: 0 15px;
            font-size: 18px;
        }
        
        .stat-pass {
            color: #4ec9b0;
        }
        
        .stat-fail {
            color: #f48771;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Configurator Test Suite</h1>
        <p>Simple browser-based test runner (2007-era approach)</p>
    </div>

    <div id="test-results"></div>
    
    <div id="summary" class="summary">
        <h2>Test Summary</h2>
        <div id="summary-stats"></div>
    </div>

    <script src="src/system-configurator.js"></script>
    <script>
        // Simple test framework (2007-era style)
        const testResults = [];
        let currentSuite = null;

        function describe(suiteName, fn) {
            currentSuite = { name: suiteName, tests: [] };
            fn();
            testResults.push(currentSuite);
            currentSuite = null;
        }

        function it(testName, fn) {
            try {
                fn();
                currentSuite.tests.push({ name: testName, passed: true, message: 'Passed' });
            } catch (error) {
                currentSuite.tests.push({ 
                    name: testName, 
                    passed: false, 
                    message: error.message 
                });
            }
        }

        function assertEqual(actual, expected, message) {
            if (actual !== expected) {
                throw new Error(message || 'Expected ' + expected + ' but got ' + actual);
            }
        }

        function assertTrue(value, message) {
            if (!value) {
                throw new Error(message || 'Expected true but got ' + value);
            }
        }

        function assertGreaterThan(actual, threshold, message) {
            if (actual <= threshold) {
                throw new Error(message || 'Expected ' + actual + ' to be greater than ' + threshold);
            }
        }

        // TEST SUITES
        describe('SystemConfigurator - Basic Functionality', function() {
            it('should create a configurator with base price', function() {
                const config = new SystemConfigurator({ basePrice: 1000 });
                assertEqual(config.basePrice, 1000, 'Base price should be 1000');
            });

            it('should return base price when no options selected', function() {
                const config = new SystemConfigurator({ basePrice: 1000 });
                assertEqual(config.getPrice(), 1000, 'Price should equal base price');
            });

            it('should calculate price with selected options', function() {
                const config = new SystemConfigurator({
                    basePrice: 1000,
                    options: [[{
                        choices: [
                            { price: 0, name: "None", warrantyEligible: false, selected: true },
                            { price: 200, name: "Option A", warrantyEligible: true, selected: false }
                        ],
                        quantity: 1
                    }]]
                });
                config.selectOption(0, 0, 1);
                assertEqual(config.getPrice(), 1200, 'Price should be 1000 + 200');
            });

            it('should respect option quantity', function() {
                const config = new SystemConfigurator({
                    basePrice: 1000,
                    options: [[{
                        choices: [
                            { price: 0, name: "None", warrantyEligible: false, selected: true },
                            { price: 100, name: "Option A", warrantyEligible: true, selected: false }
                        ],
                        quantity: 3
                    }]]
                });
                config.selectOption(0, 0, 1);
                assertEqual(config.getPrice(), 1300, 'Price should be 1000 + (100 * 3)');
            });
        });

        describe('SystemConfigurator - Recursive Subitems', function() {
            it('should add subitem price to total', function() {
                const config = new SystemConfigurator({ basePrice: 1000 });
                const subitem = new SimpleItem({ name: 'sub', price: 500, quantity: 1 });
                config.addSubitem(subitem);
                assertEqual(config.getPrice(), 1500, 'Price should include subitem');
            });

            it('should recursively calculate nested configurator prices', function() {
                const mainConfig = new SystemConfigurator({ basePrice: 1000 });
                const subConfig = new SystemConfigurator({
                    basePrice: 500,
                    options: [[{
                        choices: [
                            { price: 0, name: "None", warrantyEligible: false, selected: true },
                            { price: 200, name: "Option A", warrantyEligible: true, selected: false }
                        ],
                        quantity: 1
                    }]]
                });
                subConfig.selectOption(0, 0, 1); // Select 200 option
                mainConfig.addSubitem(subConfig);
                assertEqual(mainConfig.getPrice(), 1700, 'Price should recursively include subconfig');
            });

            it('should support multiple levels of nesting', function() {
                const level1 = new SystemConfigurator({ basePrice: 1000 });
                const level2 = new SystemConfigurator({ basePrice: 500 });
                const level3 = new SystemConfigurator({ basePrice: 250 });
                
                level2.addSubitem(level3);
                level1.addSubitem(level2);
                
                assertEqual(level1.getPrice(), 1750, 'Price should include all nested levels');
            });

            it('should respect subitem quantity', function() {
                const config = new SystemConfigurator({ basePrice: 1000 });
                const subitem = new SimpleItem({ name: 'sub', price: 500, quantity: 3 });
                config.addSubitem(subitem);
                assertEqual(config.getPrice(), 2500, 'Price should be 1000 + (500 * 3)');
            });
        });

        describe('SimpleItem - Polymorphism', function() {
            it('should return fixed price', function() {
                const item = new SimpleItem({ name: 'simple', price: 800, quantity: 1 });
                assertEqual(item.getPrice(), 800, 'Should return fixed price');
            });

            it('should work polymorphically with SystemConfigurator', function() {
                const items = [
                    new SystemConfigurator({ basePrice: 1000 }),
                    new SimpleItem({ name: 'simple', price: 500, quantity: 1 }),
                    new SystemConfigurator({ basePrice: 750 })
                ];
                
                let total = 0;
                items.forEach(function(item) {
                    total += item.getPrice();
                });
                
                assertEqual(total, 2250, 'Polymorphic total should be correct');
            });
        });

        describe('Warranty Calculations', function() {
            it('should calculate warranty for base price', function() {
                const config = new SystemConfigurator({
                    basePrice: 8000,
                    warranties: [{
                        name: "Standard",
                        tiers: [
                            { minPrice: 0, price: 0 },
                            { minPrice: 5000, price: 100 }
                        ]
                    }]
                });
                config.setWarranty("Standard");
                const warrantyPrice = config.getWarrantyPrice();
                assertEqual(warrantyPrice, 100, 'Warranty should be 100 for price > 5000');
            });

            it('should include warranty in total price', function() {
                const config = new SystemConfigurator({
                    basePrice: 8000,
                    warranties: [{
                        name: "Standard",
                        tiers: [
                            { minPrice: 0, price: 0 },
                            { minPrice: 5000, price: 100 }
                        ]
                    }]
                });
                config.setWarranty("Standard");
                assertEqual(config.getPrice(), 8100, 'Total should include warranty');
            });
        });

        describe('Complex Integration Test', function() {
            it('should handle complex nested configuration correctly', function() {
                // Create a cluster with multiple nodes
                const cluster = new SystemConfigurator({
                    basePrice: 5000,
                    options: [[{
                        choices: [
                            { price: 0, name: "None", warrantyEligible: false, selected: true },
                            { price: 500, name: "Management", warrantyEligible: true, selected: false }
                        ],
                        quantity: 1
                    }]]
                });
                
                const node1 = new SystemConfigurator({
                    basePrice: 2000,
                    options: [[{
                        choices: [
                            { price: 0, name: "None", warrantyEligible: false, selected: true },
                            { price: 400, name: "CPU", warrantyEligible: true, selected: false }
                        ],
                        quantity: 1
                    }]]
                });
                
                const node2 = new SystemConfigurator({ basePrice: 1500 });
                
                const switches = new SimpleItem({ name: 'switch', price: 800, quantity: 2 });
                
                cluster.selectOption(0, 0, 1); // Select management
                node1.selectOption(0, 0, 1);   // Select CPU
                
                cluster.addSubitem(node1);
                cluster.addSubitem(node2);
                cluster.addSubitem(switches);
                
                // 5000 + 500 + (2000 + 400) + 1500 + (800 * 2) = 11000
                assertEqual(cluster.getPrice(), 11000, 'Complex configuration should calculate correctly');
            });
        });

        // RENDER RESULTS
        function renderResults() {
            const resultsDiv = document.getElementById('test-results');
            const summaryDiv = document.getElementById('summary');
            const summaryStats = document.getElementById('summary-stats');
            
            let totalTests = 0;
            let passedTests = 0;
            let failedTests = 0;
            
            let html = '';
            
            testResults.forEach(function(suite) {
                html += '<div class="test-suite">';
                html += '<h2>' + suite.name + '</h2>';
                
                suite.tests.forEach(function(test) {
                    totalTests++;
                    if (test.passed) {
                        passedTests++;
                    } else {
                        failedTests++;
                    }
                    
                    const testClass = test.passed ? 'test pass' : 'test fail';
                    html += '<div class="' + testClass + '">';
                    html += '<div class="test-name">' + test.name + '</div>';
                    html += '<div class="test-message">' + test.message + '</div>';
                    html += '</div>';
                });
                
                html += '</div>';
            });
            
            resultsDiv.innerHTML = html;
            
            // Update summary
            const summaryClass = failedTests === 0 ? 'summary all-pass' : 'summary has-failures';
            summaryDiv.className = summaryClass;
            
            summaryStats.innerHTML = 
                '<div class="stat">Total: <strong>' + totalTests + '</strong></div>' +
                '<div class="stat stat-pass">Passed: <strong>' + passedTests + '</strong></div>' +
                '<div class="stat stat-fail">Failed: <strong>' + failedTests + '</strong></div>';
        }

        // Run tests when page loads
        renderResults();
    </script>
</body>
</html>