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

antigravitygemini · 33 steps · 47s · 7 filessession 80eb4a24-374@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 · 113 steps codex · 56 steps pi · 22 steps antigravity · 33 steps
compare in arena
step 26 / 33
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>ApexFinance — Core Logic Self Tests</title>
  <style>
    :root {
      --bg: #0b0f17;
      --card-bg: #111827;
      --text: #f8fafc;
      --muted: #94a3b8;
      --pass: #10b981;
      --fail: #f43f5e;
      --border: rgba(255, 255, 255, 0.1);
    }
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      max-width: 900px;
      margin: 40px auto;
      padding: 20px;
    }
    h1 { margin-bottom: 8px; font-size: 24px; }
    .summary-box {
      background: var(--card-bg);
      padding: 16px 20px;
      border-radius: 10px;
      border: 1px solid var(--border);
      display: flex;
      gap: 24px;
      margin-bottom: 24px;
    }
    .metric-val { font-size: 22px; font-weight: bold; }
    .pass-val { color: var(--pass); }
    .fail-val { color: var(--fail); }
    .test-suite {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .test-card {
      background: var(--card-bg);
      padding: 14px 18px;
      border-radius: 8px;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .test-title { font-weight: 500; font-size: 14px; }
    .test-badge {
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: bold;
    }
    .badge-pass { background: rgba(16, 185, 129, 0.2); color: var(--pass); }
    .badge-fail { background: rgba(244, 63, 94, 0.2); color: var(--fail); }
    .error-msg { font-size: 12px; color: var(--fail); margin-top: 4px; }
    .nav-btn {
      display: inline-block;
      margin-bottom: 20px;
      padding: 8px 16px;
      background: #6366f1;
      color: #fff;
      border-radius: 6px;
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
    }
  </style>
  <script src="data.js"></script>
</head>
<body>
  <a href="index.html" class="nav-btn">← Back to Dashboard</a>
  <h1>🧪 Core Logic Self-Test Runner</h1>
  <p style="color: var(--muted); margin-bottom: 20px;">Automated assertion battery testing data calculations, validations, CRUD operations, and CSV features.</p>
 
  <div class="summary-box">
    <div>
      <div style="font-size: 12px; color: var(--muted);">TOTAL TESTS</div>
      <div id="total-count" class="metric-val">0</div>
    </div>
    <div>
      <div style="font-size: 12px; color: var(--muted);">PASSED</div>
      <div id="pass-count" class="metric-val pass-val">0</div>
    </div>
    <div>
      <div style="font-size: 12px; color: var(--muted);">FAILED</div>
      <div id="fail-count" class="metric-val fail-val">0</div>
    </div>
  </div>
 
  <div id="test-list" class="test-suite"></div>
 
  <script>
    (function () {
      const tests = [];
      const results = [];
 
      function test(description, fn) {
        tests.push({ description, fn });
      }
 
      function assert(condition, message) {
        if (!condition) {
          throw new Error(message || 'Assertion failed');
        }
      }
 
      function assertEqual(actual, expected, message) {
        if (actual !== expected) {
          throw new Error((message ? message + ': ' : '') + `Expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
        }
      }
 
      const FD = window.FinanceData;
 
      // Test Definitions
      test('1. Default Categories & Seed Data', () => {
        assert(Array.isArray(FD.DEFAULT_CATEGORIES), 'DEFAULT_CATEGORIES should be an array');
        assert(FD.DEFAULT_CATEGORIES.length >= 5, 'Should have at least 5 default categories');
        assert(Array.isArray(FD.DEFAULT_TRANSACTIONS), 'DEFAULT_TRANSACTIONS should be an array');
        assert(FD.DEFAULT_TRANSACTIONS.length > 0, 'Should have seed transactions');
      });
 
      test('2. Transaction Validation Logic', () => {
        const validTx = { date: '2026-07-28', description: 'Lunch', amount: 15.50, type: 'expense', category: 'food' };
        const v1 = FD.validateTransaction(validTx);
        assertEqual(v1.valid, true, 'Valid transaction should pass validation');
 
        const invalidTx = { date: 'invalid-date', description: '', amount: -10, type: 'unknown', category: '' };
        const v2 = FD.validateTransaction(invalidTx);
        assertEqual(v2.valid, false, 'Invalid transaction should fail validation');
        assert(v2.errors.length >= 3, 'Should list multiple validation errors');
      });
 
      test('3. Financial Summary Calculation', () => {
        const sample = [
          { amount: 1000, type: 'income' },
          { amount: 250, type: 'expense' },
          { amount: 150, type: 'expense' }
        ];
        const summary = FD.calculateSummary(sample);
        assertEqual(summary.totalIncome, 1000, 'Total income math');
        assertEqual(summary.totalExpenses, 400, 'Total expenses math');
        assertEqual(summary.netSavings, 600, 'Net savings math');
        assertEqual(summary.savingsRate, 60, 'Savings rate percentage');
      });
 
      test('4. Category Spending & Budget Thresholds', () => {
        const testCats = [
          { id: 'food', name: 'Food', budget: 100, icon: '🍔', color: '#000' }
        ];
        const sampleTx = [
          { amount: 85, type: 'expense', category: 'food' }
        ];
        const catSpending = FD.calculateCategorySpending(sampleTx, testCats);
        assertEqual(catSpending.length, 1);
        assertEqual(catSpending[0].spent, 85);
        assertEqual(catSpending[0].remaining, 15);
        assertEqual(catSpending[0].percentage, 85);
        assertEqual(catSpending[0].status, 'warning', '85% spent should trigger warning status');
      });
 
      test('5. Daily Spending Trends Generator', () => {
        const sampleTx = [
          { date: '2026-07-20', amount: 500, type: 'income' },
          { date: '2026-07-20', amount: 100, type: 'expense' },
          { date: '2026-07-21', amount: 50, type: 'expense' }
        ];
        const trends = FD.calculateDailySpendingTrends(sampleTx);
        assert(Array.isArray(trends), 'Trends should be an array');
        assert(trends.length >= 2, 'Should cover date range');
        const day1 = trends.find(t => t.date === '2026-07-20');
        assert(day1 !== undefined, 'Should contain date 2026-07-20');
        assertEqual(day1.income, 500);
        assertEqual(day1.expense, 100);
        assertEqual(day1.net, 400);
      });
 
      test('6. Filtering & Sorting', () => {
        const list = [
          { id: '1', date: '2026-07-01', category: 'food', amount: 50, description: 'Apple Market' },
          { id: '2', date: '2026-07-10', category: 'housing', amount: 1000, description: 'Rent' }
        ];
 
        const searchRes = FD.filterTransactions(list, { search: 'rent' });
        assertEqual(searchRes.length, 1);
        assertEqual(searchRes[0].id, '2');
 
        const catRes = FD.filterTransactions(list, { category: 'food' });
        assertEqual(catRes.length, 1);
        assertEqual(catRes[0].id, '1');
 
        const sortedDesc = FD.sortTransactions(list, 'amount', 'desc');
        assertEqual(sortedDesc[0].id, '2');
      });
 
      test('7. Add, Update & Delete CRUD Operations', () => {
        let list = [];
        const newTx = { date: '2026-07-28', description: 'Test Item', amount: 42, type: 'expense', category: 'shopping' };
        
        // Add
        list = FD.addTransaction(list, newTx);
        assertEqual(list.length, 1);
        const createdId = list[0].id;
        assert(createdId.startsWith('tx-'), 'Should generate unique transaction ID');
 
        // Update
        const updateData = { date: '2026-07-28', description: 'Updated Test Item', amount: 99, type: 'expense', category: 'shopping' };
        list = FD.updateTransaction(list, createdId, updateData);
        assertEqual(list[0].amount, 99);
        assertEqual(list[0].description, 'Updated Test Item');
 
        // Delete
        list = FD.deleteTransaction(list, createdId);
        assertEqual(list.length, 0);
      });
 
      test('8. CSV Export & Import Roundtrip', () => {
        const sample = [
          { id: 'tx-100', date: '2026-07-28', type: 'expense', category: 'food', amount: 25.5, description: 'Dinner, Special', notes: 'Note with "quotes"' }
        ];
 
        const csvString = FD.generateCSV(sample);
        assert(csvString.includes('Dinner, Special'), 'CSV string should include description');
 
        const parsed = FD.parseCSV(csvString);
        assertEqual(parsed.success, true, 'CSV import should succeed');
        assertEqual(parsed.transactions.length, 1, 'Should parse 1 transaction');
        assertEqual(parsed.transactions[0].amount, 25.5);
        assertEqual(parsed.transactions[0].description, 'Dinner, Special');
      });
 
      // Run All Tests
      let passCount = 0;
      let failCount = 0;
 
      const listElem = document.getElementById('test-list');
 
      tests.forEach(t => {
        const card = document.createElement('div');
        card.className = 'test-card';
 
        try {
          t.fn();
          passCount++;
          card.innerHTML = `
            <div>
              <div class="test-title">${t.description}</div>
            </div>
            <span class="test-badge badge-pass">PASSED</span>
          `;
          results.push({ description: t.description, passed: true });
        } catch (err) {
          failCount++;
          card.innerHTML = `
            <div>
              <div class="test-title">${t.description}</div>
              <div class="error-msg">${err.message}</div>
            </div>
            <span class="test-badge badge-fail">FAILED</span>
          `;
          results.push({ description: t.description, passed: false, error: err.message });
        }
 
        listElem.appendChild(card);
      });
 
      document.getElementById('total-count').textContent = tests.length;
      document.getElementById('pass-count').textContent = passCount;
      document.getElementById('fail-count').textContent = failCount;
 
      window.__TEST_RESULTS__ = {
        total: tests.length,
        passed: passCount,
        failed: failCount,
        results
      };
    })();
  </script>
</body>
</html>
 
287 lineshtml
Writes …/test_runner.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
r5-agy
← all sessions