test: fix mask and some tests

LedgerHQ · Jul 5, 2024 · f7cdbdc · f7cdbdc
1 parent 1843b41
commit f7cdbdc
Show file tree

Hide file tree

Showing 14 changed files with 45 additions and 26 deletions.
diff --git a/apps/ledger-live-desktop/src/renderer/components/Platform/AppCard.tsx b/apps/ledger-live-desktop/src/renderer/components/Platform/AppCard.tsx
@@ -14,7 +14,7 @@ const Container = styled(Tabbable).attrs<{
   flexDirection: "column",
   alignItems: "center",
   fontSize: 4,
-})<{ id?: string }>`
+})`
   min-height: 180px;
   padding: 24px;
   border-radius: 4px;
@@ -61,7 +61,7 @@ export function AppCard({ manifest, onClick, id }: Props) {
   }, [onClick, isDisabled]);
 
   return (
-    <Container id={id} onClick={handleClick} disabled={isDisabled}>
+    <Container data-test-id={id} onClick={handleClick} disabled={isDisabled}>
       <AppDetails manifest={manifest} />
     </Container>
   );

diff --git a/...e-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/Container.tsx b/...e-desktop/src/renderer/screens/dashboard/MarketPerformanceWidget/components/Container.tsx
@@ -35,6 +35,7 @@ export function MarketPerformanceWidgetContainer({
       }}
       py={"23px"}
       grow
+      data-test-id="market-performance-widget"
     >
       <MarketPerformanceWidgetHeader order={order} onChangeOrder={setOrder} />
 

