refactor: consolidate formatting utilities and add testing infrastructure
- Replace 8 duplicate formatCurrency functions with shared utility - Add comprehensive formatter utilities (currency, date, number, etc.) - Set up Vitest for unit testing with 38 passing tests - Set up Playwright for E2E testing - Consolidate database connection to single source (src/utils/db.ts) - Add auth middleware helpers to reduce code duplication - Fix display bug: remove spurious minus sign in recent activity amounts - Add path aliases for cleaner imports ($utils, $models) - Add project documentation (CODEMAP.md, REFACTORING_PLAN.md) Test coverage: 38 unit tests passing Build: successful with no breaking changes
This commit is contained in:
69
scripts/replace-formatters.md
Normal file
69
scripts/replace-formatters.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# Formatter Replacement Progress
|
||||
|
||||
## Components Completed ✅
|
||||
1. DebtBreakdown.svelte - Replaced formatCurrency function
|
||||
2. EnhancedBalance.svelte - Replaced formatCurrency function (with Math.abs wrapper)
|
||||
|
||||
## Remaining Files to Update
|
||||
|
||||
### Components (3 files)
|
||||
- [ ] PaymentModal.svelte - Has formatCurrency function
|
||||
- [ ] SplitMethodSelector.svelte - Has inline .toFixed() calls
|
||||
- [ ] BarChart.svelte - Has inline .toFixed() calls
|
||||
- [ ] IngredientsPage.svelte - Has .toFixed() for recipe calculations
|
||||
|
||||
### Cospend Pages (7 files)
|
||||
- [ ] routes/cospend/+page.svelte - Has formatCurrency function
|
||||
- [ ] routes/cospend/payments/+page.svelte - Has formatCurrency function
|
||||
- [ ] routes/cospend/payments/view/[id]/+page.svelte - Has formatCurrency and .toFixed()
|
||||
- [ ] routes/cospend/payments/add/+page.svelte - Has .toFixed() and .toLocaleString()
|
||||
- [ ] routes/cospend/payments/edit/[id]/+page.svelte - Has multiple .toFixed() calls
|
||||
- [ ] routes/cospend/recurring/+page.svelte - Has formatCurrency function
|
||||
- [ ] routes/cospend/recurring/edit/[id]/+page.svelte - Has .toFixed() and .toLocaleString()
|
||||
- [ ] routes/cospend/settle/+page.svelte - Has formatCurrency function
|
||||
|
||||
## Replacement Strategy
|
||||
|
||||
### Pattern 1: Identical formatCurrency functions
|
||||
```typescript
|
||||
// OLD
|
||||
function formatCurrency(amount) {
|
||||
return new Intl.NumberFormat('de-CH', {
|
||||
style: 'currency',
|
||||
currency: 'CHF'
|
||||
}).format(amount);
|
||||
}
|
||||
|
||||
// NEW
|
||||
import { formatCurrency } from '$lib/utils/formatters';
|
||||
// Usage: formatCurrency(amount, 'CHF', 'de-CH')
|
||||
```
|
||||
|
||||
### Pattern 2: .toFixed() for currency display
|
||||
```typescript
|
||||
// OLD
|
||||
{payment.amount.toFixed(2)}
|
||||
|
||||
// NEW
|
||||
import { formatNumber } from '$lib/utils/formatters';
|
||||
{formatNumber(payment.amount, 2, 'de-CH')}
|
||||
```
|
||||
|
||||
### Pattern 3: .toLocaleString() for dates
|
||||
```typescript
|
||||
// OLD
|
||||
nextDate.toLocaleString('de-CH', { weekday: 'long', ... })
|
||||
|
||||
// NEW
|
||||
import { formatDateTime } from '$lib/utils/formatters';
|
||||
formatDateTime(nextDate, 'de-CH', { weekday: 'long', ... })
|
||||
```
|
||||
|
||||
### Pattern 4: Exchange rate display (4 decimals)
|
||||
```typescript
|
||||
// OLD
|
||||
{exchangeRate.toFixed(4)}
|
||||
|
||||
// NEW
|
||||
{formatNumber(exchangeRate, 4, 'de-CH')}
|
||||
```
|
||||
Reference in New Issue
Block a user