diff --git a/packages/desktop-client/e2e/transactions.test.ts b/packages/desktop-client/e2e/transactions.test.ts index 1fa812511b..00653a231f 100644 --- a/packages/desktop-client/e2e/transactions.test.ts +++ b/packages/desktop-client/e2e/transactions.test.ts @@ -84,6 +84,78 @@ test.describe('Transactions', () => { ); await expect(page).toMatchThemeScreenshots(); }); + + test('by payee', async () => { + accountPage = await navigation.goToAccountPage('Capital One Checking'); + const filterTooltip = await accountPage.filterBy('Payee'); + const filtersMenuTooltip = page.getByTestId('filters-menu-tooltip'); + await expect(filterTooltip.locator).toMatchThemeScreenshots(); + + // Type in the autocomplete box + const autocomplete = filtersMenuTooltip.getByLabel('Payee'); + await expect(autocomplete).toMatchThemeScreenshots(); + + // Open the textbox, auto-open is currently broken for anything that's not "is not" + await autocomplete.click(); + + await page.getByTestId('Kroger-payee-item').click(); + await filterTooltip.applyButton.click(); + + // Assert that all Payees are Kroger + for (let i = 0; i < 10; i++) { + await expect(accountPage.getNthTransaction(i).payee).toHaveText( + 'Kroger', + ); + } + await accountPage.removeFilter(0); + + await accountPage.filterBy('Payee'); + await filtersMenuTooltip + .getByRole('button', { name: 'contains' }) + .click(); + const textInput = filtersMenuTooltip.getByPlaceholder('nothing'); + + await textInput.fill('De'); + await filterTooltip.applyButton.click(); + // Assert that all Payees are Deposit + for (let i = 0; i < 9; i++) { + await expect(accountPage.getNthTransaction(i).payee).toHaveText( + 'Deposit', + ); + } + + await accountPage.removeFilter(0); + + await accountPage.filterBy('Payee'); + await filtersMenuTooltip + .getByRole('button', { name: 'contains' }) + .click(); + + await textInput.fill('l'); + await filterTooltip.applyButton.click(); + // Assert that both Payees contain the letter 'l' + for (let i = 0; i < 2; i++) { + await expect(accountPage.getNthTransaction(i).payee).toHaveText(/l/); + } + + await accountPage.removeFilter(0); + + await accountPage.filterBy('Payee'); + await filtersMenuTooltip + .getByRole('button', { name: 'does not contain' }) + .click(); + + await textInput.fill('l'); + await filterTooltip.applyButton.click(); + // Assert that all Payees DO NOT contain the letter 'l' + for (let i = 0; i < 19; i++) { + await expect(accountPage.getNthTransaction(i).payee).not.toHaveText( + /l/, + ); + } + + await expect(page).toMatchThemeScreenshots(); + }); }); test('creates a test transaction', async () => { diff --git a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-1-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-1-chromium-linux.png new file mode 100644 index 0000000000..d44a37edcb Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-2-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-2-chromium-linux.png new file mode 100644 index 0000000000..dafbb41437 Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-3-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-3-chromium-linux.png new file mode 100644 index 0000000000..0be48f1eb0 Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-3-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-4-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-4-chromium-linux.png new file mode 100644 index 0000000000..56afbdef4f Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-4-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-5-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-5-chromium-linux.png new file mode 100644 index 0000000000..ca571fd405 Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-5-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-6-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-6-chromium-linux.png new file mode 100644 index 0000000000..d3632604c4 Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-6-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-7-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-7-chromium-linux.png new file mode 100644 index 0000000000..dfcc7b6245 Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-7-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-8-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-8-chromium-linux.png new file mode 100644 index 0000000000..a68af04602 Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-8-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-9-chromium-linux.png b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-9-chromium-linux.png new file mode 100644 index 0000000000..2d0ca3dc8b Binary files /dev/null and b/packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-payee-9-chromium-linux.png differ diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.tsx b/packages/desktop-client/src/components/filters/FiltersMenu.tsx index 5bffa43126..32e3df9fac 100644 --- a/packages/desktop-client/src/components/filters/FiltersMenu.tsx +++ b/packages/desktop-client/src/components/filters/FiltersMenu.tsx @@ -126,6 +126,10 @@ function ConfigureField({ return value; }, [value, field, subfield, dateFormat]); + // For ops that filter based on payeeId, those use PayeeFilter, otherwise we use GenericInput + const isPayeeIdOp = (op: T['op']) => + ['is', 'is not', 'one of', 'not one of'].includes(op); + return ( @@ -260,7 +264,7 @@ function ConfigureField({ }); }} > - {type !== 'boolean' && field !== 'payee' && ( + {type !== 'boolean' && (field !== 'payee' || !isPayeeIdOp(op)) && ( ({ /> )} - {field === 'payee' && ( + {field === 'payee' && isPayeeIdOp(op) && (