test: csv import e2e tests

packages/desktop-client/e2e/accounts.test.js

@@ -1,3 +1,5 @@
+import { join } from 'path';
+
 import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
@@ -99,4 +101,44 @@ test.describe('Accounts', () => {
       await expect(transaction.account).toHaveText('Ally Savings');
     });
   });
+
+  test.describe('Import Transactions', () => {
+    test.beforeEach(async () => {
+      accountPage = await navigation.createAccount({
+        name: 'CSV import',
+        offBudget: false,
+        balance: 0,
+      });
+    });
+
+    test.afterEach(async () => {
+      const close = await accountPage.clickCloseAccount();
+      await close.selectTransferAccount('Vanguard 401k');
+      await close.forceCloseAccount();
+    });
+
+    async function importCsv(screenshot = false) {
+      const fileChooserPromise = page.waitForEvent('filechooser');
+      await accountPage.page.getByRole('button', { name: 'Import' }).click();
+
+      const fileChooser = await fileChooserPromise;
+      await fileChooser.setFiles(join(__dirname, 'data/test.csv'));
+
+      if (screenshot) await expect(page).toMatchThemeScreenshots();
+
+      await accountPage.page
+        .getByRole('button', { name: /Import \d+ transactions/ })
+        .click();
+    }
+
+    test('imports transactions from a CSV file', async () => {
+      await importCsv(true);
+    });
+
+    test('import csv file twice', async () => {
+      await importCsv(false);
+      await page.waitForTimeout(1000);
+      await importCsv(true);
+    });
+  });
 });

packages/desktop-client/e2e/data/test.csv

@@ -0,0 +1,9 @@
+Date,Payee,Notes,Category,Amount
+2024-08-02,Deposit,test 1,Income,1787.76
+2024-07-02,Deposit,test 2,Income,1787.76
+2024-06-02,Deposit,test 3,Income,1787.76
+2024-05-02,Deposit,test 4,Income,1787.76
+2024-04-02,Deposit,test 5,Income,1787.76
+2024-03-02,Deposit,test 6,Income,1787.76
+2024-02-02,Deposit,test 7,Income,1787.76
+2024-01-02,Starting Balance,test 8,Starting Balances,-330000

packages/desktop-client/e2e/page-models/close-account-modal.js

@@ -12,4 +12,8 @@ export class CloseAccountModal {
   async closeAccount() {
     await this.page.getByRole('button', { name: 'Close account' }).click();
   }
+
+  async forceCloseAccount() {
+    await this.page.getByLabel('Force close').click();
+  }
 }

packages/desktop-client/src/components/modals/CloseAccountModal.tsx

@@ -230,6 +230,7 @@ export function CloseAccountModal({
                         close();
                       }}
                       style={{ color: theme.errorText }}
+                      aria-label="Force close"
                     >
                       force close
                     </Link>{' '}

packages/desktop-client/src/components/modals/ImportTransactionsModal.jsx

@@ -741,45 +741,41 @@ function FieldMappings({
         spacing={1}
         style={{ marginTop: 5 }}
       >
-        <View style={{ flex: 1 }}>
+        <View style={{ flex: 1, marginRight: 10 }}>
           <SubLabel title="Date" />
           <SelectField
             options={options}
             value={mappings.date}
-            style={{ marginRight: 5 }}
             onChange={name => onChange('date', name)}
             hasHeaderRow={hasHeaderRow}
             firstTransaction={transactions[0]}
           />
         </View>
-        <View style={{ flex: 1 }}>
+        <View style={{ flex: 1, marginRight: 10 }}>
           <SubLabel title="Payee" />
           <SelectField
             options={options}
             value={mappings.payee}
-            style={{ marginRight: 5 }}
             onChange={name => onChange('payee', name)}
             hasHeaderRow={hasHeaderRow}
             firstTransaction={transactions[0]}
           />
         </View>
-        <View style={{ flex: 1 }}>
+        <View style={{ flex: 1, marginRight: 10 }}>
           <SubLabel title="Notes" />
           <SelectField
             options={options}
             value={mappings.notes}
-            style={{ marginRight: 5 }}
             onChange={name => onChange('notes', name)}
             hasHeaderRow={hasHeaderRow}
             firstTransaction={transactions[0]}
           />
         </View>
-        <View style={{ flex: 1 }}>
+        <View style={{ flex: 1, marginRight: 10 }}>
           <SubLabel title="Category" />
           <SelectField
             options={options}
             value={mappings.category}
-            style={{ marginRight: 5 }}
             onChange={name => onChange('category', name)}
             hasHeaderRow={hasHeaderRow}
             firstTransaction={transactions[0]}

upcoming-release-notes/3499.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [UnderKoen]
+---
+
+E2E tests for CSV import dialog