tests.html

<!DOCTYPE html>
<html>
<head>
    <title>Argus-Sheet - Test Suite</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        #results { border-collapse: collapse; width: 100%; }
        #results th, #results td { border: 1px solid #ddd; padding: 8px; }
        #results th { background-color: #f2f2f2; }
        .pass { color: green; }
        .fail { color: red; }
    </style>
</head>
<body>
    <h1>Argus-Sheet - Test Suite</h1>
    <table id="results">
        <thead>
            <tr>
                <th>Test Case</th>
                <th>Status</th>
                <th>Details</th>
            </tr>
        </thead>
        <tbody>
            <!-- Test results will be inserted here -->
        </tbody>
    </table>

    <!-- DOM elements required by the functions under test -->
    <div id="requests-list-container" style="display:none;"></div>
    <div id="pagination-container" style="display:none;"></div>
    <div id="error-display" style="display:none;"></div>

    <script>
        // =================================================================================
        // MOCKS & HELPERS
        // =================================================================================

        // Mock functions that are dependencies of the function being tested.
        function buildPaginationControls(totalPages, totalRecords) {
            // This is a mock; we just need it to exist.
            console.log(`Mock buildPaginationControls called with: ${totalPages}, ${totalRecords}`);
        }

        function showError(error) {
             // In a test environment, we want to see the error clearly.
            console.error("showError called:", error.message);
            const resultsBody = document.querySelector("#results tbody");
            const row = resultsBody.insertRow();
            row.innerHTML = `
                <td>showError call</td>
                <td class="fail">FAIL</td>
                <td>${error.message}</td>
            `;
        }

        function formatCurrency(value) {
            if (typeof value !== 'number') return String(value || '');
            return value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
        }

        function formatDate(dateValue, includeTime = true) {
            if (!dateValue) return '';
            const d = new Date(dateValue);
            if (isNaN(d.getTime())) return String(dateValue);
            return d.toLocaleDateString('pt-BR');
        }

        // =================================================================================
        // FUNCTIONS UNDER TEST (Copied from main.ts.html)
        // =================================================================================

        function handleResponse(jsonString) {
            try {
                if (!jsonString) { throw new Error("O servidor retornou uma resposta vazia."); }
                const response = JSON.parse(jsonString);
                if (response.error) { throw new Error(response.error); }

                // This is the fixed logic we are testing
                if (response.requests) {
                    displayRequests(response.requests);
                    buildPaginationControls(response.totalPages, response.totalRecords);
                    const paginationContainer = document.getElementById('pagination-container');
                    if (paginationContainer) paginationContainer.style.display = 'flex';
                }
            } catch (e) {
                showError(e);
            }
        }

        function displayRequests(requests) {
            const listContainer = document.getElementById('requests-list-container');
            listContainer.innerHTML = '';
            if (!requests || requests.length === 0) {
                listContainer.innerHTML = '<li class="text-center text-secondary py-5">Nenhuma solicitação encontrada para os filtros aplicados.</li>';
                return;
            }
            const statusMap = {
                'PENDENTE DE CADASTRO SAP': { text: 'Pendente', class: 'pending' },
                'CADASTRO EFETUADO': { text: 'Aprovado', class: 'approved' },
            };
            const fragment = document.createDocumentFragment();
            requests.forEach(req => {
                const card = document.createElement('li');
                card.className = 'request-card';
                let itemStatus = (req.STATUS_GERAL || 'PENDENTE DE CADASTRO SAP').trim().toUpperCase();
                let statusInfo = statusMap[itemStatus] || { text: 'Pendente', class: 'pending' };
                card.innerHTML = `<div>SKU: ${req.MATERIAL || 'N/A'}</div>`;
                fragment.appendChild(card);
            });
            listContainer.appendChild(fragment);
        }

        // =================================================================================
        // TEST RUNNER
        // =================================================================================

        const tests = [
            function testHandleResponse_WithCorrectData_ShouldRenderItems() {
                // Arrange
                const listContainer = document.getElementById('requests-list-container');
                listContainer.innerHTML = ''; // Reset DOM state
                const mockResponse = {
                    requests: [
                        { "MATERIAL": "SKU001", "STATUS_GERAL": "PENDENTE DE CADASTRO SAP" },
                        { "MATERIAL": "SKU002", "STATUS_GERAL": "CADASTRO EFETUADO" }
                    ],
                    totalPages: 1,
                    totalRecords: 2
                };
                const jsonString = JSON.stringify(mockResponse);

                // Act
                handleResponse(jsonString);

                // Assert
                const renderedItems = listContainer.querySelectorAll('.request-card');
                if (renderedItems.length !== 2) {
                    throw new Error(`Expected 2 items to be rendered, but found ${renderedItems.length}.`);
                }
                if (listContainer.innerHTML.includes("SKU001") === false) {
                    throw new Error("Expected to find SKU001 in the output.");
                }
            },

            function testHandleResponse_WithError_ShouldCallShowError() {
                // This test is designed to fail to demonstrate the test runner works.
                // We'll simulate this by checking if showError was called.
                // For a real test, we'd need to spy on showError. For this simple runner,
                // we'll just check for a specific error message.

                // Arrange
                const listContainer = document.getElementById('requests-list-container');
                const errorDisplay = document.getElementById('error-display');
                listContainer.innerHTML = '';
                errorDisplay.innerText = '';

                const jsonString = JSON.stringify({ error: "Backend database is down" });

                // Act
                handleResponse(jsonString);

                // Assert
                // The showError mock will have populated the table, so we check there.
                const resultsBody = document.querySelector("#results tbody");
                const lastRow = resultsBody.rows[resultsBody.rows.length - 1];
                if (!lastRow || !lastRow.cells[2].innerText.includes("Backend database is down")) {
                     throw new Error("showError was not called with the expected error message.");
                }
            }
        ];

        window.onload = () => {
            const resultsBody = document.querySelector("#results tbody");
            tests.forEach(test => {
                const row = resultsBody.insertRow();
                const nameCell = row.insertCell();
                const statusCell = row.insertCell();
                const detailsCell = row.insertCell();

                nameCell.textContent = test.name;

                try {
                    test();
                    statusCell.textContent = 'PASS';
                    statusCell.className = 'pass';
                } catch (e) {
                    statusCell.textContent = 'FAIL';
                    statusCell.className = 'fail';
                    detailsCell.textContent = e.message;
                    console.error(`Test failed: ${test.name}`, e);
                }
            });
        };

    </script>
</body>
</html>