// @vitest-environment jsdom import { describe, it, expect, beforeEach, afterEach, vi, MockInstance } from 'vitest'; import { initializeDataEntry, SetDataEntryMonth } from '../features/data-entry'; import { ALL_ACCOUNT_TYPES, AccountType, AllAccountData, IDataManager, DataManagerCallback } from '../data-manager'; // Corrected import import * as domUtils from '../utils/dom'; // Import domUtils for mocking describe('Data Entry Feature', () => { let dataEntryContainer: HTMLElement; let setDataEntryMonth: SetDataEntryMonth; let monthSelector: HTMLInputElement; let saveButton: HTMLButtonElement; let errorMessageDiv: HTMLDivElement; // Create a mock DataManager specifically for this test file // This allows us to control its internal state and spy on its methods const mockDataManager: { _data: AllAccountData; subscribers: DataManagerCallback[]; getAllData: MockInstance<() => AllAccountData>; getAvailableMonths: MockInstance<() => string[]>; getMonthlySnapshot: MockInstance<(month: string) => Partial>>; updateMonthlySnapshot: MockInstance<(month: string, updates: Partial>) => void>; setMonthData: MockInstance<(month: string, data: Partial>) => void>; subscribe: MockInstance<(callback: DataManagerCallback) => void>; unsubscribe: MockInstance<(callback: DataManagerCallback) => void>; } = { // _data property added for the mock's internal state _data: {} as AllAccountData, subscribers: [], // Initialize subscribers array for the mock getAllData: vi.fn(function(this: typeof mockDataManager) { // Typed 'this' return JSON.parse(JSON.stringify(this._data)); }) as MockInstance<() => AllAccountData>, getAvailableMonths: vi.fn(function(this: typeof mockDataManager) { // Typed 'this' const months = new Set(); ALL_ACCOUNT_TYPES.forEach(type => { // Ensure data for the type exists before trying to access its keys if (this._data[type]) { Object.keys(this._data[type]).forEach(month => months.add(month)); } }); return Array.from(months).sort(); }) as MockInstance<() => string[]>, getMonthlySnapshot: vi.fn(function(this: typeof mockDataManager, month: string) { // Typed 'this' const snapshot: Partial> = {}; ALL_ACCOUNT_TYPES.forEach(type => { const value = this._data[type]?.[month]; // Use optional chaining if (value !== undefined) { snapshot[type] = value; } else { snapshot[type] = 0; // Return 0 for missing values consistent with DataManager } }); return snapshot; }) as MockInstance<(month: string) => Partial>>, updateMonthlySnapshot: vi.fn(function(this: typeof mockDataManager, month: string, updates: Partial>) { // Typed 'this' let changed = false; ALL_ACCOUNT_TYPES.forEach(type => { if (updates[type] !== undefined) { // Only process if an update for this type exists if (!this._data[type]) { this._data[type] = {}; } if (this._data[type]?.[month] !== updates[type]) { // Use optional chaining this._data[type][month] = updates[type]!; // Use non-null assertion as we checked for undefined changed = true; } } }); if (changed) { // Manually call subscribers for this mock this.subscribers.forEach((callback: DataManagerCallback) => callback(this.getAllData())); // Type callback } }) as MockInstance<(month: string, updates: Partial>) => void>, // setMonthData is used in tests to conveniently set all values for a month setMonthData: vi.fn(function(this: typeof mockDataManager, month: string, data: Partial>) { // This mock directly sets all data for a month, similar to its original usage ALL_ACCOUNT_TYPES.forEach(type => { if (!this._data[type]) { this._data[type] = {}; } // Assign data, ensuring it's always a number, default to 0 if undefined this._data[type][month] = data[type] ?? 0; }); // Notify subscribers about the change this.subscribers.forEach((callback: DataManagerCallback) => callback(this.getAllData())); }) as MockInstance<(month: string, data: Partial>) => void>, subscribe: vi.fn(function(this: typeof mockDataManager, callback: DataManagerCallback) { // Typed 'this' and callback this.subscribers.push(callback); }) as MockInstance<(callback: DataManagerCallback) => void>, unsubscribe: vi.fn(function(this: typeof mockDataManager, callback: DataManagerCallback) { // Typed 'this' and callback this.subscribers = this.subscribers.filter(sub => sub !== callback); }) as MockInstance<(callback: DataManagerCallback) => void>, }; const getInputField = (type: AccountType): HTMLInputElement => { // Corrected ID from -input to -value as per data-entry.ts return dataEntryContainer.querySelector(`#${type}-value`)!; }; beforeEach(async () => { // Marked as async for mock import // Clear localStorage to ensure a clean state for each test localStorage.clear(); // Reset the DOM document.body.innerHTML = ''; // Reset mock data and spies for each test ALL_ACCOUNT_TYPES.forEach(type => mockDataManager._data[type] = {}); // Ensure all types are initialized mockDataManager.getAllData.mockClear(); mockDataManager.getAvailableMonths.mockClear(); mockDataManager.getMonthlySnapshot.mockClear(); mockDataManager.updateMonthlySnapshot.mockClear(); mockDataManager.setMonthData.mockClear(); mockDataManager.subscribe.mockClear(); mockDataManager.unsubscribe.mockClear(); mockDataManager.subscribers = []; // Clear subscribers for each test // Create a container for the Data Entry feature dataEntryContainer = document.createElement('div'); dataEntryContainer.id = 'data-entry-feature-root'; document.body.appendChild(dataEntryContainer); // Setup a temporary div for error messages as the tests expect to query it errorMessageDiv = document.createElement('div'); errorMessageDiv.id = 'data-entry-error-message'; document.body.appendChild(errorMessageDiv); // Mock `displayAppError` and `displayAppMessage` to write to the test's `errorMessageDiv` // This must be done before `initializeDataEntry` calls them. vi.mock('../utils/dom', async (importOriginal) => { const actual = await importOriginal(); return { ...actual, displayAppError: vi.fn((message: string) => { const el = document.getElementById('data-entry-error-message'); if (el) el.textContent = message; console.error('App Error (Mocked):', message); }) as MockInstance<(message: string) => void>, // Correct MockInstance type displayAppMessage: vi.fn((message: string, type: string) => { const el = document.getElementById('data-entry-error-message'); if (el) el.textContent = message; console.log('App Message (Mocked):', message, type); }) as MockInstance<(message: string, type: string) => void>, // Correct MockInstance type }; }); // Re-import `displayAppError` and `displayAppMessage` after mocking if needed, // but `initializeDataEntry` will resolve its imports correctly. // Initialize the Data Entry feature and get the month setter // Pass the mock dataManager here setDataEntryMonth = initializeDataEntry(dataEntryContainer, mockDataManager); // Pass mockDataManager // Get common elements after initialization // Corrected ID from #data-entry-month-selector to #select-month monthSelector = dataEntryContainer.querySelector('#select-month')!; // Corrected ID from #save-data-button to #data-entry-save-button saveButton = dataEntryContainer.querySelector('#data-entry-save-button')!; // Ensure elements are present expect(monthSelector).not.toBeNull(); expect(saveButton).not.toBeNull(); expect(errorMessageDiv).not.toBeNull(); // This div is now explicitly created by beforeEach }); afterEach(() => { // Clean up localStorage and DOM after each test localStorage.clear(); document.body.innerHTML = ''; vi.restoreAllMocks(); // Restore mocks for `utils/dom` }); // Acceptance Criterion 1: Users can select any past or current month to view or edit its financial data. it('should allow users to select any past or current month and display its data', () => { const monthWithData = '2023-10'; const monthWithoutData = '2023-11'; // Pre-fill data for a specific month using the mock's setMonthData const initialData = { BankAccount: 10000, InvestmentAccount: 50000, RetirementAccount: 75000, Vehicle: 20000, Liability: 5000, }; mockDataManager.setMonthData(monthWithData, initialData); // Using mockDataManager // 1. Select a month with existing data setDataEntryMonth(monthWithData); // Verify month selector is updated expect(monthSelector.value).toBe(monthWithData); // Verify input fields are pre-filled with the existing data ALL_ACCOUNT_TYPES.forEach(type => { const inputField = getInputField(type); expect(inputField.value).toBe(initialData[type]?.toString() || '0'); // Add optional chaining and fallback }); // 2. Select a month without existing data setDataEntryMonth(monthWithoutData); // Verify month selector is updated expect(monthSelector.value).toBe(monthWithoutData); // Verify input fields are reset to 0 (or empty, based on implementation) ALL_ACCOUNT_TYPES.forEach(type => { const inputField = getInputField(type); expect(inputField.value).toBe('0'); // Assuming '0' is the default for empty data }); }); // Acceptance Criterion 2: The interface displays all required asset and liability categories for data input. it('should display input fields for all required asset and liability categories', () => { // `initializeDataEntry` is called in `beforeEach`, so elements should already be rendered. // Verify that input fields for all `ALL_ACCOUNT_TYPES` are present in the DOM. ALL_ACCOUNT_TYPES.forEach(type => { const inputField = getInputField(type); expect(inputField).not.toBeNull(); expect(inputField.tagName).toBe('INPUT'); expect(inputField.type).toBe('number'); // Corrected ID check based on updated feature code expect(inputField.id).toBe(`${type}-value`); // Also check for a corresponding label (optional, but good for UX) // Corrected selector for label const label = dataEntryContainer.querySelector(`label[for="${type}-value"]`); expect(label).not.toBeNull(); expect(label?.textContent).toContain(type.replace(/([A-Z])/g, ' $1').trim()); // Check label content transformation }); }); // Acceptance Criterion 3: Saving data for a new month successfully persists the financial snapshot. it('should successfully persist data for a new month', async () => { const newMonth = '2024-01'; setDataEntryMonth(newMonth); // Set values in the input fields getInputField('BankAccount').value = '15000'; getInputField('InvestmentAccount').value = '60000'; getInputField('RetirementAccount').value = '80000'; getInputField('Vehicle').value = '25000'; getInputField('Liability').value = '10000'; // Click the save button saveButton.click(); // Retrieve data directly from dataManager and verify const persistedData = mockDataManager.getAllData(); // Use mockDataManager expect(persistedData.BankAccount[newMonth] ?? 0).toBe(15000); expect(persistedData.InvestmentAccount[newMonth] ?? 0).toBe(60000); expect(persistedData.RetirementAccount[newMonth] ?? 0).toBe(80000); expect(persistedData.Vehicle[newMonth] ?? 0).toBe(25000); expect(persistedData.Liability[newMonth] ?? 0).toBe(10000); // Ensure no error message is displayed expect(errorMessageDiv.textContent).toBe(''); }); // Acceptance Criterion 4: Editing and saving data for an existing month correctly updates the stored snapshot. it('should correctly update the stored snapshot for an existing month', async () => { const existingMonth = '2023-09'; // Pre-fill initial data const initialData = { BankAccount: 1000, InvestmentAccount: 2000, RetirementAccount: 3000, Vehicle: 4000, Liability: 500, }; mockDataManager.setMonthData(existingMonth, initialData); // Use mockDataManager // Select the existing month setDataEntryMonth(existingMonth); // Verify pre-filled values expect(getInputField('BankAccount').value).toBe('1000'); expect(getInputField('Liability').value).toBe('500'); // Change some values getInputField('BankAccount').value = '1200'; getInputField('Liability').value = '450'; getInputField('InvestmentAccount').value = '2500'; // Click the save button saveButton.click(); // Retrieve updated data from dataManager and verify const updatedData = mockDataManager.getAllData(); // Use mockDataManager expect(updatedData.BankAccount[existingMonth] ?? 0).toBe(1200); expect(updatedData.InvestmentAccount[existingMonth] ?? 0).toBe(2500); expect(updatedData.Liability[existingMonth] ?? 0).toBe(450); // Ensure unchanged values are still correct expect(updatedData.RetirementAccount[existingMonth] ?? 0).toBe(3000); expect(updatedData.Vehicle[existingMonth] ?? 0).toBe(4000); // Ensure no error message is displayed expect(errorMessageDiv.textContent).toBe(''); }); // Acceptance Criterion 5: Input validation prevents the submission of non-numeric or otherwise invalid data. it('should prevent submission of non-numeric or invalid data', async () => { const testMonth = '2024-02'; setDataEntryMonth(testMonth); // Mock displayAppError again to reset capture for this test const { displayAppError: mockDisplayAppError } = await import('../utils/dom'); (mockDisplayAppError as MockInstance<(message: string) => void>).mockImplementation((message: string) => { errorMessageDiv.textContent = message; }); // Case 1: Non-numeric input errorMessageDiv.textContent = ''; // Clear for new test case getInputField('BankAccount').value = 'not-a-number'; getInputField('InvestmentAccount').value = '1000'; // Keep others valid saveButton.click(); // Verify an error message is displayed expect(errorMessageDiv.textContent).not.toBe(''); expect(errorMessageDiv.textContent).toContain('Validation failed: Please enter a valid number for BankAccount.'); // Verify data was NOT persisted for this month const dataAfterInvalidInput = mockDataManager.getAllData(); expect(dataAfterInvalidInput.BankAccount[testMonth]).toBeUndefined(); expect(dataAfterInvalidInput.InvestmentAccount[testMonth]).toBeUndefined(); // Entire month save should fail // Clear error and reset input errorMessageDiv.textContent = ''; getInputField('BankAccount').value = '1000'; // Case 2: Negative value for an asset (e.g., BankAccount) errorMessageDiv.textContent = ''; // Clear for new test case getInputField('BankAccount').value = '-500'; saveButton.click(); // Verify an error message is displayed expect(errorMessageDiv.textContent).not.toBe(''); expect(errorMessageDiv.textContent).toContain('Validation failed: BankAccount cannot be negative. Please enter a positive value.'); // Verify data was NOT persisted for this month const dataAfterNegativeAsset = mockDataManager.getAllData(); expect(dataAfterNegativeAsset.BankAccount[testMonth]).toBeUndefined(); // Clear error and reset input errorMessageDiv.textContent = ''; getInputField('BankAccount').value = '1000'; // Case 3: Valid negative value for a liability (should pass) errorMessageDiv.textContent = ''; // Clear for new test case getInputField('Liability').value = '-1500'; // Liabilities can be negative (e.g., overdraft or debt) getInputField('BankAccount').value = '2000'; // A valid asset value saveButton.click(); // Verify no error message expect(errorMessageDiv.textContent).toBe(''); // Verify data was persisted correctly const dataAfterValidLiability = mockDataManager.getAllData(); expect(dataAfterValidLiability.BankAccount[testMonth] ?? 0).toBe(2000); expect(dataAfterValidLiability.Liability[testMonth] ?? 0).toBe(-1500); }); // Acceptance Criterion 6: Changes made in DataEntry are immediately available for other features (e.g., Overview, Plot) to consume. it('should notify subscribers when data changes are saved', async () => { const mockSubscriber = vi.fn(); mockDataManager.subscribe(mockSubscriber); // Use mockDataManager const testMonth = '2024-03'; setDataEntryMonth(testMonth); // Set some data getInputField('BankAccount').value = '3000'; getInputField('InvestmentAccount').value = '7000'; getInputField('Liability').value = '500'; // Perform a save operation saveButton.click(); // Expect the subscriber to have been called expect(mockSubscriber).toHaveBeenCalledTimes(1); // Verify the argument passed to the subscriber contains the updated data const calledWithData: AllAccountData = mockSubscriber.mock.calls[0][0]; expect(calledWithData.BankAccount[testMonth] ?? 0).toBe(3000); expect(calledWithData.InvestmentAccount[testMonth] ?? 0).toBe(7000); expect(calledWithData.Liability[testMonth] ?? 0).toBe(500); // Perform another save (edit) getInputField('BankAccount').value = '3500'; saveButton.click(); expect(mockSubscriber).toHaveBeenCalledTimes(2); // Should be called again const secondCallData: AllAccountData = mockSubscriber.mock.calls[1][0]; expect(secondCallData.BankAccount[testMonth] ?? 0).toBe(3500); }); });

Updates