Fix navigating to the per-category per-month page (#1182)

I checked through the other references to `navigate` and none of them
appeared to be affected.

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

@@ -50,4 +50,14 @@ test.describe('Budget', () => {
       balance: expect.any(Number),
     });
   });
+
+  test('clicking on spent amounts opens a transaction page', async () => {
+    let categoryName = await budgetPage.getCategoryNameForRow(1);
+    let accountPage = await budgetPage.clickOnSpentAmountForRow(1);
+    expect(page.url()).toContain('/accounts');
+    expect(await accountPage.accountName.textContent()).toMatch(
+      new RegExp(String.raw`${categoryName} \(\w+ \d+\)`),
+    );
+    await page.getByRole('button', { name: 'Back' }).click();
+  });
 });

packages/desktop-client/e2e/page-models/budget-page.js

+import { AccountPage } from './account-page';
+
 export class BudgetPage {
   constructor(page) {
     this.page = page;
@@ -46,12 +48,25 @@ export class BudgetPage {
     );
   }
 
-  async transferAllBalance(fromIdx, toIdx) {
-    const toName = await this.budgetTable
+  async getCategoryNameForRow(idx) {
+    return this.budgetTable
       .getByTestId('row')
-      .nth(toIdx)
+      .nth(idx)
       .getByTestId('category-name')
       .textContent();
+  }
+
+  async clickOnSpentAmountForRow(idx) {
+    await this.budgetTable
+      .getByTestId('row')
+      .nth(idx)
+      .getByTestId('category-month-spent')
+      .click();
+    return new AccountPage(this.page);
+  }
+
+  async transferAllBalance(fromIdx, toIdx) {
+    const toName = await this.getCategoryNameForRow(toIdx);
 
     await this.budgetTable
       .getByTestId('row')

packages/desktop-client/src/components/budget/index.js

@@ -332,8 +332,7 @@ class Budget extends PureComponent {
   };
 
   onShowActivity = (categoryName, categoryId, month) => {
-    this.props.navigate({
-      pathname: '/accounts',
+    this.props.navigate('/accounts', {
       state: {
         goBack: true,
         filterName: `${categoryName} (${monthUtils.format(

packages/desktop-client/src/components/budget/report/components.tsx

@@ -246,6 +246,7 @@ export const CategoryMonth = memo(function CategoryMonth({
         style={{ textAlign: 'right' }}
       >
         <span
+          data-testid="category-month-spent"
           onClick={() => onShowActivity(category.name, category.id, monthIndex)}
         >
           <CellValue

packages/desktop-client/src/components/budget/rollover/rollover-components.tsx

@@ -371,6 +371,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
         style={{ textAlign: 'right' }}
       >
         <span
+          data-testid="category-month-spent"
           onClick={() => onShowActivity(category.name, category.id, monthIndex)}
         >
           <CellValue

upcoming-release-notes/1182.md

+---
+category: Bugfix
+authors: [j-f1]
+---
+
+Fix navigating to the per-category per-month page