diff --git a/src/components/TransactionTable.tsx b/src/components/TransactionTable.tsx
index b696840..0686382 100644
--- a/src/components/TransactionTable.tsx
+++ b/src/components/TransactionTable.tsx
@@ -1,5 +1,4 @@
import { useStore } from '@nanostores/react';
-import { useStore } from '@nanostores/react';
import React, { useState, useEffect } from 'react';
import {
currentAccountId as currentAccountIdStore,
@@ -45,7 +44,7 @@ export default function TransactionTable({}: TransactionTableProps) {
};
fetchTransactions();
- }, [currentAccountId]);
+ }, [currentAccountId, refreshCounter]);
const sortedTransactions = [...transactions].sort(
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
@@ -76,15 +75,16 @@ export default function TransactionTable({}: TransactionTableProps) {
console.log(`Transaction ${txnId} deleted successfully.`);
+ // Remove from local state
setTransactions((currentTransactions) =>
currentTransactions.filter((txn) => txn.id !== txnId),
);
+ // Trigger refresh to update balances and table
triggerRefresh();
} catch (error) {
alert(error instanceof Error ? error.message : 'Failed to delete transaction');
console.error('Delete error:', error);
- } finally {
}
};
diff --git a/src/styles/global.css b/src/styles/global.css
index d6408f8..43de209 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -213,6 +213,58 @@ tbody tr:hover {
border-color: #f5c6cb;
}
+.error-message {
+ color: #dc3545;
+ background-color: #f8d7da;
+ border: 1px solid #f5c6cb;
+ border-radius: 4px;
+ padding: 8px 12px;
+ margin-bottom: 15px;
+ font-size: 0.9em;
+}
+
+.success-message {
+ color: #198754;
+ background-color: #d1e7dd;
+ border: 1px solid #badbcc;
+ border-radius: 4px;
+ padding: 8px 12px;
+ margin-bottom: 15px;
+ font-size: 0.9em;
+}
+
+.button-group {
+ display: flex;
+ gap: 10px;
+ margin-top: 15px;
+}
+
+.cancel-btn {
+ background-color: #6c757d;
+ color: white;
+ padding: 8px 15px;
+ border: none;
+ border-radius: 3px;
+ cursor: pointer;
+}
+
+.cancel-btn:hover {
+ background-color: #5a6268;
+}
+
+.cancel-btn:disabled {
+ background-color: #6c757d;
+ opacity: 0.65;
+ cursor: not-allowed;
+}
+
+.help-text {
+ display: block;
+ margin-top: 4px;
+ color: #6c757d;
+ font-size: 0.85em;
+}
+
/* Basic Responsive */
@media (max-width: 768px) {
.dashboard-layout {
diff --git a/src/test/components.test.tsx b/src/test/components.test.tsx
new file mode 100644
index 0000000..2c74b51
--- /dev/null
+++ b/src/test/components.test.tsx
@@ -0,0 +1,293 @@
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import AddTransactionForm from '../components/AddTransactionForm';
+import TransactionTable from '../components/TransactionTable';
+import type { Transaction } from '../types';
+
+// Create hoisted mocks that are safe to use in vi.mock
+const createMocks = vi.hoisted(() => ({
+ useStore: vi.fn((store) => {
+ // Match store values based on the store reference
+ switch (store?.get?.()) {
+ case createMocks.currentAccountId.get():
+ return '1';
+ case createMocks.transactionToEdit.get():
+ return null;
+ case createMocks.refreshKey.get():
+ return 0;
+ default:
+ return store?.get?.();
+ }
+ }),
+ currentAccountId: { get: vi.fn(() => '1') },
+ transactionToEdit: { get: vi.fn(() => null) },
+ refreshKey: { get: vi.fn(() => 0) },
+ setCurrentAccountId: vi.fn(),
+ setTransactionToEdit: vi.fn(),
+ triggerRefresh: vi.fn(),
+ cancelEditingTransaction: vi.fn(),
+ transactionSaved: vi.fn(),
+}));
+
+// Mock modules using hoisted mocks
+vi.mock('@nanostores/react', () => ({
+ useStore: createMocks.useStore,
+}));
+
+vi.mock('../stores/transactionStore', () => ({
+ currentAccountId: createMocks.currentAccountId,
+ transactionToEdit: createMocks.transactionToEdit,
+ refreshKey: createMocks.refreshKey,
+ setCurrentAccountId: createMocks.setCurrentAccountId,
+ setTransactionToEdit: createMocks.setTransactionToEdit,
+ triggerRefresh: createMocks.triggerRefresh,
+ cancelEditingTransaction: createMocks.cancelEditingTransaction,
+ transactionSaved: createMocks.transactionSaved,
+}));
+
+// Mock fetch globally
+global.fetch = vi.fn();
+
+describe('Transaction Management Components', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+
+ // Reset mock implementations
+ createMocks.currentAccountId.get.mockReturnValue('1');
+ createMocks.transactionToEdit.get.mockReturnValue(null);
+ createMocks.refreshKey.get.mockReturnValue(0);
+ });
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ describe('AddTransactionForm', () => {
+ it('should render the form with default values', () => {
+ render(
);
+
+ expect(screen.getByLabelText(/date/i)).toBeInTheDocument();
+ expect(screen.getByLabelText(/description/i)).toBeInTheDocument();
+ expect(screen.getByLabelText(/amount/i)).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /save transaction/i })).toBeInTheDocument();
+ });
+
+ it('should validate required fields', async () => {
+ render(
);
+
+ await act(async () => {
+ fireEvent.click(screen.getByRole('button', { name: /save transaction/i }));
+ });
+
+ await waitFor(() => {
+ expect(screen.getByText(/description must be at least/i)).toBeInTheDocument();
+ });
+ });
+
+ it('should handle successful transaction creation', async () => {
+ const mockTransaction: Transaction = {
+ id: '123',
+ accountId: '1',
+ date: '2025-05-05',
+ description: 'Test Transaction',
+ amount: -50,
+ };
+
+ // Mock fetch to delay the response slightly to simulate real API
+ (global.fetch as jest.Mock).mockImplementationOnce(
+ () =>
+ new Promise((resolve) => {
+ setTimeout(() => {
+ resolve({
+ ok: true,
+ json: () => Promise.resolve(mockTransaction),
+ });
+ }, 0);
+ }),
+ );
+
+ render(
);
+
+ // Fill out form
+ const descInput = screen.getByLabelText(/description/i);
+ const amountInput = screen.getByLabelText(/amount/i);
+
+ // Fill form with valid data
+ await act(async () => {
+ fireEvent.change(descInput, { target: { value: 'Test Transaction' } });
+ fireEvent.change(amountInput, { target: { value: '-50' } });
+ });
+
+ // Submit form
+ await act(async () => {
+ fireEvent.submit(screen.getByRole('form'));
+ });
+
+ // Use a more generous timeout for waitFor
+ await waitFor(
+ () => {
+ expect(screen.getByTestId('success-message')).toBeInTheDocument();
+ },
+ { timeout: 3000 },
+ );
+
+ expect(createMocks.transactionSaved).toHaveBeenCalledWith(mockTransaction);
+ expect(createMocks.triggerRefresh).toHaveBeenCalled();
+ });
+
+ it('should handle API errors', async () => {
+ // Mock fetch to delay the error response
+ (global.fetch as jest.Mock).mockImplementationOnce(
+ () =>
+ new Promise((resolve) => {
+ setTimeout(() => {
+ resolve({
+ ok: false,
+ status: 500,
+ statusText: 'Internal Server Error',
+ });
+ }, 0);
+ }),
+ );
+
+ render(
);
+
+ // Fill out form
+ const descInput = screen.getByLabelText(/description/i);
+ const amountInput = screen.getByLabelText(/amount/i);
+
+ // Fill form with valid data
+ await act(async () => {
+ fireEvent.change(descInput, { target: { value: 'Test Transaction' } });
+ fireEvent.change(amountInput, { target: { value: '-50' } });
+ });
+
+ // Submit form
+ await act(async () => {
+ fireEvent.submit(screen.getByRole('form'));
+ });
+
+ // Use a more generous timeout for waitFor
+ await waitFor(
+ () => {
+ expect(screen.getByTestId('error-message')).toBeInTheDocument();
+ },
+ { timeout: 3000 },
+ );
+
+ expect(screen.getByTestId('error-message')).toHaveTextContent(/500: Internal Server Error/i);
+ });
+
+ it('should handle edit mode', async () => {
+ const mockTransaction: Transaction = {
+ id: '123',
+ accountId: '1',
+ date: '2025-05-05',
+ description: 'Test Transaction',
+ amount: -50,
+ };
+
+ // Set up edit mode
+ createMocks.transactionToEdit.get.mockReturnValue(mockTransaction);
+ createMocks.useStore.mockImplementation((store) => {
+ if (store === createMocks.transactionToEdit) return mockTransaction;
+ return store?.get?.();
+ });
+
+ render(
);
+
+ // Verify form is populated with transaction data
+ await waitFor(() => {
+ expect(screen.getByLabelText(/date/i)).toHaveValue('2025-05-05');
+ expect(screen.getByLabelText(/description/i)).toHaveValue('Test Transaction');
+ expect(screen.getByLabelText(/amount/i)).toHaveDisplayValue('-50');
+ expect(screen.getByRole('button', { name: /update/i })).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('TransactionTable', () => {
+ const mockTransactions: Transaction[] = [
+ {
+ id: '1',
+ accountId: '1',
+ date: '2025-05-05',
+ description: 'Test Transaction 1',
+ amount: -50,
+ },
+ {
+ id: '2',
+ accountId: '1',
+ date: '2025-05-05',
+ description: 'Test Transaction 2',
+ amount: 100,
+ },
+ ];
+
+ it('should render transactions', async () => {
+ (global.fetch as jest.Mock).mockResolvedValueOnce({
+ ok: true,
+ json: () => Promise.resolve(mockTransactions),
+ });
+
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText('Test Transaction 1')).toBeInTheDocument();
+ expect(screen.getByText('Test Transaction 2')).toBeInTheDocument();
+ });
+ });
+
+ it('should handle transaction deletion', async () => {
+ (global.fetch as jest.Mock)
+ .mockResolvedValueOnce({
+ ok: true,
+ json: () => Promise.resolve(mockTransactions),
+ })
+ .mockResolvedValueOnce({
+ ok: true,
+ status: 204,
+ });
+
+ const confirmSpy = vi.spyOn(window, 'confirm');
+ confirmSpy.mockImplementation(() => true);
+
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText('Test Transaction 1')).toBeInTheDocument();
+ });
+
+ await act(async () => {
+ const deleteButton = screen.getAllByRole('button', { name: /delete/i })[0];
+ fireEvent.click(deleteButton);
+ });
+
+ await waitFor(() => {
+ expect(global.fetch).toHaveBeenCalledWith(
+ '/api/transactions/1',
+ expect.objectContaining({ method: 'DELETE' }),
+ );
+ expect(createMocks.triggerRefresh).toHaveBeenCalled();
+ });
+ });
+
+ it('should handle loading state', async () => {
+ (global.fetch as jest.Mock).mockImplementation(() => new Promise(() => {}));
+
+ render(
);
+
+ expect(screen.getByText(/loading/i)).toBeInTheDocument();
+ });
+
+ it('should handle error state', async () => {
+ (global.fetch as jest.Mock).mockRejectedValueOnce(new Error('Failed to fetch'));
+
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText(/error/i)).toBeInTheDocument();
+ });
+ });
+ });
+});
diff --git a/src/test/setup.ts b/src/test/setup.ts
index 152d978..1be9203 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -1,7 +1,12 @@
+import '@testing-library/jest-dom';
import type { APIContext } from 'astro';
-import { beforeEach } from 'vitest';
+import { beforeEach, vi } from 'vitest';
import { accounts, transactions } from '../data/store';
+// Setup JSDOM globals needed for React testing
+// @ts-ignore - vi.stubGlobal is not in the types
+vi.stubGlobal('fetch', vi.fn());
+
// Create a mock APIContext factory
export function createMockAPIContext(options: Partial
= {}): APIContext {
return {
@@ -55,4 +60,8 @@ beforeEach(() => {
amount: 100.0,
},
);
+
+ // Reset fetch mock
+ // @ts-ignore - vi.fn() is not in the types
+ fetch.mockReset();
});
diff --git a/vitest.config.ts b/vitest.config.ts
index 2b02c52..90ef876 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,21 +1,27 @@
///
+import react from '@vitejs/plugin-react';
import { defineConfig } from 'vitest/config';
export default defineConfig({
+ plugins: [react()],
test: {
- // Increase timeout for slower CI environments
- testTimeout: 10000,
- // Use the setup file we created
+ // Ensure non-interactive and CI-friendly configuration
+ watch: false,
+ silent: false,
+ passWithNoTests: true,
+ teardownTimeout: 5000,
+ // Testing environment setup
+ environment: 'jsdom',
setupFiles: ['./src/test/setup.ts'],
- // Ensure we're using the right environment
- environment: 'node',
- // Only include test files
- include: ['src/test/**/*.{test,spec}.{ts,js}'],
- // Configure coverage collection
+ // Test file patterns
+ include: ['src/test/**/*.{test,spec}.{ts,tsx}'],
+ // Coverage configuration
coverage: {
provider: 'v8',
reporter: ['text', 'json', 'html'],
exclude: ['node_modules/', 'src/test/**/*', '**/*.d.ts'],
},
+ // Global settings
+ globals: true,
},
});