test(portfolio): add e2e tests and screenshots for Portfolio page (#6354

)

# Motivation

The new Portfolio page is now the entry point for the nns-dapp. We aim
to maintain UI consistency during development and prevent any visual
bugs on this page. Therefore, we are taking screenshots for the major
viewports and the following scenarios:
-  Landing as an anonymous user  
-  Signed-in user with loaded assets 

It hides the proposals counter badge to prevent false negatives caused
by the parallelism of tests and the creation of dummy proposals by other
tests.

# Changes

- New e2e tests for the portfolio page.

# Tests

- New screenshots for the page

# Todos

- [ ] Add entry to changelog (if necessary).
Not necessary

frontend/src/tests/e2e/portfolio.spec.ts

@@ -0,0 +1,63 @@
+import { AppPo } from "$tests/page-objects/App.page-object";
+import { PlaywrightPageObjectElement } from "$tests/page-objects/playwright.page-object";
+import { signInWithNewUser, step } from "$tests/utils/e2e.test-utils";
+import { expect, test } from "@playwright/test";
+
+const VIEWPORT_SIZES = {
+  desktop: { width: 1440, height: 900 },
+  mobile: { width: 375, height: 667 },
+} as const;
+
+test("Visual test Landing Page", async ({ page, browser }) => {
+  const pageElement = PlaywrightPageObjectElement.fromPage(page);
+  const appPo = new AppPo(pageElement);
+  const portfolioPo = appPo.getPortfolioPo();
+
+  await page.goto("/");
+  await portfolioPo.getPortfolioPagePo().getLoginCard().waitFor();
+  await expect(page).toHaveTitle("Portfolio / NNS Dapp");
+
+  await page.setViewportSize(VIEWPORT_SIZES.desktop);
+  await expect(page).toHaveScreenshot(`initial_desktop.png`);
+
+  await page.setViewportSize(VIEWPORT_SIZES.mobile);
+  await expect(page).toHaveScreenshot(`initial_mobile.png`);
+
+  step("New user is signed in");
+  await signInWithNewUser({ page, context: browser.contexts()[0] });
+
+  step("Get some ICP and BTC");
+  await page.goto("/tokens");
+  await appPo.getIcpTokens(41);
+  const ckBTCRow = await appPo
+    .getTokensPo()
+    .getTokensPagePo()
+    .getTokensTable()
+    .getRowByName("ckBTC");
+  await ckBTCRow.waitForBalance();
+  await appPo.getBtc(1);
+  await ckBTCRow.click();
+  await appPo.getWalletPo().getCkBTCWalletPo().clickRefreshBalance();
+  await appPo.waitForNotBusy();
+
+  step("Stake neuron (for voting)");
+  await appPo.goToStaking();
+  const stake = 15;
+  await appPo
+    .getStakingPo()
+    .stakeFirstNnsNeuron({ amount: stake, dissolveDelayDays: "max" });
+  await appPo.getNeuronsPo().waitFor();
+
+  step("Total Assets");
+  await page.goto("/");
+
+  await portfolioPo.getPortfolioPagePo().getHeldTokensCardPo().waitFor();
+  await portfolioPo.getPortfolioPagePo().getStakedTokensCardPo().waitFor();
+
+  await page.setViewportSize(VIEWPORT_SIZES.desktop);
+  await appPo.toggleSidebar();
+  await expect(page).toHaveScreenshot(`final_assets_desktop.png`);
+
+  await page.setViewportSize(VIEWPORT_SIZES.mobile);
+  await expect(page).toHaveScreenshot(`final_assets_mobile.png`);
+});

frontend/src/tests/page-objects/App.page-object.ts

@@ -285,4 +285,8 @@ export class AppPo extends BasePageObject {
       await this.getSelectUniverseListPo().getSnsUniverseCards();
     expect(snsUniverseCards.length).toBeGreaterThanOrEqual(1);
   }
+
+  async toggleSidebar(): Promise<void> {
+    await this.getButton("menu-collapse").click();
+  }
 }