(tests) adding custom report e2e tests (#3493)

packages/desktop-client/e2e/page-models/custom-report-page.js

+export class CustomReportPage {
+  constructor(page) {
+    this.page = page;
+    this.pageContent = page.getByTestId('reports-page');
+
+    this.showLegendButton = this.pageContent.getByRole('button', {
+      name: 'Show Legend',
+    });
+    this.showSummaryButton = this.pageContent.getByRole('button', {
+      name: 'Show Summary',
+    });
+    this.showLabelsButton = this.pageContent.getByRole('button', {
+      name: 'Show Labels',
+    });
+  }
+
+  async selectViz(vizName) {
+    await this.pageContent.getByRole('button', { name: vizName }).click();
+  }
+
+  async selectMode(mode) {
+    switch (mode) {
+      case 'total':
+        await this.pageContent.getByRole('button', { name: 'Total' }).click();
+        break;
+      case 'time':
+        await this.pageContent.getByRole('button', { name: 'Time' }).click();
+        break;
+      default:
+        throw new Error(`Unrecognized mode: ${mode}`);
+    }
+  }
+}

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

+import { CustomReportPage } from './custom-report-page';
+
 export class ReportsPage {
   constructor(page) {
     this.page = page;
@@ -18,6 +20,13 @@ export class ReportsPage {
     return new ReportsPage(this.page);
   }
 
+  async goToCustomReportPage() {
+    await this.pageContent
+      .getByRole('button', { name: 'Create new custom report' })
+      .click();
+    return new CustomReportPage(this.page);
+  }
+
   async getAvailableReportList() {
     return this.pageContent
       .getByRole('button')

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

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test';
 import { ConfigurationPage } from './page-models/configuration-page';
 import { Navigation } from './page-models/navigation';
 
-test.describe('Reports', () => {
+test.describe.parallel('Reports', () => {
   let page;
   let navigation;
   let reportsPage;
@@ -43,4 +43,66 @@ test.describe('Reports', () => {
     await reportsPage.goToCashFlowPage();
     await expect(page).toMatchThemeScreenshots();
   });
+
+  test.describe.parallel('custom reports', () => {
+    let customReportPage;
+
+    test.beforeEach(async () => {
+      customReportPage = await reportsPage.goToCustomReportPage();
+    });
+
+    test('Switches to Data Table and checks the visuals', async () => {
+      await customReportPage.selectMode('time');
+      await customReportPage.selectViz('Data Table');
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    test('Switches to Bar Graph and checks the visuals', async () => {
+      await customReportPage.selectMode('time');
+      await customReportPage.selectViz('Bar Graph');
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    test('Switches to Line Graph and checks the visuals', async () => {
+      await customReportPage.selectMode('time');
+      await customReportPage.selectViz('Line Graph');
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    test('Switches to Area Graph and checks the visuals', async () => {
+      await customReportPage.selectMode('total');
+      await customReportPage.selectViz('Area Graph');
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    test('Switches to Donut Graph and checks the visuals', async () => {
+      await customReportPage.selectMode('total');
+      await customReportPage.selectViz('Donut Graph');
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    test('Validates that "show legend" button shows the legend side-bar', async () => {
+      await customReportPage.selectViz('Bar Graph');
+      await customReportPage.showLegendButton.click();
+      await expect(page).toMatchThemeScreenshots();
+
+      await customReportPage.showLegendButton.click();
+    });
+
+    test('Validates that "show summary" button shows the summary', async () => {
+      await customReportPage.selectViz('Bar Graph');
+      await customReportPage.showSummaryButton.click();
+      await expect(page).toMatchThemeScreenshots();
+
+      await customReportPage.showSummaryButton.click();
+    });
+
+    test('Validates that "show labels" button shows the labels', async () => {
+      await customReportPage.selectViz('Bar Graph');
+      await customReportPage.showLabelsButton.click();
+      await expect(page).toMatchThemeScreenshots();
+
+      await customReportPage.showLabelsButton.click();
+    });
+  });
 });