Align spending report groups and totals with gross outflows

raggr-frontend/tests/spending-report.test.cjs

@@ -0,0 +1,37 @@
+const fs = require('node:fs');
+const assert = require('node:assert/strict');
+const test = require('node:test');
+const ts = require('typescript');
+const React = require('react');
+const { renderToStaticMarkup } = require('react-dom/server');
+
+// Load the existing TSX renderer without adding a test bundler dependency.
+for (const ext of ['.ts', '.tsx']) {
+  require.extensions[ext] = (mod, filename) => {
+    const { outputText } = ts.transpileModule(fs.readFileSync(filename, 'utf8'), {
+      compilerOptions: { module: ts.ModuleKind.CommonJS, jsx: ts.JsxEmit.ReactJSX, esModuleInterop: true },
+    });
+    mod._compile(outputText, filename);
+  };
+}
+const { YnabSpendingReport } = require('../src/components/artifacts/renderers/YnabSpendingReport.tsx');
+const base = { start_date: '2026-10-01', end_date: '2026-10-12', group_by: 'category', rows: [{ key: 'Shopping', amount: 70, count: 2 }], total: 100 };
+const render = (data) => renderToStaticMarkup(React.createElement(YnabSpendingReport, { data }));
+
+test('legacy artifact keeps a neutral total label', () => {
+  const html = render(base);
+  assert.match(html, />Total</);
+  assert.doesNotMatch(html, /Total \(net\)|Total outflows|Inflows:/);
+});
+test('new report labels gross outflows, inflows and net separately', () => {
+  const html = render({ ...base, total_basis: 'outflows', inflows: 30, net_outflows: 70 });
+  assert.match(html, /Total outflows/);
+  assert.match(html, /Inflows:/);
+  assert.match(html, /Net outflows:/);
+  assert.match(html, /Groups show gross outflows/);
+});
+test('inflow-only report remains visible with empty outflow rows', () => {
+  const html = render({ ...base, total_basis: 'outflows', rows: [], total: 0, inflows: 75, net_outflows: -75 });
+  assert.match(html, /No outflows in this period/);
+  assert.match(html, /Inflows:/);
+});