Build a personal finance dashboard as a static web app in this directory: index.html, s…

antigravitygemini · 28 steps · 48s · 7 filessession e9822963-894@patrick-toulme
Build a personal finance dashboard as a static web app in this directory: index.html, style.css, app.js, data.js, charts.js. Transactions table with add/edit/delete + localStorage, monthly budget bars, a canvas spending-over-time chart, category filters, CSV import/export, dark theme, keyboard shortcuts, and a self-test page (tests.html) that exercises the core logic. Run your tests with a headless check (node) and fix what fails.
same matchclaude-code · 77 steps codex · 49 steps opencode · 44 steps pi · 28 steps antigravity · 28 steps
compare in arena
step 23 / 28
tests.htmlchange 1/1
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WealthPulse - Self-Test Suite</title>
  <link rel="stylesheet" href="style.css">
  <style>
    .test-container {
      max-width: 900px;
      margin: 40px auto;
      padding: 24px;
    }
    .test-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }
    .test-summary-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 20px;
      margin-bottom: 24px;
      display: flex;
      gap: 24px;
    }
    .test-metric {
      display: flex;
      flex-direction: column;
    }
    .test-metric-val {
      font-size: 1.8rem;
      font-weight: 800;
    }
    .test-metric-lbl {
      font-size: 0.85rem;
      color: var(--text-secondary);
    }
    .test-suite {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .test-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .test-card.pass {
      border-left: 4px solid var(--income-green);
    }
    .test-card.fail {
      border-left: 4px solid var(--expense-rose);
    }
    .test-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .test-name {
      font-weight: 700;
      font-size: 1rem;
    }
    .test-badge {
      font-size: 0.75rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: var(--radius-full);
      text-transform: uppercase;
    }
    .badge-pass {
      background: var(--income-green-bg);
      color: var(--income-green);
    }
    .badge-fail {
      background: var(--expense-rose-bg);
      color: var(--expense-rose);
    }
    .test-details {
      font-size: 0.85rem;
      color: var(--text-secondary);
      font-family: monospace;
      white-space: pre-wrap;
      background: var(--bg-secondary);
      padding: 8px 12px;
      border-radius: var(--radius-sm);
    }
  </style>
</head>
<body>
  <div class="test-container">
    <div class="test-header">
      <div>
        <h1>🧪 Core Self-Test Suite</h1>
        <p style="color: var(--text-secondary);">Automated unit & logic verification for WealthPulse</p>
      </div>
      <div style="display: flex; gap: 10px;">
        <a href="index.html" class="btn btn-secondary" style="text-decoration: none;">← Back to Dashboard</a>
        <button id="btn-run-tests" class="btn btn-primary">Run Tests Again</button>
      </div>
    </div>
 
    <div class="test-summary-card">
      <div class="test-metric">
        <span id="total-tests" class="test-metric-val">0</span>
        <span class="test-metric-lbl">Total Tests</span>
      </div>
      <div class="test-metric">
        <span id="passed-tests" class="test-metric-val" style="color: var(--income-green);">0</span>
        <span class="test-metric-lbl">Passed</span>
      </div>
      <div class="test-metric">
        <span id="failed-tests" class="test-metric-val" style="color: var(--expense-rose);">0</span>
        <span class="test-metric-lbl">Failed</span>
      </div>
      <div class="test-metric">
        <span id="test-time" class="test-metric-val">0ms</span>
        <span class="test-metric-lbl">Duration</span>
      </div>
    </div>
 
    <div id="test-suite-container" class="test-suite">
      <!-- Test cards rendered dynamically -->
    </div>
  </div>
 
  <script src="data.js"></script>
  <script>
    (function () {
      'use strict';
 
      const resultsContainer = document.getElementById('test-suite-container');
      const totalEl = document.getElementById('total-tests');
      const passedEl = document.getElementById('passed-tests');
      const failedEl = document.getElementById('failed-tests');
      const timeEl = document.getElementById('test-time');
      const btnRun = document.getElementById('btn-run-tests');
 
      function assert(condition, message) {
        if (!condition) {
          throw new Error(message || 'Assertion failed');
        }
      }
 
      function assertEqual(actual, expected, message) {
        if (actual !== expected) {
          throw new Error(`${message || 'Equal assertion failed'}: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
        }
      }
 
      function assertDeepEqual(actual, expected, message) {
        const aStr = JSON.stringify(actual);
        const eStr = JSON.stringify(expected);
        if (aStr !== eStr) {
          throw new Error(`${message || 'Deep equal assertion failed'}: expected ${eStr}, got ${aStr}`);
        }
      }
 
      const tests = [
        {
          name: 'Data Service Initialization',
          fn: () => {
            const service = new FinanceData.FinanceDataService();
            const txs = service.loadTransactions();
            assert(Array.isArray(txs), 'Transactions should be an array');
            assert(txs.length > 0, 'Sample transactions should not be empty');
          }
        },
        {
          name: 'Transaction Validation & Sanitization',
          fn: () => {
            const service = new FinanceData.FinanceDataService();
            const invalid = service.validateTransaction({ amount: -10, description: '' });
            assertEqual(invalid.isValid, false, 'Invalid transaction should fail validation');
            assert(invalid.errors.length >= 2, 'Should report multiple validation errors');
 
            const valid = service.validateTransaction({
              date: '2026-07-28',
              description: ' Coffee Shop ',
              amount: 15.5,
              category: 'Food & Dining',
              type: 'expense'
            });
            assertEqual(valid.isValid, true, 'Valid transaction should pass');
            assertEqual(valid.sanitized.description, 'Coffee Shop', 'Description should be trimmed');
            assertEqual(valid.sanitized.amount, 15.5, 'Amount should be parsed to float');
          }
        },
        {
          name: 'Add, Update, and Delete Transaction Lifecycle',
          fn: () => {
            const service = new FinanceData.FinanceDataService();
            let txs = [];
            const newTx = {
              date: '2026-07-28',
              description: 'Test Laptop',
              amount: 1200,
              category: 'Shopping',
              type: 'expense'
            };
 
            txs = service.addTransaction(txs, newTx);
            assertEqual(txs.length, 1, 'Transaction array length should be 1');
            const createdId = txs[0].id;
 
            txs = service.updateTransaction(txs, createdId, { amount: 1300, description: 'Test Laptop Pro' });
            assertEqual(txs[0].amount, 1300, 'Updated amount should be 1300');
            assertEqual(txs[0].description, 'Test Laptop Pro', 'Updated description should match');
 
            txs = service.deleteTransaction(txs, createdId);
            assertEqual(txs.length, 0, 'Transaction array length should be 0 after delete');
          }
        },
        {
          name: 'Summary Calculations (Income, Expense, Savings Rate)',
          fn: () => {
            const service = new FinanceData.FinanceDataService();
            const sampleTxs = [
              { type: 'income', amount: 4000 },
              { type: 'expense', amount: 1000 },
              { type: 'expense', amount: 500 }
            ];
 
            const summary = service.calculateSummary(sampleTxs);
            assertEqual(summary.totalIncome, 4000, 'Total income calculation');
            assertEqual(summary.totalExpense, 1500, 'Total expense calculation');
            assertEqual(summary.netBalance, 2500, 'Net balance calculation');
            assertEqual(summary.savingsRate, 62.5, 'Savings rate percentage calculation');
          }
        },
        {
          name: 'Category Spending Aggregation',
          fn: () => {
            const service = new FinanceData.FinanceDataService();
            const sampleTxs = [
              { date: '2026-07-01', category: 'Food & Dining', amount: 50, type: 'expense' },
              { date: '2026-07-02', category: 'Food & Dining', amount: 30, type: 'expense' },
              { date: '2026-07-03', category: 'Housing', amount: 1200, type: 'expense' },
              { date: '2026-07-04', category: 'Income', amount: 3000, type: 'income' }
            ];
 
            const catSpending = service.calculateCategorySpending(sampleTxs);
            assertEqual(catSpending['Food & Dining'], 80, 'Food & Dining total should be 80');
            assertEqual(catSpending['Housing'], 1200, 'Housing total should be 1200');
            assertEqual(catSpending['Income'], 0, 'Income category spending should be 0');
          }
        },
        {
          name: 'Spending Over Time Timeline Grouping',
          fn: () => {
            const service = new FinanceData.FinanceDataService();
            const sampleTxs = [
              { date: '2026-07-01', amount: 100, type: 'income' },
              { date: '2026-07-01', amount: 40, type: 'expense' },
              { date: '2026-07-02', amount: 60, type: 'expense' }
            ];
 
            const daily = service.calculateSpendingOverTime(sampleTxs, 'daily');
            assertDeepEqual(daily.labels, ['2026-07-01', '2026-07-02'], 'Timeline labels order');
            assertDeepEqual(daily.incomeValues, [100, 0], 'Daily income values');
            assertDeepEqual(daily.expenseValues, [40, 60], 'Daily expense values');
          }
        },
        {
          name: 'Filter Transactions (Search, Category, Type, Date Range)',
          fn: () => {
            const service = new FinanceData.FinanceDataService();
            const sampleTxs = [
              { date: '2026-07-01', description: 'Supermarket Groceries', category: 'Food & Dining', type: 'expense', amount: 120 },
              { date: '2026-07-15', description: 'Electric Bill', category: 'Utilities', type: 'expense', amount: 90 },
              { date: '2026-07-20', description: 'Salary Bonus', category: 'Income', type: 'income', amount: 500 }
            ];
 
            const searchRes = service.filterTransactions(sampleTxs, { search: 'electric' });
            assertEqual(searchRes.length, 1, 'Search query filter');
            assertEqual(searchRes[0].category, 'Utilities', 'Search matching transaction');
 
            const catRes = service.filterTransactions(sampleTxs, { category: 'Food & Dining' });
            assertEqual(catRes.length, 1, 'Category filter');
 
            const dateRes = service.filterTransactions(sampleTxs, { startDate: '2026-07-10', endDate: '2026-07-25' });
            assertEqual(dateRes.length, 2, 'Date range filter');
          }
        },
        {
          name: 'CSV Export and Parsing Pipeline',
          fn: () => {
            const service = new FinanceData.FinanceDataService();
            const sampleTxs = [
              { id: 'tx-100', date: '2026-07-28', description: 'Gadget Store, "Special"', amount: 299.99, category: 'Shopping', type: 'expense', notes: 'Gift' }
            ];
 
            const csvString = service.exportToCSV(sampleTxs);
            assert(csvString.includes('Gadget Store, ""Special""'), 'CSV escaping double quotes');
 
            const parsed = service.parseCSV(csvString);
            assertEqual(parsed.transactions.length, 1, 'Parsed CSV row count');
            assertEqual(parsed.transactions[0].amount, 299.99, 'Parsed CSV transaction amount');
            assertEqual(parsed.transactions[0].description, 'Gadget Store, "Special"', 'Parsed CSV quote unescaping');
          }
        },
        {
          name: 'Currency & Date Formatting Helpers',
          fn: () => {
            const service = new FinanceData.FinanceDataService();
            assertEqual(service.formatCurrency(1234.5), '$1,234.50', 'Format positive currency');
            assertEqual(service.formatCurrency(-45.2), '-$45.20', 'Format negative currency');
            assertEqual(service.formatDate('2026-07-28'), 'Jul 28, 2026', 'Format ISO date string');
          }
        }
      ];
 
      function runSuite() {
        resultsContainer.innerHTML = '';
        let passed = 0;
        let failed = 0;
        const startTime = performance.now();
 
        tests.forEach(test => {
          const card = document.createElement('div');
          card.className = 'test-card';
 
          try {
            test.fn();
            passed++;
            card.classList.add('pass');
            card.innerHTML = `
              <div class="test-title-row">
                <span class="test-name">${test.name}</span>
                <span class="test-badge badge-pass">PASS</span>
              </div>
            `;
          } catch (err) {
            failed++;
            card.classList.add('fail');
            card.innerHTML = `
              <div class="test-title-row">
                <span class="test-name">${test.name}</span>
                <span class="test-badge badge-fail">FAIL</span>
              </div>
              <div class="test-details">${err.stack || err.message}</div>
            `;
          }
 
          resultsContainer.appendChild(card);
        });
 
        const duration = Math.round(performance.now() - startTime);
 
        totalEl.textContent = tests.length;
        passedEl.textContent = passed;
        failedEl.textContent = failed;
        timeEl.textContent = duration + 'ms';
      }
 
      btnRun.addEventListener('click', runSuite);
      runSuite();
    })();
  </script>
</body>
</html>
 
368 lineshtml
Writes …/run-tests.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#antigravity #css #gemini #graphics #html #javascript #quick
i2-r5-agy
← all sessions