🐛 fix filtering in transaction table (#1622)

.github/workflows/e2e-test.yml

@@ -10,11 +10,11 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  functional:
+  netlify:
-    name: Functional
+    name: Wait for Netlify build to finish
     runs-on: ubuntu-latest
-    container:
+    outputs:
-      image: mcr.microsoft.com/playwright:v1.37.0-jammy
+      netlify_url: ${{ steps.netlify.outputs.url }}
     steps:
       - uses: actions/checkout@v3
       - name: Set up environment
@@ -25,10 +25,21 @@ jobs:
           COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: ./.github/actions/netlify-wait-for-build
+
+  functional:
+    name: Functional
+    needs: netlify
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.37.0-jammy
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up environment
+        uses: ./.github/actions/setup
       - name: Run E2E Tests on Netlify URL
         run: yarn e2e
         env:
-          E2E_START_URL: ${{ steps.netlify.outputs.url }}
+          E2E_START_URL: ${{ needs.netlify.outputs.netlify_url }}
       - uses: actions/upload-artifact@v3
         if: always()
         with:
@@ -37,6 +48,7 @@ jobs:
           retention-days: 30
   vrt:
     name: Visual regression
+    needs: netlify
     runs-on: ubuntu-latest
     container:
       image: mcr.microsoft.com/playwright:v1.37.0-jammy
@@ -44,16 +56,10 @@ jobs:
       - uses: actions/checkout@v3
       - name: Set up environment
         uses: ./.github/actions/setup
-      - name: Wait for Netlify build to finish
-        id: netlify
-        env:
-          COMMIT_SHA: ${{ github.event.pull_request.head.sha }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: ./.github/actions/netlify-wait-for-build
       - name: Run VRT Tests on Netlify URL
         run: yarn vrt
         env:
-          E2E_START_URL: ${{ steps.netlify.outputs.url }}
+          E2E_START_URL: ${{ needs.netlify.outputs.netlify_url }}
       - uses: actions/upload-artifact@v3
         if: always()
         with:

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

@@ -54,6 +54,37 @@ test.describe('Transactions', () => {
       await expect(accountPage.transactionTable).toHaveText('No transactions');
       await expect(page).toHaveScreenshot(screenshotConfig(page));
     });
+
+    test('by category', async () => {
+      const filterTooltip = await accountPage.filterBy('Category');
+      await expect(filterTooltip.page).toHaveScreenshot(screenshotConfig(page));
+
+      // Type in the autocomplete box
+      const autocomplete = page.getByTestId('autocomplete');
+      await expect(autocomplete).toHaveScreenshot(screenshotConfig(page));
+
+      // Select the active item
+      await page.getByRole('button', { name: 'Clothing' }).click();
+      await filterTooltip.applyButton.click();
+
+      // Assert that there are only clothing transactions
+      await expect(accountPage.getNthTransaction(0).category).toHaveText(
+        'Clothing',
+      );
+      await expect(accountPage.getNthTransaction(1).category).toHaveText(
+        'Clothing',
+      );
+      await expect(accountPage.getNthTransaction(2).category).toHaveText(
+        'Clothing',
+      );
+      await expect(accountPage.getNthTransaction(3).category).toHaveText(
+        'Clothing',
+      );
+      await expect(accountPage.getNthTransaction(4).category).toHaveText(
+        'Clothing',
+      );
+      await expect(page).toHaveScreenshot(screenshotConfig(page));
+    });
   });
 
   test('creates a test transaction', async () => {

packages/desktop-client/src/components/tooltips.js

@@ -43,11 +43,7 @@ export class Tooltip extends Component {
         // Allow clicking reach popover that mount outside of
         // tooltips. Might need to think about this more, like what
         // kind of things can be click that shouldn't close a tooltip?
-        if (
+        if (node.dataset.istooltip || node.dataset.reachPopover != null) {
-          node.dataset.testid === 'tooltip' ||
-          node.dataset.testid === this.props['data-testid'] ||
-          node.dataset.reachPopover != null
-        ) {
           break;
         }
 
@@ -320,6 +316,7 @@ export class Tooltip extends Component {
             {...css(contentStyle, style, styles.darkScrollbar)}
             ref={this.contentRef}
             data-testid={this.props['data-testid'] || 'tooltip'}
+            data-istooltip
             onClick={e => {
               // Click events inside a tooltip (e.g. when selecting a menu item) will bubble up
               // through the portal to parents in the React tree (as opposed to DOM parents).

upcoming-release-notes/1622.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Fix filtering in transaction table not working