diff --git a/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/Card/Full.tsx b/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/Card/Full.tsx
@@ -37,7 +37,13 @@ export function FullCard(props: PropsCard<LiveAppManifest>) {
   );
 
   return (
-    <Container highlighted={highlighted} disabled={disabled} onClick={onClick} flex={1}>
+    <Container
+      data-test-id={`platform-catalog-app-${manifest.id}`}
+      highlighted={highlighted}
+      disabled={disabled}
+      onClick={onClick}
+      flex={1}
+    >
       <Flex alignItems="center">
         <Logo icon={manifest.icon} name={manifest.name} size="medium" disabled={disabled} />
 

diff --git a/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/Card/Logo.tsx b/apps/ledger-live-desktop/src/renderer/screens/platform/v2/Catalog/Card/Logo.tsx
@@ -34,6 +34,7 @@ export function Logo({
       alignItems="center"
       justifyContent="center"
       backgroundColor={isLoaded ? "transparent" : "neutral.c50"}
+      data-test-id="live-icon-container"
     >
       {!isLoaded && <Text>{name[0].toUpperCase()}</Text>}
 

diff --git a/apps/ledger-live-desktop/tests/component/layout.component.ts b/apps/ledger-live-desktop/tests/component/layout.component.ts
@@ -40,6 +40,8 @@ export class Layout extends Component {
   readonly appUpdateBanner = this.page.getByTestId("layout-app-update-banner");
   // }
 
+  readonly marketPerformanceWidget = this.page.getByTestId("market-performance-widget");
+
   @step("Go to Portfolio")
   async goToPortfolio() {
     await this.drawerPortfolioButton.click();

diff --git a/apps/ledger-live-desktop/tests/page/discover.page.ts b/apps/ledger-live-desktop/tests/page/discover.page.ts
@@ -1,7 +1,7 @@
 import { AppPage } from "tests/page/abstractClasses";
 
 export class DiscoverPage extends AppPage {
-  private testAppCatalogItem = this.page.locator("#platform-catalog-app-dummy-live-app");
+  private testAppCatalogItem = this.page.getByTestId("platform-catalog-app-dummy-live-app");
   private disclaimerTitle = this.page.getByTestId("live-app-disclaimer-drawer-title");
 
   async openTestApp() {

diff --git a/apps/ledger-live-desktop/tests/specs/deeplinks/discover.cold.spec.ts b/apps/ledger-live-desktop/tests/specs/deeplinks/discover.cold.spec.ts
@@ -10,6 +10,8 @@ test.use({
 
 test("Discover deeplink cold start @smoke", async ({ page }) => {
   await test.step("on load", async () => {
-    await expect.soft(page).toHaveScreenshot("loaded.png");
+    await expect.soft(page).toHaveScreenshot("loaded.png", {
+      mask: [page.locator("data-test-id=live-icon-container")],
+    });
   });
 });
diff --git a/apps/ledger-live-desktop/tests/specs/deeplinks/discover.spec.ts b/apps/ledger-live-desktop/tests/specs/deeplinks/discover.spec.ts
@@ -9,6 +9,8 @@ test.use({
 test("Discover deeplink hot load @smoke", async ({ page }) => {
   await test.step("on deeplink trigger", async () => {
     await sendDeepLink(page, "ledgerlive://discover");
-    await expect.soft(page).toHaveScreenshot("loaded.png");
+    await expect.soft(page).toHaveScreenshot("loaded.png", {
+      mask: [page.locator("data-test-id=live-icon-container")],
+    });
   });
 });
diff --git a/apps/ledger-live-desktop/tests/specs/general/layout.spec.ts b/apps/ledger-live-desktop/tests/specs/general/layout.spec.ts
@@ -66,16 +66,16 @@ test("Layout @smoke", async ({ page }) => {
   await test.step("can toggle discreet mode", async () => {
     await layout.goToPortfolio(); // FIXME: remove this line when LL-8899 is fixed
     await layout.toggleDiscreetMode();
-    await expect
-      .soft(page)
-      .toHaveScreenshot("discreet-mode.png", { mask: [page.locator("canvas")] });
+    await expect.soft(page).toHaveScreenshot("discreet-mode.png", {
+      mask: [page.locator("canvas"), layout.marketPerformanceWidget],
+    });
   });
 
   await test.step("can collapse the main sidebar", async () => {
     await layout.drawerCollapseButton.click();
-    await expect
-      .soft(page)
-      .toHaveScreenshot("collapse-sidebar.png", { mask: [page.locator("canvas")] });
+    await expect.soft(page).toHaveScreenshot("collapse-sidebar.png", {
+      mask: [page.locator("canvas"), layout.marketPerformanceWidget],
+    });
   });
 
   await test.step("can display the help modal", async () => {

diff --git a/apps/ledger-live-desktop/tests/specs/general/portfolio.spec.ts b/apps/ledger-live-desktop/tests/specs/general/portfolio.spec.ts
@@ -11,7 +11,9 @@ test("Portfolio @smoke", async ({ page }) => {
 
   await test.step("load portfolio", async () => {
     await layout.totalBalance.waitFor({ state: "visible" });
-    await expect.soft(page).toHaveScreenshot("portfolio.png");
+    await expect.soft(page).toHaveScreenshot("portfolio.png", {
+      mask: [layout.marketPerformanceWidget],
+    });
   });
 
   await test.step(`scroll to operations`, async () => {

diff --git a/apps/ledger-live-desktop/tests/specs/general/updater.spec.ts b/apps/ledger-live-desktop/tests/specs/general/updater.spec.ts
@@ -14,16 +14,16 @@ test("Updater", async ({ page }) => {
 
   await test.step("[idle] state should not be visible", async () => {
     await expect(layout.appUpdateBanner).toBeHidden();
-    await expect
-      .soft(page)
-      .toHaveScreenshot("app-updater-idle.png", { mask: [page.locator("canvas")] });
+    await expect.soft(page).toHaveScreenshot("app-updater-idle.png", {
+      mask: [page.locator("canvas"), layout.marketPerformanceWidget],
+    });
   });
 
   await test.step("[checking] state should be visible", async () => {
     await appUpdater.setStatus("checking");
-    await expect
-      .soft(page)
-      .toHaveScreenshot("app-updater-layout.png", { mask: [page.locator("canvas")] });
+    await expect.soft(page).toHaveScreenshot("app-updater-layout.png", {
+      mask: [page.locator("canvas"), layout.marketPerformanceWidget],
+    });
   });
 
   await test.step("[check-success] state should be visible", async () => {
@@ -43,16 +43,16 @@ test("Updater", async ({ page }) => {
 
   await test.step("[error] state should be visible", async () => {
     await appUpdater.setStatus("error");
-    await expect
-      .soft(page)
-      .toHaveScreenshot("app-updater-error-with-carousel.png", { mask: [page.locator("canvas")] });
+    await expect.soft(page).toHaveScreenshot("app-updater-error-with-carousel.png", {
+      mask: [page.locator("canvas"), layout.marketPerformanceWidget],
+    });
   });
 
   await test.step("[error] state (any) should be visible, without the carousel", async () => {
     await layout.goToPortfolio();
     await layout.appUpdateBanner.isVisible();
     await expect.soft(page).toHaveScreenshot("app-updater-error-without-carousel.png", {
-      mask: [page.locator("canvas")],
+      mask: [page.locator("canvas"), layout.marketPerformanceWidget],
     });
   });
 });
diff --git a/apps/ledger-live-desktop/tests/specs/manager/customImageNftGallery.spec.ts b/apps/ledger-live-desktop/tests/specs/manager/customImageNftGallery.spec.ts
@@ -9,6 +9,7 @@ import padStart from "lodash/padStart";
 
 test.use({
   userdata: "2_accounts_eth_with_tokens_and_nft",
+  featureFlags: { nftsFromSimplehash: { enabled: false } },
 });
 
 test("Custom image (with populated NFT gallery)", async ({ page }) => {

diff --git a/apps/ledger-live-desktop/tests/specs/postOnboarding/post-onboarding.spec.ts b/apps/ledger-live-desktop/tests/specs/postOnboarding/post-onboarding.spec.ts
@@ -56,7 +56,7 @@ test("PostOnboarding state logic", async ({ page }) => {
     await expect(page).toHaveScreenshot(
       `${generateScreenshotPrefix()}postonboarding-banner-in-dashboard.png`,
       {
-        mask: [page.locator("canvas")],
+        mask: [page.locator("canvas"), layout.marketPerformanceWidget],
       },
     );
   });
@@ -93,7 +93,7 @@ test("PostOnboarding state logic", async ({ page }) => {
     await expect(page).toHaveScreenshot(
       `${generateScreenshotPrefix()}postonboarding-done-no-banner-in-dashboard.png`,
       {
-        mask: [page.locator("canvas")],
+        mask: [page.locator("canvas"), layout.marketPerformanceWidget],
       },
     );
   });

diff --git a/apps/ledger-live-desktop/tests/specs/services/ethereumStaking.spec.ts b/apps/ledger-live-desktop/tests/specs/services/ethereumStaking.spec.ts
@@ -80,7 +80,9 @@ test("Ethereum staking flows via portfolio, asset page and market page @smoke",
   const analytics = new Analytics(page);
 
   await test.step("Entry buttons load with feature flag enabled", async () => {
-    await expect.soft(page).toHaveScreenshot("portfolio-entry-buttons.png");
+    await expect.soft(page).toHaveScreenshot("portfolio-entry-buttons.png", {
+      mask: [layout.marketPerformanceWidget],
+    });
   });
 
   await test.step("start stake flow via Stake entry button", async () => {